/*
 * DetectorIA · Tema visual "Galaxia oscura" (nebulosa morada, vidrio espacial)
 * Se carga en todas las páginas después de los estilos propios de cada una.
 * Para volver al aspecto anterior basta con quitar <link rel="stylesheet" href="/theme.css">.
 */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Onest:wght@400;500;600;700&display=swap");

:root {
  --bg: #030208;
  --ink: #f4f4f7;
  --muted: #a1a1b5;
  --neon-blue: 49, 46, 129;   /* azul medianoche */
  --violet: 139, 92, 246;     /* violeta neón */
  --magenta: 88, 28, 135;     /* morado oscuro */
  --cyan: 67, 56, 202;        /* índigo profundo */
  --glass: rgba(2, 6, 23, .70);
  --glass-strong: rgba(0, 0, 0, .55);
  --edge: linear-gradient(140deg, rgba(255,255,255,.22), rgba(255,255,255,.05) 32%, rgba(var(--violet),.30) 70%, rgba(var(--cyan),.28));
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --grad-primary: linear-gradient(110deg, #9333ea 0%, #7c3aed 35%, #4f46e5 70%, #2563eb 100%);
}

/* ---------- Fondo base y luz ambiental ---------- */
html { background: var(--bg); scrollbar-color: rgba(var(--violet), .35) transparent; }
body {
  background-color: var(--bg) !important;
  background-image: none !important;
  color: #e4e4ee;
  position: relative;
  isolation: isolate;
}
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -2;
  pointer-events: none;
  inset: -20vmax;
}
/* Malla de color: azul neón arriba a la izquierda, violeta arriba a la derecha,
   magenta a media altura y cian abajo */
body::before {
  background:
    radial-gradient(42vmax 34vmax at 8% 4%, rgba(var(--neon-blue), .75), transparent 70%),
    radial-gradient(36vmax 30vmax at 88% 6%, rgba(var(--violet), .34), transparent 70%),
    radial-gradient(48vmax 30vmax at 70% 30%, rgba(var(--magenta), .45), transparent 72%),
    radial-gradient(30vmax 24vmax at 30% 62%, rgba(var(--violet), .14), transparent 70%),
    radial-gradient(40vmax 30vmax at 96% 78%, rgba(var(--neon-blue), .55), transparent 70%),
    radial-gradient(38vmax 30vmax at 2% 96%, rgba(var(--magenta), .40), transparent 70%);
  filter: blur(24px) saturate(140%);
  animation: aurora 38s ease-in-out infinite alternate;
}
/* Polvo de estrellas muy tenue + viñeta para que el texto conserve contraste */
body::after {
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 140px 90px, rgba(196,181,253,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 260px 170px, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 90px 220px, rgba(165,180,252,.4), transparent 60%),
    radial-gradient(1px 1px at 330px 40px, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(1,1,6,.6) 100%);
  background-size: 360px 260px, 360px 260px, 360px 260px, 360px 260px, 360px 260px, 100% 100%;
  opacity: .9;
}
@keyframes aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, 1.5%, 0) scale(1.05); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.02); }
}
.grid-bg { opacity: .55; }

/* Focos detrás de las secciones principales */
main { position: relative; isolation: isolate; }
#herramienta, #objetivos, #guias, #faq { position: relative; }
#herramienta::before,
#objetivos::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(60px);
}
#herramienta::before {
  inset: 4% 12% auto 12%;
  height: 520px;
  background: radial-gradient(closest-side, rgba(var(--violet), .38), rgba(var(--neon-blue), .18) 55%, transparent);
}
#objetivos::before {
  inset: 10% -6% auto auto;
  width: 520px; height: 420px;
  background: radial-gradient(closest-side, rgba(var(--magenta), .18), rgba(var(--violet), .10) 60%, transparent);
}

/* ---------- Vidrio ---------- */
.glass, .tb, header.sticky, #dpc {
  background: linear-gradient(180deg, rgba(15,10,40,.55), var(--glass)) !important;
  -webkit-backdrop-filter: blur(40px) saturate(170%);
  backdrop-filter: blur(40px) saturate(170%);
  border-color: transparent !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 80px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.04);
}
.glass { position: relative; }
/* Borde de luz: blanco translúcido que vira a violeta y cian */
.glass::after, .tb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.tb { position: relative; }
.glow-border::before { display: none !important; }
details.glass[open] { box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 80px -30px rgba(0,0,0,.85), 0 0 40px -18px rgba(var(--violet), .55); }

/* Cabecera y pie */
header.sticky {
  background: rgba(5,6,11,.55) !important;
  box-shadow: none;
  border-bottom: 0 !important;
}
header.sticky::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--violet), .45), rgba(var(--cyan), .35), transparent);
}
footer { background: rgba(3,4,9,.55) !important; border-top: 0 !important; position: relative; }
footer::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}

/* Campos */
textarea, input[type="text"], input[type="email"], select {
  background-color: rgba(3,4,10,.55) !important;
  border-color: rgba(255,255,255,.09) !important;
  caret-color: #c4b5fd;
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), background-color .3s var(--ease-out);
}
textarea:focus, input[type="text"]:focus, input[type="email"]:focus, select:focus {
  border-color: rgba(var(--violet), .55) !important;
  box-shadow: 0 0 0 4px rgba(var(--violet), .14), 0 0 32px -8px rgba(var(--violet), .45) !important;
}
#highlightView, #pOut, #sumOutput { background-color: rgba(3,4,10,.45); }

/* ---------- Tipografía con luz ---------- */
/* Texto: Onest (muy legible, cálida). Títulos: Sora (geométrica, con aire tecnológico) */
body, body.font-sans, .font-sans, button, input, textarea, select, #dpc, #dpc button {
  font-family: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
main h1, main h2, main h3, .prose-dark h2, .prose-dark h3, #dpc h2, header a > span.text-lg, footer a.text-base {
  font-family: "Sora", "Onest", system-ui, sans-serif !important;
}
main h1 { font-weight: 700; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
main h1 {
  background-image: linear-gradient(100deg, #ffffff 0%, #e2e8f0 38%, #a5b4fc 72%, #c4b5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.035em;
  padding-bottom: .06em;
  /* Chrome no pinta el texto recortado si el propio título lleva una animación de opacidad */
  animation: none !important;
}
main h1 span {
  background-image: linear-gradient(95deg, #a5b4fc 0%, #c084fc 45%, #67e8f9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
main h2.text-3xl, main h2.text-2xl, .prose-dark h2 {
  background-image: linear-gradient(100deg, #ffffff 0%, #e2e8f0 50%, #a5b4fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient, .grad {
  background-image: linear-gradient(95deg, #93c5fd, #c084fc 50%, #67e8f9) !important;
}
::selection { background: rgba(var(--violet), .38); color: #fff; -webkit-text-fill-color: #fff; }

/* ---------- Botones principales ---------- */
.btn-primary, .btn-magic, .goal-cta {
  background-image: var(--grad-primary) !important;
  background-size: 160% 100% !important;
  background-position: 0% 50%;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 12px 32px -12px rgba(99,102,241,.75), 0 0 0 1px rgba(255,255,255,.08) inset, 0 1px 0 rgba(255,255,255,.22) inset !important;
  transition: background-position .5s var(--ease-out), box-shadow .3s var(--ease-out), transform .16s var(--ease-out), filter .3s var(--ease-out) !important;
}
.btn-magic { animation: none !important; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover, .btn-magic:hover, .goal-cta:hover {
    background-position: 100% 50%;
    box-shadow: 0 16px 44px -12px rgba(124,58,237,.9), 0 0 0 1px rgba(255,255,255,.12) inset, 0 1px 0 rgba(255,255,255,.26) inset !important;
    filter: brightness(1.08);
  }
}
.btn-primary:active, .btn-magic:active, .goal-cta:active { transform: scale(.97); }
.btn-primary[disabled], .btn-magic[disabled] { filter: saturate(.6) brightness(.85); }

/* Botones secundarios y fantasma */
.btn-ghost, .press, .chip, .seg, .goal-tab, .tb a, details > summary, footer a, header nav a {
  transition: color .3s var(--ease-out), background-color .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .16s var(--ease-out) !important;
}
@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover, .chip:hover, .seg:hover, .goal-tab:hover, .tb a:not([aria-current]):hover {
    box-shadow: 0 0 0 1px rgba(var(--violet), .35), 0 10px 28px -14px rgba(var(--violet), .7) !important;
  }
  header nav a:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
}

/* Selectores activos: pestañas, chips, segmentos, barra de herramientas */
html body .chip-on, html body .seg-on, html body .goal-tab[aria-selected="true"], html body .tb a[aria-current="page"], #tabEditor[aria-selected="true"], #tabHighlight[aria-selected="true"] {
  background-image: linear-gradient(135deg, rgba(124,58,237,.30), rgba(37,99,235,.20)) !important;
  background-color: transparent !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(167,139,250,.5), 0 10px 28px -14px rgba(124,58,237,.85) !important;
}
.step-n { background: linear-gradient(135deg, rgba(124,58,237,.35), rgba(37,99,235,.25)); box-shadow: inset 0 0 0 1px rgba(167,139,250,.45), 0 0 18px -6px rgba(var(--violet),.7); }

/* Botón Borrar de la vista comparativa */
#btnClearCompare, #btnReset, #btnClear {
  transition: color .3s var(--ease-out), background-color .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .16s var(--ease-out) !important;
}
@media (hover: hover) and (pointer: fine) {
  #btnClearCompare:hover, #btnReset:hover, #btnClear:hover {
    color: #fff !important;
    background-color: rgba(244,63,94,.18) !important;
    border-color: rgba(251,113,133,.6) !important;
    box-shadow: 0 0 0 1px rgba(251,113,133,.35), 0 10px 30px -10px rgba(244,63,94,.75) !important;
  }
}
#btnClearCompare:active, #btnReset:active, #btnClear:active { transform: scale(.97); }

/* Indicadores y chips de estado con un poco más de luz */
#gaugeArc { filter: drop-shadow(0 0 10px currentColor); }
.hl-ai { background: rgba(244,63,94,.18); }
.hl-human { background: rgba(16,185,129,.15); }
.ck.ok { box-shadow: 0 0 16px -6px rgba(52,211,153,.7); }

/* Banner de cookies con el mismo vidrio */
#dpc { position: fixed; }
#dpc .dpc-main { background-image: var(--grad-primary) !important; box-shadow: 0 10px 28px -10px rgba(99,102,241,.8); }

/* Accesibilidad y medios */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}
@media (max-width: 640px) {
  .glass, .tb, header.sticky { -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); }
}
@media print {
  body::before, body::after, #herramienta::before, #objetivos::before { display: none !important; }
}