/* =============================================================
   CVL — Hoja de estilos global
   Todos los estilos del sitio deben vivir aqui.
   ============================================================= */


/* ── Variables corporativas ─────────────────────────────────── */
:root {
  --cvl-bg:           #090d14;
  --cvl-bg-soft:      #111821;
  --cvl-panel:        rgba(255, 255, 255, 0.085);
  --cvl-panel-strong: rgba(255, 255, 255, 0.12);
  --cvl-border:       rgba(255, 255, 255, 0.16);
  --cvl-border-strong:rgba(255, 255, 255, 0.26);
  --cvl-wine:         #8c2f39;
  --cvl-wine-dark:    #75222d;
  --cvl-gold:         #e8c7a0;
  --cvl-text:         #f8fafc;
  --cvl-muted:        #c8d0dc;
  --cvl-dim:          #8792a2;
  --cvl-green:        #74d7b6;
  --cvl-red:          #f09595;
  --cvl-yellow:       #f0c376;
  --cvl-blue:         #85b7eb;
  --cvl-lavender:     #afa9ec;
}


/* ── Tipografia base ─────────────────────────────────────────── */
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, 'Noto Sans', sans-serif;
}


/* ── Logout (navbar base) ────────────────────────────────────── */
.logout-form  { display: contents; }
.logout-btn   {
  background:  none;
  border:      none;
  cursor:      pointer;
  font-size:   inherit;
  font-family: inherit;
  transition:  background-color 0.2s;
}
.logout-btn:hover { background-color: hsl(var(--b2)); }


/* ── Login ───────────────────────────────────────────────────── */
body.login-page > main {
  max-width: none;
  padding:   0;
}

.login-page input[type="text"],
.login-page input[type="email"],
.login-page input[type="password"] {
  width:         100%;
  min-height:    3.25rem;
  border-radius: 0.875rem;
  border:        1px solid rgba(55, 65, 81, 0.18);
  background:    rgba(255, 255, 255, 0.96);
  color:         #172033;
  font-size:     1rem;
  padding:       0 1rem;
  outline:       none;
  box-shadow:    0 1px 2px rgba(15, 23, 42, 0.05);
  transition:    border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.login-page input[type="text"]:focus,
.login-page input[type="email"]:focus,
.login-page input[type="password"]:focus {
  border-color: #8c2f39;
  background:   #ffffff;
  box-shadow:   0 0 0 4px rgba(140, 47, 57, 0.12);
}


/* ── Dashboard ───────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spin 1s linear infinite; }

body.dashboard-page {
  background: var(--cvl-bg);
  color:      var(--cvl-text);
}

body.dashboard-page > main {
  max-width:      none;
  width:          100%;
  margin:         0;
  padding:        0;
  display:        flex;
  flex-direction: column;
  min-height:     0;
}

body.dashboard-page,
html { overflow-x: hidden; }

.dashboard-header {
  background: linear-gradient(
    135deg,
    rgba(117, 34, 45, 0.92),
    rgba(9, 13, 20, 0.98) 48%,
    rgba(6, 10, 16, 1)
  );
  border-bottom: 1px solid var(--cvl-border);
}

.dashboard-shell {
  background:
    radial-gradient(circle at 12% 12%, rgba(140, 47, 57, 0.3),  transparent 34%),
    radial-gradient(circle at 88%  8%, rgba(133, 183, 235, 0.12), transparent 28%),
    linear-gradient(135deg, #111821 0%, #090d14 56%, #070a10 100%);
}


/* ── Tarjetas BSC ────────────────────────────────────────────── */
.bsc-card {
  background:    var(--cvl-panel);
  border:        1px solid var(--cvl-border);
  border-radius: 0.875rem;
  box-shadow:    0 18px 50px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(10px);
}

.bsc-card-strong {
  background:   var(--cvl-panel-strong);
  border-color: var(--cvl-border-strong);
}


/* ── Etiquetas ───────────────────────────────────────────────── */
.kpi-label,
.panel-label {
  color:           var(--cvl-muted);
  text-transform:  uppercase;
  letter-spacing:  0.08em;
}


/* ── Metricas (colores semanticos) ───────────────────────────── */
.metric-good    { color: var(--cvl-green);  }
.metric-bad     { color: var(--cvl-red);    }
.metric-warn    { color: var(--cvl-yellow); }
.metric-neutral { color: var(--cvl-text);   }


/* ── Semaforos ───────────────────────────────────────────────── */
.status-dot {
  display:      inline-block;
  width:        0.65rem;
  height:       0.65rem;
  border-radius: 999px;
  box-shadow:   0 0 0 3px rgba(255, 255, 255, 0.08);
}
.status-good { background: var(--cvl-green);  }
.status-bad  { background: var(--cvl-red);    }
.status-warn { background: var(--cvl-yellow); }


/* ── Barra de progreso ───────────────────────────────────────── */
.track {
  background:    rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow:      hidden;
}


/* ── Alertas ─────────────────────────────────────────────────── */
.alert-danger {
  background: rgba(240, 149, 149, 0.13);
  border:     1px solid rgba(240, 149, 149, 0.28);
  color:      #ffd2d2;
}

.alert-warn {
  background: rgba(240, 195, 118, 0.13);
  border:     1px solid rgba(240, 195, 118, 0.28);
  color:      #ffe1a8;
}

.alert-ok {
  background: rgba(116, 215, 182, 0.13);
  border:     1px solid rgba(116, 215, 182, 0.28);
  color:      #baf5df;
}


/* ── Sub-header de dashboards (titulo + descripcion + back) ──── */
.dash-subheader {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  padding:         0.85rem 1.25rem;
  border-bottom:   1px solid var(--cvl-border);
  background:      linear-gradient(180deg, rgba(140, 47, 57, 0.12), rgba(9, 13, 20, 0));
}
.dash-subheader__title {
  font-size:      1.15rem;
  font-weight:    600;
  color:          var(--cvl-text);
  letter-spacing: 0.02em;
}
.dash-subheader__desc {
  font-size:   0.78rem;
  color:       var(--cvl-muted);
  margin-top:  0.15rem;
  max-width:   62ch;
}
.dash-subheader__actions {
  display:     flex;
  gap:         0.5rem;
  align-items: center;
  flex-shrink: 0;
}

/* ── Boton tipo "ghost" sobre fondo oscuro ───────────────────── */
.btn-cvl-ghost {
  display:        inline-flex;
  align-items:    center;
  gap:            0.4rem;
  background:     var(--cvl-panel);
  border:         1px solid var(--cvl-border);
  color:          var(--cvl-text);
  padding:        0.45rem 0.85rem;
  border-radius:  0.75rem;
  font-size:      0.78rem;
  font-weight:    500;
  cursor:         pointer;
  text-decoration: none;
  transition:     background-color 160ms ease, border-color 160ms ease;
}
.btn-cvl-ghost:hover {
  background:   var(--cvl-panel-strong);
  border-color: var(--cvl-border-strong);
}
.btn-cvl-primary {
  display:        inline-flex;
  align-items:    center;
  gap:            0.45rem;
  background:     var(--cvl-wine);
  border:         1px solid var(--cvl-wine);
  color:          #fff;
  padding:        0.45rem 0.9rem;
  border-radius:  0.75rem;
  font-size:      0.78rem;
  font-weight:    600;
  cursor:         pointer;
  text-decoration: none;
  transition:     background-color 160ms ease;
}
.btn-cvl-primary:hover { background: var(--cvl-wine-dark); }


/* ── Boton flotante (FAB) para abrir el menu de dashboards ──── */
.dash-fab {
  position:        fixed;
  right:           1.25rem;
  bottom:          1.25rem;
  z-index:         70;
  display:         inline-flex;
  align-items:     center;
  gap:             0.55rem;
  padding:         0.85rem 1.1rem;
  border-radius:   999px;
  background:      linear-gradient(135deg, var(--cvl-wine) 0%, var(--cvl-wine-dark) 100%);
  color:           #fff;
  border:          1px solid rgba(232, 199, 160, 0.45);
  box-shadow:      0 18px 38px rgba(0, 0, 0, 0.45),
                   0 0 0 6px rgba(140, 47, 57, 0.18);
  cursor:          pointer;
  font-size:       0.85rem;
  font-weight:     600;
  letter-spacing:  0.02em;
  transition:      transform 160ms ease, box-shadow 160ms ease;
}
.dash-fab:hover  { transform: translateY(-2px); }
.dash-fab:active { transform: translateY(0); }
.dash-fab i      { font-size: 1.45rem; line-height: 1; }
.dash-fab__label { white-space: nowrap; }

@media (max-width: 640px) {
  .dash-fab        { right: 0.9rem; bottom: 0.9rem; padding: 0.85rem; }
  .dash-fab__label { display: none; }
}


/* ── Menu overlay a pantalla completa (touch friendly) ───────── */
.dash-menu {
  position:        fixed;
  inset:           0;
  z-index:         80;
  background:      linear-gradient(160deg, rgba(117, 34, 45, 0.96) 0%, rgba(9, 13, 20, 0.98) 55%, rgba(6, 10, 16, 1) 100%);
  backdrop-filter: blur(6px);
  display:         flex;
  flex-direction:  column;
  opacity:         0;
  pointer-events:  none;
  transform:       scale(0.985);
  transition:      opacity 200ms ease, transform 220ms ease;
  overflow:        hidden;
}
.dash-menu.is-open {
  opacity:         1;
  pointer-events:  auto;
  transform:       scale(1);
}

.dash-menu__topbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.1rem 1.5rem;
  border-bottom:   1px solid var(--cvl-border);
  flex-shrink:     0;
}
.dash-menu__brand        { display: flex; flex-direction: column; gap: 0.15rem; }
.dash-menu__eyebrow      {
  font-size:      0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color:          var(--cvl-gold);
  font-weight:    600;
}
.dash-menu__title        {
  font-size:    1.5rem;
  font-weight:  600;
  color:        var(--cvl-text);
  line-height:  1.1;
}
.dash-menu__close {
  width:           3rem;
  height:          3rem;
  border-radius:   999px;
  border:          1px solid var(--cvl-border-strong);
  background:      var(--cvl-panel);
  color:           var(--cvl-text);
  cursor:          pointer;
  font-size:       1.6rem;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  transition:      background-color 160ms ease;
}
.dash-menu__close:hover { background: var(--cvl-panel-strong); }

.dash-menu__body {
  flex:       1;
  overflow-y: auto;
  padding:    1.5rem 1.5rem 2rem;
}
.dash-menu__group {
  font-size:      0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color:          var(--cvl-dim);
  margin:         1.25rem 0 0.85rem;
  padding-bottom: 0.4rem;
  border-bottom:  1px solid var(--cvl-border);
}
.dash-menu__group:first-child { margin-top: 0; }

.dash-menu__grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:                   1rem;
}

.dash-menu__card {
  display:         flex;
  flex-direction:  column;
  gap:             0.45rem;
  padding:         1.25rem 1.1rem;
  border-radius:   1rem;
  background:      var(--cvl-panel);
  border:          1px solid var(--cvl-border);
  color:           var(--cvl-text);
  text-decoration: none;
  min-height:      120px;
  cursor:          pointer;
  transition:      background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.dash-menu__card:hover {
  background:   var(--cvl-panel-strong);
  border-color: var(--cvl-border-strong);
  transform:    translateY(-2px);
}
.dash-menu__card.is-active {
  background:   rgba(140, 47, 57, 0.32);
  border-color: rgba(232, 199, 160, 0.55);
}
.dash-menu__icon {
  font-size:    2rem;
  line-height:  1;
}
.dash-menu__name {
  font-size:   1.05rem;
  font-weight: 600;
  color:       var(--cvl-text);
}
.dash-menu__desc {
  font-size: 0.82rem;
  color:     var(--cvl-muted);
}

.dash-menu__footer {
  padding:         0.85rem 1.5rem;
  border-top:      1px solid var(--cvl-border);
  font-size:       0.78rem;
  color:           var(--cvl-dim);
  text-align:      center;
  flex-shrink:     0;
}
.dash-kbd {
  display:        inline-block;
  padding:        0.1rem 0.45rem;
  border-radius:  0.4rem;
  background:     var(--cvl-panel-strong);
  border:         1px solid var(--cvl-border-strong);
  color:          var(--cvl-text);
  font-family:    ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size:      0.78rem;
  margin:         0 0.15rem;
}


/* ── KPI tile general reutilizable ───────────────────────────── */
.kpi-tile {
  display:        flex;
  flex-direction: column;
  gap:            0.2rem;
  padding:        0.85rem 0.95rem;
}
.kpi-tile .kpi-value {
  font-size:    1.65rem;
  font-weight:  600;
  line-height:  1.05;
  margin-top:   0.1rem;
}
.kpi-tile .kpi-detail {
  font-size:    0.7rem;
  color:        var(--cvl-muted);
}
.kpi-tile .kpi-meta {
  font-size:    0.7rem;
  color:        var(--cvl-dim);
  margin-top:   auto;
  padding-top:  0.35rem;
  display:      flex;
  gap:          0.35rem;
  align-items:  center;
}


/* ── Pills de alertas / bullets ──────────────────────────────── */
.bullet-list {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.4rem;
}
.bullet-list .pill {
  display:       inline-flex;
  align-items:   center;
  gap:           0.4rem;
  padding:       0.35rem 0.7rem;
  border-radius: 999px;
  font-size:     0.72rem;
}


/* ── Responsive: tablets y mobiles ───────────────────────────── */
@media (max-width: 1100px) {
  body.dashboard-page.overflow-hidden { overflow-y: auto !important; }
  body.dashboard-page.h-screen        { height: auto !important; min-height: 100vh; }
  .dashboard-shell                    { padding: 1rem !important; }
}

@media (max-width: 760px) {
  .dashboard-header {
    flex-direction: column;
    align-items:    flex-start;
    gap:            0.5rem;
    padding:        0.85rem 1rem !important;
  }
  .dash-subheader {
    flex-direction: column;
    align-items:    flex-start;
  }
  .dash-subheader__actions { width: 100%; justify-content: flex-end; }
  .kpi-tile .kpi-value     { font-size: 1.35rem; }
}