/* Tema de la herramienta: «Grafito» (elegido por Jonathan el 5-nov-2026 entre tres opciones; las otras dos, Consultora y
   Sastrería, quedaron guardadas en diseno-opciones/temas-3-opciones.css). Se activa con <html data-tema="grafito">.
   Dirección (ui-ux-pro-max): «Trust & Authority», sin degradados violeta y rosa, un solo acento, números tabulares,
   contraste 4,5:1. Movimiento (Emil Kowalski): solo transform, opacity y filter; curvas propias; nada de ease-in;
   presión con scale(0.97); hover solo con puntero fino; todo se apaga con movimiento reducido. */

/* ===================================================================================================================
   Base del tema: menos juego, más precisión
   =================================================================================================================== */
[data-tema] .aurora i { display: none; }
[data-tema] .vitrina-tarjeta { transform: none; animation: none; }
[data-tema] .vitrina-anillo .valor { stroke: var(--anillo-2); }
[data-tema] .pasos-como li:nth-child(n) .paso-ico { background: var(--paso-1-fondo); color: var(--paso-1); }
[data-tema] h1 .degradado,
[data-tema] h2 .degradado { display: inline-block; position: relative; }
[data-tema] .anillo-cifra b,
[data-tema] .metrica b,
[data-tema] .cimientos-cabeza b,
[data-tema] .lista-barras .cuenta { font-variant-numeric: tabular-nums lining-nums; }
[data-tema] .etiqueta,
[data-tema] .pastilla,
[data-tema] .vitrina-etq,
[data-tema] .intencion .t,
[data-tema] .pregunta-res .intencion-tag { letter-spacing: 0.12em; }
@keyframes subraya { from { transform: scaleX(0); } }

/* ===================================================================================================================
   2 · GRAFITO · oscuro, técnico, un solo acento menta. Como un tablero de análisis.
   Geist en todo, Geist Mono en etiquetas y cifras pequeñas.
   =================================================================================================================== */
[data-tema="grafito"] {
  color-scheme: dark;
  --fondo: #09090B;
  --tarjeta: #111113;
  --superficie: rgba(24, 24, 27, 0.72);
  --superficie-2: rgba(17, 17, 19, 0.92);
  --control: #0C0C0E;
  --tinta: #FAFAFA;
  --tinta-2: #C4C4CC;
  --suave: #9898A3;
  --tenue: #5A5A64;
  --placeholder: #6B6B76;
  --linea: rgba(255, 255, 255, 0.08);
  --linea-2: rgba(255, 255, 255, 0.15);
  --acento: #3DDC97;
  --acento-claro: rgba(61, 220, 151, 0.12);
  --acento-halo: rgba(61, 220, 151, 0.22);
  --positivo: #3DDC97;
  --verde: #3DDC97;
  --verde-claro: rgba(61, 220, 151, 0.12);
  --negativo: #F87171;
  --negativo-claro: rgba(248, 113, 113, 0.12);
  --error: #F87171;
  --resalte: linear-gradient(90deg, #1F7A55, #3DDC97);
  --cta: #FAFAFA;
  --cta-texto: #09090B;
  --cta-sombra: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 10px 32px -12px rgba(61, 220, 151, 0.45);
  --cta-sombra-hover: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 12px 40px -10px rgba(61, 220, 151, 0.6);
  --boton: #FAFAFA;
  --boton-texto: #09090B;
  --radio: 12px;
  --radio-g: 16px;
  --radio-control: 10px;
  --radio-boton: 10px;
  --sombra: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.5);
  --sombra-g: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
  --titular: 'Geist', system-ui, sans-serif;
  --texto: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --marca-1: #3DDC97; --marca-2: #3DDC97; --marca-3: #A7F3D0; --marca-estrella: #052E1C;
  --anillo-1: #3DDC97; --anillo-2: #3DDC97; --anillo-3: #A7F3D0; --anillo-pista: rgba(255, 255, 255, 0.07);
  --barra-rival: linear-gradient(90deg, #3F3F46, #A1A1AA);
  --barra-propia: #3DDC97;
  --barra-fuente: #71717A;
  --medidor: linear-gradient(90deg, #1F7A55, #3DDC97);
  --punto-si: #3DDC97;
  --punto-si-sombra: 0 0 14px rgba(61, 220, 151, 0.55);
  --diag-fondo: radial-gradient(110% 130% at 100% 0%, rgba(61, 220, 151, 0.16), transparent 55%), #0E0F11;
  --diag-texto: #FAFAFA;
  --diag-etiqueta: #3DDC97;
  --diag-p: #A1A1AA;
  --diag-celda: rgba(255, 255, 255, 0.03);
  --diag-celda-texto: #71717A;
  --diag-esta: #3DDC97;
  --diag-esta-texto: #052E1C;
  --diag-esta-halo: 0 0 28px rgba(61, 220, 151, 0.35);
  --diag-eje: #5A5A64;
  --diag-brillo: none;
  --num-fondo: rgba(61, 220, 151, 0.12);
  --num-texto: #3DDC97;
  --cierre-fondo: radial-gradient(90% 140% at 0% 0%, rgba(61, 220, 151, 0.18), transparent 60%), #111113;
  --cierre-texto: #FAFAFA;
  --cierre-boton: #FAFAFA;
  --cierre-boton-texto: #09090B;
  --paso-1-fondo: rgba(61, 220, 151, 0.1);
  --paso-1: #3DDC97;
  --orbita-nucleo: #3DDC97;
  --orbita-brillo: 0 0 44px rgba(61, 220, 151, 0.5);
  --orbita-1: #3DDC97;
  --orbita-2: rgba(255, 255, 255, 0.35);
  --orbita-3: rgba(255, 255, 255, 0.14);
  --insignia-no: rgba(255, 255, 255, 0.06);
  --hecho-fondo: rgba(61, 220, 151, 0.06);
  --hecho-borde: rgba(61, 220, 151, 0.35);
  --aviso-fondo: rgba(250, 204, 21, 0.08);
  --aviso-borde: rgba(250, 204, 21, 0.25);
  --aviso-texto: #FDE68A;
}
/* Retícula fina y un foco de luz arriba */
[data-tema="grafito"] .aurora {
  background:
    radial-gradient(60% 45% at 50% -5%, rgba(61, 220, 151, 0.13), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 35%, transparent 80%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 35%, transparent 80%);
}
[data-tema="grafito"] h1 { font-weight: 600; letter-spacing: -0.045em; line-height: 0.98; }
[data-tema="grafito"] h2 { font-weight: 600; letter-spacing: -0.035em; }
[data-tema="grafito"] h3 { font-weight: 500; font-size: 18px; letter-spacing: -0.01em; }
[data-tema="grafito"] .degradado { background: linear-gradient(100deg, #3DDC97 10%, #B9F5D8 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-tema="grafito"] .etiqueta,
[data-tema="grafito"] .pastilla { font-weight: 500; }
[data-tema="grafito"] .anillo-cifra b { font-weight: 600; letter-spacing: -0.05em; }
[data-tema="grafito"] .anillo .valor { filter: drop-shadow(0 0 10px rgba(61, 220, 151, 0.45)); }
[data-tema="grafito"] .metrica b { font-weight: 600; letter-spacing: -0.03em; }
[data-tema="grafito"] .cuadrante div { border: 1px solid rgba(255, 255, 255, 0.06); }
[data-tema="grafito"] .chip { background: rgba(255, 255, 255, 0.03); }
[data-tema="grafito"] .entrada { backdrop-filter: blur(14px); }
[data-tema="grafito"] .boton-brillo .ico { color: #09090B; }
/* Luz que sigue al puntero dentro de cada tarjeta (decorativa; solo con mouse) */
[data-tema="grafito"] .tarjeta,
[data-tema="grafito"] .metrica,
[data-tema="grafito"] .pasos-como li { position: relative; isolation: isolate; }
[data-tema="grafito"] .tarjeta::before,
[data-tema="grafito"] .metrica::before,
[data-tema="grafito"] .pasos-como li::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 300ms ease; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(61, 220, 151, 0.09), transparent 65%); }
/* Aparición con un leve desenfoque que se aclara (enmascara el cambio de estado) */
[data-tema="grafito"] .revelar { opacity: 0; transform: translateY(10px); filter: blur(6px); transition: opacity 500ms var(--sale), transform 500ms var(--sale), filter 500ms var(--sale); transition-delay: calc(var(--i, 0) * 60ms); }
[data-tema="grafito"] .revelar.visto { opacity: 1; transform: none; filter: none; }
@media (hover: hover) and (pointer: fine) {
  [data-tema="grafito"] .tarjeta:hover::before,
  [data-tema="grafito"] .metrica:hover::before,
  [data-tema="grafito"] .pasos-como li:hover::before { opacity: 1; }
  [data-tema="grafito"] .tarjeta:hover,
  [data-tema="grafito"] .metrica:hover { border-color: rgba(255, 255, 255, 0.14); }
  [data-tema="grafito"] .boton-brillo:hover { filter: none; }
}

/* Movimiento reducido: sin trazos ni cortes animados; se conservan los colores */
@media (prefers-reduced-motion: reduce) {
  [data-tema] h1 .degradado::after,
  [data-tema] h2 .degradado::after { animation: none; }
  [data-tema="grafito"] .revelar { clip-path: none; transform: none; filter: none; transition: opacity 200ms ease; }
}