@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root{ --bg:#14181D; --surface:#1B2128; --surface-2:#20272F; --border:#2C343E; --text:#E7EAEE; --text-muted:#8A94A3; --amber:#E8A33D; --teal:#4FB0A5; --danger:#D9615B; --font-display:'Barlow Condensed',sans-serif; --font-body:'IBM Plex Sans',sans-serif; --font-mono:'IBM Plex Mono',monospace; } /* Modo claro: se activa poniendo data-theme="light" en (ver el script anti-parpadeo en el de cada página + el toggle del menú en assets/app.js|informe.js|admin.js). Todo el resto de style.css usa estas variables (nunca colores fijos para fondos), así que con solo redefinirlas acá el tema claro se aplica solo, sin tocar cada regla. */ :root[data-theme="light"]{ --bg:#F2F3F5; --surface:#FFFFFF; --surface-2:#EAECEF; --border:#D6DAE0; --text:#1A2027; --text-muted:#5C6672; --amber:#B8730A; --teal:#2E8880; --danger:#C23A34; } *{box-sizing:border-box;} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font-body);} a{color:var(--amber);} .wrap{max-width:880px;margin:0 auto;padding:16px;padding-bottom:64px;} .eyebrow{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;font-size:11px;color:var(--text-muted);} .display{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em;font-weight:600;} /* Título de cada página (Registro de Actividades / Informe Mensual / Administración) + logo de Mundo GO. En celular angosto, a 28px el título por sí solo ya ocupa casi todo el ancho, empujando el nombre del usuario y el botón de menú (☰) a una segunda línea y corriendo todo el diseño hacia abajo. Más chico en celular deja espacio para que quede todo en una sola fila. */ .page-title{font-size:28px;line-height:1;margin:0;} .page-title-logo{height:24px;width:auto;flex-shrink:0;} @media(max-width:479px){ .page-title{font-size:16px;} .page-title-logo{height:14px;} } .mono{font-family:var(--font-mono);} .card{background:var(--surface);border:1px solid var(--border);border-radius:4px;} input,select,textarea{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:3px;padding:8px 10px;font-family:var(--font-body);font-size:14px;width:100%;} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amber);} button{cursor:pointer;} .btn{background:var(--amber);color:#1A1408;font-weight:600;border:none;border-radius:3px;padding:10px 16px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:14px;display:inline-flex;align-items:center;gap:6px;} .btn:hover{background:#F0B155;} .btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border);border-radius:3px;padding:8px 12px;font-family:var(--font-body);font-size:13px;display:inline-flex;align-items:center;gap:6px;} .btn-ghost:hover{color:var(--text);border-color:var(--text-muted);} .btn-accent{background:transparent;color:var(--amber);border:1px solid var(--amber);border-radius:6px;font-family:var(--font-body);font-weight:600;font-size:14px;width:100%;min-height:44px;padding:10px 16px;display:flex;align-items:center;justify-content:center;gap:6px;transition:background-color .15s ease;} .btn-accent:hover{background:rgba(232,163,61,.10);} .btn-accent:active{background:rgba(232,163,61,.18);} .progress-track{background:var(--surface-2);border-radius:3px;height:8px;overflow:hidden;} .progress-fill{height:100%;background:var(--teal);transition:width .4s ease;} .pace-note{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);margin-top:6px;min-height:14px;} .progress-ring{flex-shrink:0;transform:rotate(-90deg);} .progress-ring-track{fill:none;stroke:var(--surface-2);stroke-width:6;} .progress-ring-fill{fill:none;stroke:var(--teal);stroke-width:6;stroke-linecap:round;stroke-dasharray:163.36;stroke-dashoffset:163.36;transition:stroke-dashoffset .5s ease;} .progress-ring-fill.amber{stroke:var(--amber);} .progress-ring-label{transform:rotate(90deg);transform-origin:30px 30px;fill:var(--text);font-family:var(--font-mono);font-size:12px;font-weight:600;} /* Desglose por tipo de actividad (informe.php): un hue (var(--amber), la identidad de marca), pista cuadrada, extremo del dato redondeado — el mark crece desde la base (izquierda) hacia el valor (derecha). */ .breakdown-row{margin-bottom:12px;} .breakdown-row:last-child{margin-bottom:0;} .breakdown-bar-track{background:var(--surface-2);height:8px;overflow:hidden;} .breakdown-bar-fill{height:100%;background:var(--amber);border-radius:0 4px 4px 0;min-width:8px;transition:width .4s ease;} .trend-badge{font-family:var(--font-mono);font-size:11px;letter-spacing:0;text-transform:none;padding:1px 6px;border-radius:2px;margin-left:4px;} .trend-badge.up{color:var(--teal);border:1px solid var(--teal);} .trend-badge.down{color:var(--danger);border:1px solid var(--danger);} /* Detalle al cumplir la meta del periodo: brillo suave, no una animación ruidosa que distraiga a alguien mirando el celular en terreno. */ @keyframes goalGlow{ 0%,100%{box-shadow:0 0 0 0 rgba(232,163,61,0);} 50%{box-shadow:0 0 16px 1px rgba(232,163,61,.35);} } .card.goal-met{border-color:var(--amber);animation:goalGlow 2.4s ease-in-out 1;} /* Al saltar a un día desde el buscador del informe: marca el título del día ("Miércoles, 11 de agosto") con un color distintivo por un momento, para que quede claro a cuál día saltó (antes hacía scroll pero se confundía con cualquier otro título gris igual). Se quita sola con JS una vez termina la animación (ver renderPeriodSearch en informe.js). */ @keyframes dayJumpHighlight{ 0%,100%{background:transparent;color:var(--text-muted);} 15%,85%{background:rgba(232,163,61,.20);color:var(--amber);} } #dayDetailLabel.search-jump-highlight{animation:dayJumpHighlight 2s ease-in-out 1;border-radius:3px;padding:4px 8px;margin:-4px -8px 8px -8px;} .ticket{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:12px 14px;padding-top:16px;} /* El registro puntual que coincidió con la búsqueda (ver highlightedEntryId en informe.js): a diferencia del brillo del título del día, esta marca NO se apaga sola — queda así hasta la próxima búsqueda, para poder revisar el resto de registros del día sin perder de vista cuál era el buscado (antes había que leerlos uno por uno para encontrarlo). */ .ticket.ticket-search-match{border-color:var(--amber);background:rgba(232,163,61,.08);box-shadow:0 0 0 1px var(--amber);} .ticket::before{content:"";position:absolute;top:-1px;left:12px;right:12px;height:1px;background-image:radial-gradient(circle,var(--bg) 2px,transparent 2.2px);background-size:10px 4px;background-position:top;} .row{display:flex;align-items:center;gap:8px;} .between{display:flex;align-items:center;justify-content:space-between;} .wrapgap{display:flex;flex-wrap:wrap;gap:8px;} .grid5{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;align-items:end;} @media(min-width:640px){.grid5{grid-template-columns:repeat(5,1fr);}} .grid2{display:grid;grid-template-columns:1fr;gap:12px;} @media(min-width:640px){.grid2{grid-template-columns:repeat(2,1fr);}} .grid3{display:grid;grid-template-columns:1fr;gap:12px;} @media(min-width:640px){.grid3{grid-template-columns:repeat(3,1fr);}} .grid4{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;align-items:end;} @media(min-width:640px){.grid4{grid-template-columns:repeat(4,1fr);}} .period-nav{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:16px;} .type-row{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:3px;font-size:13px;} .badge{font-size:11px;color:var(--danger);border:1px solid var(--danger);border-radius:2px;padding:1px 6px;} .muted{color:var(--text-muted);} .hidden{display:none !important;} ::selection{background:var(--amber);color:#1A1408;} /* Auth pages */ .auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;} .auth-card{width:100%;max-width:360px;padding:28px 24px;} .field{margin-bottom:14px;} .alert-error{background:rgba(217,97,91,.12);border:1px solid var(--danger);color:var(--danger);border-radius:3px;padding:8px 10px;font-size:13px;margin-bottom:14px;} .auth-switch{margin-top:16px;font-size:13px;color:var(--text-muted);text-align:center;} /* Top bar */ .topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px;} .user-pill{display:flex;align-items:center;gap:10px;margin-left:auto;} .user-pill .name{font-size:13px;color:var(--text-muted);} /* Quick buttons */ .quickbtns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;} .quickbtn{background:var(--surface-2);border:1px solid var(--border);border-radius:4px;padding:14px 8px;text-align:center;color:var(--text);transition:border-color .15s, transform .1s;} .quickbtn:hover{border-color:var(--amber);} .quickbtn:active{transform:scale(.97);} .quickbtn .qname{font-family:var(--font-display);text-transform:uppercase;font-size:14px;letter-spacing:.02em;display:block;} .quickbtn .qpts{font-family:var(--font-mono);font-size:12px;color:var(--amber);display:block;margin-top:4px;} .quickbtn.quickbtn-nopoints .qpts{color:var(--text-muted);} /* Historial de hoy */ .hist-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:3px;margin-bottom:6px;} .hist-item:last-child{margin-bottom:0;} .hist-name{font-weight:600;font-size:13px;} .hist-pts{font-family:var(--font-mono);font-weight:400;font-size:11px;color:var(--amber);} .hist-meta{font-size:11px;color:var(--text-muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .hist-actions{display:flex;gap:4px;flex-shrink:0;} .icon-btn{background:transparent;border:1px solid var(--border);border-radius:3px;padding:6px 8px;color:var(--text-muted);font-size:13px;line-height:1;cursor:pointer;} .icon-btn:hover{border-color:var(--text-muted);} /* Calendar */ .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;} .cal-head{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;color:var(--text-muted);text-align:center;padding-bottom:4px;} .cal-head.sunday{color:var(--danger);} .cal-day{position:relative;aspect-ratio:1;border:1px solid var(--border);border-radius:3px;background:var(--surface-2);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;color:var(--text);overflow:hidden;} .cal-day.empty{border-color:transparent;background:transparent;} .cal-day.today{border-color:var(--teal);border-width:2px;background:rgba(79,176,165,.12);} .cal-day.today .dnum{font-weight:700;} .cal-day.selected{border-color:var(--amber);background:rgba(232,163,61,.12);} .cal-day.today.selected{border-color:var(--teal);background:rgba(232,163,61,.12);box-shadow:inset 0 0 0 1px var(--teal);} .cal-day.sunday .dnum,.cal-day.holiday .dnum{color:var(--danger);} .cal-day .dnum{font-family:var(--font-mono);white-space:nowrap;font-size:11px;} .cal-day .dpts{font-size:9px;color:var(--amber);margin-top:2px;} .cal-day.has-complaint::after{content:"";position:absolute;top:3px;right:3px;width:5px;height:5px;border-radius:50%;background:var(--danger);} /* Toast */ .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--teal);color:#0E2422;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;padding:10px 20px;border-radius:4px;font-size:13px;opacity:0;pointer-events:none;transition:all .25s ease;z-index:100;} .toast.show{opacity:1;transform:translateX(-50%) translateY(0);} /* Variante con botón "Deshacer" (ver showUndoToast en app.js/informe.js): a diferencia del toast normal (solo informativo, no clickeable), esta sí necesita recibir clicks. */ .toast.toast-interactive{pointer-events:auto;} .toast-undo-btn{background:none;border:none;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;text-decoration:underline;cursor:pointer;padding:0;margin-left:8px;} .install-bar{display:none;position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--border);padding:10px 16px;align-items:center;justify-content:space-between;gap:12px;z-index:50;} .install-bar.show{display:flex;} /* Hamburger menu */ .menu-wrap{position:relative;} .menu-btn{font-size:16px;line-height:1;padding:8px 12px;} .menu-dropdown{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:4px;min-width:220px;padding:6px;display:flex;flex-direction:column;gap:2px;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.35);} .menu-item{display:block;width:100%;text-align:left;background:transparent;border:none;color:var(--text);font-family:var(--font-body);font-size:14px;padding:10px 12px;border-radius:3px;cursor:pointer;} .menu-item:hover{background:var(--surface-2);} .menu-item-danger{color:var(--danger);} /* Confirmation modal */ .modal-overlay{position:fixed;inset:0;background:rgba(10,12,15,.6);display:flex;align-items:center;justify-content:center;z-index:200;padding:16px;} .modal{width:100%;max-width:380px;padding:20px;} .task-prefix{color:var(--text-muted);white-space:nowrap;padding:8px 0;} /* Admin panel */ .admin-table{display:flex;flex-direction:column;gap:10px;} .admin-row{display:flex;flex-direction:column;gap:12px;padding:14px 16px;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;} .admin-row-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;} .admin-identity{display:flex;flex-direction:column;gap:3px;} .admin-identity .full-name{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px;} .admin-identity .uname{font-size:12px;color:var(--text-muted);} .admin-stats{font-size:13px;color:var(--text-muted);white-space:nowrap;} .admin-stats .pts{color:var(--amber);font-weight:600;} .admin-row-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--border);} .admin-row-bottom .profile-select{width:auto;min-width:180px;flex:0 0 auto;} .admin-badge{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--amber);border:1px solid var(--amber);border-radius:2px;padding:1px 6px;} .admin-actions{display:flex;flex-wrap:wrap;gap:6px;} .admin-actions .btn-ghost{font-size:12px;padding:6px 10px;white-space:nowrap;} .profile-points-row{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;padding:12px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:4px;} .profile-points-row .ppr-name{font-size:14px;font-weight:600;min-width:120px;align-self:center;} .profile-points-row .ppr-field{display:flex;flex-direction:column;gap:4px;} .profile-points-row .ppr-field .eyebrow{margin-bottom:0;} .profile-points-row .ppr-field input{width:100px;} .profile-points-row .pts-save{margin-left:auto;align-self:center;} @media(max-width:520px){ .profile-points-row{gap:12px;} .profile-points-row .pts-save{margin-left:0;} } /* Panel de administración: navegación por pestañas */ .admin-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:20px;border-bottom:1px solid var(--border);} .admin-tab{background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text-muted);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;font-size:13px;padding:10px 14px;margin-bottom:-1px;cursor:pointer;} .admin-tab:hover{color:var(--text);} .admin-tab.active{color:var(--amber);border-bottom-color:var(--amber);} /* Sub-pestañas dentro de un tab (ej. Catálogo → T3/Especialista/DTH): mismo estilo, un punto más chico para marcar la jerarquía. */ .admin-subtab{background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text-muted);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;font-size:12px;padding:8px 12px;margin-bottom:-1px;cursor:pointer;} .admin-subtab:hover{color:var(--text);} .admin-subtab.active{color:var(--amber);border-bottom-color:var(--amber);} /* Selector buscable "Otra actividad" (Choices.js) — overrides para tema oscuro. El font-size:16px en .choices__input es a propósito: si queda debajo de 16px, iOS Safari hace zoom automático al enfocar el campo. */ .choices{margin-bottom:0;width:100%;} .choices__inner{background:var(--surface-2) !important;border:1px solid var(--border) !important;border-radius:3px !important;padding:8px 10px !important;min-height:auto !important;font-family:var(--font-body);font-size:14px;color:var(--text);} .choices.is-open .choices__inner{border-color:var(--amber) !important;} .choices__list--single{padding:0 !important;} .choices__list--single .choices__item{color:var(--text);} .choices__placeholder{color:var(--text-muted) !important;opacity:1 !important;} .choices__list--dropdown, .choices__list[aria-expanded]{background:var(--surface) !important;border-color:var(--border) !important;border-radius:3px !important;} .choices__list--dropdown .choices__item--selectable, .choices__list[aria-expanded] .choices__item--selectable{color:var(--text);font-size:14px;} .choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted{background:var(--surface-2) !important;} .choices__input{background:var(--surface-2) !important;color:var(--text) !important;font-family:var(--font-body);font-size:16px !important;border:none;border-bottom:1px solid var(--border);} .choices__input::placeholder{color:var(--text-muted);} .viewing-banner{background:rgba(232,163,61,.12);border:1px solid var(--amber);color:var(--amber);border-radius:3px;padding:10px 14px;font-size:13px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;} /* "Descargar PDF" (informe.php) usa window.print(): en vez de imprimir el dashboard tal cual se ve en pantalla (que solo muestra el detalle de UN día a la vez), se arma un reporte propio en #printReport con TODAS las actividades del periodo ordenadas por fecha. En pantalla queda oculto; solo se muestra dentro de @media print, reemplazando a .wrap. */ .print-only{display:none;} .print-report-header h1{font-size:18px;margin:0 0 8px;} .print-report-meta{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;margin-bottom:16px;} .print-report-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:16px;} .print-report-table th, .print-report-table td{border:1px solid #999;padding:4px 6px;text-align:left;} .print-report-table th{background:#eee;} .print-report-table .day-row td{background:#dcdcdc;font-weight:700;border-top:2px solid #333;} .print-report-table .day-row .day-total{float:right;font-weight:400;color:#444;} .print-report-totals{display:flex;gap:24px;font-size:13px;font-weight:600;} .print-report-footer{margin-top:20px;font-size:11px;color:#666;border-top:1px solid #ccc;padding-top:8px;} @media print{ html, body{background:#fff !important;} body *{visibility:hidden;} .print-only, .print-only *{visibility:visible;} .print-only{display:block !important;position:absolute;top:0;left:0;width:100%;background:#fff;color:#111;font-family:Arial,sans-serif;padding:12px;} } /* Debug inspect mode */ .debug-inspect-root{position:fixed;bottom:20px;right:20px;z-index:500;display:flex;flex-direction:column;align-items:flex-end;gap:8px;} .debug-inspect-toggle{background:var(--amber);color:#1a1200;border:none;border-radius:4px;padding:10px 14px;font-family:var(--font-display);font-size:12px;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.35);} .debug-inspect-toggle.active{background:var(--teal);color:#0E2422;} .debug-inspect-hint{background:var(--surface-2);border:1px solid var(--border);color:var(--text);font-size:12px;padding:8px 12px;border-radius:4px;max-width:240px;line-height:1.4;} .debug-inspect-overlay{position:fixed;inset:0;z-index:450;cursor:crosshair;background:transparent;} .debug-inspect-highlight{position:fixed;z-index:460;pointer-events:none;border:2px solid var(--amber);background:rgba(245,166,35,.12);border-radius:2px;box-sizing:border-box;} .debug-inspect-modal{position:fixed;inset:0;z-index:470;background:rgba(10,12,15,.65);display:flex;align-items:center;justify-content:center;padding:16px;} .debug-inspect-modal-card{width:100%;max-width:420px;padding:20px;} .debug-inspect-issue{width:100%;min-height:96px;resize:vertical;background:var(--surface-2);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:var(--font-body);font-size:14px;padding:10px 12px;} body.debug-inspect-picking{cursor:crosshair;}