/* ═══════════════════════════════════════════════════════════════════════════
   Área de clientes de Espurna · panel.css (2026-10-13)
   ───────────────────────────────────────────────────────────────────────────
   Hoja propia y entera: el panel no carga las de la web (110 KB de portada que
   aquí no pintan nada). Los tokens, la marca, los botones y los campos son los
   de `_trabajo/v6/css/01-base.css` y `02-portada.css`, copiados con sus mismos
   nombres; si allí cambia un color, cambiarlo aquí también.

   ⚠️ La CSP es `style-src 'self'`: nada de `style=""` en el HTML. El único
   valor que cambia en vivo (el corte del antes y después) lo pone panel.js en
   una variable por el CSSOM, que la CSP no gobierna.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Switzer"; src: url("/assets/fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer reserva"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 101%; ascent-override: 94%; descent-override: 24%; line-gap-override: 0%; }

/* ── Tokens (los de la web) ─────────────────────────────────────────────── */
:root {
  --papel: #F5F1EA;
  --papel-2: #ECE5DA;
  --blanco: #FFFFFF;
  --tinta: #15120E;
  --tinta-2: #4F4840;
  --tinta-3: #6B6259;
  --linea: #DED5C8;
  --linea-fuerte: #8A8076;
  --noche: #110E0B;
  --noche-2: #1A1612;
  --noche-3: #241F19;
  --noche-linea: #352E26;
  --noche-texto: #F6F1EA;
  --noche-texto-2: #B8AEA2;
  --noche-texto-3: #948A7F;
  --brasa: #FF7A18;
  --brasa-clara: #FFB067;
  --brasa-tinta: #B03A06;
  --brasa-suave: #FFE8D4;
  --tinte-salvia: #E3ECDF;
  --tinte-arena: #EFE5D6;
  --tinte-pizarra: #E2E7EC;
  --verde: #1F7A4D;
  --verde-suave: #DFF1E6;
  --rojo: #C2371C;
  --rojo-suave: #FBE4DE;

  --f-texto: "Switzer", "Switzer reserva", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif: "Instrument Serif", Georgia, serif;
  --t-titulo: clamp(1.875rem, 1.4rem + 2vw, 2.875rem);
  --t-h3: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --t-entrada: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-texto: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --t-peque: 0.9375rem;
  --t-mini: 0.8125rem;

  --radio: 22px;
  --radio-medio: 14px;
  --radio-peque: 9px;
  --sombra-1: 0 1px 2px rgb(21 18 14 / 0.06), 0 1px 1px rgb(21 18 14 / 0.04);
  --sombra-2: 0 1px 1px rgb(21 18 14 / 0.04), 0 12px 32px -12px rgb(21 18 14 / 0.22);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --contenedor: 76rem;
  --canal: clamp(1rem, 4vw, 2.5rem);
  color-scheme: only light;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--papel); color: var(--tinta);
  font-family: var(--f-texto); font-size: var(--t-texto); line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.95em; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }
.p-cabecera :focus-visible, .p-escena .entrada__texto :focus-visible, .chat :focus-visible { outline-color: var(--noche-texto); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.solo-lector { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.icono { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 200; padding: 0.75rem 1.125rem; border-radius: var(--radio-peque); background: var(--noche-texto); color: var(--tinta); font-weight: 600; text-decoration: none; }
.saltar:focus { top: 0.75rem; }

.p-contenedor { width: min(100% - 2 * var(--canal), var(--contenedor)); margin-inline: auto; }
.p-contenedor--medio { max-width: 52rem; }
.p-contenedor--lectura { max-width: 54rem; }
.p-contenedor--estrecho { max-width: 40rem; }
.p-contenedor--entrada { max-width: 64rem; }

/* ── Cabecera ───────────────────────────────────────────────────────────── */
.p-cabecera { background: var(--noche); color: var(--noche-texto); border-bottom: 1px solid var(--noche-linea); }
.p-cabecera__dentro { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1rem; min-height: 4.25rem; padding-block: 0.5rem; }
.marca { display: inline-flex; align-items: center; min-height: 2.75rem; color: inherit; }
.marca__puerta, .marca__inicio { display: inline-flex; align-items: center; min-height: 2.75rem; color: inherit; text-decoration: none; }
.marca__puerta { justify-content: center; width: 2.75rem; margin-left: -0.5rem; border-radius: 999px; }
.marca__inicio { gap: 0.5rem; }
.marca__chispa { width: 1.75rem; height: 1.75rem; filter: drop-shadow(0 0 10px rgb(255 122 24 / 0.55)); transition: transform 480ms var(--ease-out), filter 260ms ease; }
.marca__nombre { font-weight: 600; font-size: 1.125rem; letter-spacing: -0.02em; }
.marca__studio { font-size: 1.125rem; color: var(--noche-texto-2); letter-spacing: -0.02em; margin-left: -0.25rem; }
@media (hover: hover) and (pointer: fine) {
  .marca__puerta:hover .marca__chispa { transform: rotate(90deg) scale(1.08); filter: drop-shadow(0 0 14px rgb(255 122 24 / 0.85)); }
}
.marca__puerta:focus-visible .marca__chispa { transform: rotate(90deg) scale(1.08); }
.p-cabecera__area { display: none; padding-left: 1rem; border-left: 1px solid var(--noche-linea); color: var(--noche-texto-2); font-size: var(--t-peque); }
.p-nav { order: 3; flex-basis: 100%; margin-inline: -0.5rem; }
.p-nav__lista { display: flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.p-nav__enlace { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.5rem 0.75rem; border: 0; border-radius: 999px; background: none; color: var(--noche-texto-2); font-size: var(--t-peque); font-weight: 500; text-decoration: none; transition: background-color 160ms ease, color 160ms ease; }
.p-nav__enlace .icono { width: 1.125rem; height: 1.125rem; }
.p-nav__enlace[aria-current="page"] { background: var(--noche-3); color: var(--noche-texto); }
@media (hover: hover) and (pointer: fine) { .p-nav__enlace:hover { background: var(--noche-3); color: var(--noche-texto); } }
.p-salir { margin-left: auto; }
.p-salir__boton { margin-right: -0.5rem; }
@media (min-width: 48em) {
  .p-cabecera__area { display: inline; }
  .p-nav { order: 0; flex-basis: auto; margin-inline: auto 0; }
  .p-salir { margin-left: 0; }
}

.p-main { flex: 1; padding-block: clamp(1.5rem, 1rem + 2.5vw, 3rem) clamp(3rem, 2rem + 4vw, 5rem); }
.p-main:focus { outline: none; }

/* ── Texto ──────────────────────────────────────────────────────────────── */
.p-etiqueta { font-size: var(--t-mini); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brasa-tinta); }
.p-titulo { font-size: var(--t-titulo); font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; overflow-wrap: anywhere; }
.p-entrada { margin-top: 0.75rem; max-width: 40rem; color: var(--tinta-2); font-size: var(--t-entrada); line-height: 1.5; }
.p-nota { margin-block: 1rem; color: var(--tinta-3); font-size: var(--t-peque); }
.enlace { color: var(--brasa-tinta); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.enlace:hover { text-decoration-thickness: 2px; }
.enlace-flecha { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; font-weight: 600; color: var(--brasa-tinta); text-decoration: none; }
.enlace-flecha .icono { width: 1.0625rem; height: 1.0625rem; transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .enlace-flecha:hover { text-decoration: underline; } .enlace-flecha:hover .icono { transform: translateX(-3px); } }
.volver { margin-bottom: 0.75rem; margin-left: -0.125rem; }

/* ── Botones ────────────────────────────────────────────────────────────── */
.p-boton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.75rem 1.375rem; border: 1px solid transparent; border-radius: 999px;
  font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, box-shadow 260ms ease;
}
.p-boton:active { transform: scale(0.97); }
.p-boton .icono { width: 1.125rem; height: 1.125rem; }
.p-boton--brasa { background-color: var(--brasa); background-image: linear-gradient(180deg, #FF8A2E, var(--brasa) 60%, #F56F0E); color: var(--tinta); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), inset 0 -1px 0 rgb(0 0 0 / 0.12), 0 8px 24px -10px rgb(255 122 24 / 0.7); }
.p-boton--tinta { background: var(--tinta); color: var(--papel); }
.p-boton--linea { background: transparent; color: var(--tinta); border-color: var(--linea-fuerte); }
.p-boton--peligro { background: var(--rojo); color: var(--blanco); }
.p-boton--peque { min-height: 2.75rem; padding: 0.5rem 1rem; font-size: var(--t-peque); }
.p-boton--ancho { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .p-boton--brasa:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), inset 0 -1px 0 rgb(0 0 0 / 0.12), 0 14px 36px -10px rgb(255 122 24 / 0.9); }
  .p-boton--tinta:hover { background: #2A251F; }
  .p-boton--linea:hover { background: var(--blanco); border-color: var(--tinta); }
  .p-boton--peligro:hover { background: #A52D15; }
}
.botonera { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }
.botonera--fin { margin-top: 1.5rem; }
.botonera__estado { color: var(--verde); font-size: var(--t-peque); font-weight: 500; }

/* ── Hojas (tarjetas) y avisos ──────────────────────────────────────────── */
.p-hoja { display: grid; gap: 1.125rem; align-content: start; padding: clamp(1.25rem, 0.9rem + 1.6vw, 2rem); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); box-shadow: var(--sombra-1); }
.p-hoja + .p-hoja, .p-hoja + .p-nota, .tablero__cabeza + .p-hoja, .p-aviso + .p-hoja { margin-top: 1.25rem; }
.p-hoja__titulo { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.p-hoja__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.p-hoja p { max-width: 62ch; }
/* Un botón suelto en una hoja, a su tamaño: la hoja es una rejilla y lo estiraba
   de lado a lado (el de borrar parecía el botón principal de la página). */
.p-hoja > .p-boton:not(.p-boton--ancho) { justify-self: start; }
.p-hoja--peligro { border-color: #E9B8AB; background: linear-gradient(var(--blanco), #FFF9F7); }
.p-hoja--peligro .p-hoja__titulo { color: var(--rojo); }
.p-hoja--error { margin-top: 2rem; }

.p-aviso { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.25rem; padding: 0.875rem 1.125rem; border-radius: var(--radio-medio); font-size: var(--t-peque); line-height: 1.5; }
.p-aviso .icono { margin-top: 0.125rem; }
.p-aviso ul { margin: 0.25rem 0 0; padding-left: 1.125rem; }
.p-aviso--bien { background: var(--verde-suave); color: #14532F; }
.p-aviso--mal { background: var(--rojo-suave); color: #8A2410; }
.p-aviso--mal .icono { color: var(--rojo); }
.p-aviso--previa { background: var(--tinte-pizarra); color: var(--tinta); }
.p-hoja .p-aviso { margin-bottom: 0; }

/* ── Campos ─────────────────────────────────────────────────────────────── */
.campo { display: grid; gap: 0.4375rem; align-content: start; min-width: 0; }
.campo > label, .campo legend, .subida__etiqueta { font-size: var(--t-peque); font-weight: 600; }
.campo label small, .campo legend small, .subida__etiqueta small { font-weight: 400; color: var(--tinta-3); }
.campo input[type="text"], .campo input[type="password"], .campo input[type="email"], .campo input[type="url"], .campo input[type="date"], .campo textarea {
  width: 100%; min-height: 3.125rem; padding: 0.75rem 0.875rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-peque);
  background: var(--blanco); color: var(--tinta); font-size: 1rem; line-height: 1.4; transition: border-color 160ms ease, box-shadow 160ms ease;
}
.campo textarea { min-height: 7rem; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-3); opacity: 1; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: none; border-color: var(--brasa-tinta); box-shadow: 0 0 0 4px rgb(255 122 24 / 0.25); }
.campo input[aria-invalid="true"] { border-color: var(--rojo); }
.campo__ayuda { font-size: var(--t-mini); color: var(--tinta-3); line-height: 1.45; }
.campo__clave { position: relative; }
.campo__clave input { padding-right: 5.75rem; }
.campo__ver { position: absolute; right: 0.25rem; top: 50%; translate: 0 -50%; display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; padding: 0.375rem 0.75rem; border: 0; border-radius: var(--radio-peque); background: none; color: var(--tinta-2); font-size: var(--t-mini); font-weight: 600; }
.campo__ver .icono { width: 1.125rem; height: 1.125rem; }
.campo__ver:hover { background: var(--papel); }
fieldset.campo { margin: 0; padding: 0; border: 0; }
fieldset.campo legend { padding: 0; margin-bottom: 0.4375rem; }

.opcion { display: flex; align-items: flex-start; gap: 0.75rem; min-height: 2.75rem; padding: 0.6875rem 0.875rem; border: 1px solid var(--linea); border-radius: var(--radio-medio); background: var(--blanco); font-size: var(--t-peque); line-height: 1.45; cursor: pointer; }
.opcion input { flex: none; width: 1.5rem; height: 1.5rem; margin: -0.0625rem 0 0; accent-color: var(--brasa-tinta); }
.opcion:has(input:checked) { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.opcion:has(input:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 2px; }
.opcion input:focus-visible { outline: none; }
.campo--opciones { gap: 0.5rem; }
.opcion--peque { min-height: 2.75rem; padding: 0.5rem 0.75rem; align-items: center; }
.opciones-fase { display: grid; gap: 0.5rem; }
.fila-campos { display: grid; gap: 1rem; align-items: end; }
@media (min-width: 40em) { .fila-campos { grid-template-columns: minmax(10rem, 14rem) 1fr; } }

/* Las clases de novedad, como fichas con su icono. */
.tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0.5rem; }
.tipo-opcion { position: relative; display: block; cursor: pointer; }
.tipo-opcion input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tipo-opcion__caja { display: flex; align-items: center; gap: 0.75rem; min-height: 3.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--linea); border-radius: var(--radio-medio); background: var(--blanco); transition: border-color 160ms ease, box-shadow 160ms ease; }
.tipo-opcion__texto { display: grid; line-height: 1.3; font-size: var(--t-peque); }
.tipo-opcion__texto small { color: var(--tinta-3); font-size: var(--t-mini); }
.tipo-opcion input:checked + .tipo-opcion__caja { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.tipo-opcion input:focus-visible + .tipo-opcion__caja { outline: 2px solid var(--tinta); outline-offset: 2px; }

.tipo-cuadro { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: var(--papel-2); color: var(--tinta); }
.tipo-cuadro .icono { width: 1.25rem; height: 1.25rem; }
.tipo-cuadro--foto, .tipo-cuadro--movil, .novedad__media--foto, .novedad__media--movil { background: var(--tinte-pizarra); }
.tipo-cuadro--animacion, .tipo-cuadro--velocidad, .novedad__media--animacion, .novedad__media--velocidad { background: var(--brasa-suave); }
.tipo-cuadro--texto, .tipo-cuadro--arreglo, .novedad__media--texto, .novedad__media--arreglo { background: var(--tinte-arena); }
.tipo-cuadro--diseno, .novedad__media--diseno { background: var(--tinte-salvia); }
.tipo-cuadro--funcion, .novedad__media--funcion { background: var(--verde-suave); }

/* Una debajo de otra: en tres columnas el campo de fichero no cabía y el nombre
   del archivo salía cortado («Nin…ado»). */
.subidas { display: grid; gap: 0.75rem; }
.subida { display: grid; gap: 0.5rem; align-content: start; min-width: 0; padding: 0.875rem; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio-medio); background: var(--papel); }
.subida__actual { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.subida__actual img { width: 9rem; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border-radius: var(--radio-peque); border: 1px solid var(--linea); }
.subida__video { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-size: var(--t-peque); }
.subida__fichero { width: 100%; min-width: 0; font-size: var(--t-mini); }
.subida__fichero::file-selector-button { min-height: 2.75rem; margin-right: 0.625rem; padding: 0.5rem 0.875rem; border: 1px solid var(--linea-fuerte); border-radius: 999px; background: var(--blanco); color: var(--tinta); font: 600 var(--t-mini) / 1.2 var(--f-texto); cursor: pointer; }

/* ── La entrada (escenario oscuro, como el hero de la web) ──────────────── */
.p-escena { background: var(--noche); }
.p-escena .p-main { position: relative; display: grid; align-items: center; isolation: isolate; overflow: hidden; }
.p-escena .p-main::before {
  content: ""; position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; pointer-events: none;
  background: radial-gradient(38rem 26rem at 18% 30%, rgb(255 122 24 / 0.22), transparent 70%), radial-gradient(30rem 22rem at 85% 75%, rgb(227 90 11 / 0.16), transparent 70%);
}
.p-escena .p-pie { background: var(--noche); color: var(--noche-texto-3); border-top-color: var(--noche-linea); }
.p-escena .p-pie .enlace { color: var(--brasa-clara); }
.p-escena .p-aviso--bien { max-width: 64rem; margin-inline: auto; }
.entrada { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: center; }
.entrada__texto { color: var(--noche-texto); }
.entrada__texto .p-etiqueta { color: var(--brasa); }
.entrada__titulo { margin-top: 0.5rem; font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.entrada__entrada { margin-top: 1rem; max-width: 30rem; color: var(--noche-texto-2); font-size: var(--t-entrada); line-height: 1.5; }
/* 2026-10-15 · Quien llega por la estrella sin ser cliente tiene la salida a la vista. */
.entrada__fuera { margin-top: 1rem; color: var(--noche-texto-3); font-size: var(--t-peque); }
.entrada__fuera .enlace { color: var(--noche-texto); display: inline-flex; align-items: center; min-height: 2.75rem; }
.entrada__pasos { margin: 1.5rem 0 0; padding-left: 1.25rem; display: grid; gap: 0.625rem; max-width: 32rem; color: var(--noche-texto-2); font-size: var(--t-peque); }
.entrada__pasos b { color: var(--noche-texto); font-weight: 600; }
.entrada__hoja { box-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.06); border-color: transparent; }
.entrada__ayuda { color: var(--tinta-3); font-size: var(--t-mini); line-height: 1.5; }
@media (min-width: 56em) { .entrada { grid-template-columns: 1fr minmax(22rem, 26rem); } }

/* ── El tablero del cliente ─────────────────────────────────────────────── */
.tablero { display: grid; gap: 1.5rem; }
.tablero__principal { min-width: 0; }
@media (min-width: 64em) {
  .tablero { grid-template-columns: minmax(0, 1fr) minmax(22rem, 24rem); gap: 2rem; align-items: start; }
  /* El chat es la línea directa con Javier, no un recuadro perdido: en pantalla
     ancha es alto y se queda a la vista al bajar, con el campo de escribir
     siempre abajo. Tope de 46rem para que no quede un vacío enorme cuando la
     conversación es corta; en ventanas bajas, el alto de la ventana. El hilo
     (minmax(0,1fr) en la rejilla del chat) crece para llenarlo. */
  .tablero__lado { position: sticky; top: 1.5rem; height: min(calc(100dvh - 3rem), 46rem); }
  .tablero__lado .chat { height: 100%; box-shadow: 0 34px 80px -44px rgb(0 0 0 / 0.62); }
  .tablero__lado .chat__mensajes { max-height: none; min-height: 0; }
}
.tablero__cabeza { display: grid; gap: 0.375rem; margin-bottom: 1.5rem; }
.tablero__cabeza--accion { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; }
.tablero__cabeza--accion > div { display: grid; gap: 0.375rem; min-width: 0; flex: 1 1 18rem; }

.proyectos__lista { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.proyectos__enlace { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 1rem; border: 1px solid var(--linea-fuerte); border-radius: 999px; font-size: var(--t-peque); font-weight: 500; text-decoration: none; }
.proyectos__enlace[aria-current="page"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }

/* En qué paso estamos: los cinco pasos de «Cómo trabajo». */
.estado { container-type: inline-size; }
.fases { display: grid; gap: 0.5rem; }
.fase { position: relative; display: flex; align-items: center; gap: 0.75rem; color: var(--tinta-3); font-size: var(--t-peque); }
.fase__marca { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 999px; border: 1px solid var(--linea-fuerte); background: var(--blanco); font-size: var(--t-mini); font-weight: 600; font-variant-numeric: tabular-nums; }
.fase__marca .icono { width: 1rem; height: 1rem; stroke-width: 2; }
.fase--hecha { color: var(--tinta-2); }
.fase--hecha .fase__marca { border-color: var(--verde); background: var(--verde); color: var(--blanco); }
.fase--actual { color: var(--tinta); font-weight: 600; }
.fase--actual .fase__marca { border-color: var(--brasa-tinta); background: var(--brasa); color: var(--tinta); box-shadow: 0 0 0 4px rgb(255 122 24 / 0.22); }
@container (min-width: 34rem) {
  .fases { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .fase { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding-right: 0.5rem; line-height: 1.3; }
  .fase:not(:last-child)::after { content: ""; position: absolute; left: 2.5rem; right: 0.5rem; top: 1rem; height: 2px; border-radius: 2px; background: var(--linea); }
  .fase--hecha:not(:last-child)::after { background: var(--verde); }
}
.estado__fase { color: var(--tinta-2); }
.estado__fase b { color: var(--tinta); font-weight: 600; }
.estado__ahora { display: grid; gap: 0.5rem; padding: 1rem 1.125rem; border-radius: var(--radio-medio); background: var(--papel); }
.estado__ahora p + p { margin-top: 0.5rem; }
.estado__subtitulo { font-size: var(--t-mini); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); }
.estado__ver, .detalle__ver { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.estado__direccion { color: var(--tinta-3); font-size: var(--t-mini); overflow-wrap: anywhere; }

/* Lo que ha cambiado. Cada novedad es una ficha entera que se pulsa: el
   enlace está en el título (lo que lee el lector de pantalla) y se estira por
   encima de la ficha con un ::after. */
.novedades { margin-top: 2rem; container-type: inline-size; }
.novedades__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.novedades__titulo { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; }
.novedades__cuenta { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--tinta-2); font-size: var(--t-peque); }
.novedades__lista { display: grid; gap: 0.75rem; }
.novedad { position: relative; display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0.875rem; align-items: start; padding: 0.75rem; border: 1px solid var(--linea); border-radius: var(--radio-medio); background: var(--blanco); box-shadow: var(--sombra-1); transition: border-color 180ms ease, box-shadow 220ms ease, transform 220ms var(--ease-out); }
.novedad--nueva { border-color: #F3B98C; }
@media (hover: hover) and (pointer: fine) { .novedad:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra-2); transform: translateY(-1px); } }
.novedad:has(.novedad__enlace:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 3px; }
.novedad__enlace { text-decoration: none; }
.novedad__enlace:focus-visible { outline: none; }
.novedad__enlace::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.novedad__media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--radio-peque); background: var(--papel-2); overflow: hidden; }
.novedad__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.novedad__icono { width: 1.75rem; height: 1.75rem; }
.novedad__play { position: absolute; right: 0.375rem; bottom: 0.375rem; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: rgb(17 14 11 / 0.82); color: var(--noche-texto); }
.novedad__play .icono { width: 1.125rem; height: 1.125rem; }
.novedad__cuerpo { display: grid; gap: 0.25rem; min-width: 0; }
.novedad__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; color: var(--tinta-3); font-size: var(--t-mini); }
.novedad__titulo { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; overflow-wrap: anywhere; }
.novedad__resumen { color: var(--tinta-2); font-size: var(--t-peque); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.novedad__ir { display: none; color: var(--tinta-3); }
@container (min-width: 36rem) {
  .novedad { grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: 1.125rem; padding: 0.875rem 1.125rem 0.875rem 0.875rem; align-items: center; }
  .novedad__ir { display: block; }
}
.tipo { display: inline-flex; align-items: center; gap: 0.3125rem; color: var(--tinta-2); font-weight: 600; }
.tipo .icono { width: 1rem; height: 1rem; }
.nueva { display: inline-grid; place-items: center; min-width: 1.5rem; padding: 0.0625rem 0.5rem; border-radius: 999px; background: var(--brasa); color: var(--tinta); font-size: var(--t-mini); font-weight: 600; line-height: 1.5; }

.vacio { justify-items: start; }
.vacio__icono { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px; background: var(--papel-2); }
.vacio--peque { color: var(--tinta-2); }
.vacio__texto { color: var(--tinta-2); }

/* Sin proyecto todavía: un solo mensaje, tranquilo, sin secciones de adorno. */
.espera { display: grid; justify-items: start; gap: 0.5rem; padding-block: clamp(1.5rem, 1rem + 4vw, 4rem); }
.espera__icono { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: 0.75rem; border-radius: 999px; background: var(--brasa-suave); color: var(--brasa-tinta); }
.espera__icono .icono { width: 1.625rem; height: 1.625rem; }
.espera .p-entrada { margin-top: 0.5rem; }
.espera__contacto { margin-top: 0.75rem; color: var(--tinta-2); font-size: var(--t-peque); }

/* ── Los atajos de arriba (2026-10-14) ────────────────────────────────────
   Tu web · Novedades · Mensajes, con lo que haya sin ver. Se quedan pegados
   arriba al bajar en el móvil: el chat queda al final y así está a un toque. */
.atajos { position: sticky; top: 0; z-index: 5; display: flex; gap: 0.375rem; margin: -0.5rem -1rem 1.25rem; padding: 0.5rem 1rem; background: var(--papel); overflow-x: auto; scrollbar-width: none; }
.atajos::-webkit-scrollbar { display: none; }
.atajos__enlace { flex: none; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.5rem 0.875rem; border: 1px solid var(--linea); border-radius: 999px; background: var(--blanco); color: var(--tinta); font-size: var(--t-peque); font-weight: 600; text-decoration: none; }
.atajos__enlace .icono { width: 1.125rem; height: 1.125rem; color: var(--tinta-3); }
.atajos__enlace:hover { border-color: var(--tinta-3); }
.atajos__enlace .nueva { margin-left: 0.125rem; }
/* Los tres caben enteros en cualquier móvil (nada cortado por el borde): sin
   icono por debajo de 30 em y con la letra un punto más pequeña en los más
   estrechos. */
@media (max-width: 29.99em) { .atajos { gap: 0.3125rem; } .atajos__enlace { padding-inline: 0.75rem; } .atajos__enlace .icono { display: none; } }
@media (max-width: 22.5em) { .atajos { gap: 0.25rem; margin-inline: -0.75rem; padding-inline: 0.75rem; } .atajos__enlace { gap: 0.3125rem; padding-inline: 0.5rem; font-size: 0.78rem; } .atajos__enlace .nueva { min-width: 1.25rem; padding-inline: 0.3125rem; } }
@media (min-width: 64em) { .atajos { position: static; margin: 0 0 1.5rem; padding: 0; background: none; } .atajos__enlace--chat { display: none; } }
#estado, #novedades { scroll-margin-top: 4.5rem; }

/* Las novedades, por meses. */
.novedades__mes { margin: 1.5rem 0 0.625rem; font-size: var(--t-mini); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); }
.novedades__cabeza + .novedades__mes { margin-top: 0.5rem; }

/* ── El chat (2026-10-14) ──────────────────────────────────────────────────
   El de verdad: el hilo se desplaza por dentro (con lo último abajo, como en
   cualquier móvil) y la caja de escribir crece con lo que escribes. */
.chat { scroll-margin-top: 4.5rem; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0.875rem; padding: 1.125rem; border-radius: var(--radio); background: var(--noche-2); color: var(--noche-texto); box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.55); }
.chat__cabeza { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 0.875rem; border-bottom: 1px solid var(--noche-linea); }
.chat__avatar { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--brasa); color: var(--tinta); font-weight: 600; font-size: 1.125rem; }
.chat__quien { display: grid; gap: 0.125rem; min-width: 0; }
.chat__titulo { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.chat__estado { color: var(--noche-texto-3); font-size: var(--t-mini); }
.chat__mensajes { display: flex; flex-direction: column; gap: 0.375rem; min-height: 12rem; max-height: min(60svh, 34rem); margin: 0 -0.375rem; padding: 0 0.375rem; list-style: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--noche-linea) transparent; }
.chat__vacio { margin: auto 0; padding: 1rem; border-radius: var(--radio-medio); background: var(--noche-3); color: var(--noche-texto-2); font-size: var(--t-peque); line-height: 1.5; }
.chat__dia { align-self: center; margin: 0.5rem 0 0.25rem; }
.chat__dia span { display: inline-block; padding: 0.125rem 0.625rem; border-radius: 999px; background: var(--noche-3); color: var(--noche-texto-3); font-size: 0.75rem; font-weight: 600; }
.chat__msj { display: grid; gap: 0.125rem; max-width: 86%; padding: 0.5625rem 0.8125rem 0.4375rem; border-radius: 1.125rem; font-size: var(--t-peque); line-height: 1.45; }
.chat__msj--suyo { align-self: flex-start; border-bottom-left-radius: 0.3125rem; background: var(--noche-3); }
.chat__msj--mio { align-self: flex-end; border-bottom-right-radius: 0.3125rem; background: var(--brasa); color: var(--tinta); }
.chat__msj--mio + .chat__msj--mio, .chat__msj--suyo + .chat__msj--suyo { margin-top: -0.125rem; }
.chat__texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat__hora { justify-self: end; font-size: 0.75rem; color: var(--noche-texto-3); }
.chat__msj--mio .chat__hora { color: rgb(21 18 14 / 0.72); }
.chat__msj--nuevo { animation: chat-llega 260ms var(--ease-out); }
@keyframes chat-llega { from { opacity: 0; transform: translateY(0.375rem); } }
@media (prefers-reduced-motion: reduce) { .chat__msj--nuevo { animation: none; } }
.chat__escribir { display: flex; align-items: flex-end; gap: 0.5rem; }
/* 16 px de letra como mínimo: con menos, el iPhone amplía la página al tocar. */
.chat__caja { flex: 1; min-width: 0; min-height: 2.75rem; max-height: 9.5rem; padding: 0.625rem 0.875rem; border: 1px solid var(--noche-linea); border-radius: 1.375rem; background: var(--noche); color: var(--noche-texto); font: inherit; font-size: 1rem; line-height: 1.4; resize: none; }
.chat__caja::placeholder { color: var(--noche-texto-3); opacity: 1; }
.chat__caja:focus-visible { outline: 2px solid var(--brasa-clara); outline-offset: 1px; }
.chat__enviar { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 999px; background: var(--brasa); color: var(--tinta); cursor: pointer; }
.chat__enviar .icono { width: 1.25rem; height: 1.25rem; }
.chat__enviar:disabled { background: var(--noche-3); color: var(--noche-texto-3); cursor: wait; }
.chat__enviar:focus-visible { outline: 2px solid var(--brasa-clara); outline-offset: 2px; }
.chat__error { margin-top: -0.375rem; color: #FFB4A3; font-size: var(--t-mini); }
.chat__previa { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0.875rem; border-radius: var(--radio-medio); background: var(--noche-3); color: var(--noche-texto-2); font-size: var(--t-mini); }
.chat__previa .icono { flex: none; width: 1.125rem; height: 1.125rem; }
.chat--sin { grid-template-rows: auto auto; }
.chat .enlace { color: var(--brasa-clara); }

/* ── La web en obras, dentro del panel ─────────────────────────────────── */
.obras { display: grid; gap: 0.875rem; padding-top: 1.125rem; border-top: 1px solid var(--linea); }
.obras__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.obras__titulo { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.obras__vistas { display: inline-flex; padding: 0.1875rem; border-radius: 999px; background: var(--papel-2); }
.obras__vista { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; padding: 0.375rem 0.875rem; border: 0; border-radius: 999px; background: none; color: var(--tinta-2); font: inherit; font-size: var(--t-peque); font-weight: 600; cursor: pointer; }
.obras__vista .icono { width: 1rem; height: 1rem; }
.obras__vista[aria-pressed="true"] { background: var(--blanco); color: var(--tinta); box-shadow: var(--sombra-1); }
.obras__vista:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
/* Sin JS: a todo lo ancho. Con JS (`.obras--escala`): el iframe tiene el
   ancho de un móvil (390) o de un ordenador (1280) y se encoge a la caja. */
.obras__marco { position: relative; overflow: hidden; border-radius: var(--radio-medio); background: var(--papel-2); }
.obras__iframe { display: block; width: 100%; height: 70svh; border: 0; background: var(--blanco); }
.obras--escala .obras__iframe { height: auto; transform-origin: 0 0; }
.obras--escala[data-vista="movil"] .obras__marco { background: var(--papel-2); }
.obras--escala[data-vista="movil"] .obras__iframe { border-radius: 1.25rem; box-shadow: 0 0 0 0.5rem var(--tinta), 0 20px 40px -20px rgb(0 0 0 / 0.5); }
.obras--fuera { gap: 0.625rem; }

/* ── Administración: quién me ha escrito ───────────────────────────────── */
.escritos { margin-bottom: 1.25rem; border-color: rgb(255 122 24 / 0.45); }
/* 2026-10-15 · Lo que se usa la web (contar.php). */
.contador { margin-bottom: 1.25rem; }
.contador .p-hoja__titulo { display: flex; align-items: center; gap: 0.5rem; }
.contador .p-hoja__titulo .icono { width: 1.25rem; height: 1.25rem; color: var(--brasa-tinta); }
.contador__nota { color: var(--tinta-3); font-size: var(--t-mini); }
.contador__tabla { overflow-x: auto; margin-top: 0.75rem; }
.contador table { width: 100%; border-collapse: collapse; font-size: var(--t-peque); font-variant-numeric: tabular-nums; }
.contador th, .contador td { padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--linea); text-align: right; white-space: nowrap; }
.contador th:first-child, .contador thead th:first-child { text-align: left; }
.contador thead th { font-size: var(--t-mini); font-weight: 600; color: var(--tinta-3); white-space: normal; }
.escritos .p-hoja__titulo { display: flex; align-items: center; gap: 0.5rem; }
.escritos .p-hoja__titulo .icono { width: 1.25rem; height: 1.25rem; color: var(--brasa-tinta); }
.escritos__lista { display: grid; list-style: none; margin: 0; padding: 0; }
.escritos__enlace { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "quien n" "que n"; align-items: center; gap: 0.125rem 1rem; padding: 0.75rem 0; border-top: 1px solid var(--linea); color: var(--tinta); text-decoration: none; }
.escritos__lista li:first-child .escritos__enlace { border-top: 0; }
.escritos__enlace b { grid-area: quien; font-weight: 600; }
.escritos__enlace span:not(.nueva):not(.solo-lector) { grid-area: que; color: var(--tinta-3); font-size: var(--t-mini); }
.escritos__enlace .nueva { grid-area: n; }
.escritos__enlace:hover b { text-decoration: underline; }
.ficha__sinver--mensajes .nueva { background: var(--tinta); color: var(--blanco); }
.proyecto-arriba { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; }
.proyecto-arriba .p-hoja { margin: 0; }
/* En mi ficha del proyecto, la web en obras va en su propia hoja: sin la
   raya de arriba que la separa del paso en el tablero del cliente. */
.proyecto-arriba .obras { padding-top: 0; border-top: 0; }
.p-nav__nuevo { margin-left: 0.125rem; }

/* La ayuda de «cómo pongo aquí la web del cliente». */
.ayuda { margin-top: 0.5rem; border-radius: var(--radio-medio); background: var(--papel); }
.ayuda summary { display: flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 1rem; font-weight: 600; font-size: var(--t-peque); cursor: pointer; }
.ayuda ol { display: grid; gap: 0.625rem; margin: 0; padding: 0 1rem 1rem 2.25rem; color: var(--tinta-2); font-size: var(--t-peque); }
.ayuda code { padding: 0.0625rem 0.3125rem; border-radius: 0.3125rem; background: var(--blanco); font-size: 0.875em; overflow-wrap: anywhere; }

/* ── El detalle de una novedad ──────────────────────────────────────────── */
.detalle { display: grid; gap: 1.5rem; }
.detalle__cabeza { display: grid; gap: 0.625rem; }
.detalle__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.875rem; color: var(--tinta-3); font-size: var(--t-peque); }
.explicacion { display: grid; gap: 1rem; max-width: 65ch; font-size: var(--t-entrada); line-height: 1.6; }
.explicacion ul { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.375rem; }

/* Antes y después. Sin JavaScript, las dos imágenes una al lado de la otra
   (o una encima de otra en el móvil), cada una con su rótulo. Con JavaScript,
   una encima de la otra y una línea que se arrastra: el «antes» se recorta
   hasta donde esté la línea. El control es un <input type="range"> de verdad,
   invisible y tan grande como la imagen, para las flechas del teclado y para
   que el lector de pantalla lo anuncie como lo que es; el ratón y el dedo los
   lleva panel.js (un range nativo salta a donde lo tocas, y bajar por la
   página con el dedo encima movía la línea). `touch-action: pan-y` deja que el
   dedo que sube o baja siga moviendo la página. */
.comparar { position: relative; display: grid; gap: 0.75rem; }
@media (min-width: 40em) { .comparar { grid-template-columns: 1fr 1fr; } }
.comparar__lado { position: relative; overflow: hidden; border-radius: var(--radio-medio); border: 1px solid var(--linea); background: var(--blanco); }
.comparar__lado img { width: 100%; }
.comparar__rotulo { position: absolute; top: 0.75rem; left: 0.75rem; padding: 0.25rem 0.625rem; border-radius: 999px; background: rgb(17 14 11 / 0.82); color: var(--noche-texto); font-size: var(--t-mini); font-weight: 600; pointer-events: none; }
.comparar__linea, .comparar__control { display: none; }
.con-js .comparar { display: block; overflow: hidden; overflow: clip; border-radius: var(--radio-medio); border: 1px solid var(--linea); background: var(--blanco); --corte: 50%; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.con-js .comparar__lado { border: 0; border-radius: 0; }
/* Una captura de una web entera es muy alta, y se enseña a lo ancho y entera
   (encajarla en la pantalla la dejaba en una tira estrecha). En esas
   (.comparar--alta, lo decide novedad.php por su forma), el asa de la línea
   viaja con la pantalla: se queda en el centro mientras bajas. Por eso la caja
   recorta con overflow: clip y no hidden: hidden la convertiría en la caja de
   scroll del asa y el sticky no seguiría a la pantalla. */
.comparar--alta .comparar__asa { position: sticky; top: calc(50vh - 1.375rem); top: calc(50svh - 1.375rem); left: auto; translate: none; margin-left: calc(1px - 1.375rem); }
.con-js .comparar__lado--antes { position: absolute; inset: 0; z-index: 1; clip-path: inset(0 calc(100% - var(--corte)) 0 0); }
.con-js .comparar__lado--antes img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.con-js .comparar__lado--ahora .comparar__rotulo { left: auto; right: 0.75rem; }
.con-js .comparar__control { display: block; position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; -webkit-appearance: none; appearance: none; }
.con-js .comparar__linea { display: block; position: absolute; top: 0; bottom: 0; left: var(--corte); z-index: 2; width: 2px; translate: -1px 0; background: var(--blanco); box-shadow: 0 0 0 1px rgb(17 14 11 / 0.25); pointer-events: none; }
.comparar__asa { position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--blanco); color: var(--tinta); box-shadow: 0 4px 16px rgb(17 14 11 / 0.3); transition: scale 200ms var(--ease-out); }
.comparar__asa .icono { width: 0.9375rem; height: 0.9375rem; stroke-width: 2; }
.con-js .comparar:has(.comparar__control:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 3px; }
.comparar:has(.comparar__control:focus-visible) .comparar__asa, .comparar:has(.comparar__control:active) .comparar__asa { scale: 1.12; }
.comparar__ayuda { margin-top: -0.75rem; color: var(--tinta-3); font-size: var(--t-mini); }

.captura, .video { display: grid; gap: 0.5rem; }
.captura__enlace { display: block; overflow: hidden; border-radius: var(--radio-medio); border: 1px solid var(--linea); background: var(--blanco); }
.captura__enlace img { width: 100%; }
.captura__pie { color: var(--tinta-3); font-size: var(--t-mini); }
.video__reproductor { width: 100%; max-height: 80vh; border-radius: var(--radio-medio); background: var(--noche); }

.vecinas { display: grid; gap: 0.75rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); }
@media (min-width: 40em) { .vecinas { grid-template-columns: 1fr 1fr; } .vecina--siguiente { grid-column: 2; text-align: right; } .vecina--siguiente .vecina__dir { justify-content: flex-end; } }
.vecina { display: grid; gap: 0.25rem; min-height: 2.75rem; padding: 0.875rem 1rem; border: 1px solid var(--linea); border-radius: var(--radio-medio); background: var(--blanco); text-decoration: none; }
.vecina__dir { display: flex; align-items: center; gap: 0.375rem; color: var(--brasa-tinta); font-size: var(--t-mini); font-weight: 600; }
.vecina__dir .icono { width: 1rem; height: 1rem; }
.vecina__titulo { font-weight: 600; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .vecina:hover { border-color: var(--linea-fuerte); } }

/* ── Administración ─────────────────────────────────────────────────────── */
.fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0.875rem; }
.ficha { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1rem; align-items: start; padding: 1.125rem 1.25rem; border: 1px solid var(--linea); border-radius: var(--radio-medio); background: var(--blanco); box-shadow: var(--sombra-1); transition: border-color 180ms ease, box-shadow 220ms ease; }
@media (hover: hover) and (pointer: fine) { .ficha:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra-2); } }
.ficha:has(.ficha__enlace:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 3px; }
.ficha__enlace { text-decoration: none; }
.ficha__enlace:focus-visible { outline: none; }
.ficha__enlace::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ficha__cuerpo { display: grid; gap: 0.375rem; min-width: 0; }
.ficha__nombre { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; overflow-wrap: anywhere; }
.ficha__usuario { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--tinta-3); font-size: var(--t-mini); }
.ficha__usuario .icono { width: 1rem; height: 1rem; }
.ficha__datos { display: grid; gap: 0.125rem; margin-top: 0.375rem; color: var(--tinta-2); font-size: var(--t-mini); }
.ficha__sinver { grid-column: 1; display: inline-flex; align-items: center; gap: 0.375rem; color: var(--tinta-2); font-size: var(--t-mini); }
.ficha__ir { grid-column: 2; grid-row: 1; color: var(--tinta-3); }
.admins { margin-top: 2.5rem; }
.admins__titulo { font-size: var(--t-peque); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); }
.admins__lista { display: grid; gap: 0.25rem; margin-top: 0.5rem; }
.admins__lista li { min-height: 2.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.admins__usuario { color: var(--tinta-3); font-size: var(--t-peque); }

.filas { display: grid; }
.fila-admin { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.875rem; align-items: center; min-height: 3.5rem; padding: 0.75rem 0.25rem; border-top: 1px solid var(--linea); }
.fila-admin:not(:has(.fila-admin__tipo)) { grid-template-columns: minmax(0, 1fr) auto; }
.fila-admin:first-child { border-top: 0; }
.fila-admin__titulo { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.fila-admin__titulo::after { content: ""; position: absolute; inset: 0; }
.fila-admin:has(.fila-admin__titulo:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 2px; border-radius: var(--radio-peque); }
.fila-admin__titulo:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) { .fila-admin:hover .fila-admin__titulo { text-decoration: underline; } }
.fila-admin__datos { margin-top: 0.125rem; color: var(--tinta-3); font-size: var(--t-mini); }
.fila-admin__ir { color: var(--tinta-3); }
.estado-pastilla { display: inline-block; padding: 0 0.5rem; border-radius: 999px; background: var(--brasa-suave); color: var(--brasa-tinta); font-weight: 600; }
.estado-pastilla--borrador { background: var(--papel-2); color: var(--tinta-2); }
.estado-pastilla--vista { background: var(--verde-suave); color: var(--verde); }

.datos { display: grid; gap: 0.75rem; }
.datos div { display: grid; gap: 0.125rem; }
.datos dt { color: var(--tinta-3); font-size: var(--t-mini); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.datos dd { overflow-wrap: anywhere; }
.datos--grandes dd { font-size: 1.125rem; }
.datos--grandes code { padding: 0.125rem 0.5rem; border-radius: 0.375rem; background: var(--papel); font-size: 1.0625rem; letter-spacing: 0.02em; }
.credenciales__mensaje { font-size: var(--t-peque) !important; line-height: 1.55 !important; background: var(--papel) !important; }

/* ── El home del administrador: centro de control (2026-10-17) ─────────────
   Cada cliente con SUS webs y en qué paso va cada una, de un vistazo; lo
   pendiente arriba (quién ha escrito), y el uso de la web recogido abajo. */
.p-resumen { margin-top: 0.5rem; color: var(--tinta-2); font-size: var(--t-peque); }

.clientes { display: grid; gap: 0.875rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.escritos + .clientes { margin-top: 1.25rem; }
.cliente { display: grid; gap: 0.875rem; align-content: start; padding: 1.125rem 1.25rem; border: 1px solid var(--linea); border-radius: var(--radio-medio); background: var(--blanco); box-shadow: var(--sombra-1); }
/* La cabecera entera es el enlace a la ficha del cliente (como toda la fila es el
   destino en el resto del panel): el nombre es un enlace de texto, pero su zona de
   toque se estira sobre la cabecera con un ::after, así llega de sobra a 44px. */
.cliente__cabeza { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1rem; }
.cliente__quien { display: grid; gap: 0.25rem; min-width: 0; }
.cliente__nombre { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; overflow-wrap: anywhere; }
.enlace-sutil { color: inherit; text-decoration: none; }
.enlace-sutil:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.cliente__nombre .enlace-sutil::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cliente__nombre .enlace-sutil:focus-visible { outline: none; }
.cliente__cabeza:has(.enlace-sutil:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 4px; border-radius: var(--radio-peque); }
.cliente__usuario { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; min-width: 0; color: var(--tinta-3); font-size: var(--t-mini); overflow-wrap: anywhere; }
.cliente__usuario .icono { width: 1rem; height: 1rem; }
.cliente__usuario span { min-width: 0; overflow-wrap: anywhere; }
.cliente__aviso { display: inline-flex; align-items: center; gap: 0.375rem; flex: none; color: var(--brasa-tinta); font-size: var(--t-mini); font-weight: 600; }
.cliente__aviso .icono { width: 1rem; height: 1rem; }
.cliente__aviso--suave { color: var(--tinta-2); }
.cliente__sinweb { color: var(--tinta-3); font-size: var(--t-peque); }

/* La fila de una web. Rejilla, no flex: así el pill «Paso N» nunca aplasta el
   nombre (en una caja estrecha se partía letra a letra en una columna altísima).
   Estrecho → el nombre con la flecha arriba y el pill debajo; a partir de 21rem
   de caja (container), el nombre, el pill y la flecha en una fila. */
.webs { display: grid; gap: 0.375rem; container-type: inline-size; }
.web { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.625rem; align-items: center; min-height: 2.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--linea); border-radius: var(--radio-peque); background: var(--papel); transition: border-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .web:hover { border-color: var(--linea-fuerte); } }
.web:has(.web__enlace:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 2px; }
.web__enlace { grid-column: 1; grid-row: 1; min-width: 0; display: flex; align-items: center; min-height: 2rem; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.web__enlace:focus-visible { outline: none; }
.web__enlace::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
@media (hover: hover) and (pointer: fine) { .web:hover .web__enlace { text-decoration: underline; text-underline-offset: 0.18em; } }
.paso { grid-column: 1 / -1; grid-row: 2; justify-self: start; padding: 0.125rem 0.625rem; border-radius: 999px; background: var(--brasa-suave); color: var(--brasa-tinta); font-size: var(--t-mini); font-weight: 600; white-space: nowrap; }
.paso--5 { background: var(--verde-suave); color: var(--verde); }
.web__ir { grid-column: 2; grid-row: 1; color: var(--tinta-3); }
@container (min-width: 21rem) {
  .web { grid-template-columns: minmax(0, 1fr) auto auto; }
  .paso { grid-column: 2; grid-row: 1; justify-self: end; }
  .web__ir { grid-column: 3; grid-row: 1; }
}

.panel-uso { margin-top: 1.5rem; border: 1px solid var(--linea); border-radius: var(--radio-medio); background: var(--blanco); box-shadow: var(--sombra-1); }
.panel-uso__titulo { display: flex; align-items: center; gap: 0.5rem; min-height: 3rem; padding: 0.875rem 1.25rem; cursor: pointer; list-style: none; }
.panel-uso__titulo::-webkit-details-marker { display: none; }
.panel-uso__h { flex: 1; margin: 0; display: flex; align-items: center; gap: 0.5rem; font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.015em; }
.panel-uso__h .icono { width: 1.25rem; height: 1.25rem; color: var(--brasa-tinta); }
.panel-uso__titulo::after { content: ""; flex: none; margin-left: auto; width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--tinta-3); border-bottom: 2px solid var(--tinta-3); rotate: 45deg; transition: rotate 200ms var(--ease-out); }
.panel-uso[open] .panel-uso__titulo::after { rotate: 225deg; }
.panel-uso__titulo:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; border-radius: var(--radio-medio); }
.panel-uso__cuerpo { padding: 0 1.25rem 1.25rem; }
.panel-uso__cuerpo .contador__nota { margin-top: 0; }

/* ── Pie ────────────────────────────────────────────────────────────────── */
.p-pie { border-top: 1px solid var(--linea); color: var(--tinta-3); font-size: var(--t-mini); }
.p-pie__dentro { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1.5rem; padding-block: 1.25rem; }
.p-pie p { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.3em; }
.p-pie .enlace { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ── Movimiento reducido ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .marca__puerta:hover .marca__chispa, .marca__puerta:focus-visible .marca__chispa { transform: none; }
}