/* Apariencia compartida. Cargar después de estilos.css, redisenio.css y studio.css.
   Los selectores de compatibilidad nombran componentes existentes; no reinician
   la geometría ni los componentes React del estudio.

   Tokens del rediseño (plan docs/redesign/PLAN_REDISENIO_UI_2026-09.md, §6.2).
   Este fichero es el ÚNICO sitio con valores literales de color. Orden:
   1. Tokens semánticos del tema oscuro neutro (`negro`, el predeterminado) y
      tokens sin color (tipografía, espacios, radios, altos, movimiento).
   2. Temas derivados (`claro`, `azul`, `morado`): redefinen superficies,
      texto, bordes, acento y estados en OKLCH; no remapean al legado.
   3. Alias del legado (`--fondo`, `--superficie`, `--acento`…): apuntan a los
      semánticos, así las hojas antiguas siguen el tema sin tocarlas.
   Los contrastes se miden en tests/contrato-visual-ui.test.cjs (WCAG 2.1 AA:
   texto, acento y estados ≥ 4,5:1; --border-control ≥ 3:1). La paleta de
   series (--serie-*) se validó con el script de la skill dataviz en oscuro y
   en claro (docs/redesign/COMPONENTES.md).
   El acento personalizado de Apariencia lo escribe public/tema-inicial.js en
   línea (--accent-primary, --accent-hover, --accent-muted, --accent-contrast
   y los --acento* legados) sólo cuando el usuario elige uno. */
:root {
  color-scheme: dark;
  /* Superficies. --surface-rail es la del lateral y la barra superior: en
     los temas neutros coincide con el panel; en azul y morado queda entre el
     lienzo y el panel, como hasta ahora. */
  --surface-canvas: oklch(0.145 0.008 250);
  --surface-rail: var(--surface-panel);
  --surface-panel: oklch(0.180 0.009 250);
  --surface-elevated: oklch(0.215 0.010 250);
  --surface-popover: oklch(0.250 0.012 250);
  --surface-hover: oklch(0.235 0.012 250);
  /* Texto. --text-tertiary sube a 0.66 (0.58 daba 4,39:1 sobre el panel). */
  --text-primary: oklch(0.94 0.005 250);
  --text-secondary: oklch(0.72 0.010 250);
  --text-tertiary: oklch(0.66 0.010 250);
  --text-disabled: oklch(0.46 0.008 250);
  /* Bordes: subtle y strong sólo separan; --border-control delimita campos y
     controles (WCAG 1.4.11: 3,72:1 panel, 3,16:1 popover). */
  --border-subtle: oklch(0.31 0.008 250);
  --border-strong: oklch(0.52 0.010 250);
  --border-control: oklch(0.54 0.010 250);
  /* Acento: el único color dominante, en la familia del azul de marca CLAQON
     (#1677FF = oklch(0.599 0.219 259)). Sobre fondo oscuro se usa una variante
     clara, porque #1677FF tal cual da ≈ 3,9:1 sobre el popover (WP14, D-64).
     --accent-contrast es el texto sobre él. */
  --accent-primary: oklch(0.74 0.13 259);
  --accent-hover: oklch(0.79 0.10 259);
  --accent-muted: oklch(0.30 0.06 259);
  --accent-contrast: oklch(0.16 0.02 259);
  /* Marca CLAQON (valores del kit en gamut sRGB, sólo para el logotipo, la
     presentación pública y los gráficos; nunca como texto sobre fondo claro). */
  --brand-primary: oklch(0.599 0.219 259);
  --brand-deep: oklch(0.409 0.189 263.3);
  --brand-light: oklch(0.795 0.12 236);
  /* Estados: siempre con icono y texto, nunca como serie de un gráfico. Los
     «-muted» son pistas de medidores y fondos de estado. */
  --status-success: oklch(0.73 0.13 155);
  --status-warning: oklch(0.79 0.13 85);
  --status-danger: oklch(0.68 0.17 25);
  --status-info: oklch(0.72 0.12 245);
  --status-success-muted: oklch(0.30 0.06 155);
  --status-warning-muted: oklch(0.30 0.06 85);
  --status-danger-muted: oklch(0.29 0.07 25);
  --status-info-muted: oklch(0.30 0.06 245);
  /* Serie categórica (sólo gráficos, orden fijo, el color sigue a la entidad):
     #3987e5 #d95926 #199e70 #c98500 #d55181. Validada sobre el panel oscuro:
     CVD peor ΔE 8,4, visión normal 19,3, todas ≥ 3:1. */
  --serie-1: oklch(0.622 0.161 255);
  --serie-2: oklch(0.622 0.173 40);
  --serie-3: oklch(0.621 0.128 163);
  --serie-4: oklch(0.670 0.143 73);
  --serie-5: oklch(0.622 0.171 1);
  /* Velo del recorrido guiado y sombra de lo que flota (popovers, diálogos). */
  --overlay-recorrido: oklch(0.09 0.010 250 / 0.78);
  --sombra-flotante: 0 4px 16px oklch(0 0 0 / 0.35);
  /* Tipografía (Decisión D2: Geist + Geist Mono, OFL, servidas en local desde
     /studio/fonts; Manrope y JetBrains Mono quedan de respaldo). Mono sólo en
     cifras, importes, ids, URIs y registros. */
  --font-sans: "Geist", "Manrope", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --texto-meta: 12px;
  --texto-micro: 11px;
  --texto-tabla: 13px;
  --texto-cuerpo: 14px;
  --texto-seccion: 16px;
  --texto-paso: 18px;
  --texto-pagina: 22px;
  /* Espacios (base 4 px), radios, altos y trazo de icono. */
  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-5: 20px;
  --espacio-6: 24px;
  --espacio-7: 32px;
  --radio-sm: 4px;
  --radio: 6px;
  --radio-lg: 8px;
  --alto-control: 32px;
  --alto-control-sm: 28px;
  --alto-campo: 34px;
  --alto-fila: 36px;
  --alto-fila-doble: 44px;
  --objetivo-tactil: 44px;
  --icono-trazo: 1.75;
  /* Movimiento funcional: 120–180 ms; 0 ms con movimiento reducido. */
  --duracion-rapida: 120ms;
  --duracion: 150ms;
  --duracion-lenta: 180ms;
  --curva: cubic-bezier(.2, 0, 0, 1);
}

/* Tema claro: superficies claras (el panel sobre el lienzo, como las tarjetas
   blancas de antes), acento del mismo tono oscurecido y estados a L 0.43–0.45. */
html[data-tema="claro"] {
  color-scheme: light;
  --surface-canvas: oklch(0.975 0.004 250);
  --surface-rail: var(--surface-panel);
  --surface-panel: oklch(0.995 0.002 250);
  --surface-elevated: oklch(0.960 0.006 250);
  --surface-popover: oklch(0.998 0.001 250);
  --surface-hover: oklch(0.935 0.010 250);
  --text-primary: oklch(0.23 0.010 250);
  --text-secondary: oklch(0.42 0.010 250);
  --text-tertiary: oklch(0.48 0.010 250);
  --text-disabled: oklch(0.66 0.008 250);
  --border-subtle: oklch(0.87 0.008 250);
  --border-strong: oklch(0.54 0.010 250);
  --border-control: oklch(0.54 0.010 250);
  --accent-primary: oklch(0.50 0.19 259);
  --accent-hover: oklch(0.44 0.17 259);
  --accent-muted: oklch(0.93 0.03 259);
  --accent-contrast: oklch(0.99 0.003 259);
  --status-success: oklch(0.43 0.11 155);
  --status-warning: oklch(0.43 0.08 85);
  --status-danger: oklch(0.45 0.16 25);
  --status-info: oklch(0.43 0.10 245);
  --status-success-muted: oklch(0.94 0.040 155);
  --status-warning-muted: oklch(0.94 0.050 85);
  --status-danger-muted: oklch(0.94 0.035 25);
  --status-info-muted: oklch(0.94 0.030 245);
  /* Mismos tonos que en oscuro; la ranura 4 se oscurece a #aa7200 para llegar
     a 3:1 sobre el panel claro (validada: CVD peor ΔE 9,4; normal 17,9). */
  --serie-1: oklch(0.622 0.161 255);
  --serie-2: oklch(0.622 0.173 40);
  --serie-3: oklch(0.621 0.128 163);
  --serie-4: oklch(0.596 0.126 75);
  --serie-5: oklch(0.622 0.171 1);
  --overlay-recorrido: oklch(0.20 0.010 250 / 0.55);
  --sombra-flotante: 0 4px 16px oklch(0.25 0.020 250 / 0.14);
}

/* Tema azul: los mismos semánticos sobre superficies azul marino. */
html[data-tema="azul"] {
  color-scheme: dark;
  --surface-canvas: oklch(0.194 0.037 256);
  --surface-rail: oklch(0.221 0.044 257);
  --surface-panel: oklch(0.247 0.053 258);
  --surface-elevated: oklch(0.294 0.057 254);
  --surface-popover: oklch(0.310 0.058 254);
  --surface-hover: oklch(0.346 0.062 252);
  --text-primary: oklch(0.969 0.015 248);
  --text-secondary: oklch(0.840 0.042 252);
  --text-tertiary: oklch(0.788 0.049 250);
  --text-disabled: oklch(0.560 0.040 252);
  --border-subtle: oklch(0.398 0.062 253);
  --border-strong: oklch(0.635 0.065 250);
  --border-control: oklch(0.635 0.065 250);
  --accent-primary: oklch(0.806 0.103 247);
  --accent-hover: oklch(0.845 0.081 247);
  --accent-muted: oklch(0.314 0.058 255);
  --accent-contrast: oklch(0.16 0.030 250);
  --status-success: oklch(0.830 0.108 167);
  --status-warning: oklch(0.868 0.096 82);
  --status-danger: oklch(0.828 0.099 9);
  --status-info: oklch(0.845 0.085 241);
  --status-success-muted: oklch(0.32 0.060 167);
  --status-warning-muted: oklch(0.32 0.055 82);
  --status-danger-muted: oklch(0.32 0.065 9);
  --status-info-muted: oklch(0.32 0.060 241);
}

/* Tema morado: los mismos semánticos sobre superficies violeta. */
html[data-tema="morado"] {
  color-scheme: dark;
  --surface-canvas: oklch(0.189 0.040 299);
  --surface-rail: oklch(0.215 0.049 297);
  --surface-panel: oklch(0.240 0.052 300);
  --surface-elevated: oklch(0.283 0.055 305);
  --surface-popover: oklch(0.300 0.056 305);
  --surface-hover: oklch(0.335 0.061 305);
  --text-primary: oklch(0.976 0.016 314);
  --text-secondary: oklch(0.831 0.049 313);
  --text-tertiary: oklch(0.783 0.054 312);
  --text-disabled: oklch(0.560 0.045 308);
  --border-subtle: oklch(0.371 0.061 308);
  --border-strong: oklch(0.641 0.067 307);
  --border-control: oklch(0.641 0.067 307);
  --accent-primary: oklch(0.819 0.114 305);
  --accent-hover: oklch(0.858 0.088 306);
  --accent-muted: oklch(0.304 0.049 307);
  --accent-contrast: oklch(0.16 0.030 305);
  --status-success: oklch(0.846 0.088 163);
  --status-warning: oklch(0.859 0.092 79);
  --status-danger: oklch(0.838 0.095 4);
  --status-info: oklch(0.845 0.076 268);
  --status-success-muted: oklch(0.32 0.055 163);
  --status-warning-muted: oklch(0.32 0.055 79);
  --status-danger-muted: oklch(0.32 0.065 4);
  --status-info-muted: oklch(0.32 0.055 268);
}

/* Densidad compacta y movimiento reducido. */
html[data-densidad="compacta"] {
  --alto-control: 28px;
  --alto-control-sm: 24px;
  --alto-campo: 32px;
  --alto-fila: 32px;
}
html[data-movimiento="reducido"] {
  --duracion-rapida: 0ms;
  --duracion: 0ms;
  --duracion-lenta: 0ms;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --duracion-rapida: 0ms;
    --duracion: 0ms;
    --duracion-lenta: 0ms;
  }
}

/* Alias del legado: los nombres antiguos (222, 219 y 132 usos de --acento,
   --borde y --texto-suave en las hojas legadas) apuntan a los semánticos, así
   que siguen el tema activo. Se conservan hasta S11 (Decisión D6: no se borran). */
:root {
  --fondo: var(--surface-canvas);
  --fondo-profundo: var(--surface-canvas);
  --rail: var(--surface-rail);
  --superficie: var(--surface-panel);
  --superficie-alta: var(--surface-elevated);
  --superficie-hover: var(--surface-hover);
  --borde: var(--border-subtle);
  --borde-fuerte: var(--border-strong);
  --texto: var(--text-primary);
  --texto-suave: var(--text-secondary);
  --texto-tenue: var(--text-tertiary);
  --acento: var(--accent-primary);
  --acento-alto: var(--accent-hover);
  --acento-tinta: var(--accent-contrast);
  --datos: var(--status-info);
  --exito: var(--status-success);
  --alerta: var(--status-danger);
  --aviso: var(--status-warning);
  --studio-input: var(--surface-canvas);
  --studio-accent-soft: var(--accent-muted);
  --studio-accent-selected: color-mix(in oklch, var(--accent-primary) 18%, var(--surface-panel));
  --studio-accent-border: color-mix(in oklch, var(--accent-primary) 38%, transparent);
  --studio-ring: color-mix(in oklch, var(--accent-primary) 30%, transparent);
  --studio-glow: color-mix(in oklch, var(--accent-primary) 10%, transparent);
  --studio-shadow: 0 16px 48px oklch(0 0 0 / 0.30);
  --studio-shadow-small: 0 2px 10px oklch(0 0 0 / 0.20);
  --studio-backdrop: oklch(0 0 0 / 0.72);
}
/* Negro pintaba los datos (código, barras de uso) en gris neutro claro
   (#d9d9d9, L 0.885 sin croma): se conserva el mismo valor, en OKLCH, para no
   apagar el código ni las barras de uso. Contraste sobre el panel: unos 13:1. */
html[data-tema="negro"] {
  --datos: oklch(0.885 0 0);
}
html[data-tema="claro"] {
  --studio-input: var(--surface-popover);
  --studio-glow: color-mix(in oklch, var(--accent-primary) 6%, transparent);
  --studio-shadow: 0 16px 48px oklch(0.30 0.040 260 / 0.09);
  --studio-shadow-small: 0 2px 10px oklch(0.30 0.040 260 / 0.05);
  --studio-backdrop: oklch(0.25 0.030 260 / 0.40);
}
html[data-tema="azul"] {
  --studio-shadow: 0 16px 48px oklch(0.12 0.030 256 / 0.28);
  --studio-shadow-small: 0 2px 10px oklch(0.12 0.030 256 / 0.17);
  --studio-backdrop: oklch(0.12 0.030 256 / 0.68);
}
html[data-tema="morado"] {
  --studio-shadow: 0 16px 48px oklch(0.10 0.030 300 / 0.24);
  --studio-shadow-small: 0 2px 10px oklch(0.10 0.030 300 / 0.16);
  --studio-backdrop: oklch(0.10 0.030 300 / 0.65);
}

html[data-tema] {
  /* Velo de diálogos de las primitivas fv-*: mismo valor que el legado por tema. */
  --velo-dialogo: var(--studio-backdrop);
  --studio-muted-surface: var(--superficie-alta);
  --studio-success-soft: color-mix(in srgb, var(--exito) 9%, var(--superficie));
  --studio-warning-soft: color-mix(in srgb, var(--aviso) 9%, var(--superficie));
  --studio-danger-soft: color-mix(in srgb, var(--alerta) 9%, var(--superficie));
  --studio-info-soft: color-mix(in srgb, var(--datos) 9%, var(--superficie));
  --studio-card-padding: 16px;
  --studio-control-height: 36px;
  --studio-section-gap: 16px;
  --studio-row-padding: 10px;
  background: var(--fondo);
  color: var(--texto);
}

/* D2: una sola familia sans en el panel y en las islas que la fijaban a mano. */
html[data-tema] body,
html[data-tema] :is(.pro-home, .pro-landing, .pro-dialog, .media-panel, .studio-editor-host) {
  font-family: var(--font-sans);
}

html[data-tema] body { background: var(--fondo); color: var(--texto); }
html[data-tema] ::selection { background: var(--acento); color: var(--acento-tinta); }
html[data-tema] .fondo { background: var(--fondo); }
html[data-tema] :is(.barra, .navegacion, .estados, .cabecera-hoja) { background: var(--rail); border-color: var(--borde); }
html[data-tema] .barra-studio { border-color: var(--borde); }
html[data-tema] .logo { color: var(--acento-tinta); background: var(--acento); }
html[data-tema] .logo svg { color: inherit; }
html[data-tema] :is(.marca span, .pestana svg) { color: var(--texto-suave); }
html[data-tema] .titulo-navegacion { color: var(--texto-tenue); }
html[data-tema] :is(.pestana, .pestana-movil) { color: var(--texto-suave); }
html[data-tema] :is(.pestana.activa, .pestana.activa:hover, .pestana-movil.activa, .opcion-hoja.activa, .tab-editor[aria-selected="true"]) {
  color: var(--acento); background: var(--studio-accent-soft); border-color: var(--studio-accent-border); box-shadow: none;
}
html[data-tema] :is(.pestana.activa svg, .pestana:hover svg, .pestana-movil.activa svg) { color: var(--acento); }
html[data-tema] :is(.pestana:hover, .pestana-movil:hover, .opcion-hoja:hover) { color: var(--acento); background: var(--studio-accent-soft); border-color: var(--studio-accent-border); }
html[data-tema] .nav-movil { background: var(--rail); border-color: var(--borde-fuerte); box-shadow: none; }

/* Superficies de las once vistas, modales y navegación móvil. */
html[data-tema] :is(.tarjeta, .kpi, .proveedor, .proveedor-guiado, .clave, .incidencia, .tarjeta-guia, .detalle-guia, .opcion-hoja, .elemento-lista, .empezar-studio) {
  background: var(--superficie); border-color: var(--borde); color: var(--texto); box-shadow: none;
}
html[data-tema] #lista-cuentas .elemento-lista { background: var(--superficie); border-color: var(--borde); }
html[data-tema] :is(.elemento-lista.seleccionado, #lista-cuentas .elemento-lista.seleccionado) { background: var(--studio-accent-soft); border-color: var(--studio-accent-border); }
html[data-tema] :is(.elemento-lista .titulo, .clave-cabecera strong, .evento .titulo-evento, .resumen-envio strong, .campo > span, .campo.compacto > span) { color: var(--texto); }
html[data-tema] #lista-cuentas .elemento-lista .perfil-lista-cuenta { color: var(--texto-suave); }
html[data-tema] :is(.cabecera-tarjeta, .cabecera-proveedor, .evento, .acciones-dialogo, .acciones-asistente, .cabecera-clave, .proveedor-cabecera) { border-color: var(--borde); }
html[data-tema] :is(.bloque-formulario, .grupo-desplegable, .grupo-desplegable[open], .grupo-desplegable-interno, .conexion-red, .dato-proveedor, .cuota-periodo, .meta-incidencia > div, .tabs-editor, .rail-asistente, .bloque-cerebro-resumen, .caja-enlace-cerebro, .identificador-generado, .paso-prueba-cerebro, .catalogo-completo-cerebro, .catalogo-completo-cerebro[open]) {
  background: var(--studio-muted-surface); border-color: var(--borde); color: var(--texto);
}
html[data-tema] :is(.conexion-red[open] > summary, .catalogo-completo-cerebro[open] > summary) { background: var(--superficie-alta); border-color: var(--borde); }
html[data-tema] :is(.dialogo, .hoja-secciones, .acciones-asistente, .acciones-dialogo, .brindis > div) { background: var(--superficie); color: var(--texto); border-color: var(--borde-fuerte); box-shadow: var(--studio-shadow); }
html[data-tema] :is(dialog, .dialogo, .hoja-secciones)::backdrop { background: var(--studio-backdrop); }
html[data-tema] :is(.pie-formulario, .pie-claves-proveedor, #formulario-cuenta > .acciones-formulario:last-child, #formulario-oferta > .acciones-formulario:last-child) {
  background: var(--superficie-alta); color: var(--texto); border-color: var(--borde-fuerte); box-shadow: var(--studio-shadow);
}
html[data-tema] :is(.pie-formulario, #formulario-cuenta > .acciones-formulario:last-child, #formulario-oferta > .acciones-formulario:last-child) {
  position: static; bottom: auto; margin-top: 20px;
}
html[data-tema] :is(.vacio, .estado-cuota.sin-limite) { background: var(--superficie); color: var(--texto-suave); border-color: var(--borde-fuerte); }
html[data-tema] :is(.nota, .explicacion-incidencia, .crear-studio p, .consejo-studio p) { color: var(--texto-suave); background: transparent; border-color: var(--borde); }
html[data-tema] :is(.prioridad-opcional, .prioridad-avanzado, .estado-resumen, .marca-tecnica, .cabecera-tarjeta > .etiqueta-suave) { color: var(--texto-suave); background: var(--superficie-alta); border-color: var(--borde); }

/* Campos y acciones: el acento y su tinta se calculan juntos. Los campos se
   delimitan con --border-control (WCAG 1.4.11, ≥ 3:1 en todos los temas). */
html[data-tema] :is(.campo, .formulario, .buscador-studio, .busqueda-cuentas) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea),
html[data-tema] #vista-cerebro .campo-clave-cerebro {
  background-color: var(--studio-input); color: var(--texto); border-color: var(--border-control); box-shadow: none;
}
html[data-tema] :is(input, textarea)::placeholder { color: var(--texto-tenue); opacity: 1; }
html[data-tema] :is(select option, select optgroup) { background: var(--studio-input); color: var(--texto); }
html[data-tema] :is(.campo input[readonly], .campo input:disabled, .campo select:disabled, .campo textarea:disabled) { background: var(--superficie-alta); color: var(--texto-suave); border-color: var(--borde); }
html[data-tema] :is(.campo-con-unidad, .campo-con-unidad:focus-within, input[type="color"]) { background: var(--studio-input); border-color: var(--border-control); }
html[data-tema] .campo-con-unidad > span { color: var(--texto-suave); background: transparent; }
html[data-tema] :is(input, select, textarea):focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--studio-ring); }
html[data-tema] .campo-con-unidad:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--studio-ring); }
html[data-tema] .campo.con-error :is(input, select, textarea, .campo-con-unidad) { border-color: var(--alerta); }
html[data-tema] :is(.boton-principal, .saltar-contenido) { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); box-shadow: none; }
html[data-tema] .boton-principal:hover { background: var(--acento-alto); border-color: var(--acento-alto); color: var(--acento-tinta); box-shadow: var(--studio-shadow-small); }
html[data-tema] .boton-secundario { background: var(--superficie-alta); border-color: var(--borde-fuerte); color: var(--texto); box-shadow: none; }
html[data-tema] .boton-secundario:hover { background: var(--superficie-hover); border-color: var(--borde-fuerte); color: var(--texto); }
html[data-tema] :is(.boton-sutil, .boton-sutil:hover, .accion-brindis) { color: var(--acento); background: transparent; border-color: transparent; }
html[data-tema] :is(.boton-peligro, .boton-peligro:hover) { color: var(--alerta); background: var(--studio-danger-soft); border-color: var(--alerta); }
html[data-tema] .boton-confirmar-peligro { background: var(--alerta); border-color: var(--alerta); color: #101016; }
html[data-tema="claro"] .boton-confirmar-peligro { color: #ffffff; }
html[data-tema] :is(.cerrar-dialogo, .cerrar-hoja) { background: transparent; color: var(--texto-suave); }
html[data-tema] :is(.cerrar-dialogo:hover, .cerrar-hoja:hover) { background: var(--superficie-hover); color: var(--texto); }

/* Panel, perfiles, tutoriales y elementos de ayuda. */
html[data-tema] .crear-studio { background: radial-gradient(ellipse at 90% 30%, var(--studio-glow), transparent 60%), var(--superficie); border-color: var(--studio-accent-border); }
html[data-tema] :is(.resumen-perfil-contenido, .introduccion-apis, .consejo-studio, .guia-proveedor, .guia-incidencia, .ayuda-asistente, .tarjeta-modo:has(input:checked)) { background: var(--studio-accent-soft); border-color: var(--studio-accent-border); color: var(--texto); }
html[data-tema] :is(.numero-paso, .icono-resumen, .icono-introduccion-api, .icono-paso-inicio, .icono-dato-proveedor, .pasos-clave b, .avatar-studio, .etiquetas-perfil-contenido > span, .pastilla-calidad) { background: var(--studio-accent-soft); color: var(--acento); border-color: var(--studio-accent-border); }
html[data-tema] :is(.cifra-calidad, .enlace-tabla:hover) { color: var(--acento); }
html[data-tema] :is(.guia-incidencia strong, .identificador-generado code) { color: var(--texto); }
html[data-tema] :is(.tarjeta-guia:hover, .elemento-lista.no-interactivo:hover, .evento:hover, .paso:hover) { background: var(--superficie-hover); border-color: var(--borde-fuerte); }
html[data-tema] :is(.resultado-busqueda:hover, .resultado-busqueda:focus-visible) { background: var(--studio-accent-soft); color: var(--acento); }
html[data-tema] :is(.miniatura-tutorial, .captura-guia, .maqueta-portal, .nodo-esquema) { background: var(--superficie-alta); border-color: var(--borde); }
html[data-tema] .etiqueta-arte { background: var(--superficie-alta); color: var(--texto); border-color: var(--studio-accent-border); box-shadow: var(--studio-shadow); }
html[data-tema] .icono-render-studio { color: var(--acento); background: var(--studio-accent-soft); border-color: var(--studio-accent-border); }
html[data-tema] .icono-render-studio.horizontal { color: var(--exito); background: var(--studio-success-soft); border-color: var(--exito); }

/* Tablas de métricas, modelos y contabilidad; consola e incidencias. */
html[data-tema] :is(table, .terminal, .detalle-incidencia pre, .contenido-desplegable pre) { color: var(--texto); background: var(--superficie); border-color: var(--borde-fuerte); box-shadow: none; }
html[data-tema] :is(.contenedor-tabla, .contenedor-tabla td:first-child) { background: var(--superficie); border-color: var(--borde); }
html[data-tema] :is(th, .contenedor-tabla th:first-child) { background: var(--superficie-alta); color: var(--texto-suave); border-color: var(--borde); }
html[data-tema] #vista-cerebro .tabla-modelos :is(th, td):first-child { background: var(--superficie); }
html[data-tema] :is(tbody tr:hover td, .terminal .linea:hover) { background: var(--superficie-hover); }
html[data-tema] .terminal .hora { color: var(--texto-tenue); }
html[data-tema] .terminal .mensaje { color: var(--texto); }
html[data-tema] :is(code, .terminal .origen) { color: var(--datos); border-color: var(--borde); }
html[data-tema] .barra-uso { background: var(--borde); box-shadow: none; }
html[data-tema] .barra-uso span { background: var(--datos); box-shadow: none; }
html[data-tema] .barra-uso.alta span { background: var(--aviso); }
html[data-tema] .barra-uso.critica span { background: var(--alerta); }

/* Colores semánticos con tintas distintas en claro y oscuro. */
html[data-tema] .insignia { background: var(--superficie-alta); color: var(--texto-suave); border-color: var(--borde-fuerte); }
html[data-tema] :is(.aviso, .icono-estado-cuota, .icono-periodo-cuota, .icono-periodo-cuota.mes, .prioridad-rotacion) { background: var(--studio-info-soft); color: var(--datos); border-color: var(--datos); }
html[data-tema] :is(.aviso.ok, .insignia.ok, .seguridad-api, .seguridad-api > span, .icono-clave, .icono-diagnostico, .indicador-contexto, .fila-conexion.va .marca-conexion, .marca-paso.ok, .estado-oauth .icono-estado) { background: var(--studio-success-soft); color: var(--exito); border-color: var(--exito); }
html[data-tema] :is(.aviso.error, .insignia.alerta, .icono-confirmacion, .resumen-incidencias.con-errores .icono-diagnostico, .fila-conexion.rota .marca-conexion, .marca-paso.fallo, .paso.fallo, .estado-oauth.error .icono-estado) { background: var(--studio-danger-soft); color: var(--alerta); border-color: var(--alerta); }
html[data-tema] :is(.insignia.aviso, .aviso-contextual, .aviso-revision-tiktok, .prioridad-proveedor, .marca-paso.aviso, .tramo-id) { background: var(--studio-warning-soft); color: var(--aviso); border-color: var(--aviso); }
html[data-tema] :is(.seguridad-api strong, .terminal .linea.SUCCESS .mensaje, .destacado-ayuda) { color: var(--exito); }
html[data-tema] :is(.chip-estado.caido, .terminal .linea.ERROR .mensaje, .mensaje-error-campo, .codigo-incidencia, .fila-conexion.rota .datos-conexion strong) { color: var(--alerta); }
html[data-tema] :is(.terminal .linea.WARN .mensaje, .info-cerebro-cuenta strong, .proveedor[data-sucio="true"] .estado-guardado-proveedor strong) { color: var(--aviso); }
html[data-tema] .chip-estado { background: transparent; }
html[data-tema] .chip-estado.activo { color: var(--texto-suave); }
html[data-tema] .proveedor[data-sucio="true"] .pie-claves-proveedor { background: var(--studio-warning-soft); border-color: var(--aviso); }
/* El componente antiguo ya usa !important para este estado. */
html[data-tema] .borrador-proveedor { background: var(--studio-warning-soft) !important; color: var(--aviso) !important; border-color: var(--aviso) !important; }
html[data-tema] #vista-cerebro .atajo-guia.activa::after { color: var(--acento-tinta); }
html[data-tema] .servicio-google.es-critico strong::after { color: var(--aviso); background: var(--studio-warning-soft); }

/* Logotipos y glifos son ilustrativos; sus textos adjuntos mantienen contraste. */
html[data-tema="claro"] :is(.icono-imagen, .icono-busqueda, .icono-youtube, .icono-ruta, .icono-cerebro, .icono-instagram, .icono-facebook, .icono-tiktok, .icono-google, .icono-x, .icono-slack, .icono-servicio-youtube, .icono-servicio-drive, .icono-servicio-sheets) {
  color: var(--datos); background: var(--studio-info-soft); border-color: var(--borde-fuerte);
}
html[data-tema="claro"] :is(.contador-incidencias, .punto-nav, .punto-hoja) { background: var(--alerta); color: #ffffff; }
/* Las marcas dentro de un boton van sin caja, asi que no pueden apoyarse en un
   fondo propio: sobre blanco, el amarillo de Drive y el rojo de YouTube no
   tienen contraste suficiente y pasan al azul de datos, como el resto de glifos. */
html[data-tema="claro"] .glifo-boton { color: var(--datos); }

/* La previsualización representa el vídeo, no el tema de la interfaz. */
html[data-tema] .previsualizacion-subtitulo { color-scheme: dark; }

/* Colecciones: rejilla flexible también en la columna estrecha de ofertas. */
html[data-tema] .coleccion-controles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 155px), 1fr));
  align-items: end;
  gap: 14px 12px;
  min-width: 0;
  margin: 0 0 20px;
  padding: 16px;
  border: 1px solid var(--borde);
  border-radius: 13px;
  background: var(--studio-muted-surface);
}
html[data-tema] .coleccion-campo { display: grid; min-width: 0; gap: 7px; }
html[data-tema] .coleccion-campo > span { color: var(--texto-suave); font-size: 11px; font-weight: 700; line-height: 1.5; }
html[data-tema] .coleccion-controles .coleccion-campo :is(input, select) {
  width: 100%; min-width: 0; max-width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--border-control); border-radius: 9px; font-size: 12px;
  background: var(--studio-input); color: var(--texto); box-shadow: none;
}
html[data-tema] .coleccion-controles .coleccion-campo :is(input, select):focus {
  border-color: var(--acento); outline: 2px solid transparent; box-shadow: 0 0 0 3px var(--studio-ring);
}
html[data-tema] .coleccion-busqueda { min-width: 0; }
html[data-tema] .coleccion-limpiar { min-width: 0; min-height: 44px; padding: 10px 12px; text-align: left; white-space: normal; }
html[data-tema] .coleccion-recuento {
  grid-column: 1 / -1; margin: 0; padding-top: 11px; border-top: 1px solid var(--borde);
  color: var(--texto-tenue); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere;
}
html[data-tema] #controles-metricas-studio { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: center; }
html[data-tema] #controles-metricas-studio .coleccion-recuento { grid-column: auto; border: 0; padding: 20px 0 0; }
html[data-tema] .coleccion-vacia { gap: 10px; padding: 30px 20px; }
html[data-tema] .coleccion-vacia strong { color: var(--texto); font-size: 15px; line-height: 1.5; }
html[data-tema] .coleccion-vacia p { max-width: 48ch; margin: 0; color: var(--texto-suave); }
html[data-tema] .coleccion-vacia button { margin-top: 4px; max-width: 100%; white-space: normal; }
html[data-tema] .coleccion-cuenta { display: block; color: var(--texto); font-weight: 650; overflow-wrap: anywhere; }
html[data-tema] .coleccion-cuenta + .etiqueta-suave { display: block; margin-top: 5px; }
html[data-tema] .coleccion-nota { margin: 0 0 16px; padding: 0; border: 0; font-size: 11px; line-height: 1.7; }
html[data-tema] .tabla-resultados-studio { min-width: 680px; table-layout: auto; }
html[data-tema] .tabla-resultados-studio :is(th, td) { padding: 14px 12px; border-bottom-color: var(--borde); }
html[data-tema] .tabla-resultados-studio td { overflow-wrap: anywhere; }
html[data-tema] .tabla-resultados-studio td:first-child { width: 29%; min-width: 180px; }
html[data-tema] .tabla-resultados-studio td:first-child strong { color: var(--texto); font-weight: 650; line-height: 1.55; }
html[data-tema] .tabla-resultados-studio td > .etiqueta-suave { display: block; margin-top: 6px; font-size: 10px; line-height: 1.6; }
html[data-tema] .tabla-resultados-studio abbr { text-decoration-style: dotted; text-underline-offset: 4px; cursor: help; }

/* Preparación comercial: estado compacto y pasos de revisión legibles. */
html[data-tema] .oferta-siguiente-paso {
  margin-top: 9px; padding: 7px 0 1px 9px; border-left: 2px solid var(--studio-accent-border);
  color: var(--texto-suave); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere;
}
html[data-tema] .oferta-requisitos {
  min-width: 0; padding: 20px; border: 1px solid var(--borde); border-radius: 14px;
  background: var(--superficie); color: var(--texto);
}
html[data-tema] .oferta-requisitos > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
html[data-tema] .oferta-requisitos > header > div { min-width: 0; }
html[data-tema] .oferta-requisitos > header :is(strong, .etiqueta-suave) { display: block; }
html[data-tema] .oferta-requisitos > header strong { margin-top: 5px; font-size: 15px; line-height: 1.5; }
html[data-tema] .oferta-requisitos > header .insignia { max-width: 100%; white-space: normal; }
html[data-tema] .oferta-requisitos > .nota { margin: 14px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--borde); border-radius: 0; font-size: 11px; }
html[data-tema] .oferta-checklist { display: grid; gap: 0; padding: 0; margin: 17px 0 0; list-style: none; }
html[data-tema] .oferta-checklist li { display: flex; align-items: flex-start; gap: 11px; min-width: 0; padding: 12px 0; border-top: 1px solid var(--borde); }
html[data-tema] .oferta-checklist li > div { min-width: 0; }
html[data-tema] .oferta-checklist strong { display: block; color: var(--texto); font-size: 12px; font-weight: 650; line-height: 1.6; }
html[data-tema] .oferta-checklist p { margin: 4px 0 0; color: var(--texto-suave); font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
html[data-tema] .oferta-checklist-marca { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; margin-top: 1px; border: 1px solid var(--borde-fuerte); border-radius: 8px; font-size: 13px; font-weight: 750; }
html[data-tema] .oferta-checklist li.completo .oferta-checklist-marca { color: var(--exito); background: var(--studio-success-soft); border-color: var(--exito); }
html[data-tema] .oferta-checklist li.pendiente .oferta-checklist-marca { color: var(--aviso); background: var(--studio-warning-soft); border-color: var(--aviso); }
html[data-tema] .oferta-requisitos-nativa { border-color: var(--studio-accent-border); background: var(--studio-accent-soft); }
html[data-tema] .oferta-requisitos-nativa > strong { display: block; color: var(--acento); font-size: 14px; line-height: 1.5; }
html[data-tema] .oferta-requisitos-nativa > p { margin: 8px 0 0; color: var(--texto-suave); font-size: 12px; line-height: 1.7; }
html[data-tema] :is(.bloque-cuentas-oferta, .bloque-activacion-oferta) { background: var(--studio-muted-surface); border-color: var(--borde); }
html[data-tema] .bloque-cuentas-oferta select[multiple] { min-height: 130px; padding: 6px; }
html[data-tema] .bloque-cuentas-oferta select[multiple] option { padding: 9px 10px; border-radius: 5px; white-space: normal; overflow-wrap: anywhere; }
html[data-tema] .bloque-activacion-oferta .campo.compacto {
  align-items: flex-start; gap: 11px; padding: 14px; border: 1px solid var(--borde-fuerte);
  border-radius: 10px; background: var(--superficie); cursor: pointer;
}
html[data-tema] .bloque-activacion-oferta .campo.compacto:has(input:checked) { border-color: var(--studio-accent-border); background: var(--studio-accent-soft); }
html[data-tema] .bloque-activacion-oferta .campo.compacto:focus-within { outline: 2px solid var(--acento); outline-offset: 3px; }
html[data-tema] .bloque-activacion-oferta .campo.compacto > span { min-width: 0; font-size: 12px; line-height: 1.65; }
html[data-tema] .bloque-activacion-oferta input[type="checkbox"] { margin: 2px 0 0; flex: 0 0 19px; }

/* Registro: filtros independientes del área que se desplaza. */
html[data-tema] .herramientas-logs { min-width: 0; margin: 0 0 18px; gap: 12px; }
html[data-tema] .herramientas-logs .fila.tres { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: 12px; }
html[data-tema] .herramientas-logs .campo > span { font-size: 11px; color: var(--texto-suave); }
html[data-tema] .herramientas-logs :is(input, select) { min-width: 0; min-height: 44px; font-size: 12px; }
html[data-tema] .acciones-logs { flex-wrap: wrap; margin: 0; gap: 8px; }
html[data-tema] .acciones-logs > button { max-width: 100%; min-width: 0; min-height: 44px; white-space: normal; font-size: 11px; }
html[data-tema] #studio-logs-seguir[aria-pressed="true"] { background: var(--studio-accent-soft); border-color: var(--studio-accent-border); color: var(--acento); }
html[data-tema] .recuento-logs { margin: 0; padding: 0; border: 0; font-size: 11px; line-height: 1.7; }
html[data-tema] :is(.coleccion-nota, .recuento-logs, .oferta-requisitos > .nota)::before { content: none; display: none; }
html[data-tema] #studio-logs-error { margin: 0; font-size: 12px; }
html[data-tema] #terminal .separador-logs { position: sticky; top: -16px; z-index: 1; margin: 12px -4px 6px; padding: 9px; background: var(--superficie-alta); border: 1px solid var(--borde); border-radius: 7px; color: var(--texto-suave); font: 600 10px/1.5 var(--font-sans); }
html[data-tema] #terminal .separador-logs:first-child { margin-top: 0; }
html[data-tema] #terminal .linea { min-width: 0; align-items: baseline; padding-block: 7px; }
html[data-tema] #terminal .mensaje { min-width: 0; }
html[data-tema] #terminal .mensaje > .insignia { margin: 0 5px 4px 0; vertical-align: middle; font: 650 9px/1.4 var(--font-sans); }
html[data-tema] #terminal .detalle-log { min-width: 0; padding: 0; margin: 5px 0 0; border: 0; }
html[data-tema] #terminal .detalle-log summary { width: fit-content; max-width: 100%; min-height: 38px; align-content: center; padding: 7px 0; color: var(--acento); cursor: pointer; font: 600 11px/1.6 var(--font-sans); }
html[data-tema] #terminal .detalle-log summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 3px; }
html[data-tema] #terminal .detalle-log pre { min-width: 0; max-width: 100%; margin: 4px 0 8px; padding: 12px; border: 1px solid var(--borde); border-radius: 9px; background: var(--studio-muted-surface); color: var(--texto-suave); white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; font-size: 11px; line-height: 1.65; }

/* React ya usa tokens. Solo se corrige la tinta del indicador seleccionado. */
html[data-tema] .pro-theme-option.selected .pro-theme-preview > svg { background: var(--acento); color: var(--acento); stroke: var(--acento-tinta); }

/* Negro mantiene las superficies carbón/grafito. Las marcas de IA conservan
   sus colores propios, definidos en marcas-ia.css. */
html[data-tema="negro"] .fondo { background: var(--fondo); }
html[data-tema="negro"] :is(.pro-hero, .pro-public-hero) { background: var(--superficie); border-color: var(--borde); }
html[data-tema="negro"] :is(.pro-orbit, .pro-public-orbit) { border-color: var(--borde-fuerte); }
html[data-tema="negro"] .pro-phone-label { background: linear-gradient(transparent, #090909); }
html[data-tema="negro"] :is(.icono-cerebro, .icono-busqueda, .icono-imagen, .icono-ruta, .icono-servicio-drive, .icono-servicio-sheets, .icono-google) { color: var(--acento); background: var(--superficie-alta); border-color: var(--borde); }
html[data-tema="negro"] :is(.guia-cerebro, .atajo-guia, .cerebro-actual, .paso-cerebro, .tarjeta-modelo, .pie-tarjeta-modelo, .leyenda, .leyendas-catalogo) { border-color: var(--borde); }
html[data-tema="negro"] :is(.atajo-guia.activa, .tarjeta-modelo.seleccionada) { border-color: var(--acento); }
html[data-tema="negro"] :is(.mini-video-caption i:last-child, .mini-video-timeline i) { background: var(--acento); }
html[data-tema="negro"] .mini-video-luz { background: radial-gradient(ellipse at 60% 30%, #626262, #151515 80%); }
html[data-tema] #vista-subidas .subidas-filtros :is(input, select) { background: var(--studio-input); color: var(--texto); border-color: var(--border-control); }

@media (max-width: 760px) {
  html[data-tema] { --studio-control-height: 44px; }
  html[data-tema] .coleccion-controles { gap: 12px; padding: 14px; }
  html[data-tema] .coleccion-busqueda { grid-column: 1 / -1; }
  html[data-tema] .herramientas-logs .fila.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-tema] .herramientas-logs .fila.tres > .campo:first-child { grid-column: 1 / -1; }
  html[data-tema] .acciones-logs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  html[data-tema] .acciones-logs > button { width: 100%; flex: none; min-height: 44px; padding: 10px; }
  html[data-tema] #studio-logs-seguir { grid-column: 1 / -1; }
  html[data-tema] #terminal .linea { grid-template-columns: 76px minmax(0, 1fr); gap: 3px 8px; }
  html[data-tema] #terminal .mensaje { grid-column: 1 / -1; padding-left: 0; padding-bottom: 6px; }
  html[data-tema] #terminal .separador-logs { top: -12px; }
  html[data-tema] #terminal .detalle-log summary { min-height: 44px; }
  html[data-tema] .oferta-requisitos { padding: 16px; }
  html[data-tema] .oferta-requisitos > header strong { font-size: 14px; }
  html[data-tema] .oferta-checklist p { font-size: 12px; }
  html[data-tema] .tabla-resultados-studio { display: block; min-width: 0; width: 100%; }
  html[data-tema] .contenedor-tabla:has(> .tabla-resultados-studio) { overflow: visible; border: 0; background: transparent; }
  html[data-tema] .tabla-resultados-studio thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
  html[data-tema] .tabla-resultados-studio tbody { display: grid; gap: 13px; }
  html[data-tema] .tabla-resultados-studio tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; padding: 15px; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); }
  html[data-tema] .tabla-resultados-studio tbody td { position: static; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; width: auto; max-width: 100%; padding: 11px 0; border: 0; background: transparent; box-shadow: none; text-align: left; white-space: normal; font-size: 12px; }
  html[data-tema] .tabla-resultados-studio tbody td::before { content: attr(data-label); color: var(--texto-tenue); font: 600 10px/1.5 var(--font-sans); }
  html[data-tema] .tabla-resultados-studio tbody td:first-child { grid-column: 1 / -1; padding-top: 0; margin-bottom: 4px; border-bottom: 1px solid var(--borde); }
  html[data-tema] .tabla-resultados-studio tbody td:first-child strong { font-size: 14px; }
  html[data-tema] .tabla-resultados-studio td > .etiqueta-suave { margin-top: 0; }
  html[data-tema] .tabla-resultados-studio .enlace-tabla { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--acento); }
  html[data-tema] #tabla-videos:has(.tabla-resultados-studio)::after { content: none; display: none; }
  html[data-tema] #panel-aprendizaje table { min-width: 740px; }
  html[data-tema] #panel-aprendizaje :is(th, td):first-child { min-width: 125px; white-space: normal; overflow-wrap: normal; word-break: normal; }
}
@media (max-width: 420px) {
  html[data-tema] #controles-metricas-studio { grid-template-columns: minmax(0, 1fr); }
  html[data-tema] #controles-metricas-studio .coleccion-recuento { padding-top: 10px; border-top: 1px solid var(--borde); }
  html[data-tema] .coleccion-controles { grid-template-columns: minmax(0, 1fr); }
  html[data-tema] .herramientas-logs .fila.tres { grid-template-columns: minmax(0, 1fr); }
}

html[data-densidad="compacta"] {
  --studio-card-padding: 12px;
  --studio-control-height: 32px;
  --studio-section-gap: 12px;
  --studio-row-padding: 8px;
}
@media (min-width: 901px) {
  html[data-densidad="compacta"] :is(.tarjeta, .tarjeta-guia) { padding: var(--studio-card-padding); }
  html[data-densidad="compacta"] :is(.formulario, .vista) { gap: var(--studio-section-gap); }
  html[data-densidad="compacta"] .kpi { padding: 16px; }
  html[data-densidad="compacta"] .campo { gap: 6px; }
  html[data-densidad="compacta"] .grupo-desplegable > summary { padding-block: 12px; }
}

html[data-movimiento="reducido"] *,
html[data-movimiento="reducido"] *::before,
html[data-movimiento="reducido"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  html[data-tema] *, html[data-tema] *::before, html[data-tema] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}