/* =====================================================================
   SKIN ADMIN / DASHBOARD  (solo presentacion)
   Sistema de color por variables. Para alternar de paleta: comenta el
   bloque :root activo y descomenta el otro.
   ===================================================================== */

/* ====== ALTERNATIVA: Indigo nocturno (descomentar para probar) ======
:root{
  --bg:#F3F4FB;
  --surface:#FFFFFF;
  --line:#ECE9F3;
  --ink:#1F1A33;
  --sub:#7C7690;
  --sidebar:#1E1B4B;
  --sidebar-text:#FFFFFF;
  --sidebar-active-bg:rgba(255,255,255,.15);
  --sidebar-active-bar:#FFFFFF;
  --header:linear-gradient(100deg,#312E81,#4F46E5);
  --p1:#C7D2FE; --p2:#A5B4FC; --p3:#818CF8; --p4:#6366F1; --p5:#4338CA;
  --primary:#4338CA;
}
==================================================================== */

/* ====== PALETA ACTIVA: Ciruela tech ======
   (vars: bg/surface/line/ink/sub, sidebar, header, primary, p1..p5 = escala
   de morados claro->oscuro para los graficos) */
:root{
  --bg:#F7F5FB;
  --surface:#FFFFFF;
  --line:#ECE9F3;
  --ink:#1F1A33;
  --sub:#7C7690;
  --sidebar:#2D1B3D;
  --sidebar-text:#FFFFFF;
  --sidebar-active-bg:rgba(255,255,255,.15);
  --sidebar-active-bar:#FFFFFF;
  --header:#5B21B6;
  --p1:#DDD6FE; --p2:#C4B5FD; --p3:#A78BFA; --p4:#7C3AED; --p5:#5B21B6;
  --primary:#5B21B6;
}

/* =====================================================================
   APLICACION DE VARIABLES
   ===================================================================== */

/* Fondo de la app */
body{ background: var(--bg) !important; color: var(--ink); }

/* ---- Header superior (panel-heading del admin) ---- */
.panel-primary{ border-color: transparent !important; }
.panel-primary > .panel-heading{
  background: var(--header) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.panel-primary > .panel-heading .span_titulo{ color:#fff !important; }

/* ---- Sidebar ---- */
.dash-sidebar{ background: var(--sidebar) !important; }
.dash-sidebar .nav{ width: 100% !important; margin: 0 !important; }

/* La fila (li) NO lleva color de fondo: solo separa con su borde inferior */
.dash-sidebar .nav > li{
  float: none !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

/* El <a> LLENA toda la fila: misma caja en todos los estados.
   Se neutralizan float/margen/radius/sombra que mete Bootstrap. */
.dash-sidebar .nav > li > a{
  display: block !important;
  width: 100% !important;
  height: auto !important;          /* anula el height:27px heredado */
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px 18px !important;
  box-sizing: border-box !important;
  line-height: 20px !important;
  color: var(--sidebar-text) !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 3px solid transparent !important;   /* siempre 3px: evita corrimiento */
  border-radius: 0 !important;
  text-shadow: none !important;
  transition: background-color .12s ease;
}

/* Hover/foco y activo pintan el MISMO elemento (> a) -> area identica,
   solo cambia el color de fondo, nunca el tamano. */
.dash-sidebar .nav > li > a:hover,
.dash-sidebar .nav > li > a:focus{
  color: var(--sidebar-text) !important;
  background: rgba(255,255,255,.10) !important;
  height: auto !important;          /* clave: el hover heredado forzaba 27px */
  outline: none !important;
}
.dash-sidebar .activado{ height: auto !important; background: transparent !important; }
.dash-sidebar .activado > a{
  color: var(--sidebar-text) !important;
  background: rgba(255,255,255,.14) !important;
  border-left: 3px solid var(--sidebar-active-bar) !important;
}

/* ---- Acentos / badges / controles ---- */
.label-primary{ background-color: var(--primary) !important; }
.text-primary{ color: var(--primary) !important; }
.btn-primary{ background-color: var(--primary) !important; background-image: none !important; border-color: var(--primary) !important; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active{
  background-color: var(--p5) !important; background-image: none !important; border-color: var(--p5) !important;
}
.form-control:focus{
  border-color: var(--primary) !important;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0 3px rgba(91,33,182,.18) !important;
}
a{ color: var(--primary); }
a:hover{ color: var(--primary); filter: brightness(.9); }
.campos:focus{
  border-color: var(--primary);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0 3px rgba(91,33,182,.18);
}
.nav li a .glyphicon{ opacity:.85; }

/* Tablas de filtro celestes (#e7f4ff) -> superficie de la skin */
table[style*="#e7f4ff"], td[style*="#e7f4ff"]{ background: var(--surface) !important; }

/* Texto secundario del resumen */
.page-header{ border-bottom: 1px solid var(--line); }
.page-header h3{ color: var(--ink); }
h3 i{ color: var(--sub); }

/* =====================================================================
   LAYOUT: sidebar fijo full-height a la izquierda (por delante) y el
   header + contenido corridos a la derecha.
   ===================================================================== */
.dash-sidebar{
  position: fixed !important;
  top: 0; left: 0;
  width: 220px !important;
  height: 100vh !important;
  z-index: 1030;
  overflow-y: auto;
  padding-top: 16px !important;
  box-shadow: 2px 0 18px -8px rgba(0,0,0,.35);
}
/* el panel (barra superior + contenido) arranca despues del sidebar */
.panel-primary{ margin-left: 220px !important; }
.panel-primary > .panel-heading{ border-radius: 0 !important; }

/* ---- Tarjetas de graficos (dashboard) ---- */
.dash-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px 10px;
  box-shadow: 0 6px 22px -16px rgba(31,26,51,.4);
  margin-bottom: 16px;
}