@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════
   Velqerix — capa de tema y afinado visual.

   Va DESPUÉS de app.css a propósito. app.css define la estructura entera en
   fichas (`--ob-*` para las superficies, `--tinta-*` para el texto, `--linea`
   para los bordes); acá se vuelven a definir esas mismas fichas para los dos
   temas y se afinan un puñado de piezas. Así el cambio de negro a blanco no
   toca ni una regla de estructura: cambia la paleta y todo lo demás sigue.

   Orden: fichas claras · fichas oscuras · fondo · lado · hilo · redactor ·
   tipografía de presentación · interruptor.

   El tema claro va primero y sin condición: es el predeterminado. Quien no
   eligió nada todavía —y quien tenga el JavaScript caído— ve el papel claro,
   que es lo que la cabecera pinta antes de que la página aparezca.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tema claro (el predeterminado) ────────────────────────────────────────
   Blanco roto, apenas cálido. El blanco puro sobre una pantalla grande cansa
   y hace que los bordes finos desaparezcan; con un punto de amarillo el texto
   negro apoya mejor y las líneas se siguen viendo.

   La escala de tinta está medida: los cuatro tonos pasan 4.5:1 sobre las cinco
   superficies (`--ob-0` … `--ob-4`), incluido `--tinta-4`, que es el que usan
   las letras chicas —fechas, contadores, pies de tarjeta—. El más flojo de los
   cuatro llega a 4.63:1 sobre `--ob-4`, que es la superficie más clara donde
   alguna vez se apoya texto. */

:root,
html[data-tema="claro"] {
  color-scheme: light;

  --ob-0: #ffffff;
  --ob-1: #faf9f6;
  --ob-2: #f3f2ee;
  --ob-3: #ecebe5;
  --ob-4: #e2e1d9;
  --linea: #1a180f14;
  --linea-fuerte: #1a180f26;

  --tinta: #1d1c19;
  --tinta-2: #4b4945;
  --tinta-3: #5b5852;
  --tinta-4: #666259;
  /* Un paso más que `--tinta`, para la negrita del markdown: en cada tema tira
     hacia su extremo, no siempre al blanco. Con `#fff` fijo la negrita del chat
     era invisible sobre el papel claro. */
  --tinta-fuerte: #0d0c0a;

  --acento: #2563eb;
  --acento-fuerte: #1d4ed8;
  --acento-suave: #2563eb14;
  --acento-tinta: #ffffff;

  --sombra-1: 0 1px 2px #1a180f0f;
  --sombra-2: 0 10px 30px -16px #1a180f26, 0 2px 8px -4px #1a180f14;
  --sombra-3: 0 30px 70px -32px #1a180f2e, 0 8px 24px -16px #1a180f1f;
  --brillo: 0 0 0 1px #2563eb2e, 0 12px 40px -20px #2563eb33;

  --papel: #ffffff;
  --papel-2: var(--ob-1);
  --burbuja: var(--ob-2);

  /* Serif de sistema para el saludo. No se carga ninguna fuente nueva: las tres
     primeras ya están instaladas en Mac, Windows y Android. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", serif;

  /* Los azules sueltos que quedaron en app.css pasan a colgar del acento, así
     el tema claro no se llena de celestes que sobre blanco no se ven. Se
     resuelven contra el `--acento` del tema que esté puesto. */
  --azul: var(--acento);
  --azul-2: var(--acento-fuerte);
  --azul-3: var(--acento);
  --indigo: var(--acento);
  --cielo: var(--acento-fuerte);
  --cian: var(--acento-fuerte);
}

/* ── Tema oscuro ───────────────────────────────────────────────────────────
   Neutro y no azulado: el azul queda para la marca y los acentos, no para el
   papel. Es lo que hace que un bloque de código o una imagen no se vean
   teñidos. La escala de tinta está medida igual que la clara: el tono más
   flojo llega a 4.70:1 sobre `--ob-4`. */

html[data-tema="oscuro"] {
  color-scheme: dark;

  --ob-0: #0b0b0c;
  --ob-1: #121213;
  --ob-2: #191919;
  --ob-3: #202021;
  --ob-4: #2a2a2c;
  --linea: #ffffff12;
  --linea-fuerte: #ffffff1f;

  --tinta: #f2f2f0;
  --tinta-2: #c6c6c2;
  --tinta-3: #a8a8a2;
  --tinta-4: #94948e;
  --tinta-fuerte: #ffffff;

  --acento: #6aa2ff;
  --acento-fuerte: #8fbaff;
  --acento-suave: #6aa2ff1a;
  --acento-tinta: #0b0b0c;

  --sombra-1: 0 1px 2px #00000059;
  --sombra-2: 0 10px 30px -14px #000000a6, 0 2px 8px -4px #00000080;
  --sombra-3: 0 30px 70px -30px #000000c4, 0 8px 24px -14px #0000009e;
  --brillo: 0 0 0 1px #6aa2ff33, 0 12px 40px -18px #6aa2ff3d;

  --papel: var(--ob-1);
  --papel-2: var(--ob-2);
  --burbuja: #262627;
}

/* ── Fondo: papel quieto ───────────────────────────────────────────────────
   Se apagan las tres mallas azules que se movían, la rejilla y el grano. Un
   fondo que respira detrás del texto compite con el texto, y acá lo que
   importa es lo que la IA escribe. Queda una sola luz muy tenue arriba, que
   le da profundidad al oscuro sin teñir nada. */

.fondo-malla.m2,
.fondo-malla.m3,
.fondo-rejilla,
.fondo-grano { display: none; }

.fondo-malla.m1 {
  width: 120vw; height: 70vh;
  top: -34vh; left: -10vw;
  border-radius: 0;
  filter: blur(120px);
  opacity: .5;
  background: radial-gradient(ellipse at 50% 50%, var(--acento) 0%, transparent 70%);
  animation: none;
}

html:not([data-tema="oscuro"]) .fondo-malla.m1 { opacity: .07; }
html[data-tema="oscuro"] .fondo-malla.m1 { opacity: .09; }

/* ── Panel de conversaciones ───────────────────────────────────────────── */

.lado {
  background: var(--ob-2);
  backdrop-filter: none;
}

.tablero-barra {
  background: color-mix(in srgb, var(--ob-1) 88%, transparent);
  backdrop-filter: blur(12px);
}

.tablero-titulo[contenteditable="true"] {
  background: var(--ob-3);
  outline: 1px solid var(--acento);
}

/* ── El hilo ───────────────────────────────────────────────────────────────
   Columna más angosta —una línea de setenta y pico de caracteres se lee de un
   tirón; una de cien obliga a barrer con la cabeza— y dos voces distintas: lo
   que escribe el usuario va en una tarjeta, lo que contesta la IA va suelto
   sobre el papel, como un documento. */

.hilo-interior,
.redactor-interior { max-width: 768px; }

.hilo { padding: 2rem 1.15rem 1.4rem; }

.msg-sello {
  width: 26px; height: 26px;
  border-radius: var(--r-full);
  font-size: .7rem;
}

.msg { grid-template-columns: 26px minmax(0, 1fr); gap: .75rem; }

.msg.de-usuario .msg-sello,
.msg.de-ia .msg-sello {
  background: var(--ob-4);
  color: var(--tinta-2);
  box-shadow: none;
  font-weight: 600;
}

.msg.de-ia .msg-sello { background: var(--acento); color: var(--acento-tinta); }

/* El mensaje del usuario, en su tarjeta. */
.msg.de-usuario .msg-texto {
  padding: .7rem .95rem;
  border-radius: var(--r-md);
  background: var(--burbuja);
  border: 1px solid var(--linea);
  color: var(--tinta);
}

.msg-quien { font-size: .78rem; }
.msg-texto.escribiendo > :last-child::after { background: var(--acento); }

/* ── El redactor ───────────────────────────────────────────────────────────
   Una sola tarjeta bien redondeada, apoyada en el papel y sin vidrio. El aviso
   de foco es el borde del acento, sin halo: el halo azul de antes se comía el
   borde inferior de la pantalla en el teléfono. */

.redactor-caja {
  border-radius: var(--r-xl);
  background: var(--papel);
  border: 1px solid var(--linea-fuerte);
  backdrop-filter: none;
  box-shadow: var(--sombra-1);
  padding: .55rem .55rem .55rem 1.05rem;
}

.redactor-caja:focus-within {
  border-color: var(--acento);
  box-shadow: var(--sombra-1), 0 0 0 3px var(--acento-suave);
}

.redactor-enviar {
  background: var(--acento);
  color: var(--acento-tinta);
  border-radius: var(--r-full);
  box-shadow: none;
}

.redactor-enviar:hover { transform: none; background: var(--acento-fuerte); filter: none; }
.redactor-enviar.detener { background: var(--rojo); color: #fff; }

/* ── Botones ───────────────────────────────────────────────────────────────
   Plano y de un solo color. Los degradados con brillo interior envejecen mal y
   en el tema claro se ven sucios. */

.btn-primario {
  background: var(--acento);
  color: var(--acento-tinta);
  box-shadow: none;
}

.btn-primario:hover { background: var(--acento-fuerte); box-shadow: none; transform: none; }

.btn-fantasma { background: transparent; backdrop-filter: none; }
.btn-fantasma:hover { background: var(--ob-3); }
.btn-plano:hover { background: var(--ob-3); }
.etiqueta { background: var(--ob-2); backdrop-filter: none; }
.etiqueta .ic { color: var(--acento); }

/* ── Pantalla de arranque ──────────────────────────────────────────────────
   El saludo en serif. Es lo único con serif en toda la aplicación y por eso
   funciona: marca que ahí empieza algo, sin poner un cartel. */

.vacio h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  letter-spacing: -.015em;
  line-height: 1.2;
}

.vacio { gap: 1.1rem; }
.vacio .chispas { margin-top: 1rem; }

.chispa-btn {
  border-radius: var(--r-md);
  background: transparent;
  border: 1px solid var(--linea-fuerte);
}

.chispa-btn:hover { background: var(--ob-2); border-color: var(--acento); }

/* ── Barra del sitio público ───────────────────────────────────────────── */

body.desplazado .nav {
  background: color-mix(in srgb, var(--ob-1) 90%, transparent);
}

/* ── El interruptor de tema ────────────────────────────────────────────────
   Dos iconos superpuestos: se muestra el del tema al que vas a ir, que es lo
   que la persona quiere saber al mirarlo. */

.btn-tema .ic { display: none; }
.btn-tema .ic-luna { display: block; }
html[data-tema="oscuro"] .btn-tema .ic-luna { display: none; }
html[data-tema="oscuro"] .btn-tema .ic-sol { display: block; }

/* En las pantallas de entrar y crear cuenta no hay barra donde ponerlo, así que
   va suelto arriba a la derecha. */
.acceso { position: relative; }

.acceso-tema {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}

/* Mientras se cambia el tema no se anima nada: con transiciones puestas en
   medio archivo, el salto de negro a blanco queda como un barrido sucio. */
html.cambiando-tema,
html.cambiando-tema * {
  transition: none !important;
  animation: none !important;
}

/* ── Velos ─────────────────────────────────────────────────────────────────
   app.css pinta las superficies suaves y los estados de hover con blanco
   translúcido —`#ffffff0d` y familia—. Sobre el papel blanco del tema claro,
   blanco sobre blanco no se ve: los hover desaparecen y las pistas de las
   barras quedan huecas. Así que el velo pasa a ser una ficha: blanco en el
   oscuro, tinta en el claro. Lo mismo con los azules fijos, que se resuelven
   contra el acento del tema puesto.

   De acá para abajo se repiten los mismos selectores de app.css. Esta hoja va
   después, así que gana sin subir la especificidad ni un punto: cada regla
   cambia colores y nada más. */

:root,
html[data-tema="claro"] {
  --velo-1: #1a180f08;
  --velo-2: #1a180f0f;
  --velo-3: #1a180f17;
  --velo-4: #1a180f2b;

  --tinte-1: #2563eb0f;
  --tinte-2: #2563eb1f;
  --borde-acento: #2563eb59;
  --scrim: #1a180f59;

  /* Los pasteles del tema oscuro sobre blanco no se leen: se bajan a un tono
     que apoya sobre papel claro. Estos tres se usan como texto en media docena
     de lugares (el «listo» del botón de copiar, el plan actual, el medidor en
     rojo), así que el cambio es de fondo y no de adorno. */
  --rojo-tinta: #b91c3c;
  --lima-tinta: #15803d;

  --rojo: #dc2626;
  --lima: #15803d;
  --ambar: #b45309;

  /* La pastilla verde de un descuento lleva texto adentro, así que necesita su
     propio par: `--lima` y `--lima-tinta` son los dos tonos de texto del verde
     —en el tema claro son el mismo color— y usarlos como fondo y letra dejaba
     el «−17%» ilegible. Acá el fondo es el verde pleno y la letra el papel. */
  --lima-chip: #15803d;
  --lima-chip-tinta: #ffffff;
}

html[data-tema="oscuro"] {
  --velo-1: #ffffff06;
  --velo-2: #ffffff0b;
  --velo-3: #ffffff12;
  --velo-4: #ffffff1f;

  --tinte-1: #6aa2ff14;
  --tinte-2: #6aa2ff2b;
  --borde-acento: #6aa2ff59;
  --scrim: #000000b8;

  --rojo-tinta: #fda4af;
  --lima-tinta: #bbf7d0;

  /* Los tres del semáforo vuelven a los valores de app.css: sobre papel negro
     el rojo y el verde saturados sí se leen. Se repiten acá porque el bloque
     claro de arriba —que ahora es también `:root`— los pisó. */
  --rojo: #fb7185;
  --lima: #4ade80;
  --ambar: #fbbf24;

  /* Sobre papel negro la pastilla se invierte: fondo verde hondo y letra clara.
     El verde saturado de arriba como fondo obliga a una letra oscura que sobre
     el resto de la página se vería como un agujero. */
  --lima-chip: #14532d;
  --lima-chip-tinta: #86efac;
}

/* ── Base y formularios ──────────────────────────────────────────────────── */

::selection { background: var(--tinte-2); color: var(--tinta); }

::-webkit-scrollbar-thumb { background: var(--velo-4); }
::-webkit-scrollbar-thumb:hover { background: var(--tinta-4); }

.brillante { color: var(--tinta); text-shadow: none; }

.btn-icono:hover { background: var(--ob-3); }
.btn-peligro { color: var(--rojo-tinta); }
.campo.mal small { color: var(--rojo-tinta); }

.campo input,
.campo select,
.campo textarea,
.entrada {
  background: var(--ob-0);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus,
.entrada:focus {
  background: var(--ob-0);
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

.campo-ojo:hover { background: var(--velo-2); }

.interruptor-pista { background: var(--velo-3); }

.interruptor input:checked + .interruptor-pista {
  background: var(--acento);
  border-color: var(--acento);
}

.interruptor input:focus-visible + .interruptor-pista {
  box-shadow: 0 0 0 3px var(--acento-suave);
}

.fuerza-barra { background: var(--velo-3); }

/* ── Avisos y paneles ────────────────────────────────────────────────────── */

.aviso { background: var(--velo-1); }
.aviso-error { color: var(--rojo-tinta); }
.aviso-ok { color: var(--lima-tinta); }

/* El panel dejó de ser cristal: papel opaco con una línea. El degradado de
   blancos y el filo iluminado de arriba eran el truco del vidrio, y sobre
   blanco el truco no se ve —queda un rectángulo sucio—. */
.panel {
  background: var(--papel);
  border: 1px solid var(--linea);
  backdrop-filter: none;
}

.panel::before { background: var(--linea-fuerte); }

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
}

.tarjeta::after {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), var(--tinte-1), transparent 66%);
}

.tarjeta:hover { border-color: var(--borde-acento); }

.tarjeta-icono,
.acceso-lista .ic-caja,
.error-caja .ic-caja {
  border: 1px solid var(--borde-acento);
  background: var(--tinte-1);
}

.franja {
  border: 1px solid var(--borde-acento);
  background: var(--ob-2);
}

.error-codigo {
  background: linear-gradient(170deg, var(--tinte-2), transparent 70%);
}

/* ── Marca y barra ──────────────────────────────────────────────────────── */

.marca-glifo {
  background: var(--acento);
  color: var(--acento-tinta);
  box-shadow: none;
}

.marca:hover .marca-glifo { box-shadow: none; background: var(--acento-fuerte); }

.nav-enlaces a:hover { background: var(--velo-2); }
.nav-enlaces a[aria-current="page"] { background: var(--velo-3); }

/* ── Maqueta de la portada ─────────────────────────────────────────────────
   Es un dibujo de la aplicación, no una captura. Tiene que seguir al tema:
   una maqueta negra dentro de una portada blanca se lee como un error. */

.maqueta { background: var(--papel); border: 1px solid var(--linea); }
.maqueta-barra { background: var(--ob-2); }
.maqueta-punto { background: var(--velo-4); }
.maqueta-burbuja.yo { background: var(--acento); color: var(--acento-tinta); }
.maqueta-burbuja.ella { background: var(--ob-2); }

.maqueta-tarjeta {
  border: 1px solid var(--borde-acento);
  background: var(--tinte-1);
}

/* ── Planes ─────────────────────────────────────────────────────────────── */

.plan { background: var(--papel); }

.plan.destacado {
  border-color: var(--acento);
  background: var(--papel);
  box-shadow: var(--sombra-2);
}

.plan-cinta { background: var(--acento); color: var(--acento-tinta); box-shadow: none; }
.plan-creditos { background: var(--velo-1); }
.plan-actual { color: var(--lima-tinta); }

/* ── Panel lateral ──────────────────────────────────────────────────────── */

.conv:hover { background: var(--velo-2); }

.conv.activa,
.conv.activa:hover {
  background: var(--tinte-2);
  border-color: var(--borde-acento);
  /* app.css la deja en blanco puro: sobre el tinte claro daba 1.4:1. */
  color: var(--tinta);
}

.conv-accion:hover { background: var(--velo-3); }

.medidor-pista,
.barra.cero { background: var(--velo-3); }

.avatar { background: var(--acento); color: var(--acento-tinta); box-shadow: none; }

/* ── Tablero, hilo y herramientas ───────────────────────────────────────── */

.tablero-titulo[contenteditable="true"] { background: var(--ob-3); }

.motor-opcion { background: var(--velo-1); }
.motor-opcion:hover { border-color: var(--borde-acento); background: var(--velo-2); }

.motor-opcion[aria-selected="true"] {
  border-color: var(--acento);
  background: var(--tinte-1);
}

.pensado { background: var(--velo-1); }

.herr { background: var(--velo-1); }
.herr.corriendo { border-color: var(--borde-acento); box-shadow: none; }

.vivo { border: 1px solid var(--borde-acento); background: var(--tinte-1); }

.artefacto { background: var(--velo-1); }
.artefacto:hover { border-color: var(--acento); background: var(--tinte-1); }

/* ── Redactor y paleta ──────────────────────────────────────────────────── */

.paleta { background: var(--papel); border-color: var(--linea-fuerte); backdrop-filter: none; }
.paleta-op:hover,
.paleta-op[aria-selected="true"] { background: var(--velo-3); }

.adj-vista { background: var(--velo-2); }
.redactor-pie kbd { background: var(--velo-2); border-color: var(--linea-fuerte); }

/* ── Markdown ───────────────────────────────────────────────────────────── */

.md a { text-decoration-color: var(--borde-acento); }
.md blockquote { border-left-color: var(--borde-acento); }
.md th { background: var(--velo-1); }

.md code { background: var(--velo-3); color: var(--tinta); }

/* Los bloques de código quedan oscuros en los dos temas, a propósito. El
   resaltado son ocho colores pensados sobre fondo negro; pasarlos al blanco es
   rehacer la paleta entera para ganar poco, y un bloque oscuro dentro de una
   página clara es lo que hacen casi todos los editores. Por eso ni `.bloque`,
   ni su barra, ni el botón de copiar se retocan acá: los blancos translúcidos
   de app.css están bien donde están.

   Lo único que sí hay que arreglar son las líneas: `--linea` en el tema claro
   es tinta translúcida, y sobre el fondo negro del bloque desaparece —la barra
   del nombre del archivo quedaba pegada al código, sin separación—. Adentro de
   la isla oscura, las líneas vuelven a ser blancas. */

html:not([data-tema="oscuro"]) .md .bloque,
html:not([data-tema="oscuro"]) .md .bloque-barra,
html:not([data-tema="oscuro"]) .md .bloque .btn-copiar {
  border-color: #ffffff1f;
}

html:not([data-tema="oscuro"]) .md .bloque-barra,
html:not([data-tema="oscuro"]) .md .bloque .btn-copiar { color: #c6c6c2; }

html:not([data-tema="oscuro"]) .md .bloque .btn-copiar:hover {
  color: #f2f2f0;
  background: #ffffff12;
  border-color: #ffffff1f;
}

html:not([data-tema="oscuro"]) .md .bloque .btn-copiar.listo { color: #4ade80; border-color: #4ade8040; }

/* ── Cajón, diálogos y avisos flotantes ─────────────────────────────────── */

.cajon { background: var(--papel); }
.velo { background: var(--scrim); }
.tostada { background: var(--ob-3); border-color: var(--linea-fuerte); backdrop-filter: none; }

.pestanas { background: var(--velo-1); }

/* El nivel elegido, en el panel de ajustes. `app.css` lo escribe blanco sobre un
   azul translúcido, que en el oscuro se lee y en el claro no: el 12 % de azul
   sobre papel blanco queda casi blanco y el texto daba 1.2:1 —invisible—. Con la
   tinta azul fuerte son 5.65:1 en el claro y 7.27:1 en el oscuro. */
.pestanas button[aria-selected="true"] { background: var(--tinte-2); color: var(--azul-2); }

.panel-bloque,
.panel-bloque .item,
.item { background: var(--velo-1); }

.barra { background: var(--acento); }

/* ── Rojos y verdes sobre papel claro ──────────────────────────────────────
   Los tintes de estado de app.css están calculados para apoyar sobre negro:
   un borde rosa al 27 % de opacidad sobre blanco casi no existe. Se repiten
   con el rojo y el verde oscuros, y sólo para el tema claro. */

html:not([data-tema="oscuro"]) .aviso-error { border-color: #b91c3c40; background: #b91c3c0d; }
html:not([data-tema="oscuro"]) .aviso-ok { border-color: #15803d40; background: #15803d0d; }
html:not([data-tema="oscuro"]) .btn-peligro { background: #b91c3c0f; border-color: #b91c3c40; }
html:not([data-tema="oscuro"]) .btn-peligro:hover { background: #b91c3c1f; }
html:not([data-tema="oscuro"]) .campo.mal input { border-color: #b91c3c66; }
html:not([data-tema="oscuro"]) .herr.fallo { border-color: #b91c3c47; }
html:not([data-tema="oscuro"]) .herr.hecho { border-color: #15803d40; }
html:not([data-tema="oscuro"]) .btn-copiar.listo { border-color: #15803d40; }
html:not([data-tema="oscuro"]) .plan-actual { border-color: #15803d59; }
html:not([data-tema="oscuro"]) .tostada.error { border-color: #b91c3c66; }