/* «Mi cuaderno» (/ui/panel-usuario), como la maqueta propuesta/cuaderno.html.
   El sistema común (tokens, .ficha, .boton, .lacre, .enlace…) está en arte-furtivo.css; aquí va solo
   lo de esta página: el <style> de la maqueta sin la cabecera ni el pie, más lo que la maqueta no
   enseña y la página real necesita (estados vacíos, la lista de canjes y la sección del perfil). */

.ficha .enlace { color: var(--terracota-oscura); }

/* ---------- Cabecera de la página ---------- */
.portadilla { padding-block: var(--e-xxl) var(--e-xl); }
.portadilla .marco { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: var(--e-3xl); align-items: end; }
/* .quien también existe en el desplegable de la cabecera: aquí va siempre dentro de .portadilla */
.portadilla .quien { display: grid; gap: var(--e-s); }
.portadilla .quien h1 { font-size: var(--t-titulo); }
.alias { color: var(--marfil-suave); font-size: var(--t-cuerpo); }
.alias b { color: var(--marfil); font-weight: 700; }

/* Cuenta pendiente de validar: una nota en la tela, con su botón para reenviar el correo */
.por-validar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-xs) var(--e-l); max-width: 560px;
  padding: var(--e-s) var(--e-m); border-left: 3px solid var(--terracota-clara); background: color-mix(in srgb, var(--oro) 6%, transparent); font-size: var(--t-secundario); color: var(--marfil-suave); }
.por-validar b { color: var(--marfil); }
.por-validar form { margin: 0; }
.por-validar .boton { font-size: var(--t-secundario); padding-block: 4px; }

.nivel { margin-top: var(--e-l); max-width: 560px; display: grid; gap: 10px; }
.nivel-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-m); }
.nivel-num { font-family: var(--f-titulo); font-weight: 800; font-size: 2rem; line-height: 1; }
.nivel-xp { font-size: var(--t-secundario); color: var(--marfil-suave); font-variant-numeric: tabular-nums; }
.nivel-xp b { color: var(--marfil); }
.barra { height: 14px; border-radius: 2px; background: var(--noche-profunda); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oro) 45%, transparent); overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--oro) repeating-linear-gradient(115deg, transparent 0 7px, color-mix(in srgb, var(--oro-oscuro) 22%, transparent) 7px 9px); border-right: 2px solid var(--marfil); }
.nivel-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--e-l); font-size: var(--t-secundario); color: var(--marfil-suave); }
.nivel-pie b { color: var(--marfil); }

/* XP para canjear: aparte, en papel, con la acción principal de la pantalla */
.canjear { display: grid; gap: var(--e-s); padding: var(--e-l) var(--e-xl) var(--e-xl); transform: rotate(-.4deg); }
.canjear .cifra { font-family: var(--f-titulo); font-weight: 500; font-size: 1.375rem; line-height: 1.1; color: var(--tinta-suave); letter-spacing: 0; }
.canjear .cifra b { display: block; font-weight: 800; font-size: 2.75rem; color: var(--tinta); font-variant-numeric: tabular-nums; }
.canjear .desglose { font-size: var(--t-secundario); color: var(--tinta-suave); }
.canjear .alcanza { font-size: var(--t-secundario); line-height: 1.5; border-top: 1px solid var(--arena-oscura); padding-top: var(--e-s); }
.canjear .lacre { justify-self: start; margin: var(--e-xs) 0 0 16px; }

/* ---------- Pestañas de cuaderno ---------- */
.cuaderno { padding-bottom: var(--e-4xl); }
.pestanas-caja { position: relative; }
.pestanas { display: flex; gap: var(--e-xxs); padding-left: var(--e-xl); }
.pestana {
  flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px 13px;
  font-family: var(--f-titulo); font-weight: 500; font-size: 1.25rem; line-height: 1.2;
  color: var(--marfil); text-decoration: none; border-radius: var(--r-ficha) var(--r-ficha) 0 0; white-space: nowrap;
}
.pestana .icono { width: 22px; height: 22px; color: var(--oro-apagado); }
.pestana span { padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size var(--d-foco) var(--curva-papel); }
.pestana:hover span { background-size: 100% 2px; }
.pestana:focus-visible { outline-offset: -4px; }
.pestana[aria-current="page"] { background-color: var(--arena); background-image: var(--grano); color: var(--tinta); font-weight: 700; box-shadow: inset 0 3px 0 var(--oro); --foco: var(--terracota-oscura); }
.pestana[aria-current="page"] .icono { color: var(--terracota-oscura); }
.pestana[aria-current="page"] span { background: none; }

.hoja { padding: var(--e-xxl) var(--e-xxl) var(--e-3xl); display: grid; gap: var(--e-3xl); box-shadow: 0 3px 0 color-mix(in srgb, var(--tinta) 10%, transparent), 0 10px 26px color-mix(in srgb, var(--velo) 30%, transparent); }
.fila { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-3xl); align-items: start; }
/* Las secciones a las que llevan las pestañas no quedan pegadas al borde de arriba al saltar */
.cuaderno [id] { scroll-margin-top: 6rem; }

.bloque-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-m); border-bottom: 2px solid var(--tinta); padding-bottom: var(--e-s); margin-bottom: var(--e-l); }
.bloque-cab h2 { font-size: 1.75rem; }
.bloque-cab .boton { font-size: var(--t-secundario); padding-block: 4px; white-space: nowrap; }

/* Estado vacío de un bloque: el mismo papel, dicho en tinta suave */
.vacio { display: grid; gap: var(--e-xs); padding: var(--e-l) var(--e-l) var(--e-l) var(--e-xl); border: 1px dashed var(--arena-sombra); border-radius: var(--r-fino); color: var(--tinta-suave); font-size: var(--t-secundario); }
.vacio b { font-family: var(--f-titulo); font-weight: 700; font-size: 1.25rem; line-height: 1.2; color: var(--tinta); }
.vacio .enlace { justify-self: start; }

/* ---------- Tu canje en camino ---------- */
.canje-cuerpo { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--e-xl); align-items: start;
  grid-template-areas: "nicho titulo" "nicho estados" "nicho datos"; }
.canje-titulo { grid-area: titulo; display: grid; gap: 4px; }
.canje-titulo h3 { font-size: 1.625rem; }
.canje-titulo .autor { font-style: italic; color: var(--tinta-suave); }
.canje-titulo .frase { margin-top: 6px; }
.canje-titulo .frase b { font-weight: 700; }

/* La pieza, como en la vitrina: fondo de noche, un foco cálido, peana */
.nicho { grid-area: nicho; position: relative; height: 250px; border-radius: var(--r-fino); overflow: hidden; display: grid; justify-items: center; align-content: end;
  background: radial-gradient(55% 75% at 50% 0%, rgba(255,226,170,.30), rgba(255,226,170,0) 72%), linear-gradient(180deg, #222B4A, var(--noche-profunda) 70%, #10131F);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oro) 25%, transparent), 0 6px 16px color-mix(in srgb, var(--velo) 25%, transparent); }
.nicho::before { content: ""; position: absolute; top: 0; left: 50%; width: 32px; height: 5px; transform: translateX(-50%); background: #2A3253; border-radius: 0 0 5px 5px; box-shadow: 0 2px 10px rgba(255,226,170,.35); }
.nicho svg { position: relative; z-index: 1; width: 44%; height: auto; max-height: 156px; margin-bottom: -3px; filter: drop-shadow(0 10px 8px rgba(0,0,0,.45)); }
.nicho::after { content: ""; display: block; width: 66%; height: 44px; background: linear-gradient(180deg, #2C3456 0, #1F2642 12%, #151A2C 100%); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--oro) 40%, transparent); }

.estados { grid-area: estados; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.estados li { position: relative; display: grid; align-content: start; gap: 2px; padding: 40px 12px 0 0; }
.estados li::before { content: ""; position: absolute; top: 15px; left: 15px; right: -15px; height: 2px; background: var(--tinta); }
.estados li:last-child::before { display: none; }
.estados li.actual::before { background: repeating-linear-gradient(90deg, var(--tinta-suave) 0 6px, transparent 6px 12px); }
.estados li::after { content: ""; position: absolute; top: 9px; left: 9px; width: 14px; height: 14px; transform: rotate(45deg); background: var(--tinta); }
.estados li.actual::after { top: 4px; left: 4px; width: 24px; height: 24px; background: var(--terracota-oscura); box-shadow: 0 0 0 3px var(--arena), 0 0 0 5px var(--terracota-oscura); }
.estados li.pendiente::after { background: var(--arena); box-shadow: inset 0 0 0 2px var(--tinta-suave); }
.estados b { font-family: var(--f-titulo); font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
.estados time, .estados .cuando { font-size: var(--t-secundario); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.estados .actual b { color: var(--terracota-oscura); }
.estados .ahora { font-size: var(--t-minimo); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--terracota-oscura); }
.estados .pendiente b { font-weight: 500; font-style: italic; color: var(--tinta-suave); }

.datos { grid-area: datos; margin: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--e-m) var(--e-xxl); padding-top: var(--e-l); border-top: 1px dashed var(--arena-sombra); }
.datos div { display: grid; gap: 2px; }
.datos dt { font-size: var(--t-minimo); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
.datos dd { margin: 0; font-size: var(--t-cuerpo); }
.datos dd b { font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }
/* A dónde se envía (19-oct-2026): ocupa toda la fila, una línea por renglón de la dirección */
.datos .envio-a { grid-column: 1 / -1; }
.datos .linea-envio { display: block; }
.datos .enlace { font-size: var(--t-secundario); margin-left: 10px; }

/* Los demás canjes del jugador, debajo del destacado */
.otros-canjes { list-style: none; margin: var(--e-xs) 0 0; padding: 0; }
.otros-canjes li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--e-l); padding-block: var(--e-s); border-top: 1px dashed var(--arena-sombra); }
.otros-canjes li:last-child { border-bottom: 1px dashed var(--arena-sombra); }
.otros-canjes .nombre { font-family: var(--f-titulo); font-weight: 700; font-size: 1.25rem; color: var(--tinta); }
.otros-canjes span { font-size: var(--t-secundario); color: var(--tinta-suave); }
.otros-canjes span b { color: var(--tinta); }
.canje .apartado { margin-top: var(--e-xxl); }

/* ---------- Casos en curso ---------- */
.lista-casos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-m); }
.caso { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--e-l); padding: var(--e-l) var(--e-l) var(--e-l) var(--e-xl); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 2px 0 color-mix(in srgb, var(--tinta) 10%, transparent), 0 6px 14px color-mix(in srgb, var(--tinta) 16%, transparent); }
.caso::before, .caso::after { width: 14px; height: 14px; opacity: .6; }
.caso .tipo { grid-column: 1 / -1; font-size: var(--t-minimo); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--terracota-oscura); }
.caso h3 { font-size: 1.375rem; line-height: 1.15; }
.caso .meta { color: var(--tinta-suave); font-size: var(--t-secundario); }
.caso .meta b { color: var(--tinta); }
/* Donde la maqueta apunta las pistas, el plazo del caso: las pistas viven en la libreta del juego */
.caso .plazo { grid-column: 2; grid-row: 2 / span 2; align-self: center; display: grid; justify-items: end; gap: 2px; font-size: var(--t-secundario); color: var(--tinta-suave); text-align: right; }
.caso .plazo b { font-family: var(--f-titulo); font-weight: 700; font-size: 1.125rem; color: var(--tinta); }

.apartado { margin-top: var(--e-xl); font-family: var(--f-cuerpo); font-size: var(--t-minimo); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
/* .ficha :is(h1…h4) los pone en tinta: el apartado es un rótulo, en tinta suave */
.ficha .apartado { color: var(--tinta-suave); }
.cerrados { list-style: none; margin: var(--e-xs) 0 0; padding: 0; }
.cerrados li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--e-l); padding-block: var(--e-s); border-top: 1px dashed var(--arena-sombra); border-bottom: 1px dashed var(--arena-sombra); }
.cerrados li + li { border-top: 0; }
.cerrados s { font-family: var(--f-titulo); font-weight: 700; font-size: 1.25rem; color: var(--tinta-suave); text-decoration-thickness: 2px; text-decoration-color: var(--tinta); }
.cerrados span { font-size: var(--t-secundario); color: var(--tinta-suave); }
.cerrados span b { color: var(--tinta); }
.casos .nota { margin-top: var(--e-l); font-size: var(--t-secundario); }

/* ---------- Tu casa ---------- */
.foto-casa { margin: 0 0 var(--e-l); display: grid; gap: var(--e-xs); }
.recorte { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-fino); background: var(--noche); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinta) 35%, transparent), 0 8px 18px color-mix(in srgb, var(--tinta) 22%, transparent); }
/* Recorte de la captura: se queda con la cartela y deja fuera el HUD de pruebas */
.recorte img { width: 200%; max-width: none; height: auto; margin-left: -50%; margin-top: -33%; }
.foto-casa figcaption { font-size: var(--t-minimo); color: var(--tinta-suave); font-style: italic; }
.casa .sobretitulo { display: block; margin-bottom: 4px; }
.casa h3 { font-size: 1.625rem; }
.casa h3.ninguna { font-weight: 500; font-style: italic; color: var(--tinta-suave); }
.casa .autor { font-style: italic; color: var(--tinta-suave); }
.recuento-obras { margin-top: var(--e-l); display: grid; grid-template-columns: auto 1fr; gap: 0 var(--e-m); align-items: center; padding-top: var(--e-m); border-top: 1px solid var(--arena-oscura); }
.recuento-obras .num { font-family: var(--f-titulo); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--terracota-oscura); grid-row: span 2; }
.recuento-obras b { font-weight: 700; }
.recuento-obras span { font-size: var(--t-secundario); color: var(--tinta-suave); }
.mochila { margin-top: var(--e-m); font-size: var(--t-secundario); color: var(--tinta-suave); }
.mochila b { color: var(--tinta); }

/* ---------- Sellos: racha, horas y logros (20-oct-2026, GDD_logros_y_racha.md §8.3) ---------- */
.sellos .cuenta { font-size: var(--t-secundario); color: var(--tinta-suave); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.sellos .cuenta b { color: var(--tinta); }
/* Las tres cifras, como el recuento de obras de «Tu casa»: el número grande en terracota y su rótulo en la misma línea de base */
.cifras-sellos { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-l); }
.cifras-sellos > div { display: grid; gap: 4px; align-content: start; }
.cifras-sellos dt { font-size: var(--t-minimo); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
.cifras-sellos dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-s); }
/* lining-nums: con las cifras de caja baja de Alegreya el 0 sale como una «o» pequeña */
.cifras-sellos .num { font-family: var(--f-titulo); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--terracota-oscura); font-variant-numeric: lining-nums tabular-nums; }
.cifras-sellos dd b { font-weight: 700; }
.cifras-sellos dd > span:not(.num) { flex-basis: 100%; font-size: var(--t-secundario); color: var(--tinta-suave); }
.sellos > .nota { margin-top: var(--e-m); }
.sellos > .vacio { margin-top: var(--e-l); }
.sellos > .apartado { margin-top: var(--e-xl); }

.rejilla-sellos { list-style: none; margin: var(--e-m) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--e-m); }
.sello { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--e-m); align-items: start; padding: var(--e-m) var(--e-l) var(--e-m) var(--e-m); }
.sello .lacre-sello { width: 56px; height: 56px; }
.sello-texto { display: grid; gap: 2px; min-width: 0; }
.sello .tipo { font-size: var(--t-minimo); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--terracota-oscura); }
.sello h4 { font-size: 1.25rem; line-height: 1.15; overflow-wrap: anywhere; }
.sello .condicion { font-size: var(--t-secundario); color: var(--tinta-suave); }
.sello .meta { margin-top: 4px; font-size: var(--t-secundario); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.sello .meta b { color: var(--tinta); }
/* Abierto: el lacre del sistema, en relieve, sobre la tarjeta de papel */
.sello.abierto { box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 2px 0 color-mix(in srgb, var(--tinta) 10%, transparent), 0 6px 14px color-mix(in srgb, var(--tinta) 16%, transparent); }
.sello.abierto::before, .sello.abierto::after { width: 12px; height: 12px; opacity: .5; }
.sello.abierto .lacre-sello { background: var(--sello) center / contain no-repeat; filter: drop-shadow(0 3px 2px color-mix(in srgb, var(--tinta) 35%, transparent)); transform: rotate(-7deg); }
/* Por abrir: el mismo lacre en silueta, sin papel de tarjeta; un secreto, además, con su nombre tapado */
.sello.por-abrir { border: 1px dashed var(--arena-sombra); border-radius: var(--r-fino); }
.sello.por-abrir .lacre-sello { background: var(--arena-sombra); opacity: .6; -webkit-mask: var(--sello) center / contain no-repeat; mask: var(--sello) center / contain no-repeat; }
.sello.por-abrir h4 { font-weight: 500; color: var(--tinta-suave); }
.sello.secreto h4 { font-style: italic; letter-spacing: .12em; }

/* ---------- Tu perfil (adonde lleva la pestaña «Perfil») ---------- */
.perfil { margin-top: var(--e-xl); padding-bottom: var(--e-xxl); gap: 0; }
.perfil .bloque-cab { margin-bottom: var(--e-xl); }
.perfil-cuerpo { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--e-xl); align-items: start; }
.retrato-perfil { width: 120px; aspect-ratio: 1; border-radius: var(--r-fino); overflow: hidden; display: grid; place-items: center;
  background: var(--noche); color: var(--oro); font-family: var(--f-titulo); font-weight: 800; font-size: 2.5rem; letter-spacing: .04em;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinta) 35%, transparent), 0 0 0 5px var(--arena), 0 0 0 6px var(--arena-sombra), 0 8px 18px color-mix(in srgb, var(--tinta) 22%, transparent); }
.retrato-perfil img { width: 100%; height: 100%; object-fit: cover; }
/* La subida de avatar (profile-avatar-dropzone.js) cambia la vista previa con las clases hidden/flex */
.retrato-perfil.hidden, .retrato-perfil img.hidden { display: none; }
.datos-perfil { grid-area: auto; grid-template-columns: repeat(3, minmax(0, max-content)); padding-top: 0; border-top: 0; gap: var(--e-l) var(--e-xxl); }
.datos-perfil > div { align-content: start; }
.datos-perfil dd { overflow-wrap: anywhere; }
.datos-perfil .por-validar-dato { color: var(--terracota-oscura); font-weight: 700; }

.aviso-perfil { display: grid; gap: 2px; margin-bottom: var(--e-xl); padding: var(--e-s) var(--e-m) var(--e-s) var(--e-l); border-left: 4px solid var(--exito-tinta); background: color-mix(in srgb, var(--exito) 16%, transparent); font-size: var(--t-secundario); }
.aviso-perfil b { font-family: var(--f-titulo); font-size: 1.25rem; }
.aviso-perfil.es-error { border-left-color: var(--lacre); background: color-mix(in srgb, var(--lacre) 10%, transparent); }

.perfil-editar { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-3xl); align-items: start; }
.subida { display: grid; gap: var(--e-m); }
.subida-cab { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--e-l); align-items: center; }
.subida-cab h3 { font-size: 1.375rem; }
.subida-cab p { font-size: var(--t-secundario); color: var(--tinta-suave); }
.vista-previa { position: relative; width: 120px; aspect-ratio: 1; }
.vista-previa .retrato-perfil { position: absolute; inset: 0; width: 100%; }
.vista-previa img.retrato-perfil { object-fit: cover; padding: 0; }
/* .perfil delante para ganar a dropzone.min.css, que se carga después y le pone .dropzone (fondo blanco, 150 px) */
.perfil .zona-subida { margin: 0; min-height: 0; cursor: pointer; border: 2px dashed var(--tinta-suave); border-radius: var(--r-ficha); background: rgba(255,251,240,.35); padding: var(--e-xl) var(--e-l); text-align: center; transition: background-color var(--d-foco); }
.perfil .zona-subida:hover, .perfil .zona-subida.dz-drag-hover { background: rgba(255,251,240,.6); border-color: var(--terracota-oscura); }
.zona-subida:focus-visible { outline: 2px dashed var(--terracota-oscura); outline-offset: 3px; }
.perfil .zona-subida .dz-message { margin: 0; display: grid; justify-items: center; gap: 6px; }
.zona-subida .dz-message .icono { width: 34px; height: 34px; color: var(--terracota-oscura); }
.zona-subida .dz-message b { font-family: var(--f-titulo); font-size: 1.25rem; line-height: 1.2; }
.zona-subida .dz-message span { font-size: var(--t-minimo); color: var(--tinta-suave); }
.subida-estado { font-size: var(--t-minimo); color: var(--tinta-suave); }
.subida-estado.text-emerald-300 { color: var(--exito-tinta); font-weight: 700; }
.subida-estado.text-rose-300 { color: var(--lacre); font-weight: 700; }

.form-perfil { display: grid; gap: var(--e-l); }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-l); }
.campo { display: grid; gap: 6px; }
.campo label { font-size: var(--t-minimo); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
.campo input, .campo select {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 0; border-bottom: 2px solid var(--tinta); border-radius: var(--r-fino) var(--r-fino) 0 0;
  background: rgba(255,251,240,.55); color: var(--tinta); font: 400 var(--t-cuerpo)/1.3 var(--f-cuerpo);
}
.campo input::placeholder { color: var(--tinta-suave); opacity: .75; }
.campo input:focus-visible, .campo select:focus-visible { outline: 2px dashed var(--terracota-oscura); outline-offset: 2px; background: rgba(255,251,240,.8); }
.acciones-perfil { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-l) var(--e-xl); margin-top: var(--e-xs); }
.acciones-perfil .lacre { margin-left: 16px; }

/* ---------- Móvil ---------- */
@media (max-width: 980px) {
  .portadilla .marco { grid-template-columns: minmax(0, 1fr); gap: var(--e-xl); }
  .canjear { max-width: 520px; }
  .fila { grid-template-columns: minmax(0, 1fr); gap: var(--e-3xl); }
  .hoja { padding: var(--e-xl) var(--e-xl) var(--e-xxl); }
  .perfil-editar { grid-template-columns: minmax(0, 1fr); gap: var(--e-xxl); }
}
@media (max-width: 980px) {
  /* La línea de estados pasa a vertical antes de que las fechas se partan */
  .estados { grid-template-columns: minmax(0, 1fr); }
  .estados li { padding: 0 0 var(--e-l) 46px; grid-template-columns: auto 1fr; column-gap: var(--e-s); align-items: baseline; }
  .estados li > :nth-child(n+3) { grid-column: 2; }
  .estados li:last-child { padding-bottom: 0; }
  .estados li::before { top: 16px; bottom: -16px; left: 15px; right: auto; width: 2px; height: auto; }
  .estados li.actual::before { background: repeating-linear-gradient(180deg, var(--tinta-suave) 0 6px, transparent 6px 12px); }
  .estados li::after { top: 6px; }
  .estados li.actual::after { top: 1px; }
  .datos { grid-template-columns: minmax(0, 1fr); }
  .datos .enlace { margin-left: 0; display: inline-block; }
  .datos dd { display: flex; flex-wrap: wrap; gap: 0 var(--e-m); align-items: baseline; }
  .datos-perfil { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .canje-cuerpo { grid-template-columns: 104px minmax(0, 1fr); gap: var(--e-l) var(--e-m); grid-template-areas: "nicho titulo" "estados estados" "datos datos"; }
  .nicho { height: 136px; }
  .nicho svg { max-height: 82px; }
  .nicho::after { height: 24px; }
  .canje-titulo h3 { font-size: 1.375rem; }
  .canje-titulo .autor { font-size: var(--t-secundario); }
  .perfil-cuerpo { grid-template-columns: minmax(0, 1fr); gap: var(--e-l); }
  .campos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  /* Pestañas: una fila con scroll lateral dentro de su propio contenedor */
  .pestanas-caja { margin-inline: calc(-1 * var(--e-l)); }
  .pestanas { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 0 var(--e-l); scroll-padding-inline: var(--e-l);
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .pestanas::-webkit-scrollbar { display: none; }
  .pestanas::after { content: ""; flex: none; width: 24px; }
}
@media (max-width: 720px) {
  .pestanas-caja { margin-inline: calc(-1 * var(--e-m)); }
  .pestanas { padding: 0 var(--e-m); scroll-padding-inline: var(--e-m); }
}
@media (max-width: 560px) {
  .portadilla { padding-block: var(--e-xl) var(--e-l); }
  .portadilla .quien h1 { font-size: 2.25rem; }
  .nivel { margin-top: var(--e-s); }
  .nivel-num { font-size: 1.75rem; }
  .canjear { padding: var(--e-l); transform: none; }
  .canjear .cifra b { font-size: 2.375rem; }
  .pestana { padding: 11px 16px 12px; font-size: 1.125rem; gap: 8px; }
  .pestana .icono { width: 20px; height: 20px; }
  .hoja { padding: var(--e-l) var(--e-m) var(--e-xxl); gap: var(--e-xxl); }
  .hoja::before, .hoja::after { width: 14px; height: 14px; }
  .bloque-cab { flex-wrap: wrap; row-gap: 0; }
  .bloque-cab h2 { font-size: 1.5rem; }
  .bloque-cab .boton { padding-left: 18px; }
  .caso { grid-template-columns: minmax(0, 1fr); padding: var(--e-l) var(--e-m) var(--e-m) var(--e-l); }
  .caso .plazo { grid-column: 1; grid-row: auto; justify-items: start; text-align: left; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-s); margin-top: 6px; }
  .cerrados li, .otros-canjes li { display: grid; }
  /* Tres filas con el rótulo a la izquierda y la cifra a la derecha (las dos columnas, compartidas con subgrid): en tres columnas el rótulo se parte y las cifras quedan a alturas distintas */
  .cifras-sellos { grid-template-columns: max-content minmax(0, 1fr); gap: var(--e-s) var(--e-m); }
  .cifras-sellos > div { grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; gap: 0 var(--e-m); }
  .cifras-sellos .num { font-size: 2.25rem; }
  .datos-perfil { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-m) var(--e-l); }
  .datos-perfil .ancho { grid-column: 1 / -1; }
  .perfil-cuerpo .retrato-perfil { width: 88px; }
  .subida-cab { grid-template-columns: 88px minmax(0, 1fr); gap: var(--e-m); }
  .vista-previa { width: 88px; }
  .perfil .retrato-perfil { font-size: 2rem; }
  .vacio { padding: var(--e-m); }
}