@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════
   Velqerix — hoja de estilo única.
   Orden: tokens · base · fondo · tipografía · controles · navegación ·
   portada · planes · acceso · aplicación · markdown · utilidades.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Obsidiana: el fondo no es negro puro, lleva algo de azul para que los
     acentos apoyen sobre la misma familia de color y no se vean sucios. */
  --ob-0: #04060d;
  --ob-1: #060911;
  --ob-2: #0a0e1a;
  --ob-3: #0f1524;
  --ob-4: #151d31;
  --linea: #ffffff14;
  --linea-fuerte: #ffffff26;

  --tinta: #eaf1fd;
  --tinta-2: #b3c1da;
  --tinta-3: #8492ad;
  --tinta-4: #5b687f;

  /* Toda la paleta viva es azul: del cobalto al cielo, con el cian como
     chispa. Nada de violeta. */
  --azul: #3b82f6;
  --azul-2: #60a5fa;
  --azul-3: #2563eb;
  --indigo: #0ea5e9;
  --cian: #22d3ee;
  --cielo: #38bdf8;
  --lima: #4ade80;
  --ambar: #fbbf24;
  --rojo: #fb7185;

  --acento: var(--azul);
  --acento-suave: #3b82f61f;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-full: 999px;

  --sombra-1: 0 1px 2px #0009;
  --sombra-2: 0 10px 30px -12px #000c, 0 2px 8px -4px #0008;
  --sombra-3: 0 30px 70px -28px #000e, 0 8px 24px -12px #000a;
  --brillo: 0 0 0 1px #3b82f640, 0 12px 40px -14px #3b82f655;

  --paso: cubic-bezier(.22, 1, .36, 1);
  --rapido: 140ms var(--paso);
  --medio: 260ms var(--paso);
  --lento: 520ms var(--paso);

  --fuente: "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code",
    "Roboto Mono", Menlo, Consolas, monospace;

  --ancho: 1180px;
  --nav-h: 68px;
}

/* ── Base ──────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html.vq {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--ob-1);
}

body.vq-body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ob-1);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.65;
  font-feature-settings: "cv11" 1, "ss01" 1, "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

/* Anti-copia. El texto de la interfaz no se selecciona ni se arrastra; para
   sacar código hay un botón de copiar en cada bloque, que usa el portapapeles
   sin exponer la selección. */
body.vq-body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/* Imágenes: sin arrastre, sin menú contextual y sin guardar desde el gesto
   largo del móvil. La capa `escudo` se pinta encima del pixel real. */
img, svg, canvas, video {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

img { max-width: 100%; height: auto; display: block; }

/* `hidden` tiene que ganar siempre. La regla del navegador es `display: none`
   con la misma fuerza que una clase, así que cualquier `.algo { display: grid }`
   la pisaba y el elemento seguía ocupando su lugar aunque estuviera "oculto":
   la paleta de comandos dejaba una franja vacía arriba del redactor. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

button { cursor: pointer; }

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--azul-2);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: #3b82f655; color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #ffffff1c;
  border: 3px solid transparent;
  border-radius: var(--r-full);
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #ffffff33; background-clip: content-box; }

/* ── Fondo ─────────────────────────────────────────────────────────────── */

.fondo {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.fondo-malla {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  will-change: transform;
}

.fondo-malla.m1 {
  width: 62vw; height: 62vw;
  top: -22vw; left: -14vw;
  background: radial-gradient(circle at 50% 50%, #2563eb 0%, #2563eb00 68%);
  animation: deriva1 26s var(--paso) infinite alternate;
}

.fondo-malla.m2 {
  width: 52vw; height: 52vw;
  top: 8vh; right: -18vw;
  background: radial-gradient(circle at 50% 50%, #0891b2 0%, #0891b200 66%);
  opacity: .42;
  animation: deriva2 32s var(--paso) infinite alternate;
}

.fondo-malla.m3 {
  width: 46vw; height: 46vw;
  bottom: -20vw; left: 24vw;
  background: radial-gradient(circle at 50% 50%, #0369a1 0%, #0369a100 64%);
  opacity: .3;
  animation: deriva3 38s var(--paso) infinite alternate;
}

/* Rejilla técnica, muy tenue, desvanecida hacia los bordes. */
.fondo-rejilla {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(to right, #ffffff09 1px, transparent 1px),
    linear-gradient(to bottom, #ffffff09 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 32%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 32%, #000 30%, transparent 78%);
}

/* Grano: rompe el degradado para que no se vea en bandas en paneles OLED. */
.fondo-grano {
  position: absolute;
  inset: 0;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes deriva1 { to { transform: translate3d(9vw, 7vh, 0) scale(1.14); } }
@keyframes deriva2 { to { transform: translate3d(-11vw, 10vh, 0) scale(1.1); } }
@keyframes deriva3 { to { transform: translate3d(7vw, -9vh, 0) scale(1.18); } }

@media (prefers-reduced-motion: reduce) {
  .fondo-malla { animation: none; }
  html.vq { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Tipografía ────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-weight: 620;
  letter-spacing: -.022em;
  line-height: 1.12;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); letter-spacing: -.038em; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.85rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1.05rem; }

p { text-wrap: pretty; }

/* Texto con degradado: se usa una sola vez por vista, para el remate del
   titular. Con `background-clip` el color viene del degradado. */
.gradiente {
  background: linear-gradient(104deg, var(--azul-2) 4%, var(--cian) 48%, var(--cielo) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.brillante { color: #fff; text-shadow: 0 0 34px #60a5fa4d; }

.apagado { color: var(--tinta-3); }
.apagado-2 { color: var(--tinta-4); }

.plomo { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--tinta-2); max-width: 62ch; }

.mono { font-family: var(--mono); font-size: .875em; font-variant-ligatures: none; }

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .34rem .78rem .34rem .6rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-full);
  background: #ffffff08;
  color: var(--tinta-2);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .01em;
  backdrop-filter: blur(8px);
}

.etiqueta .ic { color: var(--azul-2); }

.etiqueta-punto::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lima);
  box-shadow: 0 0 0 3px #4ade8028;
  animation: latido 2.4s ease-in-out infinite;
}

@keyframes latido {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.82); }
}

.ic { flex: none; display: block; }

/* ── Controles ─────────────────────────────────────────────────────────── */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .66rem 1.15rem;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  font-size: .93rem;
  font-weight: 560;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: transform var(--rapido), background var(--rapido),
    border-color var(--rapido), box-shadow var(--medio), color var(--rapido);
}

.btn:active { transform: translateY(1px) scale(.985); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45;
  pointer-events: none;
}

.btn-primario {
  background: linear-gradient(140deg, #60a5fa 0%, #2563eb 52%, #1d4ed8 100%);
  color: #fff;
  box-shadow: 0 1px 0 #ffffff2e inset, 0 12px 30px -14px #2563ebaa;
}

.btn-primario:hover {
  box-shadow: 0 1px 0 #ffffff3d inset, 0 16px 40px -14px #3b82f6cc;
  transform: translateY(-1px);
}

.btn-fantasma {
  background: #ffffff0a;
  border-color: var(--linea);
  color: var(--tinta);
  backdrop-filter: blur(10px);
}

.btn-fantasma:hover { background: #ffffff14; border-color: var(--linea-fuerte); }

.btn-plano { color: var(--tinta-2); padding: .5rem .8rem; }
.btn-plano:hover { color: var(--tinta); background: #ffffff0d; }

.btn-peligro { background: #fb718519; border-color: #fb718544; color: #fda4af; }
.btn-peligro:hover { background: #fb718528; }

.btn-grande { padding: .92rem 1.65rem; font-size: 1rem; }
.btn-bloque { width: 100%; }

.btn-icono {
  width: 38px; height: 38px;
  padding: 0;
  border-radius: var(--r-sm);
  color: var(--tinta-3);
}

.btn-icono:hover { color: var(--tinta); background: #ffffff12; }

/* Formularios */

.campo { display: grid; gap: .4rem; }

.campo > label {
  font-size: .82rem;
  font-weight: 560;
  color: var(--tinta-2);
  letter-spacing: .002em;
}

.campo-caja { position: relative; display: flex; align-items: center; }

.campo input, .campo select, .campo textarea, .entrada {
  width: 100%;
  padding: .78rem .95rem;
  border-radius: var(--r-sm);
  background: #0a0e1a99;
  border: 1px solid var(--linea);
  color: var(--tinta);
  font-size: .96rem;
  transition: border-color var(--rapido), background var(--rapido), box-shadow var(--medio);
}

.campo input::placeholder, .entrada::placeholder, textarea::placeholder { color: var(--tinta-4); }

.campo input:hover, .entrada:hover { border-color: var(--linea-fuerte); }

.campo input:focus, .campo select:focus, .campo textarea:focus, .entrada:focus {
  border-color: #3b82f680;
  background: #0c1220;
  box-shadow: 0 0 0 4px #3b82f61f;
}

.campo input[type="password"] { padding-right: 3rem; letter-spacing: .06em; }

.campo-ojo {
  position: absolute;
  right: .35rem;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--tinta-4);
  transition: color var(--rapido), background var(--rapido);
}

.campo-ojo:hover { color: var(--tinta-2); background: #ffffff0d; }
.campo-ojo[aria-pressed="true"] { color: var(--azul-2); }

.campo small { font-size: .78rem; color: var(--tinta-4); }
.campo.mal input { border-color: #fb718566; }
.campo.mal small { color: #fda4af; }

.interruptor {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  cursor: pointer;
}

.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.interruptor-pista {
  width: 42px; height: 24px;
  border-radius: var(--r-full);
  background: #ffffff14;
  border: 1px solid var(--linea);
  position: relative;
  transition: background var(--medio), border-color var(--medio);
  flex: none;
}

.interruptor-pista::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--tinta-3);
  transition: transform var(--medio), background var(--medio);
}

.interruptor input:checked + .interruptor-pista {
  background: linear-gradient(120deg, #3b82f6, #0ea5e9);
  border-color: #3b82f6aa;
}

.interruptor input:checked + .interruptor-pista::after {
  transform: translateX(18px);
  background: #fff;
}

.interruptor input:focus-visible + .interruptor-pista { box-shadow: 0 0 0 4px #3b82f62e; }

/* Avisos y paneles */

.aviso {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .7rem .9rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--linea);
  background: #ffffff08;
  font-size: .9rem;
  color: var(--tinta-2);
}

.aviso .ic { margin-top: .18rem; }
.aviso-error { border-color: #fb718544; background: #fb71851a; color: #fecdd3; }
.aviso-error .ic { color: var(--rojo); }
.aviso-ok { border-color: #4ade8040; background: #4ade8014; color: #bbf7d0; }
.aviso-ok .ic { color: var(--lima); }
.aviso-info .ic { color: var(--azul-2); }

.panel {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--linea);
  background: linear-gradient(168deg, #ffffff0d 0%, #ffffff05 42%, #ffffff02 100%);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: var(--sombra-2);
}

/* Filo superior iluminado: el detalle que hace que el cristal parezca cristal. */
.panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffffff40 22%, #ffffff59 50%, #ffffff40 78%, transparent);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  pointer-events: none;
}

.envoltura { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }

.contenido { position: relative; z-index: 1; }

/* ── Navegación ────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background var(--medio), border-color var(--medio), backdrop-filter var(--medio);
}

body.desplazado .nav {
  background: #060911cc;
  border-bottom-color: var(--linea);
  backdrop-filter: blur(18px) saturate(1.3);
}

.nav-caja {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.marca { display: inline-flex; align-items: center; gap: .6rem; }

.marca-glifo {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(140deg, #3b82f6, #0284c7 60%, #0891b2);
  box-shadow: 0 1px 0 #ffffff33 inset, 0 8px 22px -10px #2563ebcc;
  transition: transform var(--medio), box-shadow var(--medio);
}

.marca:hover .marca-glifo { transform: rotate(-6deg) scale(1.05); box-shadow: 0 1px 0 #ffffff44 inset, 0 12px 30px -10px #3b82f6; }

.marca-texto {
  font-size: 1.14rem;
  font-weight: 640;
  letter-spacing: -.028em;
}

.nav-enlaces { display: flex; align-items: center; gap: .2rem; margin-inline-start: auto; }

.nav-enlaces a {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .5rem .82rem;
  border-radius: var(--r-full);
  font-size: .91rem;
  font-weight: 520;
  color: var(--tinta-3);
  transition: color var(--rapido), background var(--rapido);
}

.nav-enlaces a:hover { color: var(--tinta); background: #ffffff0d; }
.nav-enlaces a[aria-current="page"] { color: var(--tinta); background: #ffffff12; }
.nav-enlaces .ic { color: var(--azul-2); opacity: .85; }

.nav-acciones { display: flex; align-items: center; gap: .55rem; }

/* En el móvil no se esconden los enlaces: se quedan sin texto a la vista, pero
   el nombre sigue estando para los lectores de pantalla (los iconos son
   aria-hidden). Antes "Planes" y "Entrar" desaparecían del todo. */
@media (max-width: 720px) {
  .nav-caja { gap: .5rem; padding-inline: 1rem; }
  .marca-texto { display: none; }
  .nav-enlaces { gap: .1rem; }
  .nav-enlaces a { position: relative; padding: .6rem; }
  .nav-enlaces .ic { opacity: 1; }
  .nav-acciones { gap: .35rem; }
  .nav-acciones .btn { padding: .62rem .95rem; font-size: .88rem; }
  .nav-acciones .btn-fantasma { padding: .62rem; }

  .nav-enlaces a > span,
  .nav-acciones .btn-fantasma > span {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (max-width: 400px) {
  .nav-acciones .btn-primario { padding: .62rem; }
  .nav-acciones .btn-primario > span {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ── Portada ───────────────────────────────────────────────────────────── */

.heroe {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5.5rem);
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}

@media (max-width: 980px) {
  .heroe { grid-template-columns: 1fr; padding-block: 2.6rem 3rem; }
}

.heroe-texto { display: grid; gap: 1.5rem; justify-items: start; }

.heroe h1 { max-width: 18ch; }

.heroe-acciones { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

.heroe-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  padding-top: .6rem;
  border-top: 1px solid var(--linea);
  width: 100%;
}

.heroe-dato { display: grid; gap: .1rem; }
.heroe-dato b { font-size: 1.35rem; font-weight: 640; letter-spacing: -.02em; }
.heroe-dato span { font-size: .8rem; color: var(--tinta-4); }

/* Maqueta de la aplicación: no es una captura, es la interfaz real en
   miniatura, así nunca queda desactualizada respecto del producto. */
.maqueta {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid var(--linea);
  background: linear-gradient(170deg, #111829 0%, #090d17 100%);
  box-shadow: var(--sombra-3), var(--brillo);
  overflow: hidden;
  transform: perspective(1400px) rotateY(-9deg) rotateX(3deg) translateZ(0);
  transition: transform var(--lento);
}

.maqueta:hover { transform: perspective(1400px) rotateY(-4deg) rotateX(1.5deg); }

@media (max-width: 980px) { .maqueta { transform: none; } .maqueta:hover { transform: none; } }

.maqueta-barra {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--linea);
  background: #ffffff06;
}

.maqueta-punto { width: 9px; height: 9px; border-radius: 50%; background: #ffffff1f; }
.maqueta-punto:nth-child(1) { background: #fb718566; }
.maqueta-punto:nth-child(2) { background: #fbbf2466; }
.maqueta-punto:nth-child(3) { background: #4ade8066; }
.maqueta-titulo { margin-left: .5rem; font-size: .76rem; color: var(--tinta-4); font-family: var(--mono); }

.maqueta-cuerpo { padding: 1.1rem; display: grid; gap: .8rem; min-height: 330px; align-content: start; }

.maqueta-burbuja {
  padding: .62rem .85rem;
  border-radius: 14px;
  font-size: .86rem;
  line-height: 1.55;
  max-width: 86%;
}

.maqueta-burbuja.yo {
  justify-self: end;
  background: linear-gradient(140deg, #2563eb, #1d4ed8);
  color: #fff;
  border-bottom-right-radius: 5px;
}

.maqueta-burbuja.ella {
  background: #ffffff0a;
  border: 1px solid var(--linea);
  color: var(--tinta-2);
  border-bottom-left-radius: 5px;
}

.maqueta-tarjeta {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .7rem;
  border-radius: 12px;
  border: 1px solid #3b82f636;
  background: #3b82f614;
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--azul-2);
}

.maqueta-tarjeta .ic { color: var(--cian); }
.maqueta-tarjeta b { margin-left: auto; color: var(--lima); font-weight: 500; }

/* Secciones */

.seccion { padding-block: clamp(3rem, 7vw, 5.5rem); }

.seccion-cabeza { display: grid; gap: .9rem; justify-items: center; text-align: center; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.seccion-cabeza .plomo { text-align: center; }

.rejilla { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }

.tarjeta {
  position: relative;
  padding: 1.5rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--linea);
  background: linear-gradient(168deg, #ffffff0b 0%, #ffffff04 100%);
  overflow: hidden;
  transition: transform var(--medio), border-color var(--medio), box-shadow var(--medio);
}

/* Halo que sigue al puntero: las coordenadas las pone el JS en --mx/--my. */
.tarjeta::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), #3b82f62b, transparent 66%);
  transition: opacity var(--medio);
  pointer-events: none;
}

.tarjeta:hover {
  transform: translateY(-3px);
  border-color: #3b82f63d;
  box-shadow: var(--sombra-2);
}

.tarjeta:hover::after { opacity: 1; }

.tarjeta-icono {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  margin-bottom: 1rem;
  color: var(--azul-2);
  border: 1px solid #3b82f62e;
  background: linear-gradient(150deg, #3b82f61f, #0ea5e90f);
}

.tarjeta h3 { margin-bottom: .45rem; font-size: 1.1rem; }
.tarjeta p { font-size: .93rem; color: var(--tinta-3); }

.tarjeta-lista { display: grid; gap: .4rem; margin-top: .9rem; }
.tarjeta-lista li { display: flex; gap: .5rem; font-size: .86rem; color: var(--tinta-3); list-style: none; }
.tarjeta-lista .ic { color: var(--lima); margin-top: .2rem; }

/* Franja de cierre */
.franja {
  margin-block: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(2rem, 5vw, 3.4rem);
  border-radius: var(--r-xl);
  border: 1px solid #3b82f63d;
  background:
    radial-gradient(120% 160% at 12% 0%, #2563eb2e, transparent 58%),
    radial-gradient(100% 140% at 92% 100%, #0891b229, transparent 60%),
    #090d17;
  text-align: center;
  display: grid;
  gap: 1.2rem;
  justify-items: center;
  box-shadow: var(--sombra-3);
}

/* Pie */

.pie { border-top: 1px solid var(--linea); padding-block: 2.4rem 2rem; margin-top: 2rem; }

.pie-caja {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
  display: grid;
  gap: 1.4rem;
  grid-template-columns: 1fr auto;
  align-items: start;
}

.pie-marca { display: grid; gap: .6rem; }
.pie-marca p { font-size: .88rem; color: var(--tinta-4); max-width: 34ch; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 1.1rem; font-size: .88rem; color: var(--tinta-3); }
.pie-enlaces a:hover { color: var(--tinta); }
.pie-legal { grid-column: 1 / -1; font-size: .78rem; color: var(--tinta-4); border-top: 1px solid var(--linea); padding-top: 1.2rem; }

@media (max-width: 640px) { .pie-caja { grid-template-columns: 1fr; } }

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

.planes { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); align-items: start; }

.plan {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: 1.6rem 1.4rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--linea);
  background: linear-gradient(172deg, #ffffff0b, #ffffff03);
  align-content: start;
  transition: transform var(--medio), border-color var(--medio), box-shadow var(--medio);
}

.plan:hover { transform: translateY(-3px); border-color: var(--linea-fuerte); box-shadow: var(--sombra-2); }

.plan.destacado {
  border-color: #3b82f666;
  background:
    radial-gradient(130% 100% at 50% 0%, #2563eb26, transparent 62%),
    linear-gradient(172deg, #ffffff0d, #ffffff03);
  box-shadow: var(--sombra-2), 0 0 0 1px #3b82f62e;
}

.plan-cinta {
  position: absolute;
  top: -.72rem;
  left: 50%;
  transform: translateX(-50%);
  padding: .2rem .7rem;
  border-radius: var(--r-full);
  background: linear-gradient(120deg, #60a5fa, #2563eb);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 6px 18px -8px #2563eb;
}

.plan-nombre { display: flex; align-items: center; gap: .5rem; font-size: 1.16rem; font-weight: 620; letter-spacing: -.02em; }
.plan-nombre .ic { color: var(--azul-2); }
.plan-lema { font-size: .87rem; color: var(--tinta-4); min-height: 2.6em; }

.plan-precio { display: flex; align-items: baseline; gap: .3rem; }
.plan-precio b { font-size: 2.5rem; font-weight: 660; letter-spacing: -.04em; }
.plan-precio span { font-size: .86rem; color: var(--tinta-4); }

/* Caja de números del plan: una fila por dato, etiqueta a la izquierda y valor a
   la derecha. Antes era un párrafo con puntos medios y en el teléfono se partía
   en cualquier lado. */
.plan-creditos {
  display: grid;
  gap: .32rem;
  padding: .7rem .8rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--linea);
  background: #ffffff06;
  font-size: .82rem;
  color: var(--tinta-3);
}

.plan-creditos li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .7rem;
  list-style: none;
}

.plan-creditos span { color: var(--tinta-4); }
.plan-creditos b { color: var(--tinta); font-weight: 560; text-align: right; }

.plan-perks { display: grid; gap: .5rem; }
.plan-perks li { display: flex; gap: .55rem; font-size: .87rem; color: var(--tinta-2); list-style: none; }
.plan-perks .ic { color: var(--lima); margin-top: .18rem; }

.plan-actual {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  justify-content: center;
  padding: .66rem 1rem;
  border-radius: var(--r-full);
  border: 1px dashed #4ade8059;
  color: #bbf7d0;
  font-size: .9rem;
  font-weight: 540;
}

/* ── Acceso (entrar / crear) ───────────────────────────────────────────── */

.acceso {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  max-width: 1080px;
  margin-inline: auto;
  padding: clamp(1.5rem, 5vw, 3rem);
}

@media (max-width: 900px) {
  .acceso { grid-template-columns: 1fr; min-height: auto; padding-block: 2rem 3rem; }
  .acceso-lateral { display: none; }
}

.acceso-caja { padding: clamp(1.6rem, 3.4vw, 2.4rem); border-radius: var(--r-xl); display: grid; gap: 1.3rem; }
.acceso-caja h1 { font-size: clamp(1.7rem, 3.4vw, 2.2rem); letter-spacing: -.03em; }
.acceso-caja form { display: grid; gap: 1rem; }
.acceso-pie { font-size: .88rem; color: var(--tinta-3); text-align: center; }
.acceso-pie a { color: var(--azul-2); font-weight: 540; }
.acceso-pie a:hover { text-decoration: underline; text-underline-offset: 3px; }

.acceso-lateral { display: grid; gap: 1.5rem; align-content: center; }
.acceso-lista { display: grid; gap: 1rem; }

.acceso-lista li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: .9rem;
  align-items: start;
  list-style: none;
}

.acceso-lista .ic-caja {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  color: var(--azul-2);
  border: 1px solid #3b82f62e;
  background: linear-gradient(150deg, #3b82f61c, #0ea5e90d);
}

.acceso-lista b { display: block; font-size: .96rem; font-weight: 580; }
.acceso-lista p { font-size: .87rem; color: var(--tinta-4); }

/* Medidor de contraseña */
.fuerza { display: grid; gap: .35rem; }
.fuerza-barras { display: flex; gap: .25rem; }

.fuerza-barra {
  height: 4px;
  flex: 1;
  border-radius: var(--r-full);
  background: #ffffff14;
  transition: background var(--medio);
}

.fuerza[data-nivel="1"] .fuerza-barra:nth-child(-n+1) { background: var(--rojo); }
.fuerza[data-nivel="2"] .fuerza-barra:nth-child(-n+2) { background: var(--ambar); }
.fuerza[data-nivel="3"] .fuerza-barra:nth-child(-n+3) { background: var(--cian); }
.fuerza[data-nivel="4"] .fuerza-barra { background: var(--lima); }
.fuerza small { color: var(--tinta-4); font-size: .77rem; }

/* ── Aplicación ────────────────────────────────────────────────────────── */

/* `--alto-real` lo escribe el JS con la altura del viewport visible: en el
   móvil el teclado tapa parte de la pantalla sin que `dvh` siempre lo note, y
   sin esto el redactor queda debajo del teclado. Si el JS no corre, `dvh`. */
body.app {
  height: var(--alto-real, 100dvh);
  overflow: hidden;
}

/* `z-index` a propósito no: con un número acá se abre un contexto de apilado y
   el cajón lateral —que vive adentro— queda por debajo del velo, que es hermano.
   Se veía todo borroso al abrirlo en el móvil. Basta con estar después del fondo
   en el documento para taparlo. */
.app {
  position: relative;
  height: var(--alto-real, 100dvh);
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
}

/* Panel lateral. Cinco filas y cinco hijos: cabeza, botón nuevo, buscador,
   lista y pie. La que se estira es la lista; antes el 1fr caía en el buscador
   —había una fila de menos— y quedaba un hueco enorme debajo de la lupa. */
.lado {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  border-right: 1px solid var(--linea);
  background: #070b1499;
  backdrop-filter: blur(20px);
  min-height: 0;
}

.lado-cabeza { display: flex; align-items: center; gap: .5rem; padding: .85rem .9rem; height: var(--nav-h); }
.lado-cabeza .marca { margin-right: auto; }

.lado-nueva { padding: 0 .9rem .8rem; }

.lado-buscar { position: relative; padding: 0 .9rem .7rem; }
.lado-buscar .ic { position: absolute; left: 1.55rem; top: .58rem; color: var(--tinta-4); }
.lado-buscar input { padding-left: 2.4rem; padding-block: .55rem; font-size: .88rem; }

.lado-lista { overflow-y: auto; overscroll-behavior: contain; padding: 0 .55rem .8rem; display: grid; gap: .15rem; align-content: start; }

.lado-grupo {
  padding: .9rem .5rem .35rem;
  font-size: .7rem;
  font-weight: 640;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-4);
}

.conv {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .3rem;
  padding: .52rem .6rem;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  color: var(--tinta-2);
  font-size: .89rem;
  cursor: pointer;
  transition: background var(--rapido), color var(--rapido), border-color var(--rapido);
}

.conv:hover { background: #ffffff0d; color: var(--tinta); }
.conv.activa { background: #3b82f61c; border-color: #3b82f63d; color: var(--tinta); }

.conv-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-meta { display: flex; align-items: center; gap: .28rem; opacity: 0; transition: opacity var(--rapido); }
.conv:hover .conv-meta, .conv.activa .conv-meta { opacity: 1; }

.conv-accion {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 7px;
  color: var(--tinta-4);
}

.conv-accion:hover { color: var(--tinta); background: #ffffff14; }
.conv-accion.fijada { color: var(--ambar); opacity: 1; }

/* Hilo con un turno en curso. El punto tiene que verse sin pasar el mouse por
   encima —es la señal de que ahí hay una IA trabajando aunque estés en otra
   conversación—, así que este hilo se saltea el `opacity: 0` de `.conv-meta`. */
.conv.trabajando .conv-meta { opacity: 1; }

.conv-punto {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lima);
  box-shadow: 0 0 0 3px #4ade8026;
  animation: latido-conv 1.6s var(--paso) infinite;
}

@keyframes latido-conv {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 3px #4ade8026; }
  50% { opacity: .45; box-shadow: 0 0 0 6px #4ade8000; }
}

@media (prefers-reduced-motion: reduce) {
  .conv-punto { animation: none; }
}

.lado-pie { border-top: 1px solid var(--linea); padding: .8rem .9rem; display: grid; gap: .7rem; }

/* Medidor de crédito */
.medidor { display: grid; gap: .4rem; }

/* Cuando el medidor es el panel (en planes), el relleno lo pone él: `.panel` no
   trae padding y las filas quedaban pegadas al borde. Y se separa de las
   tarjetas de abajo, que llevan una cinta que sobresale por arriba. */
.panel.medidor { padding: .9rem 1rem; }
.medidor-suelto { margin-bottom: 2rem; }

/* Las dos cifras se acomodan una debajo de la otra si no entran de lado. */
.medidor-fila { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .1rem .8rem; font-size: .78rem; color: var(--tinta-4); }
.medidor-fila b { color: var(--tinta-2); font-weight: 560; font-variant-numeric: tabular-nums; }

.medidor-pista { height: 5px; border-radius: var(--r-full); background: #ffffff12; overflow: hidden; }

.medidor-relleno {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #22d3ee, #3b82f6 62%, #38bdf8);
  transition: width var(--lento);
}

.medidor.alto .medidor-relleno { background: linear-gradient(90deg, #fbbf24, #fb7185); }
.medidor.critico .medidor-relleno { background: linear-gradient(90deg, #fb7185, #e11d48); }

/* Saldo ilimitado. Una barra que nunca se llena no informa nada —al contrario,
   sugiere que hay un tope y que está lejos—, así que desaparece y el ∞ queda
   solo, un poco más grande que la cifra que reemplaza. */
.medidor.ilimitado .medidor-pista { display: none; }
.medidor.ilimitado .medidor-fila .tabular { font-size: 1.05rem; line-height: 1; color: var(--azul-2); }

.lado-usuario { display: flex; align-items: center; gap: .6rem; padding: .3rem 0; }

.avatar {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  flex: none;
  font-size: .82rem;
  font-weight: 640;
  color: #fff;
  background: linear-gradient(140deg, #3b82f6, #0284c7);
  box-shadow: 0 1px 0 #ffffff2e inset;
}

.lado-usuario-datos { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.lado-usuario-datos b { font-size: .86rem; font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lado-usuario-datos span { font-size: .74rem; color: var(--tinta-4); }
.lado-usuario .btn-icono { margin-left: auto; width: 32px; height: 32px; }

/* Panel principal */
/* Panel principal. La columna se declara: sin ella la rejilla la mide por el
   contenido más ancho (la barra de arriba) y la barra, el hilo y el redactor se
   salen de la pantalla en el móvil. */
.tablero {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
}

.tablero-barra {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-inline: 1rem;
  border-bottom: 1px solid var(--linea);
  background: #06091199;
  backdrop-filter: blur(14px);
}

.tablero-titulo {
  font-size: .97rem;
  font-weight: 560;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: auto;
}

.tablero-titulo[contenteditable="true"] {
  padding: .2rem .45rem;
  margin-left: -.45rem;
  border-radius: var(--r-xs);
  background: #ffffff0f;
  outline: 1px solid #3b82f666;
}

/* La tira de cinco botones del nivel y la del motor vivían acá. Ya no existen:
   la barra lleva una sola pastilla —`.pastilla-motor`— que abre el panel, y los
   niveles se eligen ahí con `.pestanas`. Se borran en lugar de dejarse por si
   acaso: el blanco sobre azul translúcido que usaban no se lee en el tema claro,
   y una regla muerta con un error adentro vuelve el día que alguien la reusa. */

/* Motores en el panel: una tarjeta por motor, con lema y cuánto rinde la cuota.
   Es el único lugar donde se explica qué es cada uno, así que hay sitio para
   leerlo; en la barra sólo va el nombre corto. */
.motores { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; }

.motor-opcion {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .12rem;
  text-align: left;
  padding: .68rem .75rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--linea);
  background: #ffffff05;
  transition: border-color var(--rapido), background var(--rapido);
}

.motor-opcion b { font-size: .88rem; font-weight: 560; color: var(--tinta-2); }
.motor-opcion span { font-size: .79rem; line-height: 1.45; color: var(--tinta-3); }
.motor-opcion small { font-size: .74rem; line-height: 1.45; color: var(--tinta-4); }
.motor-opcion:hover { border-color: #3b82f64d; background: #ffffff0a; }

/* La opción con candado (Max en planes gratuitos): se ve apagada y con el
   icono al lado del nombre, para que se entienda que existe pero no toca. */
.motor-opcion.bloqueado {
  opacity: .62;
  border-style: dashed;
  cursor: pointer;
}
.motor-opcion.bloqueado .ic { vertical-align: -2px; margin-left: .18rem; }
.motor-opcion.bloqueado:hover { border-color: #3b82f680; background: #ffffff0a; opacity: .8; }

.motor-opcion[aria-selected="true"] {
  border-color: #3b82f680;
  background: #3b82f61f;
}

.motor-opcion[aria-selected="true"] b { color: var(--tinta); }
.motor-opcion[aria-selected="true"] span { color: var(--tinta-2); }

/* Hilo de mensajes */
.hilo { overflow-y: auto; overscroll-behavior-y: contain; scroll-behavior: smooth; padding: 1.6rem 1rem 1.2rem; }
/* Las columnas de los mensajes se declaran con `minmax(0, …)` en toda la cadena
   porque una columna `1fr` pelada no baja del ancho mínimo de lo que lleva
   adentro: un enlace largo sin espacios (los de descarga miden sesenta y pico
   de caracteres) fijaba la columna en su propio ancho, y con ella se estiraban
   la burbuja, el razonamiento y las tarjetas de herramienta hasta salirse de la
   pantalla del teléfono. Con el cero adelante la columna cede y el texto parte. */
.hilo-interior { max-width: 830px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }

.msg { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: .85rem; animation: entra var(--medio) both; }

@keyframes entra { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.msg-sello {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 11px;
  flex: none;
}

.msg.de-usuario .msg-sello { background: linear-gradient(140deg, #3b82f6, #0284c7); color: #fff; font-size: .8rem; font-weight: 640; }

.msg.de-ia .msg-sello {
  color: #fff;
  background: linear-gradient(140deg, #0e7490, #2563eb 70%);
  box-shadow: 0 1px 0 #ffffff2e inset, 0 6px 18px -10px #3b82f6;
}

.msg-cuerpo { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }

.msg-quien { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--tinta-4); }
.msg-quien b { color: var(--tinta-2); font-weight: 560; font-size: .85rem; }

/* `anywhere` y no `break-word`: los dos parten la palabra que no entra, pero
   sólo `anywhere` le avisa al cálculo de anchos que puede hacerlo, que es lo que
   hace falta para que un enlace larguísimo no imponga el ancho de la columna. */
.msg-texto { font-size: .975rem; line-height: 1.72; color: var(--tinta); overflow-wrap: anywhere; }
.msg.de-usuario .msg-texto { color: var(--tinta-2); }

/* Cursor de escritura mientras llega el stream. */
.msg-texto.escribiendo > :last-child::after {
  content: "";
  display: inline-block;
  width: .5em;
  height: 1.05em;
  margin-left: .12em;
  vertical-align: -.16em;
  border-radius: 2px;
  background: var(--azul-2);
  animation: cursor 1s steps(2) infinite;
}

@keyframes cursor { 50% { opacity: 0; } }

/* Pensamiento y tarjetas de herramienta */
.pensado {
  border-radius: var(--r-md);
  border: 1px solid var(--linea);
  background: #ffffff05;
  overflow: hidden;
}

.pensado-cabeza {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .55rem .75rem;
  font-size: .82rem;
  color: var(--tinta-3);
  text-align: left;
}

.pensado-cabeza .ic:first-child { color: var(--cian); }
.pensado-cabeza .flecha { margin-left: auto; transition: transform var(--medio); color: var(--tinta-4); }
.pensado[open] .flecha { transform: rotate(180deg); }
.pensado-cuerpo { padding: 0 .8rem .7rem 2rem; font-size: .87rem; color: var(--tinta-3); white-space: pre-wrap; overflow-wrap: anywhere; }

.herr {
  border-radius: var(--r-md);
  border: 1px solid var(--linea);
  background: linear-gradient(150deg, #ffffff09, #ffffff03);
  overflow: hidden;
  transition: border-color var(--medio);
}

.herr.corriendo { border-color: #3b82f655; box-shadow: 0 0 0 1px #3b82f61f, 0 8px 26px -16px #3b82f6aa; }
.herr.fallo { border-color: #fb718547; }
.herr.hecho { border-color: #4ade8033; }

.herr-cabeza { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .6rem .78rem; text-align: left; }
.herr-cabeza > .ic:first-child { color: var(--azul-2); }
.herr.hecho .herr-cabeza > .ic:first-child { color: var(--lima); }
.herr.fallo .herr-cabeza > .ic:first-child { color: var(--rojo); }

.herr-nombre { font-family: var(--mono); font-size: .81rem; color: var(--tinta); font-weight: 500; }
.herr-resumen { font-size: .81rem; color: var(--tinta-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.herr-tiempo { margin-left: auto; font-size: .74rem; color: var(--tinta-4); font-variant-numeric: tabular-nums; white-space: nowrap; }

.herr-cuerpo {
  padding: .1rem .78rem .7rem;
  font-family: var(--mono);
  font-size: .78rem;
  line-height: 1.6;
  color: var(--tinta-3);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
}

.girando { animation: girar 1.1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Estado en vivo (vuelta actual, créditos) */
.vivo {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .7rem;
  border-radius: var(--r-full);
  border: 1px solid #3b82f63d;
  background: #3b82f614;
  font-size: .8rem;
  color: var(--azul-2);
  justify-self: start;
}

.vivo .ic { color: var(--cian); }

/* Artefactos descargables */
.artefacto {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem .8rem;
  border-radius: var(--r-md);
  border: 1px solid var(--linea);
  background: #ffffff07;
  transition: border-color var(--rapido), background var(--rapido);
}

.artefacto:hover { border-color: #3b82f655; background: #3b82f610; }
.artefacto .ic:first-child { color: var(--cian); }
.artefacto-datos { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.artefacto-datos b { font-size: .88rem; font-weight: 540; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artefacto-datos span { font-size: .76rem; color: var(--tinta-4); }
.artefacto .btn { margin-left: auto; }

/* Redactor */
.redactor { padding: .8rem 1rem 1.1rem; }
.redactor-interior { max-width: 830px; margin-inline: auto; display: grid; gap: .5rem; }

.redactor-caja {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .5rem;
  padding: .5rem .5rem .5rem .9rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--linea);
  background: #0a0e1acc;
  backdrop-filter: blur(18px);
  box-shadow: var(--sombra-2);
  transition: border-color var(--medio), box-shadow var(--medio);
}

/* El foco se avisa en la caja entera y no en el textarea de adentro: dos anillos
   concéntricos quedaban ruidosos, sobre todo en el teléfono. Por eso este borde
   se ve bien fuerte, que es el único aviso de foco que queda en el redactor. */
.redactor-caja:focus-within {
  border-color: #3b82f6aa;
  box-shadow: var(--sombra-2), 0 0 0 4px #3b82f62e;
}
.redactor textarea:focus-visible { outline: none; }

/* Paleta de comandos. Va arriba del redactor y dentro de la misma columna, así
   que crece hacia arriba sin empujar el textarea ni tapar el botón de enviar. */
.paleta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .12rem;
  max-height: min(46vh, 340px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .35rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--linea);
  background: #0a0e1af2;
  backdrop-filter: blur(18px);
  box-shadow: var(--sombra-2);
  scrollbar-width: thin;
  animation: sube var(--rapido) both;
}

.paleta-op {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .5rem .6rem;
  border-radius: var(--r-md);
  text-align: left;
  color: var(--tinta-2);
  transition: background var(--rapido), color var(--rapido);
}

.paleta-op .ic { color: var(--tinta-4); transition: color var(--rapido); }
.paleta-op:hover, .paleta-op[aria-selected='true'] { background: #ffffff0f; color: var(--tinta); }
.paleta-op:hover .ic, .paleta-op[aria-selected='true'] .ic { color: var(--acento); }

/* El nombre del comando y su explicación entran en la misma fila mientras haya
   lugar; cuando no, la explicación se recorta antes de partirse en dos líneas. */
.paleta-datos { display: flex; align-items: baseline; gap: .45rem; min-width: 0; }
.paleta-datos b { font-size: .9rem; font-weight: 600; white-space: nowrap; }
.paleta-datos span {
  min-width: 0;
  font-size: .8rem;
  color: var(--tinta-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.redactor textarea {
  width: 100%;
  max-height: 42vh;
  min-height: 2.6rem;
  padding: .55rem 0;
  resize: none;
  font-size: .97rem;
  line-height: 1.6;
  background: none;
  border: 0;
  scrollbar-width: thin;
}

.redactor-botones { display: flex; align-items: center; gap: .35rem; }

.redactor-enviar {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  color: #fff;
  background: linear-gradient(140deg, #60a5fa, #2563eb);
  box-shadow: 0 1px 0 #ffffff2e inset, 0 8px 20px -12px #2563eb;
  transition: transform var(--rapido), filter var(--rapido), opacity var(--rapido);
}

.redactor-enviar:hover { transform: translateY(-1px); filter: brightness(1.08); }
.redactor-enviar[disabled] { opacity: .35; pointer-events: none; box-shadow: none; }
.redactor-enviar.detener { background: linear-gradient(140deg, #fb7185, #e11d48); }

/* ── Zona de adjuntos ─────────────────────────────────────────────────── */
.redactor-adjuntos {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .5rem .8rem .4rem;
  border-top: 1px solid var(--linea);
}
.redactor-adjuntos[hidden] { display: none; }

.adjunto {
  position: relative;
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 4px 4px 0 0;
  padding: .3rem .5rem;
  border-radius: var(--r-sm);
  background: var(--ob-3);
  border: 1px solid var(--linea);
  font-size: .82rem;
  color: var(--tinta-2);
  max-width: 220px;
}
.adjunto-img {
  width: 56px;
  height: 56px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--ob-2);
  border: 1px solid var(--linea);
  padding: 0;
}
.adjunto-nombre {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.adjunto-peso { font-size: .72rem; color: var(--tinta-4); }
.adjunto-quitar {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rojo);
  color: #fff;
  border: 2px solid var(--ob-2);
  display: grid;
  place-items: center;
  font-size: .65rem;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--rapido);
}
.adjunto-quitar:hover { transform: scale(1.15); }
.adjuntos-total { font-size: .75rem; color: var(--tinta-4); align-self: center; }

/* Lo que queda en la burbuja del usuario después de mandar: el nombre de cada
   archivo, y la miniatura de las imágenes que el modelo sí vio. */
.adj-vista {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: .3rem .35rem 0 0;
  padding: .22rem .5rem;
  border-radius: var(--r-sm);
  background: #ffffff0d;
  border: 1px solid var(--linea);
  font-size: .8rem;
  color: var(--tinta-3);
  max-width: 100%;
  vertical-align: middle;
}
.adj-vista > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.adj-imagen {
  display: block;
  max-width: min(320px, 100%);
  max-height: 320px;
  width: auto;
  height: auto;
  margin: .45rem 0 0;
  border-radius: var(--r-md);
  border: 1px solid var(--linea);
  background: var(--ob-2);
  object-fit: contain;
}
.adj-imagen img { max-height: 320px; width: auto; object-fit: contain; }

.redactor-pie { display: flex; align-items: center; gap: .8rem; font-size: .76rem; color: var(--tinta-4); flex-wrap: wrap; }
.redactor-pie kbd {
  padding: .08rem .34rem;
  border-radius: 5px;
  border: 1px solid var(--linea);
  background: #ffffff0d;
  font-family: var(--mono);
  font-size: .72rem;
}

/* Bienvenida cuando no hay mensajes */
.vacio { display: grid; gap: 1.5rem; justify-items: center; text-align: center; padding-block: clamp(1.5rem, 8vh, 4rem); }
.vacio h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
.vacio p { color: var(--tinta-3); max-width: 52ch; }

.chispas { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); width: 100%; max-width: 700px; }

.chispa-btn {
  display: grid;
  gap: .25rem;
  padding: .85rem .95rem;
  border-radius: var(--r-md);
  border: 1px solid var(--linea);
  background: #ffffff06;
  text-align: left;
  transition: transform var(--rapido), border-color var(--rapido), background var(--rapido);
}

.chispa-btn:hover { transform: translateY(-2px); border-color: #3b82f655; background: #3b82f610; }
.chispa-btn b { display: flex; align-items: center; gap: .45rem; font-size: .89rem; font-weight: 560; }
.chispa-btn b .ic { color: var(--azul-2); }
.chispa-btn span { font-size: .8rem; color: var(--tinta-4); }

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

.md > * + * { margin-top: .8em; }
.md h1, .md h2, .md h3, .md h4 { margin-top: 1.5em; letter-spacing: -.02em; }
.md h1 { font-size: 1.5rem; }
.md h2 { font-size: 1.28rem; }
.md h3 { font-size: 1.1rem; }
.md h4 { font-size: 1rem; color: var(--tinta-2); }
.md ul, .md ol { padding-left: 1.35rem; display: grid; gap: .3em; }
.md li::marker { color: var(--azul-2); }
.md a { color: var(--azul-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #3b82f666; }
.md a:hover { text-decoration-color: var(--azul-2); }
.md strong { font-weight: 620; color: var(--tinta-fuerte); }
.md em { font-style: italic; color: var(--tinta-2); }
.md hr { border: 0; border-top: 1px solid var(--linea); margin-block: 1.4em; }

.md blockquote {
  padding: .1em 0 .1em 1em;
  border-left: 2px solid #3b82f666;
  color: var(--tinta-3);
}

.md code {
  padding: .12em .38em;
  border-radius: 6px;
  border: 1px solid var(--linea);
  background: #ffffff0f;
  font-family: var(--mono);
  font-size: .86em;
  color: #bfdbfe;
}

.md .bloque {
  position: relative;
  border-radius: var(--r-md);
  border: 1px solid var(--linea);
  background: #070b14;
  overflow: hidden;
}

.md .bloque-barra {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .38rem .5rem .38rem .8rem;
  border-bottom: 1px solid var(--linea);
  background: #ffffff06;
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--tinta-4);
}

.md .bloque-barra .btn-copiar { margin-left: auto; }

.btn-copiar {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .55rem;
  border-radius: var(--r-xs);
  font-size: .73rem;
  color: var(--tinta-3);
  border: 1px solid transparent;
  transition: color var(--rapido), background var(--rapido), border-color var(--rapido);
}

.btn-copiar:hover { color: var(--tinta); background: #ffffff12; border-color: var(--linea); }
.btn-copiar.listo { color: var(--lima); border-color: #4ade8040; }

.md pre {
  margin: 0;
  padding: .85rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 1.62;
  color: #e2e2f5;
  /* La selección se permite dentro del código: es lo que el usuario necesita
     sacar, y el botón de copiar cubre el caso del móvil. */
  -webkit-user-select: text;
  user-select: text;
  tab-size: 2;
}

.md pre code { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; }

/* El markdown envuelve cada tabla en `.tabla-caja`: una tabla ancha se
   desplaza dentro de su caja en vez de estirar el mensaje entero. */
.md .tabla-caja {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-sm);
}

.md table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.md th, .md td { padding: .5rem .7rem; text-align: left; border-bottom: 1px solid var(--linea); }
.md th { background: #ffffff08; font-weight: 580; color: var(--tinta-2); }
.md tr:last-child td { border-bottom: 0; }

.imagen { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--linea); }

/* Escudo contra la descarga por gesto: la capa recibe el clic derecho y el
   toque largo, así el navegador nunca ofrece "guardar imagen". Hace falta que
   esta capa sea el blanco del evento y no la imagen, porque las imágenes están
   con `pointer-events: none`; es también lo que le permite a `escudo.js`
   reconocer el gesto y avisar en pantalla. */
.imagen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

/* Resaltado de sintaxis, tokenizado por el JS propio. */
.tk-com { color: #6b7280; font-style: italic; }
.tk-str { color: #86efac; }
.tk-num { color: #fdba74; }
.tk-key { color: #93c5fd; font-weight: 560; }
.tk-fun { color: #7dd3fc; }
.tk-var { color: #f9a8d4; }
.tk-ope { color: #94a3b8; }
.tk-eti { color: #f0abfc; }

/* ── Cajones y diálogos ────────────────────────────────────────────────── */

.velo {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #03050b99;
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--medio);
}

.velo.abierto { opacity: 1; pointer-events: auto; }

.cajon {
  position: fixed;
  top: 0; right: 0;
  z-index: 61;
  width: min(430px, 100vw);
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #090d17;
  border-left: 1px solid var(--linea);
  box-shadow: var(--sombra-3);
  transform: translateX(100%);
  transition: transform var(--lento);
}

.cajon.abierto { transform: none; }

.cajon-cabeza {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--linea);
}

.cajon-cabeza h2 { font-size: 1.02rem; font-weight: 580; margin-right: auto; letter-spacing: -.015em; }
.cajon-cabeza .ic { color: var(--azul-2); }
.cajon-cuerpo { overflow-y: auto; padding: 1.1rem; display: grid; gap: 1.1rem; align-content: start; }

.pestanas { display: flex; gap: .2rem; padding: .25rem; border-radius: var(--r-full); border: 1px solid var(--linea); background: #ffffff06; }
.pestanas button { flex: 1; min-width: 0; padding: .52rem .4rem; border-radius: var(--r-full); font-size: .82rem; color: var(--tinta-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pestanas button[aria-selected="true"] { background: #3b82f629; color: var(--tinta); }
.pestanas button[disabled] { opacity: .32; pointer-events: none; }

.lista { display: grid; gap: .55rem; }

/* Bloque agrupado dentro del cajón: un título chico y su contenido. */
.panel-bloque {
  display: grid;
  gap: .55rem;
  padding: .95rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background: #ffffff05;
}

.panel-bloque + .panel-bloque { margin-top: .85rem; }

.panel-bloque h3 {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.panel-bloque h3 .ic { color: var(--azul-2); }
.panel-bloque .item { background: #ffffff05; }
.panel-bloque small { font-size: .76rem; line-height: 1.5; }

.item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  padding: .7rem .8rem;
  border-radius: var(--r-md);
  border: 1px solid var(--linea);
  background: #ffffff06;
}

.item > .ic:first-child { color: var(--azul-2); }
.item-datos { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; }
.item-datos b { font-size: .89rem; font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-datos span { font-size: .77rem; color: var(--tinta-4); overflow: hidden; text-overflow: ellipsis; }
.item-acciones { display: flex; gap: .2rem; }

.hueco { padding: 1.6rem .8rem; text-align: center; color: var(--tinta-4); font-size: .87rem; display: grid; gap: .5rem; justify-items: center; }
.hueco .ic { color: var(--tinta-4); opacity: .5; }

/* Notificaciones */
.avisos { position: fixed; z-index: 80; bottom: 1.1rem; left: 50%; transform: translateX(-50%); display: grid; gap: .5rem; width: min(440px, calc(100vw - 2rem)); }

.tostada {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .9rem;
  border-radius: var(--r-md);
  border: 1px solid var(--linea);
  background: #0f1524f2;
  backdrop-filter: blur(14px);
  box-shadow: var(--sombra-3);
  font-size: .89rem;
  animation: sube var(--medio) both;
}

@keyframes sube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.tostada.error { border-color: #fb718555; }
.tostada.error .ic { color: var(--rojo); }
.tostada.ok .ic { color: var(--lima); }
.tostada.info .ic { color: var(--azul-2); }
.tostada.yendose { animation: baja var(--medio) both; }

@keyframes baja { to { opacity: 0; transform: translateY(10px); } }

/* ── Cuenta ────────────────────────────────────────────────────────────── */

.cuenta { display: grid; gap: 1.4rem; padding-block: 2rem 3rem; }
.cuenta-rejilla { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: start; }
.bloque-cuenta { padding: 1.4rem; border-radius: var(--r-lg); display: grid; gap: 1rem; align-content: start; }
.bloque-cuenta h2 { display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; font-weight: 580; }
.bloque-cuenta h2 .ic { color: var(--azul-2); }
.bloque-cuenta form { display: grid; gap: .9rem; }

.dato-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--linea); font-size: .89rem; }
.dato-fila:last-child { border-bottom: 0; }
.dato-fila span { color: var(--tinta-4); }
.dato-fila b { font-weight: 560; font-variant-numeric: tabular-nums; text-align: right; }

/* El aviso de saldo ilimitado en la cuenta. El ∞ va grande y flotado a la
   izquierda porque es el dato: el párrafo lo explica, no lo anuncia. */
.cuenta-ilimitado { font-size: .89rem; color: var(--tinta-3); line-height: 1.55; }
.cuenta-ilimitado b {
  float: left;
  margin: -.1rem .6rem 0 0;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--azul-2);
}

/* Gráfico de consumo: barras puras en CSS, sin librerías. */
.barras { display: flex; align-items: flex-end; gap: 3px; height: 96px; padding-top: .5rem; }
.barra { flex: 1; min-width: 3px; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #3b82f6, #1e3a8a); opacity: .85; transition: opacity var(--rapido), transform var(--rapido); position: relative; }
.barra:hover { opacity: 1; transform: scaleY(1.03); }
.barra.cero { background: #ffffff12; }
.barras-pie { display: flex; justify-content: space-between; font-size: .72rem; color: var(--tinta-4); padding-top: .35rem; }

/* ── Responsivo de la aplicación ───────────────────────────────────────── */

.solo-movil { display: none; }

/* Tableta y móvil: el panel lateral pasa a ser un cajón y todo el interior se
   aprieta un punto. Los tamaños no se tocan de a uno: se bajan los tokens y el
   resto sigue. */
@media (max-width: 900px) {
  :root { --nav-h: 56px; }

  /* `minmax(0, 1fr)` y no `1fr`: con `1fr` la columna no baja del ancho mínimo de
     la barra superior y la página entera se corre de costado en el móvil. */
  .app { grid-template-columns: minmax(0, 1fr); }

  .lado {
    position: fixed;
    z-index: 62;
    top: 0; left: 0;
    width: min(312px, 88vw);
    height: var(--alto-real, 100dvh);
    background: #090d17;
    box-shadow: var(--sombra-3);
    padding-top: env(safe-area-inset-top);
    /* Cerrado también sale del recorrido del tabulador: si sólo se corre con
       `transform`, los enlaces siguen ahí para el teclado y el lector. */
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform var(--lento), visibility var(--lento);
  }

  .lado.abierto { visibility: visible; transform: none; }
  .lado-pie { padding-bottom: calc(.8rem + env(safe-area-inset-bottom)); }
  .solo-movil { display: inline-flex; }

  /* Barra superior: el título cede espacio, el selector se desliza. Los botones
     de icono no ceden nada: son el blanco del dedo. El hueco entre la pastilla
     del nivel y el icono de al lado se nota, así que no baja de medio espacio. */
  .tablero-barra { gap: .5rem; padding-inline: .45rem; }
  .tablero-titulo { font-size: .92rem; min-width: 0; }
  .btn-icono { width: 42px; height: 42px; }
  .tablero-barra .btn-icono { flex: none; }

  /* Conversaciones: blancos de toque más grandes que en el escritorio. */
  .conv { padding: .64rem .6rem; font-size: .92rem; }
  .conv-accion { width: 34px; height: 34px; }
  .lado-buscar input { font-size: 16px; padding-block: .62rem; }
  .lado-buscar .ic { top: .92rem; }

  /* Hilo */
  .hilo { padding: 1rem .7rem .7rem; }
  .hilo-interior { gap: 1.15rem; }
  .msg { grid-template-columns: 28px minmax(0, 1fr); gap: .6rem; }
  .msg-sello { width: 28px; height: 28px; border-radius: 9px; }
  .msg-cuerpo { gap: .5rem; }
  .msg-quien { font-size: .76rem; }
  .msg-quien b { font-size: .81rem; }
  .msg-texto { font-size: .93rem; line-height: 1.68; }

  .pensado-cabeza { padding: .5rem .65rem; font-size: .79rem; }
  .pensado-cuerpo { padding: 0 .7rem .6rem .7rem; font-size: .83rem; }

  .herr-cabeza { padding: .55rem .6rem; gap: .45rem; }
  .herr-nombre { font-size: .78rem; }
  .herr-resumen { font-size: .78rem; }
  .herr-tiempo { font-size: .71rem; }

  .artefacto { padding: .6rem .65rem; gap: .55rem; }
  .artefacto .btn { padding: .5rem .8rem; font-size: .85rem; }

  .md h1 { font-size: 1.3rem; }
  .md h2 { font-size: 1.14rem; }
  .md h3 { font-size: 1.03rem; }
  .md pre { padding: .7rem; font-size: .78rem; }
  .md .bloque-barra { padding: .34rem .4rem .34rem .65rem; font-size: .71rem; }
  .md ul, .md ol { padding-left: 1.15rem; }

  /* Redactor: pegado al borde inferior, con sitio para la barra del sistema.
     16px en el textarea no es capricho: con menos, iOS hace zoom al enfocar. */
  .redactor { padding: .5rem .7rem calc(.6rem + env(safe-area-inset-bottom)); }
  .redactor-interior { gap: .35rem; }
  .redactor-caja { border-radius: var(--r-md); padding: .35rem .35rem .35rem .7rem; }
  .redactor textarea { font-size: 16px; max-height: 34vh; min-height: 2.4rem; padding: .5rem 0; }
  .redactor-enviar { width: 44px; height: 44px; }
  .redactor-botones .btn-icono { width: 40px; height: 40px; }
  .redactor-pie .fila-fin { display: none; }
  .campo input, .campo select, .campo textarea, .entrada { font-size: 16px; }

  /* Paleta de comandos: filas altas para el dedo, y la explicación debajo del
     nombre porque en un renglón de teléfono no entran las dos cosas. */
  .paleta { max-height: 44vh; border-radius: var(--r-md); }
  .paleta-op { padding: .62rem .6rem; }
  .paleta-datos { display: grid; grid-template-columns: minmax(0, 1fr); gap: .05rem; }
  .paleta-datos b { font-size: .88rem; }
  .paleta-datos span { white-space: normal; overflow: visible; font-size: .76rem; line-height: 1.4; }

  /* Bienvenida: una tarjeta por fila, sin que el bloque empuje el hilo. */
  .vacio { gap: 1.05rem; padding-block: 1rem 1.4rem; }
  .vacio p { font-size: .91rem; }
  .chispas { grid-template-columns: 1fr; gap: .45rem; max-width: none; }
  .chispa-btn { padding: .7rem .8rem; }
  .chispa-btn b { font-size: .87rem; }
  .chispa-btn span { font-size: .78rem; }

  /* Cajón a pantalla completa */
  .cajon { width: 100vw; border-left: 0; height: var(--alto-real, 100dvh); }
  .cajon-cabeza { padding: .8rem .9rem; padding-top: calc(.8rem + env(safe-area-inset-top)); }
  .cajon-cuerpo { padding: .9rem .8rem calc(1.5rem + env(safe-area-inset-bottom)); gap: .9rem; overscroll-behavior: contain; }
  .item { padding: .65rem .7rem; }

  .avisos { bottom: calc(.9rem + env(safe-area-inset-bottom)); width: min(440px, calc(100vw - 1.4rem)); }
}

/* Teléfono angosto: se cae lo accesorio antes de que algo se apriete mal. */
@media (max-width: 560px) {
  .tablero-titulo { font-size: .88rem; }
  .hilo { padding-inline: .6rem; }
  .redactor { padding-inline: .6rem; }
  .herr-resumen { display: none; }
  /* La tarjeta de descarga se queda en un solo renglón: el botón se hace
     compacto y el subtítulo se recorta con puntos, que es más prolijo que
     partirlo en dos líneas debajo del nombre del archivo. */
  .artefacto { gap: .55rem; padding: .6rem .65rem; }
  .artefacto-datos span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .artefacto .btn { padding: .44rem .74rem; font-size: .82rem; }
  .md pre { font-size: .75rem; }
  .md th, .md td { padding: .42rem .5rem; }
  .pestanas button { font-size: .74rem; padding-inline: .2rem; }
  /* `1fr` pelado deja como mínimo el ancho mínimo del contenido, así que un
     `select` o un número largo adentro de una tarjeta estiraba la columna y con
     ella la página entera: en un teléfono de 320 aparecía barra horizontal.
     Con el cero adelante la columna puede encogerse y lo de adentro se acomoda. */
  .cuenta-rejilla { grid-template-columns: minmax(0, 1fr); }
  .bloque-cuenta { padding: 1.1rem; }
  .plan-precio b { font-size: 2.1rem; }
  /* Las tarjetas quedan una debajo de la otra: no hace falta reservar alto para
     que los lemas queden a la misma altura, y ese hueco se notaba. */
  .plan-lema { min-height: 0; }
  .heroe-datos { gap: 1rem 1.4rem; }
  .heroe-dato b { font-size: 1.2rem; }
  .heroe-acciones .btn-grande { padding: .85rem 1.2rem; font-size: .94rem; }
  .seccion-cabeza { margin-bottom: 1.6rem; }
  .franja { padding: 1.4rem 1.1rem; border-radius: var(--r-lg); }
  .error-caja { padding-inline: 1rem; }
}

/* Sin ratón: el hover queda pegado después de tocar, así que los efectos que
   mueven cosas se apagan y lo que sólo aparecía al pasar por encima se ve
   siempre (los botones de cada conversación eran invisibles en el móvil). */
@media (hover: none) {
  .tarjeta:hover, .plan:hover, .chispa-btn:hover, .artefacto:hover,
  .redactor-enviar:hover, .maqueta:hover, .barra:hover, .btn-primario:hover {
    transform: none;
  }

  .marca:hover .marca-glifo { transform: none; }
  .conv-meta { opacity: 1; }
  .conv:hover { background: none; color: var(--tinta-2); }
  .conv.activa:hover { background: #3b82f61c; color: var(--tinta); }
  /* Barra fina, no ausente: en el móvil hay bloques de código que se desplazan
     de costado y hace falta ver que se puede. */
  ::-webkit-scrollbar { width: 5px; height: 5px; }
  ::-webkit-scrollbar-thumb { border-width: 1px; }
}

/* ── Utilidades ────────────────────────────────────────────────────────── */

.oculto { display: none !important; }
.invisible { visibility: hidden; }
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.fila { display: flex; align-items: center; gap: .5rem; }
.fila-fin { margin-left: auto; }
.fila-centro { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* Caja de error (403, 404, 500). El número va detrás, gigante y apagado. */
.error-caja {
  position: relative;
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
  padding: clamp(2rem, 6vw, 4rem) 1rem;
}

.error-codigo {
  position: absolute;
  inset-block-start: 0;
  font: 800 clamp(7rem, 22vw, 14rem)/1 var(--fuente);
  letter-spacing: -.04em;
  background: linear-gradient(170deg, #3b82f626, #0ea5e905 62%, transparent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
  user-select: none;
}

.error-caja .ic-caja {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  color: var(--azul-2);
  border: 1px solid #3b82f62e;
  background: linear-gradient(150deg, #3b82f61c, #0ea5e90d);
}

.error-caja h1 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
.error-caja .plomo { margin-inline: auto; }
.columna { display: grid; gap: .6rem; }
.centrado { text-align: center; }
.tabular { font-variant-numeric: tabular-nums; }

/* Carga en tres puntos, para esperas cortas. */
.puntos { display: inline-flex; gap: 3px; align-items: center; }
.puntos i { width: 5px; height: 5px; border-radius: 50%; background: var(--azul-2); animation: pulso 1.25s ease-in-out infinite; }
.puntos i:nth-child(2) { animation-delay: .16s; }
.puntos i:nth-child(3) { animation-delay: .32s; }

/* El hueco entre enviar y el primer token: los puntos van solos en la burbuja,
   con el mismo alto de una línea de texto para que nada salte al reemplazarlos.
   El reloj recién aparece a los tres segundos: en una espera corta sería ruido. */
.espera-turno { display: flex; align-items: center; gap: .55rem; min-height: 1.6em; }
.espera-reloj { font-size: .82rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }

@keyframes pulso {
  0%, 80%, 100% { opacity: .25; transform: scale(.7); }
  40% { opacity: 1; transform: scale(1); }
}

@media print {
  /* La plataforma no se imprime: imprimir era la vía fácil de copiar. */
  body.vq-body * { display: none !important; }
  body.vq-body::after { content: "Velqerix"; display: block !important; font: 700 24px system-ui; }
}