/* =====================================================================
   SERVINET · assets/css/style.css
   Tokens de color (claro/oscuro) y estilos base compartidos.
   ---------------------------------------------------------------------
   Los valores son EXACTOS a las maquetas HTML. El diseño de cada página
   usa estilos en línea con var(--token, respaldo); aquí definimos esos
   tokens para el tema claro (:root) y el oscuro (html[data-theme=dark]).
   El botón de la barra superior cambia el atributo data-theme y se
   guarda en localStorage (ver assets/js/app.js).
   ===================================================================== */

/* ---------- TEMA CLARO (por defecto) ---------- */
:root{
  --bg:#F4F6FA;
  --surface:#FFFFFF;
  --text:#1F2937;
  --text2:#6B7280;
  --border:#EAECEF;
  --hover:#F4F6FA;
  --sidebar:#16213E;
  --sb-text:#AEB8CC;
  --sb-hover:#22315A;
  --topbar:#FFFFFF;
  --shadow:0 1px 3px rgba(16,24,40,.07),0 1px 2px rgba(16,24,40,.04);

  /* Acentos de marca (iguales en ambos temas) */
  --teal:#0DCAA8;
  --teal2:#00B894;
  --verde:#10B981;
  --amarillo:#F59E0B;
  --rojo:#EF4444;
  --azul:#3B82F6;
  --morado:#8B5CF6;
}

/* ---------- TEMA OSCURO ---------- */
html[data-theme="dark"]{
  --bg:#0B1220;
  --surface:#16213E;
  --text:#F1F5F9;
  --text2:#94A3B8;
  --border:#243049;
  --hover:#1E2A45;
  --sidebar:#0E1830;
  --sb-text:#AEB8CC;
  --sb-hover:#1E2A45;
  --topbar:#16213E;
  --shadow:0 1px 3px rgba(0,0,0,.35);
}

/* ---------- RESET Y BASE ---------- */
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }

/* Barra de desplazamiento estilizada (igual a las maquetas) */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:rgba(120,130,150,.4); border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ---------- ESTRUCTURA PRINCIPAL ---------- */
.svn-shell{
  display:flex;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
}
.svn-main{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.svn-content{
  flex:1;
  overflow-y:auto;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* ---------- SIDEBAR ---------- */
.svn-sidebar{
  width:264px;
  flex-shrink:0;
  height:100vh;
  position:sticky;
  top:0;
  background:var(--sidebar);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
/* Enlaces del menú: estado normal y hover (convertido de style-hover) */
.svn-nav a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  margin-bottom:3px;
  border-radius:10px;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  color:var(--sb-text);
  transition:background .15s ease,color .15s ease;
}
.svn-nav a i{ width:20px; text-align:center; font-size:16px; }
.svn-nav a:hover{ background:var(--sb-hover); color:#fff; }
/* Enlace activo (página actual) */
.svn-nav a.active{
  color:#fff;
  font-weight:700;
  background:rgba(13,202,168,.16);
  border-left:3px solid var(--teal);
  padding-left:9px;
}
.svn-nav a.active i{ color:var(--teal); }
.svn-nav-group{
  padding:16px 12px 8px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:1.4px;
  color:#5B6B8C;
}

/* ---------- HEADER SUPERIOR ---------- */
.svn-topbar{
  height:66px;
  flex-shrink:0;
  position:sticky;
  top:0;
  z-index:30;
  background:var(--topbar);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 20px;
}
.svn-icon-btn{
  width:40px;height:40px;border:none;border-radius:10px;
  background:var(--hover);color:var(--text);cursor:pointer;font-size:17px;
  display:inline-flex;align-items:center;justify-content:center;
}
.svn-burger{ display:none; }

/* ---------- MENÚ DESPLEGABLE (avatar / notificaciones) ---------- */
.svn-dropwrap{ position:relative; }
.svn-dropdown{
  position:absolute;right:0;top:calc(100% + 8px);min-width:230px;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 12px 34px rgba(16,24,40,.18);padding:8px;z-index:50;display:none;
}
.svn-dropdown.open{ display:block; }
.svn-dropdown a,.svn-dropdown button{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:10px 12px;border:none;background:transparent;border-radius:10px;
  color:var(--text);font-size:13.5px;font-weight:600;cursor:pointer;
  font-family:inherit;text-decoration:none;
}
.svn-dropdown a:hover,.svn-dropdown button:hover{ background:var(--hover); }
.svn-dropdown .danger{ color:var(--rojo); }
.svn-drop-head{
  padding:10px 12px 12px;border-bottom:1px solid var(--border);margin-bottom:6px;
}

/* ---------- FOOTER ---------- */
.svn-footer{
  flex-shrink:0;
  padding:14px 22px;
  border-top:1px solid var(--border);
  background:var(--surface);
  color:var(--text2);
  font-size:12.5px;
  font-weight:500;
  text-align:center;
}

/* ---------- FONDO OSCURO DEL MENÚ MÓVIL ---------- */
.svn-backdrop{ display:none; }

/* ---------- TARJETA GENÉRICA ---------- */
.svn-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
}

/* =====================================================================
   RESPONSIVE (idéntico a las maquetas)
   ===================================================================== */
@media (max-width:1180px){
  .svn-charts,.svn-lists{ flex-direction:column !important; }
  .svn-col{ width:100% !important; flex:1 1 auto !important; }
}
@media (max-width:980px){
  .svn-kpis{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:760px){
  .svn-mini{ grid-template-columns:repeat(2,1fr) !important; }
  .svn-quick{ grid-template-columns:repeat(2,1fr) !important; }
  .svn-sidebar{
    position:fixed !important;top:0;left:0;z-index:60;
    transform:translateX(-100%);transition:transform .26s ease;
  }
  .svn-sidebar.open{ transform:translateX(0); }
  .svn-burger{ display:inline-flex !important; }
  .svn-search{ display:none !important; }
  .svn-backdrop.open{
    display:block;position:fixed;inset:0;
    background:rgba(8,12,24,.45);z-index:55;
  }
  .svn-hide-sm{ display:none !important; }
}
@media (max-width:480px){
  .svn-kpis,.svn-mini,.svn-quick{ grid-template-columns:1fr !important; }
}