:root, [data-bs-theme="dark"] {
  /* Paleta base (Tema::css() la sobreescribe con los 5 colores de la BD) */
  --violeta:      #4E3D8F;   /* marca / botones            */
  --tinta:        #16121F;   /* fondo espacial             */
  --violeta-luz:  #9D8AE8;   /* acento / brillos / hovers  */
  --violeta-neon: #9D8AE8;
  --tinta-2:      #221B33;   /* superficie clay            */
  --halo:         #CFC7EA;   /* texto suave                */
  --hueso:        #F4F2FA;   /* texto principal            */

  /* Semáforo (fijo: es lenguaje funcional, no de marca) */
  --ok:      #3FC796;
  --alerta:  #E8B23F;
  --peligro: #E4566B;
  --info:    #5FA8E8;

  /* Relieve clay */
  --sombra-clay: 10px 10px 24px rgba(0, 0, 0, .5),
                 -4px -4px 10px color-mix(in srgb, var(--violeta-luz) 8%, transparent),
                 inset 1px 1px 0 rgba(255, 255, 255, .06);
  --sombra-clay-hundida: inset 5px 5px 12px rgba(0, 0, 0, .45),
                         inset -2px -2px 6px color-mix(in srgb, var(--violeta-luz) 10%, transparent);
  --radio-clay: 22px;
  --radio-boton: 14px;

  /* Puentes a Bootstrap */
  --bs-body-bg: var(--tinta);
  --bs-body-color: var(--hueso);
  --bs-secondary-color: var(--halo);
  --bs-border-color: color-mix(in srgb, var(--violeta-luz) 18%, transparent);
  --bs-primary: var(--violeta-luz);
  --bs-body-font-family: 'Space Grotesk', system-ui, sans-serif;
  --bs-font-monospace: 'Space Mono', monospace;
}

/* =====================================================================
   Fondo espacial y tipografía base
   ===================================================================== */
body {
  min-height: 100vh;
  background:
    radial-gradient(600px 420px at 85% -5%,
      color-mix(in srgb, var(--violeta-luz) 20%, transparent), transparent 65%),
    radial-gradient(720px 540px at -10% 105%,
      color-mix(in srgb, var(--violeta) 26%, transparent), transparent 65%),
    var(--tinta);
  background-attachment: fixed;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: .01em;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  letter-spacing: .02em;
}

.font-monospace, .dato-mono, .link-grupo {
  font-family: 'Space Mono', monospace !important;
  font-size: .82rem;
}
.dato-mono { color: var(--halo); }
.text-secondary { color: var(--halo) !important; }

/* =====================================================================
   LAYOUT — flex a prueba de desbordes
   ===================================================================== */
@media (min-width: 992px) {
  body:has(> .sidebar) {
    display: flex;
    align-items: stretch;
  }

  body:has(> .sidebar) > .sidebar {
    flex: 0 0 240px;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 16px 0 16px 16px;
    background: transparent;
    border: 0;
  }

  /* La tarjeta clay es el interior; el aside solo reserva la columna */
  body:has(> .sidebar) > .sidebar .offcanvas-body {
    background: linear-gradient(
      165deg,
      color-mix(in srgb, var(--tinta-2) 92%, white 8%),
      var(--tinta-2)
    );
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radio-clay);
    box-shadow: var(--sombra-clay);
    height: 100%;
  }

  body:has(> .sidebar) > .contenido-principal {
    flex: 1 1 auto;
    min-width: 0; /* permite que las tablas encojan en vez de desbordar */
  }
}

/* En móvil el aside es offcanvas estándar de Bootstrap */
@media (max-width: 991.98px) {
  .sidebar {
    width: 260px;
    background: linear-gradient(165deg,
      color-mix(in srgb, var(--tinta-2) 92%, white 8%), var(--tinta-2));
  }
}

.topbar-movil {
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--tinta-2) 92%, white 8%), var(--tinta-2));
  border-bottom: 1px solid var(--bs-border-color);
}

.pie-sidebar { border-top: 1px solid var(--bs-border-color); }

/* =====================================================================
   Marca
   ===================================================================== */
.marca-bloques span {
  display: inline-block;
  background: var(--hueso);
  color: var(--tinta);
  font-weight: 700;
  letter-spacing: .06em;
  padding: 2px 8px;
  margin-bottom: 4px;
  width: max-content;
  border-radius: 4px;
}
.marca-bloques span:nth-child(2) { background: var(--violeta-luz); }

.marca-bloques.marca-inline {
  background: var(--hueso);
  color: var(--tinta);
  font-weight: 700;
  letter-spacing: .08em;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: .9rem;
}

.logo-sidebar {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 20px;
  background: var(--hueso);
  padding: 8px;
  box-shadow: var(--sombra-clay);
}

/* =====================================================================
   Navegación clay
   ===================================================================== */
.nav-clay {
  display: block;
  padding: 11px 16px;
  border-radius: var(--radio-boton);
  color: var(--halo);
  text-decoration: none;
  font-weight: 500;
  transition: color .12s, box-shadow .12s, background .12s;
}
.nav-clay:hover {
  color: var(--hueso);
  background: color-mix(in srgb, var(--violeta-luz) 10%, transparent);
}
.nav-clay.activo {
  color: var(--violeta-luz);
  background: var(--tinta);
  box-shadow: var(--sombra-clay-hundida);
}

/* =====================================================================
   Superficies
   ===================================================================== */
.card {
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--tinta-2) 92%, white 8%), var(--tinta-2));
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radio-clay);
  box-shadow: var(--sombra-clay);
}

.form-angosto { max-width: 780px; }

/* =====================================================================
   Botones
   ===================================================================== */
.btn {
  border-radius: var(--radio-boton);
  font-weight: 600;
  letter-spacing: .02em;
  transition: transform .08s, box-shadow .12s, filter .12s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); filter: brightness(.96); }

.btn-primary {
  --bs-btn-bg: var(--violeta);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--violeta-luz);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--violeta);
  --bs-btn-active-border-color: transparent;
  --bs-btn-color: var(--hueso);
  --bs-btn-hover-color: var(--tinta);
  --bs-btn-active-color: var(--hueso);
  box-shadow: 6px 6px 14px rgba(0, 0, 0, .45),
              -3px -3px 8px color-mix(in srgb, var(--violeta-luz) 12%, transparent),
              inset 1px 1px 0 rgba(255, 255, 255, .12);
}
.btn-primary:active { box-shadow: var(--sombra-clay-hundida); }

.btn-clay,
.btn-outline-secondary, .btn-outline-primary, .btn-outline-info,
.btn-outline-success, .btn-outline-warning, .btn-outline-danger {
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--tinta-2) 92%, white 8%), var(--tinta-2));
  border: 1px solid color-mix(in srgb, var(--violeta-luz) 20%, transparent);
  box-shadow: 5px 5px 12px rgba(0, 0, 0, .40),
              -2px -2px 6px color-mix(in srgb, var(--violeta-luz) 8%, transparent);
}
.btn-clay { color: var(--halo); }
.btn-clay:hover { color: var(--hueso); border-color: var(--violeta-luz); }

.btn-outline-secondary { --bs-btn-color: var(--halo);        --bs-btn-hover-bg: transparent; --bs-btn-hover-color: var(--hueso); --bs-btn-hover-border-color: var(--violeta-luz); }
.btn-outline-primary   { --bs-btn-color: var(--violeta-luz); --bs-btn-hover-bg: var(--violeta); --bs-btn-hover-color: var(--hueso); --bs-btn-hover-border-color: transparent; }
.btn-outline-info      { --bs-btn-color: var(--info);        --bs-btn-hover-bg: transparent; --bs-btn-hover-color: var(--hueso); --bs-btn-hover-border-color: var(--info); }
.btn-outline-success   { --bs-btn-color: var(--ok);          --bs-btn-hover-bg: transparent; --bs-btn-hover-color: var(--hueso); --bs-btn-hover-border-color: var(--ok); }
.btn-outline-warning   { --bs-btn-color: var(--alerta);      --bs-btn-hover-bg: transparent; --bs-btn-hover-color: var(--hueso); --bs-btn-hover-border-color: var(--alerta); }
.btn-outline-danger    { --bs-btn-color: var(--peligro);     --bs-btn-hover-bg: transparent; --bs-btn-hover-color: var(--hueso); --bs-btn-hover-border-color: var(--peligro); }

/* =====================================================================
   Formularios
   ===================================================================== */
.form-control, .form-select {
  background: var(--tinta);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radio-boton);
  color: var(--hueso);
  box-shadow: var(--sombra-clay-hundida);
}
.form-control:focus, .form-select:focus {
  background: var(--tinta);
  color: var(--hueso);
  border-color: var(--violeta-luz);
  box-shadow: var(--sombra-clay-hundida),
              0 0 0 3px color-mix(in srgb, var(--violeta-luz) 25%, transparent);
}
.form-control::placeholder { color: color-mix(in srgb, var(--halo) 45%, transparent); }
.form-label { color: var(--halo); font-size: .86rem; }

input[type="color"].form-control-color { padding: 4px; height: 44px; }

/* Botón ojo (inyectado por app.js) */
.grupo-clave .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-ojo {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  min-width: 52px;
  font-size: 1.05rem;
  line-height: 1;
}

:focus-visible { outline: 2px solid var(--violeta-luz); outline-offset: 2px; }

@media (max-width: 991.98px) {
  .form-control, .form-select, .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }
}

/* =====================================================================
   Tablas, badges, alerts
   ===================================================================== */
.table { --bs-table-bg: transparent; --bs-table-color: var(--hueso); }
.table > :not(caption) > * > * {
  border-bottom-color: color-mix(in srgb, var(--violeta-luz) 12%, transparent);
  padding-top: .65rem;
  padding-bottom: .65rem;
}
.table thead th {
  color: var(--halo);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}

.badge { border-radius: 8px; font-weight: 600; letter-spacing: .03em; }
.badge.text-bg-success   { background: color-mix(in srgb, var(--ok) 18%, transparent) !important;      color: var(--ok) !important; }
.badge.text-bg-warning   { background: color-mix(in srgb, var(--alerta) 18%, transparent) !important;  color: var(--alerta) !important; }
.badge.text-bg-danger    { background: color-mix(in srgb, var(--peligro) 18%, transparent) !important; color: var(--peligro) !important; }
.badge.text-bg-info      { background: color-mix(in srgb, var(--info) 18%, transparent) !important;    color: var(--info) !important; }
.badge.text-bg-secondary { background: color-mix(in srgb, var(--violeta-luz) 16%, transparent) !important; color: var(--halo) !important; }

.alert { border-radius: var(--radio-boton); border: 1px solid transparent; }
.alert-success { background: color-mix(in srgb, var(--ok) 12%, transparent);      border-color: color-mix(in srgb, var(--ok) 35%, transparent);      color: var(--ok); }
.alert-danger  { background: color-mix(in srgb, var(--peligro) 12%, transparent); border-color: color-mix(in srgb, var(--peligro) 35%, transparent); color: var(--peligro); }

.chip-color {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .35);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* =====================================================================
   v4 — modal de confirmación clay y biblioteca de logos
   ===================================================================== */
.modal-clay {
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--tinta-2) 92%, white 8%), var(--tinta-2));
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radio-clay);
  box-shadow: var(--sombra-clay);
  color: var(--hueso);
}
.modal-backdrop.show { opacity: .7; }

.mini-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 12px;
  background: var(--hueso);
  padding: 5px;
  box-shadow: var(--sombra-clay-hundida);
}

/* ============================ v5 ============================ */
.btn-whatsapp {
  --bs-btn-bg: #1DA851;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: #24C25F;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  box-shadow: 5px 5px 12px rgba(0,0,0,.4);
}

.link-acento { color: var(--violeta-luz); text-decoration: none; }
.link-acento:hover { color: var(--hueso); text-decoration: underline; }

/* Tarjetas KPI de reportes */
.kpi { text-align: center; padding: 18px 12px; }
.kpi .valor {
  font-family: 'Space Mono', monospace;
  font-size: 2rem;
  font-weight: 700;
  color: var(--violeta-luz);
  line-height: 1.1;
}
.kpi .etiqueta {
  color: var(--halo);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.kpi.kpi-alerta .valor  { color: var(--alerta); }
.kpi.kpi-peligro .valor { color: var(--peligro); }
.kpi.kpi-ok .valor      { color: var(--ok); }

.grafico-caja { position: relative; height: 300px; }