/* ============================================================ Mi GPS Cloud — CSS Compartido Global Tokens, reset, layout base, componentes compartidos. Cada página carga su CSS específico después de este. ⚠️ No agregar CSS específico de un módulo aquí. Usar css/{modulo}.css para eso. ============================================================ */ /* ════════════════════════════════════════════════════════════ TOKENS GLOBALES Los temas claro/oscuro se inyectan vía PHP en cada página. Las variables específicas de módulo van en sus CSS. ════════════════════════════════════════════════════════════ */ :root { /* Radio y sombras (defaults) */ --radius: 10px; --shadow-sm: 0 1px 4px rgba(0,0,0,.07); --shadow: 0 4px 18px rgba(0,0,0,.1); --shadow-lg: 0 12px 40px rgba(0,0,0,.15); /* Layout constants (overridable por módulo) */ --topbar-height: 56px; --sidebar-width: 240px; --bnh: 60px; /* Branding dinámico — inyectado por PHP vía renderBrandingStyles() estos son valores de respaldo (F4-T03) */ --brand-primary: #2563eb; --brand-secondary: #0f172a; /* Tokens de color — defaults (cada módulo sobreescribe vía PHP) */ --bg: #f0f4f8; --surface: #ffffff; --surface2: #f8fafc; --text: #1e293b; --text-dim: #64748b; --text-mute: #94a3b8; --border: #e2e8f0; --border2: #cbd5e1; --primary: #0f4c81; --accent: #00c2cb; --online: #16a34a; --offline: #dc2626; --unknown: #d97706; --success: #16a34a; --danger: #dc2626; --warning: #d97706; /* Tipografía */ font-family: 'Exo 2', sans-serif; } /* Tema oscuro por defecto — mínimo */ [data-theme="dark"] { --bg: #071221; --surface: #0d1f3c; --surface2:#091525; --text: #e2e8f0; --text-dim:#94a3b8; --text-mute:#475569; --border: rgba(255,255,255,.08); --border2: rgba(255,255,255,.15); --online: #22c55e; --offline: #ef4444; --unknown: #f59e0b; --success: #22c55e; --danger: #ef4444; --warning: #f59e0b; --shadow-sm:0 1px 4px rgba(0,0,0,.35); --shadow: 0 4px 18px rgba(0,0,0,.45); --shadow-lg:0 12px 40px rgba(0,0,0,.6); } /* ════════════════════════════════════════════════════════════ RESET ════════════════════════════════════════════════════════════ */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0 } html { height:100%; -webkit-text-size-adjust:100% } body { height:100%; overflow:hidden; background:var(--bg); color:var(--text); font-family:'Exo 2',sans-serif; transition:background .3s,color .3s; } img { max-width:100% } button,input,select,textarea { font-family:inherit } a { color:var(--accent); text-decoration:none } /* ── Scrollbar global ── */ ::-webkit-scrollbar { width:5px; height:5px } ::-webkit-scrollbar-thumb { background:var(--border2,#cbd5e1); border-radius:3px } /* ════════════════════════════════════════════════════════════ LAYOUT BASE — páginas con topbar + sidebar Uso:

...

════════════════════════════════════════════════════════════ */ .app-page { min-height:100vh; overflow:hidden; } #shell, .app-layout { display:grid; grid-template-columns:var(--sidebar-width) 1fr; grid-template-rows:var(--topbar-height) 1fr; grid-template-areas: "topbar topbar" "sidenav content"; height:100vh; height:100dvh; } /* Topbar */ .topbar { grid-area:topbar; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 20px; gap:12px; box-shadow:var(--shadow-sm); z-index:200; transition:background .3s,border-color .3s; } .topbar-logo { height:32px; object-fit:contain; flex-shrink:0 } .topbar-title { font-size:1rem;font-weight:900;letter-spacing:.5px;white-space:nowrap; background:linear-gradient(90deg,var(--primary),var(--accent)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } .topbar-spacer { flex:1 } .topbar-user { display:flex;align-items:center;gap:8px; font-size:.8rem;color:var(--text-dim); } .topbar-user strong { color:var(--text) } .topbar-btns { display:flex;gap:8px } .tb-btn { padding:6px 13px;border-radius:7px;border:1px solid var(--border); background:var(--surface2);color:var(--text-dim); font-size:.77rem;font-weight:600;cursor:pointer;text-decoration:none; transition:all .2s;display:flex;align-items:center;gap:6px;white-space:nowrap; } .tb-btn:hover { background:var(--border2);color:var(--text);border-color:var(--accent) } .tb-btn.primary { background:var(--primary);color:#fff;border-color:var(--primary) } .tb-btn.primary:hover { background:var(--accent);border-color:var(--accent) } /* Sidenav */ .sidenav { grid-area:sidenav; background:var(--surface); border-right:1px solid var(--border); overflow-y:auto; padding:16px 0; transition:background .3s,border-color .3s; } .nav-section-title { font-size:.6rem;font-weight:700;letter-spacing:1.2px; text-transform:uppercase;color:var(--text-mute); padding:6px 20px 4px;margin-top:8px; } .nav-item { display:flex;align-items:center;gap:10px;padding:10px 20px; cursor:pointer;font-size:.83rem;color:var(--text-dim);font-weight:600; border-left:3px solid transparent;transition:all .15s;text-decoration:none; } .nav-item i { width:16px;text-align:center;font-size:.82rem } .nav-item:hover { background:var(--surface2);color:var(--text) } .nav-item.active { background:rgba(0,194,203,.08);color:var(--accent);border-left-color:var(--accent); } .nav-badge { margin-left:auto;background:var(--primary); color:#fff;font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:20px; } /* Content */ .content { grid-area:content; overflow-y:auto; overflow-x:hidden; background:var(--bg); padding:24px; transition:background .3s; } /* ════════════════════════════════════════════════════════════ BOTÓN HAMBURGUESA (dibujo móvil) ════════════════════════════════════════════════════════════ */ #btnDrawer { display:none } #navBackdrop { display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:2900; } #navBackdrop.show { display:block } /* ════════════════════════════════════════════════════════════ COMPONENTES COMPARTIDOS ════════════════════════════════════════════════════════════ */ /* ── Page header ── */ .page-header { display:flex;align-items:center; justify-content:space-between; margin-bottom:24px;gap:12px;flex-wrap:wrap; } .page-title { font-size:1.3rem;font-weight:900 } .page-sub { font-size:.8rem;color:var(--text-dim);margin-top:2px } /* ── Section header (driver) ── */ .sec-hdr { display:flex;align-items:center;justify-content:space-between; padding:16px 14px 8px; } .sec-title { font-size:.9rem;font-weight:800;color:var(--text) } .sec-sub { font-size:.72rem;color:var(--text-dim) } .sec-action { font-size:.75rem;font-weight:700;color:var(--accent);cursor:pointer; background:none;border:none;padding:4px 8px;border-radius:6px; border:1px solid rgba(0,194,203,.3); } /* ── Cards ── */ .card { background:var(--surface);border:1px solid var(--border); border-radius:var(--radius,12px);overflow:hidden; margin-bottom:22px;transition:background .3s,border-color .3s; } .card-header { display:flex;align-items:center;justify-content:space-between; padding:14px 18px;border-bottom:1px solid var(--border); flex-wrap:wrap;gap:8px; } .card-title { font-size:.9rem;font-weight:700 } .card-actions { display:flex;gap:8px;flex-wrap:wrap } .card-search { padding:7px 12px;background:var(--surface2); border:1px solid var(--border);border-radius:8px; color:var(--text);font-size:.8rem;outline:none; width:200px;transition:border-color .2s; } .card-search:focus { border-color:var(--accent) } /* ── Buttons ── */ .btn { padding:9px 18px;border-radius:8px;font-size:.82rem; font-weight:700;cursor:pointer;transition:all .2s; border:1px solid transparent; } .btn-primary { background:var(--primary);color:#fff } .btn-primary:hover { background:var(--accent) } .btn-ghost { background:transparent;border-color:var(--border);color:var(--text-dim) } .btn-ghost:hover { border-color:var(--accent);color:var(--text) } .btn-danger { background:transparent;border-color:rgba(220,38,38,.35);color:var(--offline,#dc2626) } .btn-danger:hover { background:rgba(220,38,38,.1) } .btn-full{ width:100%;padding:13px;border-radius:10px;border:none; background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff;font-size:.9rem;font-weight:800;cursor:pointer;transition:opacity .2s; } .btn-full:active{opacity:.85} .btn-full.sec,.btn-full.secondary{background:var(--surface2);color:var(--text-dim);border:1px solid var(--border)} /* ── Badges / Pills ── */ .badge { display:inline-block;padding:2px 10px; border-radius:20px;font-size:.66rem;font-weight:700; text-transform:uppercase;letter-spacing:.4px; } .badge-online { background:rgba(22,163,74,.12); color:var(--online,#16a34a) } .badge-offline { background:rgba(220,38,38,.12); color:var(--offline,#dc2626) } .badge-unknown { background:rgba(217,119,6,.12); color:var(--unknown,#d97706) } .badge-admin { background:rgba(0,194,203,.12); color:var(--accent) } .badge-user { background:var(--surface2); color:var(--text-dim) } .badge-active { background:rgba(22,163,74,.12); color:var(--online,#16a34a) } .badge-inactive{ background:rgba(220,38,38,.12); color:var(--offline,#dc2626) } /* ── Data table ── */ table.tbl { width:100%;border-collapse:collapse;font-size:.82rem } table.tbl th { padding:10px 14px;text-align:left; font-size:.68rem;font-weight:700; text-transform:uppercase;letter-spacing:.6px; color:var(--text-dim);background:var(--surface2); border-bottom:1px solid var(--border);white-space:nowrap; } table.tbl td { padding:10px 14px;border-bottom:1px solid var(--border); vertical-align:middle; } table.tbl tr:last-child td { border-bottom:none } table.tbl tr:hover td { background:var(--surface2) } .table-scroll { overflow-x:auto;-webkit-overflow-scrolling:touch } .tbl-actions { display:flex;gap:6px } .act-btn { width:30px;height:30px;border-radius:7px; border:1px solid var(--border);background:var(--surface2); color:var(--text-dim);cursor:pointer;font-size:.78rem; display:flex;align-items:center;justify-content:center;transition:all .15s; } .act-btn:hover { background:var(--surface);color:var(--text) } .act-btn.danger:hover { background:rgba(220,38,38,.12);color:var(--offline,#dc2626);border-color:var(--offline,#dc2626) } .act-btn.success:hover { background:rgba(22,163,74,.12);color:var(--online,#16a34a);border-color:var(--online,#16a34a) } .act-btn.accent:hover { background:rgba(0,194,203,.12);color:var(--accent);border-color:var(--accent) } /* ── Empty state ── */ .empty-state { text-align:center;padding:40px 20px;color:var(--text-dim) } .empty-state i { font-size:2.5rem;opacity:.3;margin-bottom:12px;display:block } .empty-state p, .empty-msg { font-size:.85rem } .empty-msg { color:var(--text-dim);text-align:center;padding:28px } /* ── Overlay / Modal ── */ .overlay,.modal-overlay,.sheet-overlay { display:none;position:fixed;inset:0; background:rgba(0,0,0,.5);z-index:5000; align-items:center;justify-content:center; backdrop-filter:blur(4px); } .overlay.open,.modal-overlay.open,.sheet-overlay.open { display:flex } .modal { background:var(--surface);border:1px solid var(--border); border-radius:16px;padding:28px; width:520px;max-width:96vw;max-height:90vh; overflow-y:auto;box-shadow:var(--shadow-lg); animation:mIn .3s cubic-bezier(.22,1,.36,1); } @keyframes mIn { from{opacity:0;transform:scale(.95) translateY(12px)} to{opacity:1;transform:scale(1) translateY(0)} } .modal-hdr { display:flex;align-items:center;justify-content:space-between; margin-bottom:20px; } .modal-hdr h2 { font-size:1rem;font-weight:800 } .mclose,.modal-close,.sheet-close { width:30px;height:30px;border-radius:7px; border:1px solid var(--border);background:var(--surface2); color:var(--text-dim);cursor:pointer;font-size:.8rem; display:flex;align-items:center;justify-content:center; transition:all .15s; } .mclose:hover,.modal-close:hover { background:var(--border2);color:var(--text) } /* Modal form grid */ .fgrid,.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px } .fgrid .full,.form-grid .full { grid-column:1/-1 } .fld,.field-group,.form-field { display:flex;flex-direction:column;gap:5px } .fld label,.field-group label,.form-field label { font-size:.68rem;font-weight:700;letter-spacing:.6px; text-transform:uppercase;color:var(--text-dim) } .fld input,.fld select,.fld textarea, .field-group input,.field-group select,.field-group textarea, .form-field input,.form-field select,.form-field textarea { padding:9px 12px;background:var(--surface2); border:1px solid var(--border);border-radius:8px; color:var(--text);font-size:.85rem;font-family:inherit; outline:none;transition:border-color .2s,box-shadow .2s; } .fld input:focus,.fld select:focus,.fld textarea:focus, .field-group input:focus,.field-group select:focus,.field-group textarea:focus, .form-field input:focus,.form-field select:focus,.form-field textarea:focus { border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,194,203,.1) } .fld select option,.field-group select option,.form-field select option { background:var(--surface) } .fld textarea,.field-group textarea,.form-field textarea { resize:vertical;min-height:70px } /* Modal footer */ .mfooter,.modal-footer { display:flex;gap:10px;margin-top:20px;justify-content:flex-end } /* ── Toast ── */ #toasts, #toastContainer { position:fixed;bottom:24px;right:24px;z-index:9999; display:flex;flex-direction:column;gap:8px;pointer-events:none } .toast { padding:11px 16px;border-radius:9px;font-size:.82rem;font-weight:600; background:var(--surface);border:1px solid var(--border); box-shadow:var(--shadow);color:var(--text); pointer-events:auto;max-width:300px; } .toast.in, .toast.show { opacity:1;transform:translateX(0) } .toast-ok { border-color:rgba(22,163,74,.4);color:var(--online,#16a34a) } .toast-err { border-color:rgba(220,38,38,.4);color:var(--offline,#dc2626) } .toast-warn { border-color:rgba(217,119,6,.4);color:var(--unknown,#d97706) } .toast-info { border-color:rgba(0,194,203,.4);color:var(--accent) } /* ── Brand gradient text ── */ .brand-gradient { background:linear-gradient(90deg,var(--primary),var(--accent)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } /* ── Filter pills ── */ .filter-pills{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .filter-pills::-webkit-scrollbar{display:none} .fpill{ padding:5px 12px;border-radius:20px;border:1px solid var(--border); background:var(--surface2);color:var(--text-dim);font-size:.72rem;font-weight:700; cursor:pointer;white-space:nowrap;transition:all .2s;flex-shrink:0; } .fpill.active{background:var(--primary);color:#fff;border-color:var(--primary)} /* ── Content tabs ── */ .content-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0} .ctab{flex:1;max-width:180px;padding:10px 16px;border:none;background:transparent; color:var(--text-dim);font-size:.78rem;font-weight:700;cursor:pointer; border-bottom:2px solid transparent;transition:all .2s} .ctab.active{color:var(--accent);border-bottom-color:var(--accent);background:var(--surface)} .ctab-badge{background:var(--offline,#dc2626);color:#fff;border-radius:10px; font-size:.58rem;font-weight:900;padding:1px 5px;margin-left:5px} /* ── Novelty cards (driver, tasks) ── */ .nov-card{ background:var(--surface);border:1px solid var(--border); border-radius:var(--radius,12px);padding:12px 14px; } .nov-hdr{display:flex;align-items:center;gap:8px;margin-bottom:5px} .nov-badge{ padding:2px 8px;border-radius:10px;font-size:.62rem;font-weight:700; } .nb-info {background:rgba(0,194,203,.1); color:var(--accent)} .nb-warning {background:rgba(217,119,6,.12); color:var(--unknown,#d97706)} .nb-incident{background:rgba(220,38,38,.12); color:var(--offline,#dc2626)} .nb-mechanical{background:rgba(148,163,184,.15);color:var(--text-dim)} .nb-fuel {background:rgba(22,163,74,.12); color:var(--online,#16a34a)} .nb-other {background:var(--surface2); color:var(--text-mute)} .nov-driver{font-size:.73rem;color:var(--text-dim)} .nov-time{font-size:.67rem;color:var(--text-mute);font-family:'JetBrains Mono',monospace;margin-left:auto} .nov-msg{font-size:.82rem;color:var(--text);line-height:1.5} /* ── Bottom nav (mobile) ── */ .bottom-nav { display:none; position:fixed;bottom:0;left:0;right:0; height:var(--bnh,60px);background:var(--surface); border-top:1px solid var(--border);z-index:1700; box-shadow:0 -4px 20px rgba(0,0,0,.08); } .bn-item { flex:1;display:flex;flex-direction:column; align-items:center;justify-content:center; gap:3px;cursor:pointer; font-size:.58rem;font-weight:700;text-transform:uppercase; letter-spacing:.3px;color:var(--text-dim); border:none;background:transparent;text-decoration:none; -webkit-tap-highlight-color:transparent;transition:color .2s; } .bn-item i { font-size:1.1rem } .bn-item.active { color:var(--accent) } .bn-icon-wrap { position:relative;display:inline-block } .bn-badge { position:absolute;top:-4px;right:-2px; background:var(--offline,#dc2626);color:#fff;border-radius:10px; font-size:.55rem;font-weight:900;padding:1px 5px;min-width:16px;text-align:center; } /* ── Header icon button (hic) ── */ .hic { width:34px;height:34px;border-radius:8px; border:1px solid var(--border);background:var(--surface2); color:var(--text-dim);cursor:pointer;font-size:.85rem; display:flex;align-items:center;justify-content:center; transition:all .2s;flex-shrink:0; } .hic:hover { border-color:var(--accent);color:var(--accent) } .hic.admin { background:var(--primary);color:#fff;border-color:var(--primary) } .hic.admin:hover { background:var(--accent);border-color:var(--accent) } /* ── Novedades unread badge (user-chip area) ── */ .badge-novedades { display:inline-flex;align-items:center;justify-content:center; background:var(--offline,#dc2626);color:#fff; font-size:.55rem;font-weight:900;line-height:1; padding:2px 5px;border-radius:10px;min-width:16px;text-align:center; margin-left:4px;vertical-align:middle; } /* ── Pills (admin) ── */ .pill{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px} .pill-online{background:rgba(22,163,74,.12);color:var(--success)} .pill-offline{background:rgba(220,38,38,.12);color:var(--danger)} .pill-unknown{background:rgba(217,119,6,.12);color:var(--warning)} .pill-admin{background:rgba(0,194,203,.12);color:var(--accent)} .pill-user{background:var(--surface2);color:var(--text-dim)} /* ════════════════════════════════════════════════════════════ RESPONSIVE ≤ 768px (compartido) ════════════════════════════════════════════════════════════ */ @media(max-width:768px){ #shell, .app-layout { grid-template-columns:1fr; grid-template-rows:52px 1fr; grid-template-areas:"topbar" "content"; } :root { --topbar-height: 52px; --sidebar-width: 0px; } .sidenav { position:fixed;left:0;top:52px;width:260px; height:calc(100% - 52px);z-index:3000; transform:translateX(-100%); transition:transform .3s cubic-bezier(.22,1,.36,1); box-shadow:var(--shadow-lg); } .sidenav.open { transform:translateX(0) } .topbar { padding:0 12px;gap:8px } .topbar-title { font-size:.88rem } .topbar-user { display:none } .tb-btn .lbl { display:none } .tb-btn { padding:6px 10px } #btnDrawer { display:flex } .tb-btn.hide-mob { display:none } .content { padding:16px } .fgrid,.form-grid { grid-template-columns:1fr } .modal { border-radius:20px 20px 0 0;width:100%;max-width:100%; border-bottom:none;animation:slideUp .3s cubic-bezier(.22,1,.36,1); } .overlay,.modal-overlay { align-items:flex-end } @keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} } #toasts, #toastContainer { bottom:auto;top:60px;right:12px;left:12px;align-items:center } .toast { transform:translateY(-14px);max-width:100% } .toast.in, .toast.show { transform:translateY(0) } /* Bottom nav visible */ .bottom-nav { display:flex } } /* ════════════════════════════════════════════════════════════ PAGE-SECTION (driver — cambia visibilidad de secciones) ════════════════════════════════════════════════════════════ */ .page-section { display:none; min-height:50vh } .page-section.active { display:block }