/* ===========================================================================
   FIDES · Panel del operador — lo propio del panel, sobre el sistema de
   diseno del frontend principal (sistema-compliance-frontend).

   Orden de carga (index.html):
     ds/fuentes.css  tipografias autoalojadas
     ds/ds.css       componentes .ct-* de Elis (copia, no se edita)
     ds/tokens.css   capa semantica del frontend principal (copia, no se edita)
     app.css         esto: base, correcciones que el principal ya aplica en
                     ds-app.css, y las pocas piezas que el sistema no trae
                     (medidor, interruptor, bloque de entorno).

   Regla: aqui no hay un color, espacio o tamano en crudo que no sea un token
   del sistema. Sin estilos en linea: la CSP es style-src 'self'.
   =========================================================================== */

/* ---- base (de index.css del principal) ---------------------------------- */
body {
  background: var(--lienzo); color: var(--tinta);
  font-size: var(--t-aux); line-height: var(--i-ui);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";
}
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }
.ct-input__control:focus-visible { outline: none; } /* el anillo lo dibuja .ct-input:focus-within */
.ct-table td, .ct-badge, .ct-stat__value, .ct-tabs__tab { font-variant-numeric: tabular-nums; }

/* ---- correcciones de contraste que el principal ya aplica (ds-app.css) ----
   Dos tokens de Elis quedaban a Lc 74-75 contra su fondo; el naranja de
   «en revision» salia marron. Mismos valores. */
:root { --text-secondary: #5E5856; --danger: #AC3535; --warning-ink: #9A4400; }

/* Saltar al contenido: invisible hasta que llega el foco del teclado. */
.ct-skip { position: absolute; left: -9999px; top: var(--space-4); color: var(--wine); }
.ct-skip:focus { left: var(--space-4); z-index: var(--z-toast); padding: var(--space-3) var(--space-4);
  background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-3); }

/* Un hijo de rejilla no encoge por debajo de su contenido minimo. */
.ct-stack > * { min-width: 0; }

/* Una tabla dentro de una tarjeta no lleva su propia caja (Elis prohibe tarjeta dentro de tarjeta). */
.ct-card .ct-table-wrap { border: 0; box-shadow: none; background: none; }
.ct-table-wrap { position: relative; }
@container app (max-width: 639px) {
  div.ct-table-wrap { position: relative; overflow-x: clip; overflow-clip-margin: 8px; }
  .ct-btn { white-space: normal; text-align: center; max-width: 100%; }
}

/* Botones: la sombra del primario sale del vino; el deshabilitado es gris plano, no vino lavado. */
.ct-btn--primary { box-shadow: 0 1px 2px color-mix(in srgb, var(--wine-dark) 30%, transparent); }
.ct-btn--primary:disabled, .ct-btn--primary[aria-disabled="true"] {
  background: color-mix(in srgb, var(--wine) 22%, var(--border));
  color: color-mix(in srgb, var(--text-secondary) 85%, var(--surface));
  border-color: transparent; opacity: 1; box-shadow: none;
}
/* Imagotipo: vino sobre fondo claro. */
.ct-brand--light .ct-brand__mark, .ct-brand--seal .ct-brand__mark { color: var(--wine); }

/* Insignias sin icono: relleno simetrico. */
.ct-badge { padding-inline: var(--space-3); }

/* Con dedo, los tamanos --sm de Elis quedan bajo 44 px. Solo con puntero grueso. */
@media (pointer: coarse) {
  .ct-btn--sm { min-height: 44px; }
  .ct-select--sm .ct-select__control { min-height: 44px; }
  .interruptor { min-height: 44px; }
}

/* ---- acceso: la escena clara de Elis, sin estatua (ds-app.css) -----------
   Es clara por diseno; los derivados se recalculan con los valores claros. */
.ct-auth {
  --cream: #F7F1E9;
  --background: #F3EBDB; --surface: #F9F3E6; --border: #DDD2BD;
  --text-primary: #211A18; --text-secondary: #5E5856;
  --danger: #AC3535;
  --success: #299B68; --success-bg: #E5F4EC; --warning-bg: #FFF3DC;
  --danger-bg: color-mix(in srgb, var(--danger) 10%, #fff);
  --success-ink: color-mix(in srgb, var(--success) 70%, var(--text-primary));
  --warning-ink: #9A4400;
  --wine-tint: color-mix(in srgb, var(--wine) 7%, var(--surface));
  --wine-tint-2: color-mix(in srgb, var(--wine) 11%, var(--surface));
  --border-control: color-mix(in srgb, var(--text-secondary) 62%, var(--border));
  --ink-heading: color-mix(in srgb, var(--wine-dark) 55%, var(--text-primary));
  --shadow-1: 0 1px 2px rgba(23, 32, 27, .06), 0 1px 1px rgba(23, 32, 27, .03);
  --shadow-2: 0 6px 18px -6px rgba(31, 58, 46, .14), 0 2px 4px rgba(23, 32, 27, .04);
  --shadow-3: 0 18px 44px -12px rgba(31, 58, 46, .30), 0 4px 10px rgba(23, 32, 27, .06);
  color: var(--text-primary); color-scheme: light;
  background: radial-gradient(120% 90% at 70% 30%, var(--surface) 0%, var(--cream) 55%, color-mix(in srgb, var(--cream) 86%, var(--wine)) 100%);
}
.ct-auth__grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 560px); }
.ct-auth__brand { grid-column: 1; }
.ct-auth__panel { grid-column: 2; }
@container app (max-width: 1099px) {
  .ct-auth__grid { grid-template-columns: minmax(0, .8fr) minmax(360px, 1fr); }
}
@container app (max-width: 719px) {
  .ct-auth__grid { grid-template-columns: 1fr; padding-top: var(--space-8); }
  .ct-auth__brand { grid-row: 1; align-self: start; margin-bottom: 0; }
  .ct-auth__panel { grid-column: 1; }
}
.ct-login-card .ct-field { gap: var(--space-2); }

/* ---- barra superior ------------------------------------------------------ */
.adm-sep { width: 1px; height: 28px; background: var(--border); flex: none; }
.adm-titulo { font: 600 var(--text-lg)/var(--leading-snug) var(--font-ui); color: var(--text-primary); }
@container app (max-width: 959px) {
  .adm-sep { display: none; }
  .ct-topbar__tools { flex: 1 1 100%; margin-left: 0; flex-wrap: wrap; }
  .ct-topbar__tools #leido { flex: 1 1 100%; }
  .ct-topbar__tools .ct-btn { flex: 1 1 0; }
}

/* ---- pestanas + selector de entorno ------------------------------------- */
.adm-barra { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-3) var(--space-6); margin: var(--space-6) 0; border-bottom: 1px solid var(--border); }
.adm-barra .ct-tabs { flex: 1 1 auto; max-width: 100%; }
.adm-barra .ct-tabs__list { border-bottom: 0; }
.adm-entorno { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-2); }
.adm-entorno .ct-select { width: 15rem; }
.adm-contenido:focus { outline: none; }
@container app (max-width: 639px) {
  .adm-barra { margin: var(--space-4) 0; }
  .adm-entorno { padding: 0 0 var(--space-3); width: 100%; }
  .adm-entorno .ct-select { flex: 1; width: auto; }
}

/* ---- tarjetas, bloques de entorno, cifras -------------------------------- */
.adm-tarjeta { display: grid; gap: var(--space-4); align-content: start; }
.adm-tarjeta > p, .adm-bloque > p { margin: 0; }
.adm-rejilla { display: grid; gap: var(--space-6) var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.adm-bloque { display: grid; gap: var(--space-3); align-content: start; min-width: 0;
  padding-top: var(--space-4); border-top: 1px solid var(--border); }
.adm-bloque > h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  font: 600 var(--text-md)/var(--leading-snug) var(--font-ui); color: var(--text-primary); }
.adm-bloque .ct-stats { gap: var(--space-3) var(--space-6); }
.adm-bloque .ct-stats > .ct-stat + .ct-stat { padding-left: 0; border-left: 0; }
.ct-stat.adm-aviso .ct-stat__value { color: var(--warning-ink); }
.texto-aviso { color: var(--warning-ink); font-weight: 600; }
.lista-simple { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.adm-leyendo { gap: var(--space-3); max-width: none; }
.adm-leyendo .ct-skeleton--text { width: 60%; }

/* Medidor de uso (disco, creditos): pista tintada, relleno vino; en aviso, naranja quemado. */
.medidor { height: 10px; border-radius: var(--radius-pill); overflow: hidden;
  background: var(--wine-tint-2); box-shadow: inset 0 0 0 1px var(--border); }
.medidor > div { height: 100%; border-radius: var(--radius-pill); background: var(--wine); }
.medidor--alto > div { background: var(--warning-ink); }

/* Interruptor Habilitar / Deshabilitar (el sistema no trae uno): pastilla con pista y perilla. */
.interruptor { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 36px;
  padding: 0 var(--space-3) 0 var(--space-2); border: 1px solid var(--border-control); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text-primary); font: 600 var(--text-sm)/1 var(--font-ui);
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.interruptor:hover { background: var(--wine-tint); border-color: var(--text-secondary); }
.interruptor__pista { position: relative; flex: none; width: 34px; height: 20px; border-radius: var(--radius-pill);
  background: var(--text-secondary); transition: background-color var(--dur) var(--ease-out); }
.interruptor__pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--surface); transition: transform var(--dur) var(--ease-out); }
.interruptor[aria-checked="true"] .interruptor__pista { background: var(--success); }
.interruptor[aria-checked="true"] .interruptor__pista::after { transform: translateX(14px); }
.interruptor:disabled { opacity: .45; cursor: progress; }