/* Rótulo · Moxen — los estilos del efecto y de la demostración. */
:root {
  --ro-fondo: #0a0a0a;
  --ro-texto: #f4f4f4;
  --ro-suave: rgba(255, 255, 255, .56);
  --ro-tenue: rgba(255, 255, 255, .32);
  --ro-campo: #121212;
  --ro-hoja: #151515;
  --ro-linea: rgba(255, 255, 255, .075);
  --ro-filo: rgba(255, 255, 255, .24);
  --ro-filo-foco: rgba(255, 255, 255, .7);
  --ro-ficha: #222222;
  --ro-ficha-borde: rgba(255, 255, 255, .09);
  --ro-ficha-luz: rgba(255, 255, 255, .07);
  --ro-icono: rgba(255, 255, 255, .06);
  --ro-marca: rgba(255, 255, 255, .075);
  --ro-coincide: rgba(255, 255, 255, .17);
  --ro-error: #ff5a4f;
  --ro-error-suave: rgba(255, 90, 79, .4);
  --ro-sombra: rgba(0, 0, 0, .85);
  --ro-ficha-sombra: 0 1px 2px rgba(0, 0, 0, .25);
  --ro-vuelo-sombra: 0 18px 30px -8px rgba(0, 0, 0, .75);
  --ro-curva: cubic-bezier(.22, 1, .36, 1);
  --ro-radio: 18px;          /* el radio del campo y de la lista (lo lee rotulo.js) */
  --ro-fila: 48px;           /* el alto de cada sugerencia (lo lee rotulo.js) */
  --ro-cabeza: 38px;         /* el título de la lista (lo lee rotulo.js) */
  --ro-pie: 46px;            /* el pie con las teclas (lo lee rotulo.js) */
  --ro-escribe: 262px;       /* lo mínimo que deja el texto: si no cabe, baja de línea */
}
:root[data-tema="claro"] {
  --ro-fondo: #eeeeee;
  --ro-texto: #0a0a0a;
  --ro-suave: rgba(0, 0, 0, .56);
  --ro-tenue: rgba(0, 0, 0, .36);
  --ro-campo: #ffffff;
  --ro-hoja: #ffffff;
  --ro-linea: rgba(0, 0, 0, .075);
  --ro-filo: rgba(0, 0, 0, .2);
  --ro-filo-foco: rgba(0, 0, 0, .75);
  --ro-ficha: #f2f2f2;
  --ro-ficha-borde: rgba(0, 0, 0, .09);
  --ro-ficha-luz: rgba(255, 255, 255, 1);
  --ro-icono: rgba(0, 0, 0, .05);
  --ro-marca: rgba(0, 0, 0, .05);
  --ro-coincide: rgba(0, 0, 0, .1);
  --ro-error: #e5484d;
  --ro-error-suave: rgba(229, 72, 77, .4);
  --ro-sombra: rgba(0, 0, 0, .09);
  --ro-ficha-sombra: 0 1px 1px rgba(0, 0, 0, .05);
  --ro-vuelo-sombra: 0 14px 22px -8px rgba(0, 0, 0, .2);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ro-fondo); color: var(--ro-texto); }
body { font-family: "General Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input { font: inherit; color: inherit; }
svg { display: block; }

.ro-rotulo { position: relative; width: min(680px, 100%); }
.ro-cabeza { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.ro-titulo { font-size: 1.36rem; font-weight: 600; letter-spacing: -.025em; }
.ro-ayuda { margin: 0 0 16px; font-size: .96rem; color: var(--ro-suave); }

/* la cuenta «2/8»: la cifra rueda hacia arriba al sumar y hacia abajo al restar */
.ro-cuenta {
  margin-left: auto; display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 99px;
  border: 1px solid var(--ro-linea); background: var(--ro-icono); color: var(--ro-suave);
  font-size: .88rem; font-weight: 500; font-variant-numeric: tabular-nums;
  transition: color .3s, border-color .3s, background-color .3s;
}
.ro-n { display: inline-grid; overflow: hidden; height: 1.3em; line-height: 1.3em; color: var(--ro-texto); }
.ro-n span { grid-area: 1 / 1; }
.ro-n .is-entra.is-sube { animation: ro-entra-sube .5s var(--ro-curva); }
.ro-n .is-entra.is-baja { animation: ro-entra-baja .5s var(--ro-curva); }
.ro-n .is-sale.is-sube { animation: ro-sale-sube .5s var(--ro-curva) forwards; }
.ro-n .is-sale.is-baja { animation: ro-sale-baja .5s var(--ro-curva) forwards; }
@keyframes ro-entra-sube { from { transform: translateY(100%); opacity: 0; } }
@keyframes ro-entra-baja { from { transform: translateY(-100%); opacity: 0; } }
@keyframes ro-sale-sube { to { transform: translateY(-100%); opacity: 0; } }
@keyframes ro-sale-baja { to { transform: translateY(100%); opacity: 0; } }
/* al llegar al máximo, la cuenta se pone roja un momento */
.ro-cuenta.is-tope { color: var(--ro-error); border-color: var(--ro-error-suave); }
.ro-cuenta.is-tope .ro-n { color: var(--ro-error); }

/* ── el efecto ─────────────────────────────────────────────────────── */
/* El campo: las fichas y el texto van en flujo (flex que baja de línea).
   Su fondo es una lámina aparte recortada con clip-path: rotulo.js
   estira el recorte con un resorte cuando el campo gana o pierde una
   línea, en vez de cambiar su alto de golpe. El filo y la sombra van en
   un filtro del padre para que sigan al recorte. */
.ro-caja { position: relative; }
.ro-campo {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  min-height: 64px; padding: 12px; cursor: text;
}
.ro-marco {
  position: absolute; left: 0; right: 0; top: 0; height: 640px; pointer-events: none;
  filter: drop-shadow(0 0 .6px var(--ro-filo)) drop-shadow(0 26px 34px var(--ro-sombra));
  transition: filter .3s var(--ro-curva);
}
.ro-marco i { position: absolute; inset: 0; border-radius: var(--ro-radio); background: var(--ro-campo); box-shadow: inset 0 1px 0 var(--ro-ficha-luz); }
.ro-campo.is-foco .ro-marco { filter: drop-shadow(0 0 .7px var(--ro-filo-foco)) drop-shadow(0 0 .5px var(--ro-filo-foco)) drop-shadow(0 26px 34px var(--ro-sombra)); }
/* al pasarse del máximo: el campo tiembla (translate, para no pisar los resortes) y su filo se enrojece */
.ro-campo.is-tiembla { animation: ro-tiembla .42s cubic-bezier(.36, .07, .19, .97); }
.ro-campo.is-tiembla .ro-marco { filter: drop-shadow(0 0 .8px var(--ro-error)) drop-shadow(0 0 .6px var(--ro-error)) drop-shadow(0 26px 34px var(--ro-sombra)); }
@keyframes ro-tiembla { 15% { translate: -7px 0; } 35% { translate: 6px 0; } 55% { translate: -4px 0; } 75% { translate: 2px 0; } }

/* cada ficha: rotulo.js la mueve con transform (FLIP) y la aplasta con scale */
.ro-ficha {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 3px; height: 38px; padding: 0 5px 0 13px;
  border-radius: 11px; background: var(--ro-ficha); white-space: nowrap; will-change: transform;
  box-shadow: inset 0 0 0 1px var(--ro-ficha-borde), inset 0 1px 0 var(--ro-ficha-luz), var(--ro-ficha-sombra);
  font-size: .98rem; font-weight: 500; letter-spacing: -.01em; transition: box-shadow .2s, background-color .2s;
}
.ro-quita {
  display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--ro-tenue); cursor: pointer; transition: background-color .2s, color .2s;
}
.ro-quita svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ro-quita:hover { background: var(--ro-marca); color: var(--ro-texto); }
.ro-quita:focus-visible { outline: none; background: var(--ro-coincide); color: var(--ro-texto); }
/* con el teclado en la ×, toda la ficha se enmarca (el anillo no cabe dentro de ella) */
.ro-ficha:has(.ro-quita:focus-visible) { box-shadow: inset 0 0 0 2px var(--ro-texto), var(--ro-ficha-sombra); }
/* la ficha marcada por el primer Retroceso: borde claro y un temblor corto */
.ro-ficha.is-marcada {
  box-shadow: inset 0 0 0 1.5px var(--ro-texto), inset 0 1px 0 var(--ro-ficha-luz), var(--ro-ficha-sombra);
  animation: ro-duda .36s ease-in-out;
}
.ro-ficha.is-marcada .ro-quita { color: var(--ro-texto); }
@keyframes ro-duda { 20% { translate: -2.5px 0; } 45% { translate: 2px 0; } 70% { translate: -1px 0; } }
/* mientras vuela, la ficha de verdad guarda su sitio sin verse */
.ro-ficha.is-viaja { visibility: hidden; }
.ro-ficha.is-llega { animation: ro-llega .6s var(--ro-curva); }
@keyframes ro-llega { from { background-color: var(--ro-coincide); } }
.ro-ficha.is-aparece { animation: ro-aparece .32s var(--ro-curva); }
.ro-ficha.is-repetida { animation: ro-duda .36s ease-in-out, ro-llega .6s var(--ro-curva); }
@keyframes ro-aparece { from { opacity: 0; scale: .7; } }

/* min-width: 0 en los dos: si no, el ancho propio del input (unos 20 caracteres) manda sobre --ro-escribe */
.ro-escribe { position: relative; z-index: 1; flex: 1 0 var(--ro-escribe); min-width: 0; display: flex; height: 38px; will-change: transform; }
.ro-escribe input {
  flex: 1; width: 0; min-width: 0; padding: 0 6px; border: 0; outline: 0; background: none; text-overflow: ellipsis;
  font-size: 1.04rem; letter-spacing: -.01em; caret-color: var(--ro-texto);
}
.ro-escribe input::placeholder { color: var(--ro-tenue); }

/* la ficha que vuela: un calco con su fondo aparte, que se forma en el aire */
.ro-vuelos { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.ro-vuelo { position: absolute; background: none; box-shadow: none; will-change: transform; }
.ro-vuelo-fondo, .ro-vuelo-sombra { position: absolute; inset: 0; border-radius: 11px; }
.ro-vuelo-fondo { background: var(--ro-ficha); box-shadow: inset 0 0 0 1px var(--ro-ficha-borde), inset 0 1px 0 var(--ro-ficha-luz); }
.ro-vuelo-sombra { box-shadow: var(--ro-vuelo-sombra), 0 0 0 1px var(--ro-linea); }
.ro-vuelo .ro-ficha-texto { position: relative; }
.ro-vuelo-x { position: relative; display: grid; place-items: center; width: 26px; height: 26px; color: var(--ro-tenue); }
.ro-vuelo-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* el estallido: un contorno que se abre y chispas que caen */
.ro-fantasma { position: absolute; border-radius: 11px; box-shadow: inset 0 0 0 1.5px var(--ro-texto); animation: ro-fantasma .34s var(--ro-curva) forwards; }
@keyframes ro-fantasma { from { opacity: .9; } to { opacity: 0; scale: 1.16 1.35; } }
.ro-chispa { position: absolute; left: 0; top: 0; background: var(--ro-texto); border-radius: 1.5px; will-change: transform, opacity; }

/* la lista: se coloca bajo el campo y rotulo.js la baja o la sube con él */
.ro-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 5; transform-origin: 50% 0;
  visibility: hidden; opacity: 0; will-change: transform, opacity;
  filter: drop-shadow(0 0 .6px var(--ro-filo)) drop-shadow(0 36px 44px var(--ro-sombra));
}
.ro-hoja { position: relative; border-radius: var(--ro-radio); background: var(--ro-hoja); will-change: clip-path; }
.ro-lista-titulo { margin: 0; height: var(--ro-cabeza); display: flex; align-items: flex-end; padding: 0 18px 7px; font-size: .78rem; font-weight: 500; color: var(--ro-tenue); }
.ro-op, .ro-pildora, .ro-nada { position: absolute; left: 6px; right: 6px; top: 0; height: var(--ro-fila); will-change: transform, opacity; }
.ro-op {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 0 12px;
  border-radius: 12px; cursor: pointer; color: var(--ro-texto);
}
/* la marca de la opción activa: una sola píldora que viaja con un resorte */
.ro-pildora { border-radius: 12px; background: var(--ro-marca); pointer-events: none; }
.ro-icono { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--ro-icono); color: var(--ro-suave); }
.ro-icono svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ro-texto { font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .12s; }
.ro-op.is-ida .ro-texto { opacity: 0; }
/* mientras se busca, lo que no coincide se apaga y las letras que coinciden se marcan */
.ro-rotulo.is-buscando .ro-op:not(.ro-crea) .ro-texto { color: var(--ro-suave); }
.ro-texto mark {
  color: var(--ro-texto); background: var(--ro-coincide); border-radius: 4px; padding: 0 1px; margin: 0 -1px;
  animation: ro-marca .45s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes ro-marca { from { background-color: transparent; } }
.ro-op kbd { opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .3s var(--ro-curva); }
.ro-op.is-activa kbd { opacity: 1; transform: none; }
.ro-op.is-activa .ro-icono { color: var(--ro-texto); }
/* «Crear «…»»: separada de las sugerencias por una línea, con su + */
.ro-crea::before { content: ""; position: absolute; left: 12px; right: 12px; top: -5px; height: 1px; background: var(--ro-linea); }
.ro-crea .ro-icono { background: none; box-shadow: inset 0 0 0 1px var(--ro-tenue); }
.ro-crea .ro-texto { color: var(--ro-suave); }
.ro-crea .ro-texto b { color: var(--ro-texto); font-weight: 600; }
/* con el campo lleno, las sugerencias se apagan (sus hijos: la fila lleva la opacidad del resorte) */
.ro-op.is-apagada { cursor: not-allowed; }
.ro-op.is-apagada > * { opacity: .38; }
.ro-nada { margin: 0; display: flex; align-items: center; padding: 0 14px; font-size: .95rem; color: var(--ro-suave); }

kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px;
  border: 1px solid var(--ro-linea); background: var(--ro-icono); color: var(--ro-suave);
  font: 500 .74rem "General Sans", system-ui, sans-serif;
}
.ro-pie {
  position: absolute; left: 0; right: 0; top: 0; height: var(--ro-pie); display: flex; align-items: center; gap: 18px;
  padding: 0 18px; border-top: 1px solid var(--ro-linea); font-size: .8rem; color: var(--ro-tenue); will-change: transform;
}
.ro-pie span { display: inline-flex; align-items: center; gap: 5px; }
.ro-pie kbd { min-width: 20px; height: 20px; font-size: .7rem; }
.ro-pie-esc { margin-left: auto; }

.ro-aviso { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .ro-n span, .ro-ficha, .ro-campo, .ro-texto mark { animation-duration: .01s !important; }
  .ro-ficha.is-aparece { animation: ro-funde .15s; }
  @keyframes ro-funde { from { opacity: 0; } }
}

/* ── la demostración ───────────────────────────────────────────────── */
.ro-escena { min-height: 100vh; display: grid; justify-items: center; align-content: start; padding: 158px 16px 40px; }

/* ── en el teléfono ────────────────────────────────────────────────── */
@media (max-width: 560px) {
  :root { --ro-escribe: 104px; --ro-fila: 46px; }
  .ro-escena { padding-top: 72px; }
  .ro-titulo { font-size: 1.2rem; }
  .ro-ayuda { font-size: .9rem; }
  .ro-campo { padding: 10px; gap: 7px; }
  .ro-ficha { height: 36px; font-size: .94rem; padding-left: 11px; }
  .ro-pie span:nth-child(3), .ro-pie span:nth-child(1) { display: none; }
}