/* ============================================================================
 * app.css · tema visual compartido (estilo TailAdmin, claro).
 * Solo cambia la ESTÉTICA: mismos nombres de variables/clases que ya usan las
 * páginas, así los componentes se adaptan sin tocar la lógica ni el HTML.
 * ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#F1F5F9;        /* fondo general (slate-100) */
  --panel:#FFFFFF;     /* tarjetas / header */
  --panel2:#F7F9FC;    /* superficies suaves / hover */
  --line:#E2E8F0;      /* bordes (stroke) */
  --txt:#1C2434;       /* texto principal (TailAdmin black) */
  --muted:#64748B;     /* texto secundario (slate-500) */
  --acc:#3C50E0;       /* primario TailAdmin */
  --ok:#219653;        /* success */
  --bad:#D34053;       /* danger */
  --warn:#FBBF24;      /* warning */
  --rx:#3C50E0;        /* dashboard: bajada */
  --tx:#7C3AED;        /* dashboard: subida */
}

html,body{font-family:'Inter',system-ui,Segoe UI,Roboto,sans-serif !important}
body{color:var(--txt)}

/* ---------------------------------------------------------------------------
 * Sidebar (menú lateral) estilo TailAdmin: navy oscuro fijo a la izquierda.
 * ------------------------------------------------------------------------- */
:root{--sbw:250px}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sbw);background:#FFFFFF;color:var(--muted);
  border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px;z-index:40;overflow-y:auto}
.sb-brand{font-size:17px;font-weight:800;color:var(--txt);padding:4px 8px 16px;display:flex;gap:9px;align-items:center;
  border-bottom:1px solid var(--line);margin-bottom:8px}
.sb-logo{color:var(--acc);display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:9px;background:rgba(60,80,224,.12);flex:0 0 auto}
.sb-logo svg{width:18px;height:18px}
.sb-router{padding:6px 8px 14px}
.sb-router label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:6px}
.sb-router select{width:100%;background:#fff !important;color:var(--txt) !important;border:1px solid var(--line) !important;border-radius:8px;padding:8px 10px;font-size:13px;font-weight:600}
.sb-sect{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:#9AA6BF;padding:12px 12px 6px}
.sb-nav{display:flex;flex-direction:column;gap:3px}
.sb-nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;color:var(--muted);
  font-size:14px;font-weight:500;text-decoration:none;transition:.15s}
.sb-nav a .ic{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.sb-nav a .ic svg{width:19px;height:19px}
.sb-nav a:hover{background:#F1F5F9;color:var(--txt)}
.sb-nav a.on{background:#EEF1FF;color:var(--acc);font-weight:700}
.sb-foot{margin-top:auto;padding:14px 10px 4px;border-top:1px solid var(--line)}
.sb-user{color:var(--txt);font-size:13px;font-weight:600;display:flex;flex-direction:column;line-height:1.4}
.sb-user span{color:var(--muted);font-size:11px;font-weight:400}
.sb-out{display:inline-flex;align-items:center;gap:9px;margin-top:9px;color:var(--bad);font-size:13px;font-weight:600;text-decoration:none}
.sb-out .ic{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.sb-out .ic svg{width:18px;height:18px}
.sb-out:hover{color:#b23145}
/* Empujar TODO el contenido a la derecha del sidebar. Se usa padding en el body
 * (solo cuando hay sidebar) para no pelear con el `.wrap{margin:0 auto}` inline. */
body:has(.sidebar){padding-left:var(--sbw)}
.actionbar{left:var(--sbw) !important}
@media(max-width:820px){
  :root{--sbw:0px}
  .sidebar{display:none}
  body:has(.sidebar){padding-left:0}
}

/* Tarjetas y superficies con la sombra suave de TailAdmin */
.card{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  box-shadow:0 4px 16px rgba(16,24,40,.06) !important;
}

/* Header/topbar claro con borde inferior sutil */
header{
  background:var(--panel) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 1px 0 rgba(16,24,40,.03);
}

/* Inputs y selects blancos con borde (look TailAdmin) */
input[type=text],input[type=password],input[type=number],input[type=search],
select,textarea{
  background:#fff !important;
  border:1px solid var(--line) !important;
  color:var(--txt) !important;
}
input::placeholder{color:#9AA6BF}
input:focus,select:focus,textarea:focus{outline:none !important;border-color:var(--acc) !important;
  box-shadow:0 0 0 3px rgba(60,80,224,.14) !important}

/* Botones: primario azul TailAdmin, ghost claro */
button{border-radius:8px !important;font-weight:600 !important}
button:not(.ghost):not(.danger){background:var(--acc) !important;color:#fff !important}
button.ghost{background:#fff !important;border:1px solid var(--line) !important;color:var(--txt) !important}
button.ghost:hover{background:var(--panel2) !important}
button.danger{background:var(--bad) !important;color:#fff !important}

a{color:var(--acc)}

/* Tablas más limpias */
thead th{color:var(--muted) !important;border-bottom:1px solid var(--line) !important}
tbody tr{border-bottom:1px solid var(--line) !important}

/* Bloques de código: se mantienen oscuros y legibles */
pre{background:#1C2434 !important;color:#DEE4EE !important;border:1px solid #1C2434 !important}

/* Barra de acción fija (Balanceo): clara con blur */
.actionbar{background:rgba(255,255,255,.92) !important;border-top:1px solid var(--line) !important;
  box-shadow:0 -4px 16px rgba(16,24,40,.06)}

/* Popover avanzado y confirmaciones: sombra suave clara */
.adv-pop{box-shadow:0 12px 34px rgba(16,24,40,.14) !important}

/* Chips de estado / badges unificados con la paleta TailAdmin (antes usaban
 * verdes/rojos "viejos" que no concordaban) */
.msg.ok{background:rgba(33,150,83,.10) !important;border:1px solid rgba(33,150,83,.25) !important;color:#1a7a44 !important}
.msg.err{background:rgba(211,64,83,.10) !important;border:1px solid rgba(211,64,83,.25) !important;color:#b23145 !important}
.msg.warn{background:rgba(251,191,36,.13) !important;border:1px solid rgba(251,191,36,.32) !important;color:#B45309 !important}
.b-ok,.badge.b-ok{background:rgba(33,150,83,.12) !important;color:var(--ok) !important}
.badge.b-bad,.b-bad{background:rgba(211,64,83,.12) !important;color:var(--bad) !important}
.badge.b-warn,.b-warn{background:rgba(251,191,36,.16) !important;color:#B45309 !important}
.b-res{background:rgba(124,58,237,.12) !important;color:#7C3AED !important}
.estado.on{color:var(--ok) !important}
.estado.off{color:#B45309 !important}
.pctreal.ok{color:var(--ok) !important}
.pctreal.warn{color:#B45309 !important}
/* deslizador de carga con el primario */
input[type=range]{accent-color:var(--acc)}

/* Selección de texto con tinte del primario */
::selection{background:rgba(60,80,224,.16)}

/* Scrollbar sutil */
*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:8px}
*::-webkit-scrollbar-track{background:transparent}