NO APARECE EL SCROLL NO COMABES EL DISEÑO DE LOS COLORES TE DEJO STIL ANTIAGUI DEJALO IGUAL DAME TODO ATOMICO Y LISTO Y QUE FUNCIONE /* ========= Criss Soluciones UI (v1) ========= */ /* ---------- Tokens ---------- */ :root { --bg: #0e1a26; --surface: #14293d; --surface-2: #1b3550; --text: #e5eef9; --muted: #9fb3c8; --primary: #f8c100; --primary-600: #e6b000; --border: #25405a; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --info: #38bdf8; --radius: 14px; --shadow: 0 12px 28px rgba(0,0,0,.28); --sidebar-w: 260px; } /* Modo claro opcional (agrega class="theme-light" a ) */ body.theme-light { --bg: #f4f6f8; --surface: #ffffff; --surface-2: #f8fafc; --text: #0f172a; --muted: #475569; --primary: #f7b500; --primary-600: #d99c00; --border: #e2e8f0; --success: #16a34a; --warning: #d97706; --danger: #dc2626; --info: #0284c7; } /* ---------- Base ---------- */ * { box-sizing: border-box; } html, body { height: 100%; } body { background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.45; } /* Links y focos accesibles */ a { color: var(--primary); text-decoration: none; } a:hover { opacity: .9; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* ---------- Layout (sidebar + contenido) ---------- */ .app { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); background: linear-gradient(180deg, #0e1a26, #0b1520); color: var(--text); padding: 20px 16px; position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--border); } .sidebar .brand { font-weight: 700; letter-spacing: .3px; } .sidebar .user { font-size: .9rem; color: var(--muted); } .sidebar .nav { margin-top: 14px; } .sidebar .nav a { display: flex; align-items: center; gap: 10px; color: var(--text); padding: 10px 12px; border-radius: 10px; } .sidebar .nav a:hover { background: rgba(255,255,255,.06); } .sidebar .nav a.active { background: var(--surface-2); color: var(--primary); } .content { flex: 1; padding: 22px; background: var(--bg); } /* ---------- Topbar ---------- */ .topbar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; box-shadow: var(--shadow); } /* ---------- Cards / KPI ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text); } .card .card-title { font-weight: 600; } .kpi { display: flex; flex-direction: column; gap: 2px; padding: 16px; } .kpi .label { color: var(--muted); font-size: .88rem; } .kpi .value { font-size: 1.6rem; font-weight: 700; } /* ---------- Botones ---------- */ .btn { border-radius: 12px; border: 0; padding: 10px 14px; font-weight: 600; } .btn-primary { background: var(--primary); color: #000; } .btn-primary:hover { background: var(--primary-600); } .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); } .btn-outline:hover { background: var(--surface-2); } /* Estados */ .btn-success { background: var(--success); } .btn-warning { background: var(--warning); color: #000; } .btn-danger { background: var(--danger); } .btn-info { background: var(--info); color: #000; } /* ---------- Formularios ---------- */ .form-control, .form-select, input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"], textarea { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 10px 12px; } .form-control::placeholder { color: var(--muted); } .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(248,193,0,.15); outline: none; } .label-muted { color: var(--muted); font-size: .9rem; } /* Upload de imágenes (vehículos/OT) */ .dropzone { border: 2px dashed var(--border); background: var(--surface); border-radius: var(--radius); padding: 18px; text-align: center; color: var(--muted); } .dropzone.drag { border-color: var(--primary); color: var(--primary); } /* ---------- Tablas ---------- */ .table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .table thead th { background: var(--surface-2); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; font-size: .78rem; padding: 12px; } .table tbody td { padding: 12px; border-top: 1px solid var(--border); } .table tbody tr:hover { background: rgba(255,255,255,.03); } /* Pills de estado (OT, Cobranza, Caja) */ .status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; font-weight: 600; font-size: .82rem; } .status-ok { background: rgba(34,197,94,.15); color: var(--success); } .status-warn { background: rgba(245,158,11,.15); color: var(--warning); } .status-err { background: rgba(239,68,68,.15); color: var(--danger); } .status-info { background: rgba(56,189,248,.18); color: var(--info); } /* ---------- Modales ---------- */ .modal-content { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 16px; } /* ---------- Login compacto ---------- */ .login-card { width: 360px; margin: 8vh auto; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 24px; box-shadow: var(--shadow); } /* ---------- Utilidades ---------- */ .muted { color: var(--muted) !important; } .sep { height: 1px; background: var(--border); margin: 12px 0; } .round { border-radius: var(--radius); } .shadow { box-shadow: var(--shadow); } .hide-scroll { scrollbar-width: none; } .hide-scroll::-webkit-scrollbar { display: none; } /* ---------- Print (Certificados de Mantenimiento) ---------- */ @media print { body { background: #fff; color: #000; } .sidebar, .topbar, .btn, .no-print { display: none !important; } .content { margin: 0; padding: 0; } .card { box-shadow: none; border: 1px solid #ddd; } }