:root{ --bg:#0b1220; --bg-elev:#111c2f; --panel:#132238; --panel-2:#0f1b30; --border:#22344f; --text:#e7edf6; --text-dim:#93a4bd; --accent:#2f7dfa; --accent-2:#00c2a8; --danger:#ef4444; --warn:#f5a524; --ok:#22c55e; --radius:14px; --sidebar-w:230px; --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.28); --shadow-sm:0 1px 2px rgba(0,0,0,.3); } /* Tema claro — se activa con data-theme="light" en */ :root[data-theme="light"]{ --bg:#eef1f6; --bg-elev:#ffffff; --panel:#ffffff; --panel-2:#f3f5f9; --border:#dde3ee; --text:#141b2b; --text-dim:#5b6b85; --accent:#2f7dfa; --accent-2:#0d9488; --danger:#dc2626; --warn:#d97706; --ok:#16a34a; --shadow:0 1px 2px rgba(20,27,43,.06), 0 10px 24px rgba(20,27,43,.08); --shadow-sm:0 1px 2px rgba(20,27,43,.08); } :root[data-theme="light"] body{background:var(--bg);} :root[data-theme="light"] .sidebar{background:#ffffff;} :root[data-theme="light"] .nav-item.active{background:#e7f0fe;color:var(--accent);box-shadow:inset 3px 0 0 var(--accent);} :root[data-theme="light"] .odometer-digit{background:#04140c;color:#3bffb0;border-color:#0d3d2a;} *{box-sizing:border-box;} [data-icon] svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;} [data-icon]{display:inline-flex;flex-shrink:0;overflow:hidden;} html,body{height:100%;} body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; background:radial-gradient(1200px 800px at 80% -10%, #16233b 0%, var(--bg) 55%); color:var(--text); min-height:100vh; } .app{ display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh; } /* Sidebar */ .sidebar{ position:relative; background:linear-gradient(180deg,#0d1729,#0a1220); border-right:1px solid var(--border); padding:20px 14px; display:flex; flex-direction:column; gap:6px; } .brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 22px; } .brand-icon{ width:38px;height:38px;border-radius:10px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:flex;align-items:center;justify-content:center; color:#fff; box-shadow:var(--shadow-sm); } .brand-icon [data-icon]{width:20px;height:20px;} .brand-text{ font-weight:800; letter-spacing:.4px; line-height:1.1; font-size:15px; } .brand-text small{ display:block; font-weight:500; color:var(--text-dim); font-size:10px; letter-spacing:1px; } .nav-item{ display:flex;align-items:center;gap:11px; padding:10px 12px; border-radius:10px; color:var(--text-dim); cursor:pointer; font-size:13.5px; font-weight:500; user-select:none; transition:background .15s,color .15s; } .nav-item .ico{width:18px;height:18px;} .nav-item:hover{background:#132238;color:var(--text);} .nav-item.active{ background:linear-gradient(90deg,#1b3a66,#132238); color:#fff; font-weight:600; box-shadow:inset 3px 0 0 var(--accent); } .nav-label{white-space:nowrap;} /* Grupos de menú desplegables (Mantenimientos, Reportes) */ .nav-group{display:flex;flex-direction:column;} .nav-caret{margin-left:auto;width:14px;height:14px;flex-shrink:0;color:var(--text-dim);transition:transform .18s;transform:rotate(180deg);} .nav-group-toggle.open .nav-caret{transform:rotate(270deg);} .nav-submenu{display:none;flex-direction:column;gap:4px;padding-left:16px;margin-top:2px;margin-bottom:2px;} .nav-submenu.open{display:flex;} .nav-sub{font-size:13px;padding:8px 12px;} .nav-sub .ico{width:16px;height:16px;} .app.sidebar-collapsed .nav-caret{display:none;} .app.sidebar-collapsed .nav-submenu{padding-left:0;} /* Botón para plegar/expandir el sidebar */ .sidebar-toggle{ position:absolute;top:22px;right:-14px;z-index:5; width:28px;height:28px;border-radius:50%; background:var(--panel);border:1px solid var(--border);color:var(--text-dim); display:flex;align-items:center;justify-content:center;cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .18s; } .sidebar-toggle [data-icon]{width:14px;height:14px;} .sidebar-toggle:hover{color:var(--text);border-color:var(--accent);} /* Estado plegado: solo íconos, sin texto */ .app.sidebar-collapsed{--sidebar-w:72px;} .app.sidebar-collapsed .brand{justify-content:center;padding:6px 0 22px;} .app.sidebar-collapsed .brand-text{display:none;} .app.sidebar-collapsed .nav-item{justify-content:center;padding:10px 0;} .app.sidebar-collapsed .nav-label{display:none;} .app.sidebar-collapsed .sidebar-toggle [data-icon]{transform:rotate(180deg);} /* Main */ .main{ padding:22px 26px 60px; overflow-x:hidden; } .topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; } .topbar h1{ font-size:22px; font-weight:700; letter-spacing:-.3px; margin:0; } .topbar .sub{ color:var(--text-dim); font-size:13px; margin-top:2px; } .top-actions{display:flex;gap:10px;align-items:center;} .icon-btn{ width:40px;height:40px;border-radius:10px; background:var(--panel); border:1px solid var(--border); color:var(--text-dim); display:flex;align-items:center;justify-content:center; cursor:pointer; position:relative; transition:color .15s,border-color .15s; } .icon-btn [data-icon]{width:18px;height:18px;} .icon-btn:hover{color:var(--text);border-color:var(--accent);} .icon-btn .dot{ position:absolute;top:6px;right:6px; width:8px;height:8px;border-radius:50%; background:var(--danger); } /* KPI cards */ .kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; } .kpi{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); transition:border-color .15s; min-width:0; } .kpi:hover{border-color:#2c4266;} .kpi-top{display:flex;align-items:center;gap:10px;margin-bottom:12px;} .kpi-top .label{min-width:0;overflow-wrap:break-word;} .kpi-icon{ width:30px;height:30px;border-radius:9px;flex-shrink:0; display:flex;align-items:center;justify-content:center; } .kpi-icon [data-icon]{width:15px;height:15px;} .kpi .label{ color:var(--text-dim); font-size:12.5px; font-weight:600; letter-spacing:.2px; } .kpi .value{ font-size:28px; font-weight:800; letter-spacing:-.3px; } .kpi.blue .value{color:var(--accent);} .kpi.blue .kpi-icon{background:rgba(47,125,250,.15);color:var(--accent);} .kpi.amber .value{color:var(--warn);} .kpi.amber .kpi-icon{background:rgba(245,165,36,.15);color:var(--warn);} .kpi.red .value{color:var(--danger);} .kpi.red .kpi-icon{background:rgba(239,68,68,.15);color:var(--danger);} .kpi.teal .value{color:var(--accent-2);} .kpi.teal .kpi-icon{background:rgba(0,194,168,.15);color:var(--accent-2);} .kpi.green .value{color:var(--ok);} .kpi.green .kpi-icon{background:rgba(34,197,94,.15);color:var(--ok);} /* Barra de distribución por estado (KPIs) */ .status-bar{display:flex;height:14px;border-radius:8px;overflow:hidden;border:1px solid var(--border);background:var(--panel-2);} .status-bar-seg{height:100%;} .status-bar-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--text-dim);} .status-bar-legend .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;} .status-bar-legend b{color:var(--text);} .kpis-grid-2col{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;} .wrap-cell{white-space:normal !important;min-width:220px;max-width:340px;} /* Toolbar */ .toolbar{ display:flex; gap:12px; align-items:center; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:10px 14px; margin-bottom:18px; flex-wrap:wrap; } .search{ flex:1; display:flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:8px 12px; min-width:220px; } .search [data-icon]{width:16px;height:16px;color:var(--text-dim);} .search input{ background:transparent;border:none;outline:none;color:var(--text);width:100%;font-size:14px; } select, .btn, input[type="text"], input[type="number"], input[type="date"], textarea{ font-family:inherit; } select{ background:var(--panel-2); border:1px solid var(--border); color:var(--text); border-radius:10px; padding:8px 10px; font-size:13.5px; min-width:0; max-width:100%; } .toolbar{min-width:0;} .toolbar > *{min-width:0;max-width:100%;} .toolbar .search{min-width:min(220px, 100%);} .chk{ display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-dim); } .toolbar-file-actions{display:flex;gap:8px;} .btn{ border:1px solid var(--border); background:var(--panel-2); color:var(--text); padding:9px 14px; border-radius:10px; cursor:pointer; font-size:13.5px; font-weight:600; white-space:nowrap; transition:border-color .15s,filter .15s,transform .05s; } .btn:hover{border-color:var(--accent);} .btn:active{transform:translateY(1px);} .btn [data-icon]{width:14px;height:14px;margin-right:5px;vertical-align:-3px;} .btn.primary{ background:linear-gradient(90deg,var(--accent),#1a5fd6); border:none;color:#fff; box-shadow:0 4px 14px rgba(47,125,250,.3); } .btn.primary:hover{filter:brightness(1.08);} .btn.danger{ background:linear-gradient(90deg,#e23b3b,#b91c1c); border:none;color:#fff; box-shadow:0 4px 14px rgba(226,59,59,.3); } .btn.danger:hover{filter:brightness(1.08);} .btn.ghost{background:transparent;} .btn.block{width:100%;padding:13px;font-size:14.5px;letter-spacing:.3px;} .btn:disabled{opacity:.5;cursor:not-allowed;} /* Vehicle card */ .vehicle-card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:18px; box-shadow:var(--shadow); } .vehicle-card-head{ display:flex;justify-content:space-between;align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:8px; } .vehicle-card-head h2{ font-size:15px;margin:0;color:var(--text-dim);letter-spacing:.5px; } .vehicle-card-head h2 b{color:var(--text);} .badge{ padding:5px 12px;border-radius:20px;font-size:12px;font-weight:700;letter-spacing:.4px; display:inline-flex;align-items:center;gap:6px; } .badge.ok{background:rgba(34,197,94,.15);color:var(--ok);border:1px solid rgba(34,197,94,.4);} .badge.warn{background:rgba(245,165,36,.15);color:var(--warn);border:1px solid rgba(245,165,36,.4);} .badge.danger{background:rgba(239,68,68,.15);color:var(--danger);border:1px solid rgba(239,68,68,.4);} .badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;} .vehicle-body{ display:grid; grid-template-columns:220px 1fr; gap:22px; } .vehicle-photo-wrap{ position:relative; border-radius:12px; overflow:hidden; background:var(--panel-2); border:1px solid var(--border); aspect-ratio:4/3; display:flex;align-items:center;justify-content:center; } .vehicle-photo-wrap img{ width:100%;height:100%;object-fit:cover; } .vehicle-photo-wrap .placeholder{ color:var(--text-dim);font-size:12px;text-align:center;padding:10px; display:flex;flex-direction:column;align-items:center;gap:8px; } .vehicle-photo-wrap .placeholder [data-icon]{width:28px;height:28px;opacity:.6;} .photo-upload-btn{ position:absolute;bottom:8px;right:8px; background:rgba(0,0,0,.55); border:1px solid var(--border); color:#fff;font-size:12px; padding:6px 10px;border-radius:8px;cursor:pointer; display:flex;align-items:center;gap:5px; } .photo-upload-btn [data-icon]{width:13px;height:13px;} .vehicle-info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px 20px; margin-bottom:14px; font-size:13.5px; } .vehicle-info-grid .li{color:var(--text-dim);font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;} .vehicle-info-grid .val{font-weight:700;} .doc-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;} .doc-chip{ background:var(--panel-2);border:1px solid var(--border);border-radius:10px; padding:8px 12px;display:flex;flex-direction:column;gap:5px;min-width:200px;flex:1; } .doc-chip-label{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.3px;} /* Alertas Importantes (Panel Principal) */ .alert-row{ display:flex;align-items:center;gap:12px; padding:10px 12px;border-radius:9px; background:var(--panel-2);border:1px solid var(--border); margin-bottom:8px;transition:border-color .15s; } .alert-row:last-child{margin-bottom:0;} .alert-row:hover{border-color:var(--accent);} .alert-row .alert-icon{width:16px;height:16px;flex-shrink:0;} .alert-row .alert-text{flex:1;font-size:13px;color:var(--text);min-width:0;} .alert-row .alert-text b{font-weight:700;} .alert-row .alert-sub{color:var(--text-dim);font-size:12px;} .alert-empty{color:var(--text-dim);font-size:13px;padding:6px 0;display:flex;align-items:center;gap:8px;} .odometer{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; } .odometer-display{ display:flex;gap:4px; } .odometer-digit{ background:#04140c; color:#3bffb0; font-family:"Courier New",monospace; font-weight:800; font-size:26px; padding:6px 4px; border-radius:6px; min-width:26px; text-align:center; border:1px solid #0d3d2a; } .km-unit{color:var(--text-dim);font-weight:700;font-size:13px;} .progress-block{margin-top:12px;} .progress-label{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text-dim);margin-bottom:6px;} .progress-bar{ height:10px;border-radius:6px;background:var(--panel-2);border:1px solid var(--border);overflow:hidden; } .progress-bar > div{ height:100%; background:linear-gradient(90deg,var(--accent-2),var(--accent)); border-radius:6px; } .progress-bar.urgent > div{background:linear-gradient(90deg,var(--warn),var(--danger));} /* Panels grid (preventivo / correctivo) */ .panels{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; } .panel{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); } .panel h3{ margin:0 0 12px; font-size:14.5px; font-weight:700; display:flex;align-items:center;gap:8px; } .panel h3 [data-icon]{width:16px;height:16px;color:var(--accent);} .task-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px;} .task-list li{ display:flex;align-items:center;gap:8px; font-size:13px; color:var(--text-dim); background:var(--panel-2); border:1px solid var(--border); padding:8px 10px; border-radius:8px; } .task-list li b{color:var(--text);font-weight:600;} .task-list input[type="checkbox"]{cursor:pointer;width:16px;height:16px;accent-color:var(--accent);flex-shrink:0;} .note-flag{display:inline-flex;width:13px;height:13px;color:var(--text-dim);vertical-align:-2px;} .task-list .kmtag{ margin-left:auto; font-size:11px; font-weight:700; color:var(--accent); background:rgba(47,125,250,.12); padding:2px 8px;border-radius:20px; } .task-list.overdue li{border-color:rgba(239,68,68,.5);} .task-list.overdue .kmtag{color:var(--danger);background:rgba(239,68,68,.12);} .task-list-status{background:transparent !important;border:none !important;padding:0 0 4px !important;} .field{margin-bottom:10px;} .field label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:5px;} .field select,.field input,.field textarea{ width:100%; background:var(--panel-2); border:1px solid var(--border); color:var(--text); border-radius:9px; padding:9px 10px; font-size:13.5px; } .field textarea{resize:vertical;min-height:60px;} .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;} .photo-attach{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;} .photo-thumb{width:52px;height:52px;border-radius:8px;object-fit:cover;border:1px solid var(--border);} .add-photo-btn{ width:52px;height:52px;border-radius:8px;border:1px dashed var(--border); display:flex;align-items:center;justify-content:center;color:var(--text-dim);cursor:pointer;font-size:20px; } /* Table */ .table-wrap{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); } .table-head{ display:flex;align-items:center;justify-content:space-between; padding:14px 18px;border-bottom:1px solid var(--border); } .table-head h3{margin:0;font-size:14.5px;} .table-scroll{overflow-x:auto;} table{width:100%;border-collapse:collapse;font-size:13px;min-width:820px;} thead th{ text-align:left; color:var(--text-dim); font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; padding:10px 14px; border-bottom:1px solid var(--border); white-space:nowrap; } tbody td{ padding:11px 14px; border-bottom:1px solid var(--border); white-space:nowrap; } tbody tr:hover{background:var(--panel-2);} .pill{ padding:4px 10px;border-radius:20px;font-size:11.5px;font-weight:700; } .pill.preventivo{background:rgba(47,125,250,.15);color:var(--accent);} .pill.correctivo{background:rgba(239,68,68,.15);color:var(--danger);} .flag{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px;} .flag.alta{background:var(--danger);} .flag.media{background:var(--warn);} .flag.baja{background:var(--ok);} .status-text{font-weight:700;font-size:12.5px;} .status-text.pendiente{color:var(--warn);} .status-text.en-curso{color:var(--accent);} .status-text.completado{color:var(--ok);} .row-actions{display:flex;gap:6px;} .row-actions button{ background:transparent;border:1px solid var(--border);color:var(--text-dim); border-radius:6px;padding:4px 8px;cursor:pointer;font-size:11.5px; } .row-actions button:hover{color:var(--text);border-color:var(--accent);} /* Vehicles grid view */ .vgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; } .vcard{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:12px; cursor:pointer; transition:border-color .15s,transform .15s; box-shadow:var(--shadow-sm); } .vcard:hover{border-color:var(--accent);transform:translateY(-2px);} .vcard .thumb{ position:relative; width:100%;aspect-ratio:16/10;border-radius:9px;overflow:hidden;background:var(--panel-2); display:flex;align-items:center;justify-content:center;margin-bottom:10px; } .vcard-actions{ position:absolute;top:6px;right:6px; display:flex;gap:5px; } .vcard-btn{ width:26px;height:26px;border-radius:7px; background:rgba(0,0,0,.55);border:1px solid var(--border);color:#fff; display:flex;align-items:center;justify-content:center;cursor:pointer; } .vcard-btn [data-icon]{width:13px;height:13px;} .vcard-btn:hover{border-color:var(--accent);} .vcard-btn.danger:hover{border-color:var(--danger);color:var(--danger);} .vcard-hidden{opacity:.55;} .vcard-hidden:hover{opacity:.85;} .vcard-hidden-tag{position:absolute;bottom:6px;left:6px;} .vcard .thumb img{width:100%;height:100%;object-fit:cover;} .vcard .thumb .placeholder{color:var(--text-dim);font-size:11px;display:flex;flex-direction:column;align-items:center;gap:6px;} .vcard .thumb .placeholder [data-icon]{width:22px;height:22px;opacity:.55;} .vcard .plate{font-weight:800;font-size:14px;} .vcard .meta{color:var(--text-dim);font-size:12px;margin-top:2px;} .vcard .meta-driver{ color:var(--text-dim);font-size:11.5px;margin-top:4px; display:flex;align-items:center;gap:5px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .vcard .meta-driver [data-icon]{width:12px;height:12px;flex-shrink:0;opacity:.7;} .vcard .kmrow{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:12px;} /* Modal */ .modal-overlay{ position:fixed;inset:0;background:rgba(4,9,18,.7); display:flex;align-items:center;justify-content:center; z-index:100;padding:20px; } .modal{ background:var(--bg-elev); border:1px solid var(--border); border-radius:16px; padding:22px; width:100%;max-width:640px; max-height:90vh;overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.5); } .modal h2{margin-top:0;font-size:18px;} .modal .close-x{ float:right;cursor:pointer;color:var(--text-dim);font-size:20px; } .hidden{display:none !important;} .empty-state{ text-align:center;padding:40px 20px;color:var(--text-dim); } .toast-wrap{ position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:200; } .toast{ background:var(--bg-elev);border:1px solid var(--border);border-left:4px solid var(--accent); padding:12px 16px;border-radius:10px;font-size:13.5px;box-shadow:0 8px 24px rgba(0,0,0,.4); min-width:240px; } .toast.danger{border-left-color:var(--danger);} .toast.ok{border-left-color:var(--ok);} footer.credits{ color:var(--text-dim); font-size:11.5px; text-align:center; margin-top:30px; } /* Botón hamburguesa y fondo oscuro para el menú en móvil (ocultos en escritorio) */ .mobile-nav-toggle{display:none;} .sidebar-backdrop{display:none;} @media (max-width:980px){ .mobile-nav-toggle{ display:flex;position:fixed;top:14px;left:14px;z-index:60; width:40px;height:40px;border-radius:10px; background:var(--panel);border:1px solid var(--border);color:var(--text); align-items:center;justify-content:center;box-shadow:var(--shadow); } .mobile-nav-toggle [data-icon]{width:18px;height:18px;} .sidebar-toggle{display:none;} .app{grid-template-columns:1fr;} .sidebar{ position:fixed;top:0;left:0;height:100vh;width:260px; transform:translateX(-100%); transition:transform .22s ease; z-index:56; } /* En móvil, el menú siempre se ve completo (con texto), sin importar si estaba plegado en escritorio */ .app.sidebar-collapsed .sidebar{width:260px;} .app.sidebar-collapsed .brand{justify-content:flex-start;padding:6px 0 22px;} .app.sidebar-collapsed .brand-text{display:block;} .app.sidebar-collapsed .nav-item{justify-content:flex-start;padding:10px 12px;} .app.sidebar-collapsed .nav-label{display:inline;} .app.sidebar-collapsed .nav-caret{display:block;} .app.sidebar-collapsed .nav-submenu{padding-left:16px;} body.mobile-nav-open .sidebar{transform:translateX(0);} body.mobile-nav-open .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(4,9,18,.6);z-index:50;} .main{padding-top:68px;} .kpis{grid-template-columns:repeat(2,1fr);} .kpis-grid-2col{grid-template-columns:1fr;} .vehicle-body{grid-template-columns:1fr;} .panels{grid-template-columns:1fr;} }