/* Evertech Solutions · OC — estilos sobre Tailwind CDN. Paleta: azul + celeste. */

:root {
  --ink: #1a3a5c;
  --ink2: #1e4976;
  --gold: #5ba3d0;
  --gold-deep: #1a6fa8;
  --line: #b8d9f0;
  --cream: #eef6fc;
  --danger: #b4453a;
}

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html { scroll-behavior: smooth; }
body { font-feature-settings: "cv05","ss01"; }

.tabular { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

* { scrollbar-width: thin; scrollbar-color: #7ab8d8 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #7ab8d8; border: 3px solid transparent; border-radius: 999px; background-clip: content-box; }
.dark *::-webkit-scrollbar-thumb { background: #1e4976; border: 3px solid transparent; background-clip: content-box; }

/* Inputs */
.field {
  width: 100%; border-radius: 0.625rem; border: 1px solid var(--line);
  background: #fff; padding: 0.55rem 0.8rem; font-size: 0.875rem; color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(91,163,208,.22); }
.field::placeholder { color: #7aabcb; }
.dark .field { background: #1e3a5a; border-color: #2a5580; color: #d0eaf8; }
.dark .field::placeholder { color: #4a7fa0; }

/* Botones */
.btn { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.875rem; border-radius:.625rem; padding:.55rem .95rem; transition: transform .04s, background .15s, box-shadow .15s; cursor:pointer; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: #fff; box-shadow: 0 1px 2px rgba(26,58,92,.25); }
.btn-primary:hover { background: #122844; }
.btn-gold { background: var(--gold); color: #fff; box-shadow: 0 1px 2px rgba(91,163,208,.35); }
.btn-gold:hover { background: #4a8db8; }
.btn-ghost { background: transparent; color: #2a6090; border: 1px solid var(--line); }
.btn-ghost:hover { background: #d6edf8; }
.dark .btn-ghost { color: #90c4e0; border-color: #2a5580; }
.dark .btn-ghost:hover { background: #1e3a5a; }
.btn-danger { background: #fff; color: var(--danger); border: 1px solid #e3b8b2; }
.btn-danger:hover { background: #fbf2f0; }
.dark .btn-danger { background: transparent; }

@keyframes rise { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }
.rise { animation: rise .4s cubic-bezier(.2,.7,.2,1) both; }
.rise-1{animation-delay:.04s;} .rise-2{animation-delay:.08s;} .rise-3{animation-delay:.12s;} .rise-4{animation-delay:.16s;}

/* Sidebar nav */
.nav-item { display:flex; align-items:center; gap:.7rem; padding:.6rem .8rem; border-radius:.6rem; color:#8fc4e0; font-size:.9rem; font-weight:500; transition:background .15s,color .15s; }
.nav-item:hover { background: rgba(91,163,208,.12); color:#fff; }
.nav-item.active { background: rgba(91,163,208,.22); color:#fff; box-shadow: inset 2px 0 0 var(--gold); }

/* Toast */
#toast { position:fixed; right:1rem; bottom:1rem; z-index:80; display:flex; flex-direction:column; gap:.5rem; }
.toast { background:var(--ink); color:#fff; padding:.7rem 1rem; border-radius:.6rem; font-size:.85rem; box-shadow:0 12px 32px -8px rgba(26,58,92,.45); animation: rise .25s both; display:flex; align-items:center; gap:.6rem; }
.toast.ok { box-shadow:0 12px 32px -8px rgba(91,163,208,.5); }

/* Acciones de fila */
.act { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:.5rem; color:#3a7ca8; transition:background .15s,color .15s; }
.act:hover { background:#d0eaf8; color:var(--gold-deep); }
.act-danger:hover { background:#fbf2f0; color:var(--danger); }
.dark .act { color:#6aaed0; }
.dark .act:hover { background:#1e3a5a; color:#fff; }
.dark .act-danger:hover { background:rgba(180,69,58,.2); color:#e0a59c; }

/* Cap de KPI */
.kpi { position:relative; overflow:hidden; }
.kpi::before { content:''; position:absolute; left:0; top:0; height:3px; width:100%; }
.kpi-1::before { background:var(--gold); }
.kpi-2::before { background:var(--ink); }
.kpi-3::before { background:var(--gold-deep); }
.kpi-4::before { background:#3a9ecf; }

/* Placa para el logo sobre fondos oscuros */
.logo-plate { background:#ffffff; border-radius:.6rem; padding:.4rem .6rem; display:inline-flex; border: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) { .rise,.toast { animation:none; } html { scroll-behavior:auto; } }
@media print { .no-print { display:none !important; } }