/* CataGo — tokens de color. Fuente unica de verdad.
   No escribas colores literales fuera de este archivo.
   Bloque 1 = escala cruda. Bloque 2 = semanticos.
   En los componentes usa SOLO los del bloque 2. */
:root {
  /* ---------- BLOQUE 1: escala cruda ---------- */
  /* Azul de marca */
  --cg-azul-50:  #EFF6FD;
  --cg-azul-100: #DBEAFA;
  --cg-azul-200: #B8D4F3;
  --cg-azul-250: #A9C6E6;  /* texto sobre la barra lateral oscura */
  --cg-azul-300: #8ABAEA;
  --cg-azul-400: #4E93D8;
  --cg-azul-500: #2C7FCF;
  --cg-azul-600: #1A6FC4;  /* COLOR DE MARCA */
  --cg-azul-700: #1559A0;
  --cg-azul-800: #10457C;
  --cg-azul-900: #0C3560;
  /* Naranja de accion */
  --cg-naranja-50:  #FFF3EC;
  --cg-naranja-100: #FFE1D0;
  --cg-naranja-300: #FFB489;
  --cg-naranja-500: #FF7A33;  /* COLOR DE ACCION */
  --cg-naranja-600: #ED6418;
  --cg-naranja-700: #C44F0C;
  /* Neutros frios, derivados de la tinta */
  --cg-tinta:    #12202E;
  --cg-gris-800: #1E3040;
  --cg-gris-700: #33475A;
  --cg-gris-600: #43535F;
  --cg-gris-500: #647380;
  --cg-gris-450: #7A8792;  /* borde de elementos interactivos: 3.68:1 sobre blanco, 3.40:1 sobre el fondo hueso */
  --cg-gris-400: #8A98A3;
  --cg-gris-300: #C4CCD3;
  --cg-gris-200: #E1E5E9;
  --cg-gris-100: #EFF1F3;
  --cg-gris-50:  #F7F8F9;
  --cg-blanco:   #FFFFFF;
  /* Estados crudos */
  --cg-verde:    #15803D;
  --cg-verde-bg: #E8F6EE;
  --cg-ambar:    #B45309;
  --cg-ambar-bg: #FEF3E2;
  --cg-rojo:     #C0392B;
  --cg-rojo-osc: #A32E22;
  --cg-rojo-bg:  #FBEAE8;
  /* ---------- BLOQUE 2: semanticos ---------- */
  /* Fondos y superficies */
  --cg-fondo:            #F7F6F3;   /* fondo general de pagina */
  --cg-superficie:       var(--cg-blanco);   /* tarjetas, tablas, paneles */
  --cg-superficie-alta:  var(--cg-blanco);   /* modales, menus flotantes */
  --cg-superficie-sutil: var(--cg-gris-50);  /* zonas hundidas, encabezados */
  --cg-fondo-oscuro:     #0A1119;   /* pie de pagina, franjas oscuras */
  /* Profundidad: una sola decision de sistema, para no repetir la sombra en cada componente */
  --cg-sombra-1: 0 1px 2px rgba(18, 32, 46, .05);   /* tarjetas, tablas */
  --cg-sombra-2: 0 8px 24px rgba(18, 32, 46, .12);  /* modales, menus flotantes */
  --cg-velo:             rgba(18, 32, 46, .55);  /* fondo detras del modal */
  /* Texto */
  --cg-texto:           var(--cg-tinta);
  --cg-texto-suave:     var(--cg-gris-600);
  --cg-texto-tenue:     var(--cg-gris-500);
  --cg-texto-invertido: var(--cg-blanco);
  /* Bordes y foco */
  --cg-borde:        var(--cg-gris-200);   /* separadores entre cosas de la misma superficie: no es un limite de control, no le aplica el minimo 3:1 */
  --cg-borde-fuerte: var(--cg-gris-450);
  --cg-foco:         rgba(26, 111, 196, .35);
  /* Enlaces */
  --cg-enlace:       var(--cg-azul-600);
  --cg-enlace-hover: var(--cg-azul-700);
  /* Boton primario: la accion normal del panel (Guardar, Agregar, Entrar) */
  --cg-btn-primario-bg:        var(--cg-azul-600);
  --cg-btn-primario-bg-hover:  var(--cg-azul-700);
  --cg-btn-primario-bg-activo: var(--cg-azul-800);
  --cg-btn-primario-texto:     var(--cg-blanco);
  /* Boton primario SOBRE CROMO OSCURO (barra superior, barra lateral).
     Ahi el primario se invierte: ningun relleno de color medio llega a 3:1
     contra #0C3560 (azul-600 da 2.43:1, verde 2.47:1), asi que el relleno es
     blanco y el texto azul oscuro. 12.40:1 en las dos direcciones, sin borde. */
  --cg-btn-sobre-oscuro-bg:       var(--cg-blanco);
  --cg-btn-sobre-oscuro-bg-hover: var(--cg-azul-100);
  --cg-btn-sobre-oscuro-texto:    var(--cg-azul-900);
  --cg-btn-sobre-oscuro-borde:    transparent;
  /* Blancos translucidos del cromo oscuro. Son los mismos en el panel del
     2CLIENTE y en el del 1CREADOR: viven aqui para que no se separen. */
  --cg-sobre-oscuro-sutil:       rgba(255, 255, 255, .12);  /* relleno en reposo */
  --cg-sobre-oscuro-sutil-hover: rgba(255, 255, 255, .22);
  --cg-sobre-oscuro-borde:       rgba(255, 255, 255, .40);  /* limite de control: 3.28:1 sobre la barra */
  --cg-sobre-oscuro-tenue:       rgba(255, 255, 255, .55);
  --cg-sobre-oscuro-foco:        rgba(255, 255, 255, .70);
  /* Boton de accion: comprar en el catalogo, compartir en el panel */
  --cg-btn-accion-bg:       var(--cg-naranja-500);
  --cg-btn-accion-bg-hover: var(--cg-naranja-600);
  --cg-btn-accion-texto:    var(--cg-tinta);
  /* El relleno naranja de marca no llega a 3:1 contra una tarjeta blanca
     (2.60:1) y no se puede oscurecer sin perder la marca: lo define el borde. */
  --cg-btn-accion-borde:    var(--cg-naranja-700);
  /* Boton secundario */
  --cg-btn-sec-bg:       transparent;
  --cg-btn-sec-borde:    var(--cg-gris-450);  /* el borde es lo unico que define al boton secundario: necesita 3:1 */
  --cg-btn-sec-texto:    var(--cg-gris-700);
  --cg-btn-sec-bg-hover: var(--cg-gris-100);
  /* Boton destructivo (eliminar producto, eliminar catalogo) */
  --cg-btn-peligro-bg:       var(--cg-rojo);
  --cg-btn-peligro-bg-hover: var(--cg-rojo-osc);
  --cg-btn-peligro-texto:    var(--cg-blanco);
  /* Deshabilitado */
  --cg-inactivo-bg:    var(--cg-gris-200);
  --cg-inactivo-texto: var(--cg-gris-400);
  /* Formularios */
  --cg-campo-bg:           var(--cg-blanco);
  --cg-campo-bg-inactivo:  var(--cg-gris-100);
  --cg-campo-texto:        var(--cg-texto);
  --cg-campo-placeholder:  var(--cg-gris-500);
  --cg-campo-borde:        var(--cg-gris-450);
  --cg-campo-borde-hover:  var(--cg-gris-500);  /* el hover OSCURECE el borde, no lo aclara */
  --cg-campo-borde-foco:   var(--cg-azul-600);
  --cg-campo-borde-error:  var(--cg-rojo);
  --cg-etiqueta:           var(--cg-gris-700);
  --cg-ayuda:              var(--cg-gris-600);
  --cg-error-texto:        var(--cg-rojo);
  /* Navegacion / barra lateral del panel — ambiente D, barra oscura.
     Esta es la unica zona del panel con fondo oscuro. El contenido sigue claro. */
  --cg-nav-bg:                var(--cg-azul-900);   /* #0C3560 */
  --cg-nav-borde:             var(--cg-azul-900);
  --cg-nav-texto:             var(--cg-blanco);     /* el nombre CataGo en la barra */
  --cg-nav-item:              var(--cg-azul-250);   /* #A9C6E6 */
  --cg-nav-item-hover-bg:     var(--cg-azul-800);   /* #10457C */
  --cg-nav-item-hover-texto:  var(--cg-blanco);
  --cg-nav-item-activo-bg:    var(--cg-azul-600);   /* #1A6FC4 */
  --cg-nav-item-activo-texto: var(--cg-blanco);
  --cg-nav-separador:         var(--cg-azul-800);
  /* Tablas y listas de productos */
  --cg-tabla-encab-bg:     var(--cg-gris-50);
  --cg-tabla-encab-texto:  var(--cg-gris-600);
  --cg-tabla-borde:        var(--cg-borde);
  --cg-tabla-fila-hover:   var(--cg-azul-50);
  --cg-tabla-fila-sel:     var(--cg-azul-100);
  /* Avisos: guardado, error al subir, sesion bloqueada */
  --cg-aviso-exito-bg:     var(--cg-verde-bg);
  --cg-aviso-exito-texto:  var(--cg-verde);
  --cg-aviso-alerta-bg:    var(--cg-ambar-bg);
  --cg-aviso-alerta-texto: var(--cg-ambar);
  --cg-aviso-error-bg:     var(--cg-rojo-bg);
  --cg-aviso-error-texto:  var(--cg-rojo);
  --cg-aviso-info-bg:      var(--cg-azul-50);
  --cg-aviso-info-texto:   var(--cg-azul-700);
  /* Insignias de estado de producto o catalogo */
  --cg-ins-publicado-bg:    var(--cg-verde-bg);
  --cg-ins-publicado-texto: var(--cg-verde);
  --cg-ins-borrador-bg:     var(--cg-gris-100);
  --cg-ins-borrador-texto:  var(--cg-gris-700);
  --cg-ins-agotado-bg:      var(--cg-ambar-bg);
  --cg-ins-agotado-texto:   var(--cg-ambar);
  --cg-ins-vencido-bg:      var(--cg-rojo-bg);
  --cg-ins-vencido-texto:   var(--cg-rojo);
  /* Carga */
  --cg-esqueleto:        var(--cg-gris-200);
  --cg-esqueleto-brillo: var(--cg-gris-100);
  --cg-progreso-pista:   var(--cg-gris-200);
  --cg-progreso-barra:   var(--cg-azul-600);
}

/* ---------- BLOQUE 3: tema del panel (2CLIENTE + 1CREADOR) ----------
   Paleta propia del panel administrativo (catalog.html, dentro de
   #admWrap) y del superadmin (superadmin.html) — con soporte claro/oscuro.
   Se REDEFINEN aquí los mismos nombres semánticos del Bloque 2 de arriba,
   pero solo tienen efecto dentro de #admWrap / body.panel-1creador: la
   cascada de custom properties de CSS hace que todo componente que ya usa
   var(--cg-superficie) etc. recoja este valor sin tocar una sola regla de
   componente. Fuera de esas dos superficies (mercadeo, login, registro,
   catálogo público) siguen rigiendo los valores del Bloque 2 — decisión
   explícita: no repintar páginas que el pedido no mencionó.
   Valores de la maqueta panel-completo.html — "el estilo nuevo"
   (ver maquetas-referencia/). El oscuro redefine SOLO las variables,
   nunca la estructura. */
#admWrap, body.panel-1creador {
  --cg-fondo:            #fafafa;
  --cg-superficie:       #ffffff;
  --cg-superficie-alta:  #ffffff;
  --cg-superficie-sutil: #f4f4f5;
  --cg-sombra-1: 0 1px 2px rgba(24,24,27,.03);
  --cg-sombra-2: 0 8px 24px rgba(24,24,27,.12);
  --cg-velo: rgba(24,24,27,.45);
  --cg-texto:           #18181b;
  --cg-texto-suave:     #52525b;
  /* #8b8d98 (--muted de la maqueta, literal) da 3.16:1 sobre --cg-fondo —
     bajo el 4.5:1 mínimo. Oscurecido a #6e7079 (mismo tono, más oscuro)
     manteniéndolo más claro que texto-suave. Medido: 4.73:1. Mismo criterio
     que ya se aplicó con la maqueta anterior. */
  --cg-texto-tenue:     #6e7079;
  --cg-texto-invertido: #ffffff;
  /* --cg-tinta NO es "el texto del tema": es tinta fija, oscura en los dos
     temas, para texto sobre fondos de marca que no cambian con el tema
     (botones de WhatsApp, siempre verde #25D366) — igual que ya era antes
     de este bloque. Si aquí siguiera al tema (clara en oscuro), el texto
     de esos botones perdería contraste contra el verde fijo. */
  --cg-tinta: #16212d;
  /* --cg-blanco tampoco seguía al tema en ningún uso real (borde de una
     insignia sobre la barra oscura, y el fondo del QR — un QR con fondo
     oscuro puede no escanear). Se deja fuera de este bloque a propósito:
     cae al blanco fijo del Bloque 1. */
  --cg-borde:        #e4e4e7;
  --cg-borde-fuerte: #8b8d98;
  --cg-foco:         rgba(47,111,237,.35);
  --cg-enlace:       #2f6fed;
  --cg-enlace-hover: #1e56c7;
  /* --cg-azul-200 no vivía en este bloque: se quedaba con el celeste global
     (#B8D4F3), pensado para leerse sobre la barra azul oscura. Con la barra
     blanca de la maqueta ese celeste queda ilegible (1.5:1), así que aquí se
     re-ancla al gris de apoyo — es lo que hace la maqueta con la miga de pan
     (.crumb{color:var(--muted)}). Fuera del panel el celeste sigue igual. */
  --cg-azul-200: #8b8d98;
  --cg-azul-400: #639cff; --cg-azul-600: #2f6fed; --cg-azul-700: #1e56c7;
  /* 800/900 solo pintan el degradado de la tarjeta de bienvenida: se re-anclan
     al azul profundo de la maqueta (--accent-soft del tema oscuro) en vez del
     navy viejo, que ya no pega con nada. */
  --cg-azul-800: #1e56c7; --cg-azul-900: #1b2740;
  /* La maqueta no tiene naranja (ver --cg-btn-accion-* abajo). Esta variable
     solo sobrevive porque .btn.accion:active la nombra: se la apunta al mismo
     azul del botón para que el destello al pulsar no saque un naranja huérfano. */
  --cg-naranja-700: #1e56c7;
  --cg-btn-primario-bg:        #2f6fed;
  --cg-btn-primario-bg-hover:  #1e56c7;
  --cg-btn-primario-bg-activo: #1e56c7;
  --cg-btn-primario-texto:     #ffffff;
  --cg-btn-sobre-oscuro-bg:       #ffffff;
  --cg-btn-sobre-oscuro-bg-hover: #f4f4f5;
  --cg-btn-sobre-oscuro-texto:    #18181b;
  --cg-btn-sobre-oscuro-borde:    #e4e4e7;
  /* Ojo al nombre: "sobre-oscuro" era literal cuando .adm-head era azul
     oscuro. Con la barra blanca de la maqueta estos valores pasan a ser el
     tratamiento de sus botones de barra: relleno gris muy claro, borde de
     línea y foco en el azul de acento (.btn / .pill / :focus-visible de
     panel-completo.html). El nombre queda por compatibilidad. */
  --cg-sobre-oscuro-sutil:       #f4f4f5;
  --cg-sobre-oscuro-sutil-hover: #ececee;
  --cg-sobre-oscuro-borde:       #e4e4e7;
  --cg-sobre-oscuro-tenue:       #8b8d98;
  --cg-sobre-oscuro-foco:        #2f6fed;
  /* Pastilla de días vencida (.dias-badge.rojo). La maqueta la pinta en rojo
     sólido con texto blanco, pero .dias-badge hereda el color de texto de la
     barra (ahora tinta oscura), así que se usa el tinte rojo claro de la misma
     maqueta (.notif-icon-wrap.k-urgente) con el borde en su --danger. */
  --cg-sobre-oscuro-alerta-bg:     #fdecec;
  --cg-sobre-oscuro-alerta-borde:  #d92b2b;
  /* Ámbar (quedan ≤3 días). La maqueta NO distingue ámbar de rojo — usa el
     mismo rojo con una animación de pulso. Aquí se conserva la distinción que
     ya existe en producción, con el tinte cálido literal de la maqueta
     (.notice-nofoto / .notif-icon-wrap.k-alerta: #FFF8EC sobre #F2C77C). */
  --cg-sobre-oscuro-ambar-bg:      #fff8ec;
  --cg-sobre-oscuro-ambar-borde:   #f2c77c;
  /* La maqueta no tiene botón de "acción" naranja: todo botón principal es el
     mismo azul (.btn-primary). Se unifican con --cg-btn-primario-*. */
  --cg-btn-accion-bg:       #2f6fed;
  --cg-btn-accion-bg-hover: #1e56c7;
  --cg-btn-accion-texto:    #ffffff;
  --cg-btn-accion-borde:    #1e56c7;
  --cg-btn-sec-bg:       transparent;
  --cg-btn-sec-borde:    #e4e4e7;
  --cg-btn-sec-texto:    #52525b;
  --cg-btn-sec-bg-hover: #f4f4f5;
  --cg-btn-peligro-bg:       #d92b2b;
  /* La maqueta resuelve el hover con filter:brightness(.92); aquí hace falta
     un color, así que va el mismo --danger ya multiplicado por .92. */
  --cg-btn-peligro-bg-hover: #c82828;
  --cg-btn-peligro-texto:    #ffffff;
  --cg-inactivo-bg:    #ececee;
  --cg-inactivo-texto: #8b8d98;
  --cg-campo-bg:           #ffffff;
  --cg-campo-bg-inactivo:  #f4f4f5;
  --cg-campo-texto:        #18181b;
  --cg-campo-placeholder:  #8b8d98;
  --cg-campo-borde:        #e4e4e7;
  --cg-campo-borde-hover:  #8b8d98;
  --cg-campo-borde-foco:   #2f6fed;
  --cg-campo-borde-error:  #d92b2b;
  --cg-etiqueta:           #52525b;
  --cg-ayuda:              #52525b;
  --cg-error-texto:        #d92b2b;
  /* La barra de arriba pasa de azul oscuro a BLANCA: es la .topbar de la
     maqueta (background:var(--surface); border-bottom:1px solid var(--border)),
     confirmado con Jhoan por capturas. */
  --cg-nav-bg:                #ffffff;
  --cg-nav-menu-bg:           #ffffff;
  --cg-nav-borde:             #e4e4e7;
  --cg-nav-texto:             #18181b;
  --cg-nav-item:              #52525b;
  --cg-nav-item-hover-bg:     #f4f4f5;
  --cg-nav-item-hover-texto:  #18181b;
  --cg-nav-item-activo-bg:    #eaf1fe;
  --cg-nav-item-activo-texto: #2f6fed;
  --cg-nav-separador:         #e4e4e7;
  --cg-tabla-encab-bg:     #f4f4f5;
  --cg-tabla-encab-texto:  #52525b;
  --cg-tabla-borde:        #e4e4e7;
  --cg-tabla-fila-hover:   #f4f4f5;
  --cg-tabla-fila-sel:     #eaf1fe;
  --cg-aviso-exito-bg:     #e7f7ee;
  --cg-aviso-exito-texto:  #0f6b34;
  --cg-aviso-alerta-bg:    #fff8ec;
  --cg-aviso-alerta-texto: #8a5a12;
  --cg-aviso-error-bg:     #fdecec;
  --cg-aviso-error-texto:  #b42318;
  --cg-aviso-info-bg:      #eaf1fe;
  --cg-aviso-info-texto:   #1e56c7;
  --cg-ins-publicado-bg:    #e7f7ee;
  --cg-ins-publicado-texto: #0f6b34;
  --cg-ins-borrador-bg:     #f4f4f5;
  --cg-ins-borrador-texto:  #52525b;
  --cg-ins-agotado-bg:      #fff8ec;
  --cg-ins-agotado-texto:   #8a5a12;
  --cg-ins-vencido-bg:      #fdecec;
  --cg-ins-vencido-texto:   #b42318;
  --cg-esqueleto:        #ececee;
  --cg-esqueleto-brillo: #f4f4f5;
  --cg-progreso-pista:   #ececee;
  --cg-progreso-barra:   #2f6fed;
  --cg-verde:    #1f9d55;
  --cg-rojo:     #d92b2b;
  --cg-rojo-osc: #c82828;
  --cg-rojo-bg:  #fdecec;
  --cg-ambar:    #8a5a12;
  --cg-gris-200: #e4e4e7;
}
@media (prefers-color-scheme: dark) {
  #admWrap:not([data-tema="claro"]), body.panel-1creador:not([data-tema="claro"]) {
    --cg-fondo:            #101012;
    --cg-superficie:       #18181b;
    --cg-superficie-alta:  #18181b;
    --cg-superficie-sutil: #1f1f23;
    --cg-sombra-1: 0 1px 2px rgba(0,0,0,.4);
    --cg-sombra-2: 0 8px 24px rgba(0,0,0,.5);
    --cg-velo: rgba(24,24,27,.45);
    --cg-texto:           #f4f4f5;
    --cg-texto-suave:     #b7b7bd;
    --cg-texto-tenue:     #8b8d98;
    --cg-texto-invertido: #eef3f9;
    /* --cg-tinta y --cg-blanco NO se redefinen aquí a propósito: son fijos
       en los dos temas (ver el comentario junto a su valor claro, arriba). */
    --cg-borde:        #2e2e33;
    --cg-borde-fuerte: #8b8d98;
    --cg-foco:         rgba(99,156,255,.45);
    --cg-enlace:       #639cff;
    --cg-enlace-hover: #8ab4ff;
    --cg-azul-200: #8b8d98;
    --cg-azul-400: #8ab4ff; --cg-azul-600: #639cff; --cg-azul-700: #8ab4ff;
    --cg-azul-800: #1b2740; --cg-azul-900: #101012;
    --cg-naranja-700: #8ab4ff;
    --cg-btn-primario-bg:        #639cff;
    --cg-btn-primario-bg-hover:  #8ab4ff;
    --cg-btn-primario-bg-activo: #8ab4ff;
    /* La maqueta deja .btn-primary con color:#fff también en oscuro, pero ahí
       su acento es celeste (#639CFF) y el blanco da 2.6:1. Se mantiene el
       criterio del proyecto (tinta oscura sobre acento claro): 8.1:1. */
    --cg-btn-primario-texto:     #101012;
    --cg-btn-sobre-oscuro-bg:       #18181b;
    --cg-btn-sobre-oscuro-bg-hover: #1f1f23;
    --cg-btn-sobre-oscuro-texto:    #f4f4f5;
    --cg-btn-sobre-oscuro-borde:    #2e2e33;
    --cg-sobre-oscuro-sutil:       #1f1f23;
    --cg-sobre-oscuro-sutil-hover: #27272b;
    --cg-sobre-oscuro-borde:       #2e2e33;
    --cg-sobre-oscuro-tenue:       #8b8d98;
    --cg-sobre-oscuro-foco:        #639cff;
    --cg-sobre-oscuro-alerta-bg:     #3a1b1b;
    --cg-sobre-oscuro-alerta-borde:  #e8615f;
    --cg-sobre-oscuro-ambar-bg:      #3a2e13;
    --cg-sobre-oscuro-ambar-borde:   #f2c77c;
    --cg-btn-accion-bg:       #639cff;
    --cg-btn-accion-bg-hover: #8ab4ff;
    --cg-btn-accion-texto:    #101012;
    --cg-btn-accion-borde:    #8ab4ff;
    --cg-btn-sec-bg:       transparent;
    --cg-btn-sec-borde:    #2e2e33;
    --cg-btn-sec-texto:    #b7b7bd;
    --cg-btn-sec-bg-hover: #1f1f23;
    --cg-btn-peligro-bg:       #e8615f;
    --cg-btn-peligro-bg-hover: #d65957;
    --cg-btn-peligro-texto:    #101012;
    --cg-inactivo-bg:    #27272b;
    --cg-inactivo-texto: #8b8d98;
    --cg-campo-bg:           #18181b;
    --cg-campo-bg-inactivo:  #1f1f23;
    --cg-campo-texto:        #f4f4f5;
    --cg-campo-placeholder:  #8b8d98;
    --cg-campo-borde:        #2e2e33;
    --cg-campo-borde-hover:  #8b8d98;
    --cg-campo-borde-foco:   #639cff;
    --cg-campo-borde-error:  #e8615f;
    --cg-etiqueta:           #b7b7bd;
    --cg-ayuda:              #b7b7bd;
    --cg-error-texto:        #e8615f;
    --cg-nav-bg:                #18181b;
    --cg-nav-menu-bg:           #18181b;
    --cg-nav-borde:             #2e2e33;
    --cg-nav-texto:             #f4f4f5;
    --cg-nav-item:              #b7b7bd;
    --cg-nav-item-hover-bg:     #1f1f23;
    --cg-nav-item-hover-texto:  #f4f4f5;
    --cg-nav-item-activo-bg:    #1b2740;
    --cg-nav-item-activo-texto: #639cff;
    --cg-nav-separador:         #2e2e33;
    --cg-tabla-encab-bg:     #1f1f23;
    --cg-tabla-encab-texto:  #b7b7bd;
    --cg-tabla-borde:        #2e2e33;
    --cg-tabla-fila-hover:   #1f1f23;
    --cg-tabla-fila-sel:     #1b2740;
    --cg-aviso-exito-bg:     #0f2a1c;
    --cg-aviso-exito-texto:  #6fdda2;
    --cg-aviso-alerta-bg:    #3a2e13;
    --cg-aviso-alerta-texto: #f2c77c;
    --cg-aviso-error-bg:     #3a1b1b;
    --cg-aviso-error-texto:  #ffc9c9;
    --cg-aviso-info-bg:      #1b2740;
    --cg-aviso-info-texto:   #8ab4ff;
    --cg-ins-publicado-bg:    #0f2a1c;
    --cg-ins-publicado-texto: #6fdda2;
    --cg-ins-borrador-bg:     #1f1f23;
    --cg-ins-borrador-texto:  #b7b7bd;
    --cg-ins-agotado-bg:      #3a2e13;
    --cg-ins-agotado-texto:   #f2c77c;
    --cg-ins-vencido-bg:      #3a1b1b;
    --cg-ins-vencido-texto:   #ffc9c9;
    --cg-esqueleto:        #27272b;
    --cg-esqueleto-brillo: #1f1f23;
    --cg-progreso-pista:   #27272b;
    --cg-progreso-barra:   #639cff;
    --cg-verde:    #3fbe7b;
    --cg-rojo:     #e8615f;
    --cg-rojo-osc: #d65957;
    --cg-rojo-bg:  #3a1b1b;
    --cg-ambar:    #f2c77c;
    --cg-gris-200: #2e2e33;
  }
}
/* body.panel-1creador se suma aquí (mismo bloque, sin repetir declaraciones):
   el superadmin no tenía forma de forzar el tema, solo seguía al sistema —
   ver el interruptor de tema en superadmin.html (rama piel visual). */
#admWrap[data-tema="oscuro"], body.panel-1creador[data-tema="oscuro"] {
    --cg-fondo:            #101012;
    --cg-superficie:       #18181b;
    --cg-superficie-alta:  #18181b;
    --cg-superficie-sutil: #1f1f23;
    --cg-sombra-1: 0 1px 2px rgba(0,0,0,.4);
    --cg-sombra-2: 0 8px 24px rgba(0,0,0,.5);
    --cg-velo: rgba(24,24,27,.45);
    --cg-texto:           #f4f4f5;
    --cg-texto-suave:     #b7b7bd;
    --cg-texto-tenue:     #8b8d98;
    --cg-texto-invertido: #eef3f9;
    /* --cg-tinta y --cg-blanco NO se redefinen aquí a propósito: son fijos
       en los dos temas (ver el comentario junto a su valor claro, arriba). */
    --cg-borde:        #2e2e33;
    --cg-borde-fuerte: #8b8d98;
    --cg-foco:         rgba(99,156,255,.45);
    --cg-enlace:       #639cff;
    --cg-enlace-hover: #8ab4ff;
    --cg-azul-200: #8b8d98;
    --cg-azul-400: #8ab4ff; --cg-azul-600: #639cff; --cg-azul-700: #8ab4ff;
    --cg-azul-800: #1b2740; --cg-azul-900: #101012;
    --cg-naranja-700: #8ab4ff;
    --cg-btn-primario-bg:        #639cff;
    --cg-btn-primario-bg-hover:  #8ab4ff;
    --cg-btn-primario-bg-activo: #8ab4ff;
    /* La maqueta deja .btn-primary con color:#fff también en oscuro, pero ahí
       su acento es celeste (#639CFF) y el blanco da 2.6:1. Se mantiene el
       criterio del proyecto (tinta oscura sobre acento claro): 8.1:1. */
    --cg-btn-primario-texto:     #101012;
    --cg-btn-sobre-oscuro-bg:       #18181b;
    --cg-btn-sobre-oscuro-bg-hover: #1f1f23;
    --cg-btn-sobre-oscuro-texto:    #f4f4f5;
    --cg-btn-sobre-oscuro-borde:    #2e2e33;
    --cg-sobre-oscuro-sutil:       #1f1f23;
    --cg-sobre-oscuro-sutil-hover: #27272b;
    --cg-sobre-oscuro-borde:       #2e2e33;
    --cg-sobre-oscuro-tenue:       #8b8d98;
    --cg-sobre-oscuro-foco:        #639cff;
    --cg-sobre-oscuro-alerta-bg:     #3a1b1b;
    --cg-sobre-oscuro-alerta-borde:  #e8615f;
    --cg-sobre-oscuro-ambar-bg:      #3a2e13;
    --cg-sobre-oscuro-ambar-borde:   #f2c77c;
    --cg-btn-accion-bg:       #639cff;
    --cg-btn-accion-bg-hover: #8ab4ff;
    --cg-btn-accion-texto:    #101012;
    --cg-btn-accion-borde:    #8ab4ff;
    --cg-btn-sec-bg:       transparent;
    --cg-btn-sec-borde:    #2e2e33;
    --cg-btn-sec-texto:    #b7b7bd;
    --cg-btn-sec-bg-hover: #1f1f23;
    --cg-btn-peligro-bg:       #e8615f;
    --cg-btn-peligro-bg-hover: #d65957;
    --cg-btn-peligro-texto:    #101012;
    --cg-inactivo-bg:    #27272b;
    --cg-inactivo-texto: #8b8d98;
    --cg-campo-bg:           #18181b;
    --cg-campo-bg-inactivo:  #1f1f23;
    --cg-campo-texto:        #f4f4f5;
    --cg-campo-placeholder:  #8b8d98;
    --cg-campo-borde:        #2e2e33;
    --cg-campo-borde-hover:  #8b8d98;
    --cg-campo-borde-foco:   #639cff;
    --cg-campo-borde-error:  #e8615f;
    --cg-etiqueta:           #b7b7bd;
    --cg-ayuda:              #b7b7bd;
    --cg-error-texto:        #e8615f;
    --cg-nav-bg:                #18181b;
    --cg-nav-menu-bg:           #18181b;
    --cg-nav-borde:             #2e2e33;
    --cg-nav-texto:             #f4f4f5;
    --cg-nav-item:              #b7b7bd;
    --cg-nav-item-hover-bg:     #1f1f23;
    --cg-nav-item-hover-texto:  #f4f4f5;
    --cg-nav-item-activo-bg:    #1b2740;
    --cg-nav-item-activo-texto: #639cff;
    --cg-nav-separador:         #2e2e33;
    --cg-tabla-encab-bg:     #1f1f23;
    --cg-tabla-encab-texto:  #b7b7bd;
    --cg-tabla-borde:        #2e2e33;
    --cg-tabla-fila-hover:   #1f1f23;
    --cg-tabla-fila-sel:     #1b2740;
    --cg-aviso-exito-bg:     #0f2a1c;
    --cg-aviso-exito-texto:  #6fdda2;
    --cg-aviso-alerta-bg:    #3a2e13;
    --cg-aviso-alerta-texto: #f2c77c;
    --cg-aviso-error-bg:     #3a1b1b;
    --cg-aviso-error-texto:  #ffc9c9;
    --cg-aviso-info-bg:      #1b2740;
    --cg-aviso-info-texto:   #8ab4ff;
    --cg-ins-publicado-bg:    #0f2a1c;
    --cg-ins-publicado-texto: #6fdda2;
    --cg-ins-borrador-bg:     #1f1f23;
    --cg-ins-borrador-texto:  #b7b7bd;
    --cg-ins-agotado-bg:      #3a2e13;
    --cg-ins-agotado-texto:   #f2c77c;
    --cg-ins-vencido-bg:      #3a1b1b;
    --cg-ins-vencido-texto:   #ffc9c9;
    --cg-esqueleto:        #27272b;
    --cg-esqueleto-brillo: #1f1f23;
    --cg-progreso-pista:   #27272b;
    --cg-progreso-barra:   #639cff;
    --cg-verde:    #3fbe7b;
    --cg-rojo:     #e8615f;
    --cg-rojo-osc: #d65957;
    --cg-rojo-bg:  #3a1b1b;
    --cg-ambar:    #f2c77c;
    --cg-gris-200: #2e2e33;
}