/* Barry's Library — estética A (editorial): papel crema, tinta, acento teja.
   Origen: disenos/A.html */

@font-face { font-family: "Newsreader"; src: url("/static/fonts/Newsreader.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/static/fonts/JetBrainsMono.ttf") format("truetype"); font-weight: 100 800; font-display: swap; }

:root {
  --paper: #f7f4ee;
  --paper-2: #efebe1;
  --paper-3: #e7e2d6;
  --ink: #22201d;
  --ink-2: #332f2a;
  --muted: #8d8678;
  --muted-2: #b3ac9e;
  --rule: #ded9ce;
  --brick: #a8442a;
  --brick-2: #8c3620;
  --brick-soft: rgba(168, 68, 42, .08);
  --olive: #56703a;
  --olive-soft: rgba(86, 112, 58, .09);

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --col: 36rem;           /* ancho de lectura */
  --gutter: 1.75rem;
  --top-h: 3.5rem;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
::selection { background: rgba(168, 68, 42, .18); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------ etiquetas pequeñas */
.eti {
  font-family: var(--serif);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
}

/* ------------------------------------------------------------ barra superior */
#app { height: 100dvh; display: flex; flex-direction: column; }
.top {
  flex: 0 0 auto;
  width: 100%; max-width: calc(var(--col) + 2 * var(--gutter)); margin: 0 auto;
  padding: calc(1.1rem + env(safe-area-inset-top, 0px)) var(--gutter) .7rem;
  display: flex; align-items: baseline; gap: 1rem;
}
.top-tema {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500;
  color: var(--muted); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.7; margin-block: -.3em;
}
.top-nav { margin-left: auto; display: flex; gap: 1.1rem; }
/* Pestañas de los dos feeds: Estudio · Idiomas (muestran el tema activo de cada uno) */
.lados { display: flex; align-items: baseline; gap: .9rem; min-width: 0; flex: 1 1 auto; }
.lados a {
  position: relative; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  color: var(--muted-2); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 0 1 auto; min-width: 2.5em; max-width: 11rem; line-height: 1.7; margin-block: -.3em; padding: .3em 0; transition: color .2s;
  -webkit-tap-highlight-color: transparent;
}
.lados a + a::before { content: "·"; position: absolute; left: -.62rem; color: var(--rule); letter-spacing: 0; }
.lados a.on { color: var(--ink); }
.lados a:not(.on):hover { color: var(--muted); }
.lados a[data-pend]:not([data-pend=""])::after {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--brick);
  margin-left: .35rem; vertical-align: .2em;
}
.top-nav a {
  font-size: 13px; font-style: italic; color: var(--muted); text-decoration: none;
  padding: .25rem 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.top-nav a:hover { color: var(--ink); }
.top-nav a.on { color: var(--brick); border-bottom-color: var(--brick); }
.top-pct { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: right; }
.regla {
  flex: 0 0 auto; height: 1px; background: var(--rule);
  width: calc(100% - 2 * var(--gutter)); max-width: var(--col); margin: 0 auto;
}
.regla > i { display: block; height: 1px; width: 0; background: var(--brick); transition: width .6s var(--ease); }

#vista { flex: 1; min-height: 0; position: relative; }

/* ------------------------------------------------------------ feed */
.feed {
  height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none;
  overscroll-behavior: contain;
}
.feed::-webkit-scrollbar { display: none; }
.tarjeta {
  scroll-snap-align: start;
  min-height: 100%;
  max-width: calc(var(--col) + 2 * var(--gutter)); margin: 0 auto;
  padding: 2rem var(--gutter) 6.5rem;
  display: flex; flex-direction: column;
}
.tarjeta + .tarjeta { border-top: 1px solid var(--rule); }
.t-cab { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.2rem; min-height: 2.25rem; }
.t-tipo { color: var(--brick); }
.t-tipo.relleno { color: var(--muted); }
.repaso-eti { color: var(--muted); display: flex; align-items: center; gap: .45rem; margin-bottom: .9rem; }
.repaso-eti::before { content: "◆"; color: var(--brick); font-size: 9px; letter-spacing: 0; }

.estrella {
  margin-left: auto; width: 2.75rem; height: 2.75rem; margin-right: -.6rem;
  display: grid; place-items: center; border: 0; background: none; cursor: pointer;
  color: var(--muted-2); border-radius: 50%; transition: color .2s, background .2s;
  -webkit-tap-highlight-color: transparent;
}
.estrella:hover { color: var(--brick); background: var(--brick-soft); }
.estrella svg { width: 21px; height: 21px; transition: transform .35s var(--ease); }
.estrella .relleno { fill: transparent; transition: fill .2s; }
.estrella.on { color: var(--brick); }
.estrella.on .relleno { fill: var(--brick); }
.estrella.pulso svg { animation: pulso .45s var(--ease); }
@keyframes pulso { 0% { transform: scale(1); } 40% { transform: scale(1.32) rotate(-8deg); } 100% { transform: scale(1); } }

.tarjeta h1 {
  font-size: clamp(27px, 7vw, 32px); line-height: 1.17; font-weight: 500; letter-spacing: -.012em;
  font-variation-settings: "opsz" 36; margin: 0 0 1.1rem; max-width: 19ch; text-wrap: balance;
}
.cuerpo p, .cuerpo li {
  font-size: 18px; line-height: 1.68; font-variation-settings: "opsz" 16; color: var(--ink-2);
  margin: 0 0 1rem; text-wrap: pretty; hyphens: auto;
}
.cuerpo h3 {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--muted);
  margin: 1.4rem 0 .7rem;
}
.cuerpo ul, .cuerpo ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.cuerpo li { margin-bottom: .45rem; padding-left: .2rem; }
.cuerpo ol li::marker { color: var(--brick); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .9em; }
.cuerpo ul li::marker { color: var(--brick); }
.cuerpo code {
  font-family: var(--mono); font-size: .8em; background: var(--paper-2); padding: .08em .32em; border-radius: 3px; color: var(--ink);
}
.cuerpo pre {
  font-family: var(--mono); font-size: 13px; line-height: 1.75; background: var(--paper-2);
  border-left: 2px solid var(--brick); padding: .9rem 1rem; margin: 0 0 1.15rem; color: #3a352e;
  overflow-x: auto; white-space: pre;
}
.tabla { overflow-x: auto; margin: 0 0 1.15rem; }
.cuerpo table { border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; min-width: 60%; }
.cuerpo th, .cuerpo td { padding: .45rem .9rem .45rem 0; text-align: left; border-bottom: 1px solid var(--rule); }
.cuerpo th { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; border-bottom-color: var(--ink); }

.t-pie {
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--rule);
  display: flex; align-items: center; gap: 1rem;
  font-size: 14px; font-style: italic; color: var(--muted);
}
.t-pie .doc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mas {
  margin-left: auto; border: 0; background: none; cursor: pointer; padding: .7rem 0 .7rem .5rem;
  color: var(--brick); font-style: normal; white-space: nowrap;
}
.mas:hover { color: var(--brick-2); text-decoration: underline; text-underline-offset: 4px; }

/* tarjeta final y estados vacíos */
.vacio {
  min-height: 100%; max-width: calc(var(--col) + 2 * var(--gutter)); margin: 0 auto;
  padding: 3rem var(--gutter) 7rem; display: flex; flex-direction: column; justify-content: center;
  scroll-snap-align: start;
}
.vacio .eti { color: var(--brick); margin-bottom: 1rem; }
.vacio h1 { font-size: 30px; line-height: 1.2; font-weight: 500; margin: 0 0 1rem; font-variation-settings: "opsz" 36; max-width: 18ch; }
.vacio p { font-size: 18px; line-height: 1.65; color: var(--ink-2); margin: 0 0 1.5rem; max-width: 32ch; }
.acciones { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ------------------------------------------------------------ botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.75rem; padding: .6rem 1.4rem; border-radius: 99px; cursor: pointer;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  text-decoration: none; transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.btn:hover { background: var(--ink-2); }
.btn.teja { background: var(--brick); border-color: var(--brick); }
.btn.teja:hover { background: var(--brick-2); border-color: var(--brick-2); }
.btn.hueco { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.hueco:hover { border-color: var(--ink); }
.btn.peligro { background: transparent; color: var(--brick); border-color: var(--brick); }
.btn:disabled { opacity: .45; cursor: default; }
.enlace {
  border: 0; background: none; padding: .4rem 0; cursor: pointer; color: var(--brick);
  font-size: 15px; font-style: italic; text-decoration: underline; text-decoration-color: rgba(168,68,42,.35); text-underline-offset: 3px;
}
.enlace:hover { text-decoration-color: var(--brick); }
.enlace.gris { color: var(--muted); text-decoration-color: var(--rule); }

/* ------------------------------------------------------------ pastilla Recordar */
.pastilla {
  position: fixed; left: 50%; bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); z-index: 30;
  transform: translateX(-50%);
  background: var(--ink); color: var(--paper); border: 0; cursor: pointer;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  padding: .85rem 1.7rem; border-radius: 99px;
  box-shadow: 0 6px 24px -8px rgba(34, 32, 29, .45);
  transition: transform .3s var(--ease), background .2s;
}
.pastilla:hover { background: var(--ink-2); }
.pastilla.salto { animation: salto .5s var(--ease); }
@keyframes salto { 0%,100% { transform: translateX(-50%) scale(1); } 45% { transform: translateX(-50%) scale(1.08); } }
.velo {
  position: fixed; left: 0; right: 0; bottom: 0; height: 7.5rem; pointer-events: none; z-index: 20;
  background: linear-gradient(to top, var(--paper) 35%, rgba(247, 244, 238, 0));
}

/* ------------------------------------------------------------ aviso (toast) */
.aviso {
  position: fixed; left: 50%; top: calc(4.6rem + env(safe-area-inset-top, 0px)); z-index: 60;
  transform: translate(-50%, -.5rem); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--paper); font-size: 15px; font-style: italic;
  padding: .55rem 1.1rem; border-radius: 99px; max-width: calc(100% - 2rem); text-align: center;
  transition: opacity .25s, transform .35s var(--ease);
}
.aviso.on { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------ hoja inferior (saber más) */
.hoja { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.hoja-fondo { position: absolute; inset: 0; background: rgba(34, 32, 29, .32); animation: aparecer .25s; }
.hoja-in {
  position: relative; width: 100%; max-width: calc(var(--col) + 2 * var(--gutter));
  max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); border-radius: 14px 14px 0 0;
  padding: 2.6rem var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 40px -12px rgba(34, 32, 29, .35);
  animation: subir .35s var(--ease);
}
@keyframes subir { from { transform: translateY(40px); opacity: 0; } }
@keyframes aparecer { from { opacity: 0; } }
.hoja-cerrar {
  position: absolute; top: .55rem; right: calc(var(--gutter) - .4rem); z-index: 2; border: 0; background: var(--paper);
  font-style: italic; color: var(--muted); cursor: pointer; padding: .6rem .4rem; font-size: 14px;
}
.hoja-cerrar:hover { color: var(--ink); }
.sec { color: var(--muted); margin: 1.8rem 0 .8rem; display: block; }
.sec:first-of-type { margin-top: 0; }
.cita {
  border-left: 2px solid var(--brick); padding: .2rem 0 .2rem 1rem; margin: 0;
  font-size: 16px; line-height: 1.65; color: var(--ink-2); white-space: pre-line;
}
.cita.cuerpo { white-space: normal; }
.cita.cuerpo p, .cita.cuerpo li { font-size: 16px; line-height: 1.6; }
.cita.cuerpo > :last-child { margin-bottom: 0; }
.cita-pie { font-size: 14px; font-style: italic; color: var(--muted); margin-top: .6rem; }
.lista-t { list-style: none; margin: 0; padding: 0; }
.lista-t li { border-top: 1px solid var(--rule); }
.lista-t li:last-child { border-bottom: 1px solid var(--rule); }
.lista-t button {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: .8rem 0; display: flex; gap: 1rem; align-items: baseline;
}
.lista-t button:hover .lt-t { color: var(--brick); }
.lt-t { font-size: 17px; line-height: 1.35; transition: color .2s; }
.lt-d { margin-left: auto; font-size: 13px; font-style: italic; color: var(--muted); white-space: nowrap; }
.lt-d.otro { color: var(--brick); }
.pregunta { display: flex; gap: .6rem; align-items: stretch; }
.campo {
  flex: 1; min-width: 0; background: var(--paper-2); border: 1px solid transparent; border-radius: 10px;
  padding: .75rem .95rem; font-size: 16px; outline: none; transition: border-color .2s, background .2s;
}
.campo:focus { border-color: var(--muted-2); background: #fff; }
.campo::placeholder { color: var(--muted); font-style: italic; }
.respuesta { margin-top: 1rem; font-size: 17px; line-height: 1.65; color: var(--ink-2); white-space: pre-line; }
.respuesta.cargando { color: var(--muted); font-style: italic; }
.vista-previa { margin-top: .5rem; }
.vista-previa h2 { font-size: 24px; font-weight: 500; line-height: 1.2; margin: .4rem 0 1rem; font-variation-settings: "opsz" 36; }

/* ------------------------------------------------------------ páginas con scroll normal */
.pag {
  height: 100%; overflow-y: auto;
}
.pag-in {
  max-width: calc(var(--col) + 2 * var(--gutter)); margin: 0 auto;
  padding: 2rem var(--gutter) 7rem;
}
.pag h1 {
  font-size: 32px; line-height: 1.15; font-weight: 500; letter-spacing: -.012em; margin: 0 0 .4rem;
  font-variation-settings: "opsz" 36;
}
.pag .sub { font-size: 16px; font-style: italic; color: var(--muted); margin: 0 0 2rem; }
.pag h2.eti { color: var(--muted); margin: 2.4rem 0 .9rem; }

/* ------------------------------------------------------------ recordar */
.rec-cab { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 2rem; }
.rec-cab .eti { color: var(--brick); }
.rec-cab .cuenta { margin-left: auto; font-size: 14px; font-style: italic; color: var(--muted); }
.rec-pregunta {
  font-size: clamp(24px, 6vw, 28px); line-height: 1.3; font-weight: 500; margin: 0 0 .6rem;
  font-variation-settings: "opsz" 30; white-space: pre-line; text-wrap: pretty;
}
.rec-de { font-size: 14px; font-style: italic; color: var(--muted); margin: 0 0 1.6rem; }
.area {
  width: 100%; min-height: 9.5rem; resize: vertical; display: block;
  background: transparent; border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 1rem 0; font-size: 18px; line-height: 1.65; outline: none; color: var(--ink-2);
}
.area:focus { border-color: var(--ink); }
.area::placeholder { color: var(--muted-2); font-style: italic; }
.fila { display: flex; gap: .75rem; align-items: center; margin-top: 1.1rem; flex-wrap: wrap; }
.fila .esp { flex: 1; }
.veredicto { margin: 0 0 1.4rem; }
.veredicto h3 { margin: 0 0 .5rem; }
.veredicto ul { margin: 0; padding: 0; list-style: none; }
.veredicto li { font-size: 17px; line-height: 1.55; padding: .35rem 0 .35rem 1.5rem; position: relative; color: var(--ink-2); }
.veredicto li::before { position: absolute; left: 0; top: .35rem; font-weight: 600; }
.v-ok h3 { color: var(--olive); } .v-ok li::before { content: "✓"; color: var(--olive); }
.v-falta h3 { color: var(--brick); } .v-falta li::before { content: "+"; color: var(--brick); }
.v-error h3 { color: var(--brick); } .v-error li::before { content: "×"; color: var(--brick); }
.tu-resp { font-size: 16px; font-style: italic; color: var(--muted); line-height: 1.6; margin: 0 0 1.6rem; white-space: pre-line; }
.pensando { display: flex; align-items: center; gap: .7rem; color: var(--muted); font-style: italic; margin: 1rem 0 1.6rem; }
.puntos { display: inline-flex; gap: 4px; }
.puntos i { width: 5px; height: 5px; border-radius: 50%; background: var(--brick); animation: punto 1.2s infinite ease-in-out; }
.puntos i:nth-child(2) { animation-delay: .15s; } .puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 0%, 80%, 100% { opacity: .2; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.notas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: .8rem; }
.nota {
  border: 1px solid var(--rule); background: transparent; border-radius: 12px; cursor: pointer;
  padding: .85rem .5rem .75rem; display: flex; flex-direction: column; align-items: center; gap: .2rem;
  transition: border-color .2s, background .2s;
}
.nota b { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.nota span { font-size: 13px; font-style: italic; color: var(--muted); }
.nota:hover { border-color: var(--ink); }
.nota.mal b { color: var(--brick); } .nota.bien b { color: var(--olive); }
.nota-ayuda { font-size: 14px; font-style: italic; color: var(--muted); margin-top: 1.6rem; }

/* ------------------------------------------------------------ mi página */
.escrito {
  width: 100%; min-height: 14rem; resize: none; display: block; border: 0; outline: none; background: transparent;
  font-size: 19px; line-height: 1.75; color: var(--ink-2); padding: 0; font-variation-settings: "opsz" 18;
}
.escrito::placeholder { color: var(--muted-2); font-style: italic; }
.guardado { font-size: 13px; font-style: italic; color: var(--muted); min-height: 1.2em; }
.lt-estado { font-size: 13px; font-style: italic; white-space: nowrap; margin-left: auto; }
.lt-estado.si { color: var(--olive); } .lt-estado.no { color: var(--brick); }

/* ------------------------------------------------------------ temas */
.lado-temas { margin-top: 2.6rem; }
.lado-tit { font-size: 26px; font-weight: 500; margin: 0 0 .2rem; font-variation-settings: "opsz" 30; }
.lado-temas h3.eti { color: var(--muted); margin: 1.4rem 0 .6rem; }
.tipo-sel { flex: 0 0 auto; min-width: 0 !important; }
.tema { border-top: 1px solid var(--rule); padding: 1.3rem 0 1.4rem; }
.tema:last-child { border-bottom: 1px solid var(--rule); }
.tema-cab { display: flex; align-items: baseline; gap: .8rem; }
.tema-n { font-size: 24px; font-weight: 500; line-height: 1.2; font-variation-settings: "opsz" 30; }
.tema-cab .eti { color: var(--brick); margin-left: auto; }
.tema-meta { font-size: 15px; font-style: italic; color: var(--muted); margin: .35rem 0 .8rem; }
.barra { height: 2px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--brick); }
.barra.salud i { background: var(--olive); }
.barra.salud.baja i { background: var(--brick); }
.docs { list-style: none; padding: 0; margin: 1rem 0 0; }
.docs li { display: flex; align-items: baseline; gap: .8rem; padding: .3rem 0; font-size: 15px; }
.docs .dn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs .de { margin-left: auto; font-style: italic; color: var(--muted); white-space: nowrap; font-size: 14px; }
.docs a.de { color: var(--brick); }
.tema .acciones { margin-top: 1rem; }
.meta-aviso {
  background: var(--olive-soft); border-left: 2px solid var(--olive); padding: .8rem 1rem; margin: 1rem 0 0;
  font-size: 16px; line-height: 1.5;
}
.form-linea { display: flex; gap: .6rem; flex-wrap: wrap; }
.form-linea .campo { min-width: 12rem; }
.subir {
  border: 1px dashed var(--muted-2); border-radius: 14px; padding: 1.4rem; text-align: center; cursor: pointer;
  transition: border-color .2s, background .2s; display: block;
}
.subir:hover, .subir.sobre { border-color: var(--brick); background: var(--brick-soft); }
.subir input { display: none; }
.subir b { display: block; font-size: 18px; font-weight: 500; margin-bottom: .2rem; }
.subir span { font-size: 14px; font-style: italic; color: var(--muted); }
select.campo { appearance: none; padding-right: 2rem; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 1.1rem) 55%, calc(100% - .8rem) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.nota-pie { font-size: 14px; font-style: italic; color: var(--muted); margin-top: .8rem; }

/* ------------------------------------------------------------ taller */
.tz { border-top: 1px solid var(--rule); padding: 1.2rem 0 1rem; transition: opacity .2s; }
.tz.descartada { opacity: .42; }
.tz.descartada .tz-cuerpo { display: none; }
.tz-cab { display: flex; align-items: baseline; gap: .7rem; }
.tz-num { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 1.6rem; }
.tz-titulo {
  font-size: 20px; font-weight: 500; line-height: 1.25; flex: 1; outline: none; border-radius: 4px;
  padding: .05rem .2rem; margin: -.05rem -.2rem; font-variation-settings: "opsz" 24;
}
.tz-titulo:focus { background: #fff; box-shadow: 0 0 0 1px var(--muted-2); }
.tz-meta { font-size: 13px; font-style: italic; color: var(--muted); margin: .25rem 0 .7rem 2.3rem; }
.tz-meta .eti { font-style: normal; color: var(--brick); font-size: 10px; margin-right: .5rem; }
.tz-meta .larga { color: var(--brick); }
.tz-cuerpo { margin-left: 2.3rem; position: relative; max-height: 9rem; overflow: hidden; }
.tz-cuerpo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.5rem;
  background: linear-gradient(to top, var(--paper), rgba(247,244,238,0)); pointer-events: none;
}
.tz.abierta .tz-cuerpo { max-height: none; }
.tz.abierta .tz-cuerpo::after { display: none; }
.tz-cuerpo p, .tz-cuerpo li { font-size: 16px; line-height: 1.6; }
.tz-cuerpo pre { font-size: 12px; }
.corte {
  display: flex; align-items: center; gap: .6rem; margin: .2rem 0 .8rem; width: 100%;
  border: 0; background: none; cursor: pointer; color: var(--muted-2); font-size: 13px; font-style: italic; padding: .25rem 0;
}
.corte::before, .corte::after { content: ""; flex: 1; border-top: 1px dashed currentColor; }
.corte:hover { color: var(--brick); }
.tz-acc { margin: .6rem 0 0 2.3rem; display: flex; gap: .3rem 1.1rem; flex-wrap: wrap; }
.tz-acc .enlace { font-size: 14px; }
.barra-taller {
  position: sticky; bottom: 0; z-index: 5; background: var(--paper);
  border-top: 1px solid var(--rule); margin-top: 1.5rem;
  padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
}
.barra-taller .esp { flex: 1; }
.confirmar { font-size: 15px; font-style: italic; color: var(--brick); }

/* ------------------------------------------------------------ pantallas anchas */
@media (min-width: 900px) {
  :root { --gutter: 2.5rem; }
  .tarjeta { padding-top: 3.2rem; }
}

/* ------------------------------------------------------------ acceso (verificación por correo) */
.acceso {
  min-height: 100dvh; max-width: calc(26rem + 2 * var(--gutter)); margin: 0 auto;
  padding: calc(3rem + env(safe-area-inset-top, 0px)) var(--gutter) 3rem;
  display: flex; flex-direction: column; justify-content: center;
}
.acceso-marca { color: var(--muted); margin-bottom: 2.5rem; padding-bottom: .9rem; border-bottom: 1px solid var(--rule); position: relative; }
.acceso-marca::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 3rem; height: 1px; background: var(--brick); }
.acceso h1 { font-size: 34px; line-height: 1.15; font-weight: 500; margin: 0 0 .8rem; font-variation-settings: "opsz" 36; }
.acceso-txt { font-size: 18px; line-height: 1.6; color: var(--ink-2); margin: 0 0 1.8rem; }
.codigo {
  width: 100%; border: 0; border-bottom: 1px solid var(--ink); background: transparent; outline: none;
  font-family: var(--mono); font-size: 34px; letter-spacing: .45em; padding: .4rem 0 .5rem; text-align: left;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.codigo::placeholder { color: var(--rule); }
.codigo:focus { border-bottom-color: var(--brick); }
.acceso-error { min-height: 1.5em; margin: 1.4rem 0 0; font-size: 16px; font-style: italic; color: var(--brick); }
.salir { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }

/* ------------------------------------------------------------ frases bilingües (idiomas) */
.frases { list-style: none; margin: 0 0 1.1rem; padding: 0; counter-reset: frase; }
.frase { display: flex; gap: .4rem; align-items: flex-start; padding: .55rem 0; border-top: 1px solid var(--rule); }
.frase:last-child { border-bottom: 1px solid var(--rule); }
.f-txt { flex: 1; min-width: 0; }
.cuerpo .f-es { font-size: 15px; line-height: 1.45; color: var(--muted); margin: 0 0 .1rem; font-style: italic; }
.cuerpo .f-en { font-size: 18px; line-height: 1.4; color: var(--ink); margin: 0; font-weight: 500; }
.f-pista { display: block; font-size: 11px; letter-spacing: .08em; color: var(--muted-2); margin-top: .2rem; }
.f-est {
  flex: 0 0 auto; width: 2.5rem; height: 2.5rem; margin: -.2rem -.6rem 0 0; display: grid; place-items: center;
  border: 0; background: none; cursor: pointer; color: var(--rule); border-radius: 50%;
  transition: color .2s, background .2s; -webkit-tap-highlight-color: transparent;
}
.f-est:hover { color: var(--brick); background: var(--brick-soft); }
.f-est svg { width: 17px; height: 17px; }
.f-est .relleno { fill: transparent; transition: fill .2s; }
.f-est.on { color: var(--brick); }
.f-est.on .relleno { fill: var(--brick); }
.f-est.pulso svg { animation: pulso .45s var(--ease); }
.tz-cuerpo .f-en { font-size: 16px; } .tz-cuerpo .f-es { font-size: 14px; }
.rec-consigna { font-size: 15px; font-style: italic; color: var(--muted); margin: 0 0 .4rem; }
.rec-pregunta.frase { font-size: clamp(26px, 7vw, 30px); }
.area.corta { min-height: 5.5rem; }

/* ------------------------------------------------------------ «¿de qué va?» y dudas */
.dqv {
  display: flex; align-items: baseline; gap: .6rem; width: 100%; text-align: left; cursor: pointer;
  margin: .4rem 0 1.4rem; padding: .9rem 1rem; border: 1px dashed var(--muted-2); border-radius: 12px;
  background: transparent; font-size: 15px; font-style: italic; color: var(--muted); transition: border-color .2s, background .2s;
}
.dqv span { font-style: normal; font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--brick); }
.dqv:hover { border-color: var(--brick); background: var(--brick-soft); }
.hoja-tit { font-size: 24px; font-weight: 500; line-height: 1.2; margin: .2rem 0 .6rem; font-variation-settings: "opsz" 30; }
.cita-texto { display: block; margin-top: .3rem; font-size: 15px; font-style: italic; color: var(--muted); }
.apoyo { margin-top: .9rem; font-size: 14px; color: var(--muted); }
.apoyo .enlace { font-size: 14px; margin-right: .4rem; }
.pregunta-sel {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 45;
  bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px));
  background: var(--brick); color: var(--paper); border: 0; border-radius: 99px; cursor: pointer;
  padding: .7rem 1.2rem; font-size: 15px; font-style: italic; max-width: calc(100% - 2rem);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 6px 24px -8px rgba(168, 68, 42, .55); animation: aparecer .2s;
}
#dqv-res { margin-top: 1.6rem; }

/* ------------------------------------------------------------ cajas de texto que crecen solas
   field-sizing: el navegador ajusta la altura a lo escrito (Chrome/Edge 123+, Safari 26+).
   Donde no exista, se quedan con su altura mínima y su barra de scroll, como antes. */
textarea.area, textarea.escrito, textarea.campo {
  field-sizing: content;
  resize: none;
}
textarea.area { min-height: 9.5rem; max-height: 55dvh; }
textarea.area.corta { min-height: 5.5rem; }
textarea.escrito { min-height: 14rem; }
textarea.campo { min-height: 2.9rem; max-height: 40dvh; line-height: 1.45; display: block; }
.pregunta { flex-wrap: wrap; justify-content: flex-end; }
.pregunta .campo { flex: 1 1 100%; }