/* «La vitrina» (Manuel, 27-10-2026: «Esta es la dirección»; Taste 2.1.5, dirección «dark-room»; DESIGN.md): toda la
   app es una vitrina en penumbra y cada joya es lo iluminado de su pantalla. Un solo aspecto, oscuro y cálido. */
@font-face { font-family: "Erode"; font-weight: 400; font-display: swap; src: url(fuentes/erode-400.woff2) format("woff2"); }
@font-face { font-family: "Erode"; font-weight: 500; font-display: swap; src: url(fuentes/erode-500.woff2) format("woff2"); }
@font-face { font-family: "Erode"; font-weight: 600; font-display: swap; src: url(fuentes/erode-600.woff2) format("woff2"); }
:root {
  --fondo: #0c0a08;        /* la sala: negro cálido */
  --tarjeta: #181512;      /* casillas y paneles: negro pardo */
  --tarjeta-2: #221d18;
  --panel: #1a1510;        /* grupos de casillas: un poco más claro que la sala */
  --panel-borde: #3d342a;
  --casilla: #0a0806;      /* el hueco donde se escribe: más oscuro que el panel */
  --casilla-borde: #7a6d5d; /* 3,6:1 o más contra panel, casilla y sala (bordes de controles: 3:1) */
  --etiqueta: #e6dccd;     /* nombre de cada casilla: 13:1 */
  --texto: #f6efe4;        /* tinta clara, 17:1 sobre el fondo */
  --tenue: #b9ae9f;        /* 9,1:1 */
  --linea: #2e2720;
  --acento: #d4b06a;       /* oro: lo que se pulsa y el siguiente paso; 9,6:1 */
  --acento-texto: #0c0a08;
  --aviso: #f0a08f;        /* 9,5:1 */
  --ok: #8fd3b4;           /* 11,4:1 */
  --oro: #c9a45a; --oro-claro: #e3c483; --verde: #8fd3b4; --verde-fondo: #1f4a3b; --verde-claro: #8fd3b4; --azul: #9cc3e4; --rosa: #e9a3b4; --turquesa: #7fd1d1;
  --sombra: 0 10px 30px rgba(0, 0, 0, .45); --sombra-alta: 0 18px 44px rgba(0, 0, 0, .6);
  --f-titulo: "Erode", Georgia, "Times New Roman", serif; --f-texto: "Erode", Georgia, "Times New Roman", serif;
  --radio: 6px;
  /* Guía visual común (REV-026): una escala de letra y una de espacios para toda la app. */
  --t-xs: .8125rem; --t-s: .9rem; --t-m: 1.0625rem; --t-l: 1.375rem; --t-xl: 2.25rem; --t-xxl: 3.25rem;
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --alto-barra: 72px;
  --margen: 16px;          /* margen lateral de main: las fotos a sangre lo cruzan */
  color-scheme: dark;
}
@media (min-width: 768px) { :root { --margen: 24px; } }
/* Tema claro (Manuel, 01-11-2026; DESIGN.md § 1): el mismo diseño a la luz del día. Papel cálido en vez de la sala en
   penumbra; mismas formas, letras, espacios y fotos. Solo cambian los colores con nombre (contraste comprobado: texto
   15,9:1, tenue 7:1, oro 5:1 sobre el fondo). Las fotos y sus velos oscuros (baldosas, cabeceras) se quedan igual. */
:root[data-tema="claro"] {
  --fondo: #f6f1e9; --tarjeta: #fffcf7; --tarjeta-2: #efe7da; --panel: #fbf7f0; --panel-borde: #d6c9b5;
  --casilla: #ffffff; --casilla-borde: #847460; --acomp: #e3efec; --filo: #2a8478; --viso: #8a2f45; --etiqueta: #33291f; --texto: #1c1610; --tenue: #5c5044; --linea: #e3d9ca;
  --acento: #86601d; --acento-texto: #fffaf1; --aviso: #a3321d; --ok: #24694b;
  --oro: #7f5d22; --oro-claro: #9a7432; --verde: #24694b; --verde-fondo: #dcefe4; --verde-claro: #24694b; --azul: #2c5c86; --rosa: #9c3f58; --turquesa: #1f6e6c;
  --sombra: 0 10px 30px rgba(60, 40, 15, .12); --sombra-alta: 0 18px 44px rgba(60, 40, 15, .2);
  color-scheme: light;
}
/* Lo que en el oscuro lleva una sombra o un velo oscuro detrás de un texto que ahora es oscuro: velo claro. */
:root[data-tema="claro"] .heroe-palabra { text-shadow: 0 2px 30px rgba(255, 252, 247, .9); background: radial-gradient(ellipse 62% 30% at 50% 50%, rgba(255, 252, 247, .78), rgba(255, 252, 247, 0) 72%); }
:root[data-tema="claro"] details.seccion > summary h3 { text-shadow: 0 1px 14px rgba(255, 252, 247, .95), 0 0 2px rgba(255, 252, 247, .9); }
:root[data-tema="claro"] input::placeholder, :root[data-tema="claro"] textarea::placeholder { color: var(--tenue); } /* sin transparencia: 7:1 (Lía, REV-056) */
:root[data-tema="claro"] .pista-sig { background: var(--acento); } /* el degradado al oro claro bajaba de 4,5:1 (Lía, REV-056) */
:root[data-tema="claro"] .titulo-parte h1 { text-shadow: 0 1px 16px rgba(255, 252, 247, .95), 0 0 2px rgba(255, 252, 247, .9); }
:root[data-tema="claro"] details.seccion > summary::after { background: rgba(255, 252, 247, .85); }
/* Tema burdeos (Manuel, 01-11-2026: «tonos intermedios… preferiblemente tonos burdeos»): a medio camino entre la sala
   en penumbra y el papel. Fondo de vino tinto, tinta clara y el mismo oro. Mismas formas, letras, espacios y fotos; solo
   cambian los colores con nombre (contraste comprobado: texto 12,6:1, tenue 9:1, oro 8,8:1 sobre el fondo; el texto más
   débil sobre la tarjeta más clara, 5,8:1; bordes de casilla 3,6:1 o más). */
:root[data-tema="burdeos"] {
  --fondo: #4a1c26; --tarjeta: #5a2531; --tarjeta-2: #662c39; --panel: #55222d; --panel-borde: #7a4350;
  --casilla: #26142e; --casilla-borde: #b48d8f; --acomp: #2c1834; --filo: #5fb3a8; --viso: #ffd6b5; --etiqueta: #f3e2dc; --texto: #fbf0ec; --tenue: #e3c8c2; --linea: #6e3a45;
  --acento: #ecc77e; --acento-texto: #3a141c; --aviso: #ffb8a8; --ok: #a6e6c8;
  --oro: #e2bb70; --oro-claro: #f0d49a; --verde: #a6e6c8; --verde-fondo: #24473a; --verde-claro: #a6e6c8; --azul: #bcd8f0; --rosa: #ffc4d0; --turquesa: #a3e6e6;
  --sombra: 0 10px 30px rgba(20, 4, 8, .4); --sombra-alta: 0 18px 44px rgba(20, 4, 8, .55);
  color-scheme: dark;
}
/* Intermedio azul e intermedio verde (Manuel, 01-11-2026: «me vas a dar un tema en azules medios y otro en verdes
   medios»): como el intermedio burdeos, tinta clara sobre un fondo de tono medio y el mismo oro. Contraste comprobado:
   texto 11:1 o más sobre el fondo; lo más débil (oro sobre la tarjeta más clara) 4,7:1; bordes de casilla 3,4:1 o más. */
:root[data-tema="azul"] {
  --fondo: #1e3552; --tarjeta: #274262; --tarjeta-2: #2f4c6e; --panel: #233d5b; --panel-borde: #4a6688;
  --casilla: #0c2d36; --casilla-borde: #8ea4bd; --acomp: #0f3a44; --filo: #e58b6d; --viso: #ffd3b0; --etiqueta: #e1e8f0; --texto: #f2f5f9; --tenue: #c3d0de; --linea: #3a5576;
  --acento: #ecc77e; --acento-texto: #152842; --aviso: #ffb8a8; --ok: #a6e6c8;
  --oro: #e2bb70; --oro-claro: #f0d49a; --verde: #a6e6c8; --verde-fondo: #1f4a40; --verde-claro: #a6e6c8; --azul: #c4ddf3; --rosa: #ffc4d0; --turquesa: #a3e6e6;
  --sombra: 0 10px 30px rgba(4, 12, 24, .4); --sombra-alta: 0 18px 44px rgba(4, 12, 24, .55);
  color-scheme: dark;
}
:root[data-tema="verde"] {
  --fondo: #1d3c33; --tarjeta: #26483e; --tarjeta-2: #2e5348; --panel: #22433a; --panel-borde: #4a6e62;
  --casilla: #132836; --casilla-borde: #8fae9f; --acomp: #18303f; --filo: #e0a458; --viso: #f6e3b4; --etiqueta: #e0ebe4; --texto: #f2f7f3; --tenue: #c2d6ca; --linea: #3a5c51;
  --acento: #ecc77e; --acento-texto: #132c25; --aviso: #ffb8a8; --ok: #b4f0d2;
  --oro: #e2bb70; --oro-claro: #f0d49a; --verde: #b4f0d2; --verde-fondo: #14352b; --verde-claro: #b4f0d2; --azul: #c4ddf3; --rosa: #ffc4d0; --turquesa: #a8ecec;
  --sombra: 0 10px 30px rgba(4, 18, 12, .4); --sombra-alta: 0 18px 44px rgba(4, 18, 12, .55);
  color-scheme: dark;
}
/* En los intermedios, los enlaces sin color propio no usan el azul del navegador (bajaba de 4,5:1 sobre la tarjeta más
   clara). Con :where() la regla no pesa nada: todo componente que ya pone su color (el QR, los botones) lo conserva
   (Lía, REV-059). */
:where(:root:is([data-tema="burdeos"], [data-tema="azul"], [data-tema="verde"]) a:link) { color: var(--azul); }
:where(:root:is([data-tema="burdeos"], [data-tema="azul"], [data-tema="verde"]) a:visited) { color: var(--rosa); }
/* Intermedios con más vida (Manuel, 01-11-2026: «son excesivamente monocromos. Debes de alegrarlos un poco más. Los
   colores que tienen ahora tienen que ser los predominantes, pero no los únicos»). Cada uno lleva, además de su color y
   el oro, un acompañante oscuro (--acomp: cabecera, barra de abajo y casillas), un filo de otro color (--filo: borde de
   los grupos y de las barras) y los títulos en un tono cálido (--viso). Contraste: títulos 6,4:1 o más; sobre el
   acompañante, texto 11:1 o más, tenue 7,8:1, oro del acento 7,6:1 y --oro 6,7:1 (Lía); el filo, 4,4:1 o más contra lo que tiene al lado.
   El claro lleva lo mismo (Manuel, 01-11-2026: «El claro está bien pero algún color de contraste más alegre estaría muy
   bien»): verde agua muy claro en las barras, filo verde agua y títulos color vino (7:1 o más; filo 3,7:1 o más).
   Burdeos: berenjena, verde agua y melocotón. Azul: petróleo, coral y melocotón. Verde: azul noche, ámbar y trigo. */
:root:is([data-tema="claro"], [data-tema="burdeos"], [data-tema="azul"], [data-tema="verde"]) .cabecera { background: color-mix(in srgb, var(--acomp) 94%, transparent); border-bottom: 2px solid var(--filo); }
:root:is([data-tema="claro"], [data-tema="burdeos"], [data-tema="azul"], [data-tema="verde"]) .grupo { border-color: color-mix(in srgb, var(--filo) 55%, var(--panel)); border-top: 3px solid var(--filo); }
/* Títulos: también sin peso (:where), para que los que tienen color propio sobre fondo claro (QR, hojas) lo conserven;
   los títulos de grupo toman --titulo, que solo existe en los intermedios. */
:where(:root:is([data-tema="claro"], [data-tema="burdeos"], [data-tema="azul"], [data-tema="verde"]) :is(h1, h2, details.seccion > summary h3)) { color: var(--viso); }
:root:is([data-tema="claro"], [data-tema="burdeos"], [data-tema="azul"], [data-tema="verde"]) { --titulo: var(--viso); }
@media (max-width: 999px) {
  :root:is([data-tema="claro"], [data-tema="burdeos"], [data-tema="azul"], [data-tema="verde"]) .pestanas { background: color-mix(in srgb, var(--acomp) 94%, transparent); border-top: 2px solid var(--filo); }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 var(--t-m)/1.5 var(--f-texto);
  -webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }
h1 { font-size: var(--t-xl); margin: 0 0 .4rem; }
h2 { font-size: var(--t-l); margin: 0 0 .3rem; }
p { margin: .4rem 0; }
.tenue { color: var(--tenue); }

.pantalla.centrada {
  min-height: 100vh; min-height: 100dvh;
  /* En columna: la tarjeta arriba y los enlaces legales DEBAJO (en fila, los enlaces la estrujaban a un lado). */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px;
}
.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 18px 16px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto 14px;
}
.centrada .tarjeta { max-width: 420px; }

label { display: block; margin: 12px 0 0; font-size: var(--t-s); color: var(--tenue); }
input:not([type=checkbox]):not([type=file]):not([type=radio]) {
  display: block; width: 100%; margin-top: 4px;
  font: inherit; color: var(--texto); background: var(--fondo);
  border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px;
  min-height: 44px;
}
/* Foco visible en todas las casillas (revisión Vercel: :focus-visible, no :focus). */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
main:focus { outline: none; } /* destino de «Ir al contenido»: el foco pasa a él sin dibujar un marco a toda la página */
/* «Ir al contenido» (revisión Vercel): oculto hasta que se llega a él con el teclado. */
.saltar { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--tarjeta); color: var(--acento); padding: 10px 16px; border-radius: 10px; border: 1px solid var(--acento); }
.saltar:focus { left: 16px; }
label.casilla { display: flex; gap: 10px; align-items: center; color: var(--texto); font-size: var(--t-m); min-height: 44px; }
label.casilla input { width: 22px; height: 22px; }
.elegir-tema { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.elegir-tema .etiqueta-tema { flex-basis: 100%; margin: 8px 0 0; color: var(--etiqueta); font-size: var(--t-s); }
.dos, .tres { display: grid; gap: 0 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .dos { grid-template-columns: 1fr 1fr; }
  .tres { grid-template-columns: minmax(9em, 1fr) 2fr 2fr; }
}

button, .boton {
  font: inherit; cursor: pointer; border-radius: 10px; min-height: 44px; touch-action: manipulation;
  padding: 10px 16px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center;
}
button.principal { width: 100%; margin-top: 16px; background: var(--acento); color: var(--acento-texto); font-weight: 600; }
button.secundario, .boton { background: transparent; color: var(--acento); border-color: var(--acento); }
button.enlace { background: none; color: var(--acento); padding: 8px 4px; min-height: 40px; }
button:disabled { opacity: .55; cursor: default; }
.fila-enlaces { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; margin-top: 8px; }
.aviso { color: var(--aviso); font-size: var(--t-m); }
.aviso.ok { color: var(--ok); }

.cabecera {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--acento); color: var(--acento-texto);
}
.marca { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guardado { font-size: var(--t-xs); opacity: .9; white-space: nowrap; background: none; color: inherit; border: 0; padding: 4px 0; min-height: 0; font-weight: 400; }
.guardado:disabled { opacity: .9; cursor: default; }
.guardado[data-estado="error"] { background: #fff; color: #9b2c1c; border-radius: 999px; padding: 4px 10px; font-weight: 600; opacity: 1; cursor: pointer; }
.guardado::before { content: "●"; margin-right: 6px; }
.guardado[data-estado="guardando"]::before { color: #f2c94c; }
.guardado[data-estado="sin-conexion"]::before { color: #f08a75; }
.guardado[data-estado="error"]::before { color: #f08a75; }
/* En el tema claro, los puntos se oscurecen para que se vean sobre el fondo claro (Lía, 15ª revisión). */
:root[data-tema="claro"] .guardado[data-estado="guardando"]::before { color: #8a6100; }
:root[data-tema="claro"] .guardado[data-estado="sin-conexion"]::before { color: #b23a22; }

.pestanas { display: flex; gap: 4px; padding: 8px 16px 0; max-width: 672px; margin: 0 auto; }
.pestanas button {
  flex: 1; background: transparent; color: var(--tenue); border-bottom: 2px solid transparent; border-radius: 0;
}
.pestanas button[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--acento); font-weight: 600; }
main { padding: 14px 16px 24px; }
.pie { text-align: center; font-size: var(--t-xs); padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); }

.imagenes { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; }
.imagen { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.vista {
  aspect-ratio: 4 / 3; border: 1px dashed var(--linea); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: repeating-conic-gradient(var(--fondo) 0 25%, var(--tarjeta) 0 50%) 0 0 / 16px 16px;
}
.vista img { max-width: 100%; max-height: 100%; object-fit: contain; }
.imagen .detalle { display: flex; flex-direction: column; gap: 6px; }
.imagen .rotulo { font-weight: 600; font-size: var(--t-m); }
.imagen .acciones { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.imagen .boton { flex: 1 1 auto; padding: 8px 12px; }

/* ---------- Tableta y ordenador ---------- */
.lateral { display: flex; flex-direction: column; }
button:hover:not(:disabled), .boton:hover { filter: brightness(1.08); }
button:focus-visible, .boton:focus-within, input[type=checkbox]:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
/* Las cabeceras fijas (la de la app y la de la tasación) no tapan lo que recibe el foco al tabular (revisión Vercel). */
main :is(input, select, textarea, button, summary, a) { scroll-margin-top: calc(var(--alto-cabecera, 44px) + 90px); scroll-margin-bottom: 16px; }

@media (min-width: 768px) {
  main { padding: 20px 24px 28px; }
  .tarjeta { padding: 22px 24px; }
  .cabecera { padding-left: 24px; padding-right: 24px; }
  .cab-tas { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
}

/* Ordenador o tableta apaisada: menú a la izquierda y el contenido aprovecha el ancho. */
@media (min-width: 1000px) {
  .cuerpo {
    display: grid; grid-template-columns: 220px minmax(0, 1fr);
    max-width: 1280px; margin: 0 auto; align-items: start;
  }
  .pestanas {
    flex-direction: column; gap: 2px; padding: 20px 0 0 16px; margin: 0;
    position: sticky; top: 56px;
  }
  .pestanas button {
    justify-content: flex-start; text-align: left; border-bottom: 0; border-left: 3px solid transparent;
    border-radius: 0 8px 8px 0; padding-left: 14px;
  }
  .pestanas button[aria-selected="true"] { border-left-color: var(--acento); background: var(--tarjeta); }
  .pestanas button:hover:not([aria-selected="true"]) { background: color-mix(in srgb, var(--tarjeta) 60%, transparent); filter: none; }
  main .tarjeta { max-width: none; }
  section[data-panel="tasaciones"] .tarjeta { max-width: 640px; margin-left: 0; }
  .rejilla-despacho:not([hidden]) { max-width: 900px; }
  /* En la columna lateral, cada imagen en una fila: vista a la izquierda, nombre y botones a la derecha. */
  .lateral .imagenes { grid-template-columns: 1fr; }
  .lateral .imagen { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center; }
  .lateral .imagen .boton { flex: 0 0 auto; }
}

/* ---------- Fase 2: tasaciones ---------- */
.pequeno { font-size: var(--t-s); }
.mt { margin-top: 18px; }
h3 { font-size: var(--t-m); margin: 0 0 6px; }
.rojo { color: var(--aviso) !important; }
textarea { display: block; width: 100%; margin-top: 4px; font: inherit; color: var(--texto); background: var(--fondo);
  border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px; resize: vertical; }
select { display: block; width: 100%; margin-top: 4px; font: inherit; color: var(--texto); background: var(--fondo);
  border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px; min-height: 44px; }
.fila-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
button.principal.estrecho, button.secundario.estrecho { width: auto; margin-top: 0; }
.lista-tas { list-style: none; padding: 0; margin: 12px 0 0; }
.fila-tas { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; text-align: left;
  background: transparent; border: 0; border-top: 1px solid var(--linea); border-radius: 0; color: var(--texto); padding: 12px 4px; }
.fila-tas .num { font-weight: 600; white-space: nowrap; }
.fila-tas .cli { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 559px) { .fila-tas { grid-template-columns: 1fr auto; } .fila-tas .cli { grid-column: 1 / -1; grid-row: 2; } }
.cab-tas { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; margin: 0 -16px 4px; padding: 8px 16px;
  position: sticky; top: var(--alto-cabecera, 44px); z-index: 1; background: var(--fondo); border-bottom: 1px solid var(--linea); }
.cab-tas h1 { margin: 0; font-size: var(--t-l); }
.estado-tas { font-size: var(--t-xs); font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--linea); color: var(--texto); }
.estado-tas[data-estado="emitida"] { background: color-mix(in srgb, var(--ok) 18%, var(--tarjeta)); color: var(--ok); }
.estado-tas[data-estado="corrigiendo"] { background: color-mix(in srgb, #c98a00 18%, var(--tarjeta)); color: #8a5d00; }
.ficha-actual { flex-basis: 100%; font-size: var(--t-s); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Compacta al bajar (REV-034): una sola línea con todo (volver, número, estado, ficha), sin perder referencias. */
.cab-tas.compacta { padding-top: var(--e-1); padding-bottom: var(--e-1); flex-wrap: nowrap; gap: var(--e-2); }
.cab-tas.compacta h1 { font-size: var(--t-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cab-tas.compacta .ficha-actual { flex-basis: auto; flex-shrink: 1; min-width: 0; }
.cab-tas.compacta [data-accion=volver] { padding: var(--e-1) 0; min-height: 0; }
.subpestanas { display: flex; gap: 4px; overflow-x: auto; margin: 6px 0 12px; border-bottom: 1px solid var(--linea); }
.subpestanas button { background: transparent; color: var(--tenue); border-radius: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.subpestanas button[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--acento); font-weight: 600; }
.casillas { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 560px) { .casillas { grid-template-columns: 1fr 1fr; } }
.casillas label.casilla { font-size: var(--t-m); min-height: 40px; }
.tot-tas { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--linea); }
.tarjeta.peligro { text-align: right; padding: 8px 16px; }
.fila-botones { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
a.boton { text-decoration: none; }
.tabla-precios { display: grid; gap: 10px; }
.metal-precio { display: grid; gap: 0 12px; grid-template-columns: 1fr 1fr; align-items: end; }
.metal-precio .leyes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.indice-fichas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; }
.indice-fichas > [role=tablist] { display: flex; gap: 6px; flex: none; }
.indice-fichas button { white-space: nowrap; background: var(--tarjeta); color: var(--texto); border: 1px solid var(--linea); }
.indice-fichas button[aria-selected="true"] { border-color: var(--acento); box-shadow: inset 0 -3px 0 var(--acento); }
.bloque { border: 1px solid var(--linea); border-radius: 10px; padding: 4px 12px 10px; margin: 10px 0; }
.desglose div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--linea); font-size: var(--t-m); }
.escalones { margin: 10px 0; }
.escalon { display: grid; grid-template-columns: 1fr auto 7.5em; gap: 8px; align-items: center; padding: 8px 6px; border-radius: 8px; }
.escalon .nom { display: flex; flex-direction: column; }
.escalon .calc { font-weight: 600; white-space: nowrap; max-width: 12em; text-align: right; }
.escalon input { margin-top: 0; min-height: 38px; padding: 6px 8px; }
.escalon.elegido { background: color-mix(in srgb, var(--acento) 12%, transparent); outline: 1px solid var(--acento); }
.tabla-escalones .fila-esc { display: grid; grid-template-columns: 1fr; gap: 0 10px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.fila-esc > div { display: flex; flex-direction: column; }
@media (min-width: 760px) { .tabla-escalones .fila-esc { grid-template-columns: 2fr 5em 3fr 10em; align-items: end; } }
@media (min-width: 1000px) {
  .rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
  .rejilla-ficha { display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); gap: 0 18px; align-items: start; }
  .rejilla-ficha > .tarjeta { grid-column: 1; }
  .rejilla-ficha > .precios-ficha { grid-column: 2; grid-row: 1 / span 9; position: sticky; top: calc(var(--alto-cabecera, 44px) + 84px); }
}
/* Impuestos del despacho */
.bloque-imp details { margin: 6px 0; }
.bloque-imp summary { cursor: pointer; padding: 8px 0; color: var(--acento, inherit); }
.tot-tas > div { margin: 4px 0; }
/* Tablas de mano de obra, engastado y baños */
.bloque-t { border: 1px solid var(--linea); border-radius: 10px; padding: 0 12px; margin: 8px 0; }
.bloque-t > summary { cursor: pointer; padding: 12px 0; }
.bloque-t[open] { padding-bottom: 10px; }
.rejilla-t { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 700px) { .rejilla-t { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .rejilla-t { grid-template-columns: 1fr 1fr 1fr; } }
.celda-t { border-top: 1px solid var(--linea); padding-top: 8px; }
.cab-celda { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; }
.cab-celda select { width: auto; flex: 1 1 160px; }
.vals-t { display: flex; flex-wrap: wrap; gap: 8px; }
.casilla-t { display: flex; align-items: center; gap: 6px; flex: 1 1 120px; margin: 4px 0; }
.casilla-t > span { font-size: var(--t-s); color: var(--tenue); white-space: nowrap; }
.casilla-t > input[data-t] { min-width: 70px; }
.casilla-t > input[type=checkbox] { width: 22px; height: 22px; flex: none; }
.fila-t { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; border-top: 1px dashed var(--linea); padding-top: 6px; margin-top: 6px; }
.fila-t > label:first-child { flex: 2 1 180px; }
.cambio-bloque { background: color-mix(in srgb, var(--acento) 5%, var(--tarjeta)); }
.vista-t { margin-top: 10px; }
.lista-cambios { max-height: 320px; overflow: auto; font-size: var(--t-s); }
.lista-cambios > div { padding: 4px 0; border-bottom: 1px solid var(--linea); }
.de-tabla { border: 1px dashed var(--linea); border-radius: 10px; padding: 0 12px; margin: 4px 0 12px; }
.de-tabla > summary { cursor: pointer; padding: 10px 0; color: var(--acento); }
.de-tabla[open] { padding-bottom: 12px; }
/* Fotografías de la pieza */
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin: 8px 0; }
.foto { margin: 0; position: relative; border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; background: var(--fondo); }
.foto .ver-foto { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.foto figcaption { display: flex; justify-content: space-between; align-items: center; padding: 2px 6px; }
.foto figcaption .enlace { min-height: 36px; padding: 0 6px; }
.foto.subiendo { display: grid; place-items: center; aspect-ratio: 1; }
.marca-principal { position: absolute; top: 6px; left: 6px; background: var(--acento); color: var(--acento-texto); font-size: var(--t-xs); padding: 2px 8px; border-radius: 99px; }
.capa-foto { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .88); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; }
.capa-foto img { max-width: 100%; max-height: calc(100% - 70px); object-fit: contain; }
/* Avisos de la ficha (especies protegidas, nomenclatura, metales) */
.avisos-ficha { margin: 10px 0; }
.aviso-ficha { border-left: 4px solid var(--aviso); background: color-mix(in srgb, var(--aviso) 7%, var(--tarjeta)); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.aviso-ficha.gema, .aviso-ficha.metal { border-left-color: var(--acento); background: color-mix(in srgb, var(--acento) 6%, var(--tarjeta)); }
.aviso-ficha p { margin: 4px 0; }
.pie-foto { color: #fff; margin: 0; font-size: var(--t-s); }
.botones-foto { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
/* Botones del visor de fotos, como los demás de la app: fondo oscuro y letra clara (Manuel, 30-10-2026: «Los nombres dentro de los botones blancos no se ven correctamente»). */
.botones-foto .secundario, .botones-foto .boton { background: var(--tarjeta); color: var(--texto); border: 1px solid var(--linea); }
.botones-foto [data-v=ant], .botones-foto [data-v=sig] { font-size: var(--t-l); min-width: 52px; }
.botones-foto button:disabled { opacity: .35; }
/* Retocar una foto */
.capa-retoque { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .9); display: flex; align-items: center; justify-content: center; padding: 12px; }
.retoque { background: var(--tarjeta); border-radius: var(--radio); padding: 12px; max-width: 900px; width: 100%; max-height: 100%; overflow: auto; }
.lienzo-ret { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; touch-action: none; }
.lienzo-ret canvas { display: block; max-width: 100%; max-height: 60vh; }
.marco-ret { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45); cursor: move; touch-action: none; }
.marco-ret span { position: absolute; width: 28px; height: 28px; background: #fff; border: 2px solid var(--acento); border-radius: 50%; }
.marco-ret span[data-esq=nw] { left: 0; top: 0; cursor: nwse-resize; }
.marco-ret span[data-esq=ne] { right: 0; top: 0; cursor: nesw-resize; }
.marco-ret span[data-esq=sw] { left: 0; bottom: 0; cursor: nesw-resize; }
.marco-ret span[data-esq=se] { right: 0; bottom: 0; cursor: nwse-resize; }
.lienzo-ret { overflow: hidden; }
.botones-ret { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.botones-ret [aria-pressed=true] { background: var(--acento); color: var(--acento-texto); }
/* Informe: elegir maqueta y vista previa */
.maquetas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 10px 0; }
@media (min-width: 700px) { .maquetas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.maqueta { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.maqueta input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.maqueta.elegida { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento) inset; }
.capa-informe { position: fixed; inset: 0; z-index: 55; background: #e9e7e2; display: flex; flex-direction: column; }
.barra-informe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--tarjeta); border-bottom: 1px solid var(--linea); padding-top: max(8px, env(safe-area-inset-top)); }
.capa-informe iframe { flex: 1; width: 100%; border: 0; background: #e9e7e2; }
.botones-informe { display: flex; flex-wrap: wrap; gap: 8px; }
.barra-informe button { width: auto; margin: 0; }
/* Vista previa en hojas (Manuel, 30-10-2026): A4 de verdad, una debajo de otra, con su número; «+» amplía. */
.capa-hojas .hojas { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 12px 12px max(24px, env(safe-area-inset-bottom)); --zoom: 1; }
.capa-hojas .hoja { margin: 0 auto 14px; width: min(calc(100% * var(--zoom)), calc(820px * var(--zoom))); background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .25); position: relative; }
.capa-hojas .hoja canvas { display: block; width: 100%; height: 100%; }
.capa-hojas .hoja figcaption { position: absolute; left: 0; right: 0; bottom: -13px; text-align: center; font-size: 11px; color: #555; }
.capa-hojas .hojas-estado { max-width: 34em; margin: 24px auto; color: #2b2b28; font-size: var(--t-m); line-height: 1.5; }
.capa-hojas .hojas-estado button { display: block; margin-top: 12px; color: #2b2b28; border-color: #2b2b28; background: #fff; } /* sobre el fondo claro de las hojas */
#hojas-pag { color: inherit; opacity: .75; }
.capa-hojas .barra-informe { flex-wrap: wrap; row-gap: 6px; }
.capa-hojas .botones-informe { flex-wrap: nowrap; width: 100%; }
.capa-hojas .botones-informe [data-i=abrir] { flex: 1; }
.capa-hojas .botones-informe [data-i=menos], .capa-hojas .botones-informe [data-i=mas] { min-width: 44px; padding-left: 0; padding-right: 0; }
.maqueta label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.maqueta .enlace { align-self: flex-start; padding-left: 0; }
.propuesta { border-left: 4px solid var(--acento); background: color-mix(in srgb, var(--acento) 6%, var(--tarjeta)); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.propuesta p { margin: 0 0 6px; }
.propuesta button { width: auto; margin: 0; }
.nota-ejemplo { margin: 0; padding: 6px 12px; font-size: var(--t-s); background: var(--tarjeta); color: var(--tenue); border-bottom: 1px solid var(--linea); }
.barra-informe [aria-pressed=true] { background: var(--acento); color: var(--acento-texto); }
.lista-docs { list-style: none; padding: 0; margin: 8px 0; }
.lista-docs li { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.progreso { display: flex; align-items: center; gap: 6px; }
.progreso progress { width: 120px; }
/* Página pública de validación */
.validar { max-width: 560px; }
.sello-validacion { border-radius: 10px; padding: 12px 14px; margin: 14px 0; font-weight: 600; }
.sello-validacion.ok { background: color-mix(in srgb, var(--ok) 12%, var(--tarjeta)); color: var(--ok); border: 1px solid var(--ok); }
.sello-validacion.sustituida, .sello-validacion.mal { background: color-mix(in srgb, var(--aviso) 10%, var(--tarjeta)); color: var(--aviso); border: 1px solid var(--aviso); }
.datos-validacion { width: 100%; border-collapse: collapse; margin: 8px 0 16px; }
.datos-validacion th { text-align: left; font-weight: normal; color: var(--tenue); padding: 6px 10px 6px 0; vertical-align: top; width: 38%; }
.datos-validacion td { padding: 6px 0; }
.huella { font-family: ui-monospace, monospace; font-size: var(--t-xs); word-break: break-all; }
/* Emitir */
.emitida { border-left: 4px solid var(--ok); background: color-mix(in srgb, var(--ok) 8%, var(--tarjeta)); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.emitida p { margin: 0 0 6px; }
.emitida button { width: auto; margin: 0; }
.aviso-emitida { border-left: 4px solid var(--ok); background: color-mix(in srgb, var(--ok) 8%, var(--tarjeta)); border-radius: 8px; padding: 8px 12px; margin: 4px 0 8px; }
.ok-txt { color: var(--ok); font-weight: 600; }
/* Ventanas de aviso («El PDF está listo», «Firmado», emitir…): encima de todo y en el centro. Sin esta regla se añadían
   al final de la página, debajo de «Versión», y no se veían (Manuel, 30-10-2026). Por encima de las demás capas
   (informe 55, firma, foto 50, retoque 60), porque se abren desde ellas. */
.capa-aviso { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); background: rgba(8, 7, 6, .72); overflow: auto; }
.capa-aviso .tarjeta { width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; }
label.boton.apagado { opacity: .45; pointer-events: none; }
/* Papelera, búsqueda y marcas «pendiente» / «no determinable» */
.buscador { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 560px) { .buscador { grid-template-columns: 1fr 180px; } }
.acciones-papelera { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 12px 8px; }
.lista-tas li { list-style: none; }
.marca-emitida { font-size: var(--t-xs); background: var(--ok); color: #fff; border-radius: 99px; padding: 1px 7px; vertical-align: middle; }
.rojo-borde { border-color: var(--aviso) !important; color: var(--aviso) !important; }
.sello-validacion.no { background: var(--fondo); color: var(--tenue); border: 1px solid var(--linea); }

/* Fase 7: cuenta de baja (solo lectura) y «Tus datos y tu cuenta». */
.aviso-baja { border-left: 4px solid var(--aviso); background: color-mix(in srgb, var(--aviso) 9%, var(--tarjeta)); padding: 8px 16px; margin: 0; }
.aviso-baja p { margin: 0; }
.salida h3 { margin-bottom: 4px; }

/* «Mi despacho» por partes */
.subdespacho { margin-top: 0; }

/* iPhone: si una casilla tiene letra de menos de 16 px, Safari amplía la pantalla al tocarla y no la vuelve a reducir
   (Manuel, 23-10-2026: «sale un poquito más grande y es preciso ajustarla a mano»). Todas, a 16 px como mínimo. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { font-size: max(16px, 1em); }

/* Tabla de partida: se consulta, no se cambia. */
.solo-leer fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.solo-leer button, .solo-leer details[data-abre$="-tipos"] { display: none; }
.solo-leer input:disabled { opacity: 1; color: inherit; -webkit-text-fill-color: currentColor; background: transparent; }
/* Casillas sin dato (REV-024): el desplegable y, debajo, la casilla para escribir. */
.sd > input { margin-top: 4px; width: 100%; }
.sd > .tres, .sd > .dos { margin-top: 4px; }
.sd > p { margin: 2px 0 6px; }
/* Precio del metal, arriba de «1 · Datos»: que nadie se lo pase por alto (Manuel, 23-10-2026). */
.precio-metal { border-left: 4px solid var(--acento); }
/* «1 · Datos» en apartados plegables (Manuel, 30-10-2026; REV-047): una lista que se lee como índice; el que tiene algo
   pendiente, marcado en rojo a la izquierda y con lo que falta en su línea. */
.apartados-datos { max-width: 860px; }
.apartado-datos.falta { border-left: 4px solid var(--aviso); background: color-mix(in srgb, var(--aviso) 6%, var(--panel)); }
.apartado-datos.falta > summary .resumen-sub b { color: var(--aviso); font-weight: 600; }
.apartado-datos h4 { margin: 4px 0 6px; }
.precio-ficha { border-top: 1px solid var(--linea); margin-top: 10px; padding-top: 6px; }
.precio-ficha p { margin: 0 0 4px; }
/* Miniaturas de las páginas de cada maqueta: cuadrícula que se adapta al ancho, sin desplazamiento lateral. */
/* Páginas del ejemplo de cada maqueta: tira que se desliza de lado, páginas grandes para poder leerlas (Manuel,
   28-10-2026). Al pulsar una, se abre a pantalla completa; al tocarla, se amplía al doble. */
.miniaturas { display: flex; min-width: 0; max-width: 100%; gap: 10px; margin: 8px 0; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; overscroll-behavior-x: contain; }
.mini { flex: 0 0 150px; padding: 0; margin: 0; border: 1px solid var(--linea); background: #fff; min-height: 0; width: 150px; border-radius: 2px; scroll-snap-align: start; }
@media (min-width: 700px) { .mini { flex-basis: 190px; width: 190px; } }
.mini img { display: block; width: 100%; aspect-ratio: 210 / 297; object-fit: cover; }
.capa-mini { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.75); display: flex; flex-direction: column; }
.capa-mini .hoja-grande { flex: 1; min-height: 0; overflow: auto; padding: 8px; -webkit-overflow-scrolling: touch; }
.capa-mini .hoja-grande img { display: block; width: 100%; max-width: 900px; margin: 0 auto; background: #fff; cursor: zoom-in; }
.capa-mini .hoja-grande img.ampliada { width: 200%; max-width: none; cursor: zoom-out; }
/* Elegir la hechura entre los tipos parecidos de la tabla (Manuel, 26-10-2026). */
.opciones-hechura .fila-botones { flex-wrap: wrap; gap: 6px; }
.opciones-hechura button.estrecho { padding: 6px 10px; }
/* Cobros anotados: uno por línea. */
.fila-cobro { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--linea); }

/* Casilla de número con algo que no es un número (REV-026). */
input.mal { border-color: var(--aviso) !important; background: color-mix(in srgb, var(--aviso) 8%, var(--tarjeta)); }
.aviso-numero { display: block; margin-top: 2px; }

/* Apartados plegables de la ficha (REV-026, C): el título y, debajo, el resumen de lo que hay. */
details.seccion > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding-right: 28px; position: relative; }
details.seccion > summary::-webkit-details-marker { display: none; }
details.seccion > summary::after { content: "▾"; position: absolute; right: 0; top: 0; font-size: var(--t-l); color: var(--tenue); transition: transform .15s; }
details.seccion:not([open]) > summary::after { transform: rotate(-90deg); }
details.seccion > summary h3 { margin: 0; }
details.seccion > summary .resumen { font-size: var(--t-s); color: var(--tenue); }
details.seccion[open] > summary { margin-bottom: 10px; }
details.seccion[open] > summary .resumen { display: none; }

/* Importes alineados: las cifras ocupan lo mismo, para que se lean en columna. */
.desglose, .escalones, .calc, #t-total, .fila-cobro, .lista-docs, [data-resumen], .resumen-precio { font-variant-numeric: tabular-nums; }

/* Elegidor de hechura (REV-027): la opción elegida, marcada y distinta del botón que aplica. */
button.opcion.elegida { background: color-mix(in srgb, var(--acento) 14%, var(--tarjeta)); border-width: 2px; font-weight: 600; }

/* Debajo del importe: «importe parcial» o «no calculable», en pequeño y partiendo la línea (no desborda). */
.nota-calc { display: block; font-size: var(--t-xs); color: var(--aviso); font-weight: 400; overflow-wrap: anywhere; white-space: normal; }

/* Desplegable «Ayuda» (REV-026 C): explicaciones largas fuera de la vista, accesibles con el teclado. */
details.ayuda { margin: var(--e-1) 0 var(--e-2); }
details.ayuda > summary { cursor: pointer; font-size: var(--t-s); color: var(--acento); padding: var(--e-1) 0; list-style: none; }
details.ayuda > summary::-webkit-details-marker { display: none; }
details.ayuda > summary::before { content: "ⓘ "; }
details.ayuda > summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
details.ayuda > div { color: var(--tenue); padding: var(--e-1) 0 0 var(--e-4); border-left: 2px solid var(--linea); margin-left: var(--e-1); }

/* Con «reducir movimiento» del sistema, ninguna transición ni animación (DESIGN.md, punto 8; revisión Vercel). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}


/* =================================================================== «Taller» vivo (REV-037, Manuel 27-10-2026) */
/* Iconos: los de public/iconos.svg heredan el color del texto. */
.ic { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.22em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, .cab-tas h1 { font-family: var(--f-titulo); font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
h3 { font-family: var(--f-titulo); font-weight: 600; }
.eyebrow { margin: 0 0 2px; font-size: var(--t-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
/* Aparecer: tarjetas y filas entran suaves, una tras otra. */
@keyframes aparece { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
/* Solo al llegar a una pantalla (app.js pone «entra» un momento), nunca al repintar por un guardado o la nube. */
.entra :is(.tarjeta, .lista-tas > li, .vacio) { animation: aparece .38s cubic-bezier(.2, .8, .2, 1) both; }
.entra .lista-tas > li:nth-child(2) { animation-delay: .04s } .entra .lista-tas > li:nth-child(3) { animation-delay: .08s } .entra .lista-tas > li:nth-child(4) { animation-delay: .12s }
.entra .lista-tas > li:nth-child(5) { animation-delay: .16s } .entra .lista-tas > li:nth-child(n+6) { animation-delay: .2s }
.tarjeta { border-radius: var(--radio); box-shadow: var(--sombra); }
/* Botones: el principal en oro, con relieve al tocar. */
button, .boton { font-weight: 700; transition: transform .12s, box-shadow .15s, background-color .15s, filter .15s; border-radius: 14px; gap: 8px; }
button:active:not(:disabled), .boton:active { transform: scale(.97); }
button.principal { background: linear-gradient(135deg, var(--oro), var(--oro-claro)); color: var(--acento-texto); font-weight: 800; box-shadow: 0 6px 16px color-mix(in srgb, var(--oro) 40%, transparent); }
button.secundario, .boton { background: var(--tarjeta); color: var(--acento); border: 1.5px solid color-mix(in srgb, var(--oro) 60%, var(--linea)); }
button.enlace { color: var(--acento); font-weight: 700; }
input:not([type=checkbox]):not([type=file]):not([type=radio]), select, textarea { border-radius: 12px; border-width: 1.5px; font-family: var(--f-texto); font-weight: 700; background: var(--fondo); transition: border-color .2s, box-shadow .2s; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--oro); box-shadow: 0 0 0 4px color-mix(in srgb, var(--oro) 25%, transparent); }
label { font-weight: 700; }
/* Cabecera: el nombre del despacho en serif, el guardado y el altavoz a la derecha. */
.cabecera { background: color-mix(in srgb, var(--tarjeta) 92%, transparent); color: var(--texto); border-bottom: 1px solid var(--linea); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
.marca { font-family: var(--f-titulo); font-weight: 800; font-size: var(--t-l); }
.cab-derecha { display: flex; align-items: center; gap: var(--e-2); }
.guardado { color: var(--tenue); font-weight: 700; }
.guardado[data-estado="ok"]::before { color: var(--verde-claro); }
.guardado[data-estado="error"] { background: var(--aviso); color: var(--tarjeta); } /* claro 6:1, oscuro 6,8:1 (Lía, REV-037) */
.guardado[data-estado="error"]::before { color: #fff; }
.b-sonido { background: none; border: 1px solid var(--linea); color: var(--tenue); min-height: 40px; width: 40px; padding: 0; border-radius: 50%; }
.b-sonido[aria-pressed="true"] { color: var(--acento); border-color: var(--oro); background: color-mix(in srgb, var(--oro) 14%, transparent); }
/* Entrar: la foto de joyas arriba de la tarjeta. */
.con-portada .tarjeta { overflow: hidden; padding-top: 0; }
.portada { margin: 0 -16px 14px; height: 170px; overflow: hidden; }
.portada img { width: 100%; height: 100%; object-fit: cover; display: block; animation: lento 12s ease-in-out infinite alternate; }
@keyframes lento { from { transform: scale(1) } to { transform: scale(1.08) } }
@media (min-width: 768px) { .portada { margin: 0 -24px 16px; height: 200px; } }
/* Lista de tasaciones: icono por tipo de pieza, número, estado y cliente. */
.fila-tas { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "ico num est" "ico cli fec"; gap: 2px 12px; padding: 12px 8px; border-radius: 14px; border-top: 0; transition: background-color .15s, transform .12s; }
.fila-tas:hover:not(:disabled) { background: color-mix(in srgb, var(--oro) 8%, transparent); filter: none; }
.lista-tas > li + li .fila-tas { border-top: 1px solid var(--linea); border-radius: 0; }
.fila-tas .ico-tas { grid-area: ico; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--oro) 18%, transparent); color: var(--acento); }
.fila-tas .ico-tas[data-tipo="perlas"] { background: color-mix(in srgb, var(--rosa) 16%, transparent); color: var(--rosa); }
.fila-tas .ico-tas[data-tipo="reloj"] { background: color-mix(in srgb, var(--azul) 16%, transparent); color: var(--azul); }
.fila-tas .ico-tas[data-tipo="gema"] { background: color-mix(in srgb, var(--turquesa) 16%, transparent); color: var(--turquesa); }
.fila-tas .ico-tas .ic { width: 24px; height: 24px; }
.fila-tas .num { grid-area: num; font-family: var(--f-titulo); }
.fila-tas .cli { grid-area: cli; font-size: var(--t-s); }
.fila-tas .fec { grid-area: fec; text-align: right; font-size: var(--t-xs); }
.fila-tas .chip-estado { grid-area: est; justify-self: end; }
.fila-tas.casilla { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: none; }
@media (max-width: 559px) { .fila-tas { grid-template-columns: 44px minmax(0, 1fr) auto; } .fila-tas .cli { grid-column: auto; grid-row: auto; } }
.chip-estado { font-size: var(--t-xs); font-weight: 800; padding: 2px 10px; border-radius: 999px; background: var(--linea); color: var(--texto); white-space: nowrap; }
.chip-estado[data-estado="emitida"] { background: color-mix(in srgb, var(--verde) 16%, transparent); color: var(--ok); }
.chip-estado[data-estado="corrigiendo"] { background: color-mix(in srgb, var(--aviso) 14%, transparent); color: var(--aviso); }
/* Sin tasaciones: foto y la mano que señala el botón dorado. */
.vacio { text-align: center; padding: var(--e-3) 0; }
.vacio img { width: min(260px, 70%); height: auto; border-radius: var(--radio); display: block; margin: 0 auto var(--e-3); }
.pista { display: inline-flex; align-items: center; gap: var(--e-2); color: var(--azul); font-weight: 800; background: color-mix(in srgb, var(--azul) 10%, var(--tarjeta)); border: 1.5px dashed var(--azul); border-radius: 14px; padding: 8px 12px; }
.pista .ic { animation: senala 1s ease-in-out infinite; }
@keyframes senala { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(4px, 4px) } }
/* Guía al siguiente paso sugerido (REV-037): la casilla que toca late en oro y lleva encima el rótulo, que flota sin
   ocupar sitio (lo coloca tasaciones.js); mientras se escribe en ella, ni late ni se ve el rótulo. */
.siguiente { position: relative; }
.pista-sig { position: absolute; right: 10px; transform: translateY(-50%); z-index: 1; pointer-events: none; font-size: var(--t-xs); font-weight: 800; color: var(--acento-texto); background: linear-gradient(135deg, var(--oro), var(--oro-claro)); padding: 1px 9px; border-radius: 999px; white-space: nowrap; }
summary.siguiente > .pista-sig, .pista-sig.en-desplegable { right: 34px; }
.siguiente:focus-within > .pista-sig { display: none; }
label.siguiente :is(input, select, textarea), .siguiente > :is(input, select, textarea) { border-color: var(--oro); animation: late 1.6s ease-in-out infinite; }
.siguiente :is(input, select, textarea):focus { animation: none; }
@keyframes late { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--oro) 45%, transparent) } 60% { box-shadow: 0 0 0 9px transparent } }
/* Pasos de la tasación: Datos → Fichas → Informe, como una barra de pasos. */
.subpestanas:not(.subdespacho) { border: 0; gap: 6px; background: color-mix(in srgb, var(--linea) 55%, transparent); padding: 4px; border-radius: 16px; }
.subpestanas:not(.subdespacho) button { flex: 1; border: 0; border-radius: 12px; color: var(--tenue); font-weight: 800; transition: background-color .25s, color .25s, transform .25s; }
.subpestanas:not(.subdespacho) button[aria-selected="true"] { background: linear-gradient(135deg, var(--oro), var(--oro-claro)); color: var(--acento-texto); box-shadow: 0 4px 12px color-mix(in srgb, var(--oro) 35%, transparent); }
.cab-tas { background: color-mix(in srgb, var(--fondo) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.estado-tas { font-weight: 800; }
.indice-fichas button { border-radius: 14px; font-weight: 800; }
.indice-fichas button[aria-selected="true"] { border-color: var(--oro); background: color-mix(in srgb, var(--oro) 14%, var(--tarjeta)); box-shadow: inset 0 -3px 0 var(--oro); }
/* Apartados de la ficha: cabeceras en serif con su color. */
details.seccion > summary h3 { font-size: var(--t-l); }
details.seccion[data-seccion="metales"] { border-top: 4px solid var(--oro); }
details.seccion[data-seccion="gemas"] { border-top: 4px solid var(--turquesa); }
details.seccion[data-seccion="fotos"] { border-top: 4px solid var(--azul); }
details.seccion[data-seccion="mano"] { border-top: 4px solid var(--rosa); }
details.seccion[data-seccion="notas"] { border-top: 4px solid var(--verde-claro); }
.precios-ficha { border-top: 4px solid var(--verde); }
.escalon.elegido { background: color-mix(in srgb, var(--verde) 12%, transparent); outline-color: var(--verde); }
/* Valor que va al informe, a mano en el teléfono. */
.valor-flotante { position: fixed; right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(var(--alto-barra-real, calc(var(--alto-barra) + env(safe-area-inset-bottom, 0px))) + 14px); z-index: 4; display: flex; align-items: center; gap: 10px; padding: 8px 14px; min-height: 52px; border: 0; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--verde-fondo), color-mix(in srgb, var(--verde-fondo) 70%, #000)); box-shadow: var(--sombra-alta); text-align: left; }
.entra .valor-flotante { animation: sube .45s cubic-bezier(.2, .8, .2, 1) both; }
.valor-flotante span { display: flex; flex-direction: column; line-height: 1.1; }
.valor-flotante small { font-size: var(--t-xs); font-weight: 800; }
.valor-flotante b { font-family: var(--f-titulo); font-size: var(--t-l); font-variant-numeric: tabular-nums; }
.valor-flotante b.salta { animation: salta .5s; }
@keyframes sube { from { transform: translateY(120%); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes salta { 35% { transform: scale(1.12) } }
/* Mi despacho: foto y título arriba; las partes, como baldosas con icono. */
.cab-despacho { display: flex; align-items: center; gap: var(--e-4); margin: 0 0 var(--e-3); }
.cab-despacho img { width: 72px; height: 72px; border-radius: 20px; object-fit: cover; box-shadow: var(--sombra); }
.cab-despacho h1 { margin: 0; }
.subdespacho { border: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow: visible; }
.subdespacho button { flex-direction: column; gap: 4px; padding: 12px 6px; min-height: 76px; white-space: normal; text-align: center; line-height: 1.15; font-size: var(--t-s); border: 1px solid var(--linea); border-radius: 16px; background: var(--tarjeta); color: var(--tenue); box-shadow: var(--sombra); }
.subdespacho button .ic { width: 26px; height: 26px; color: var(--acento); }
.subdespacho button[aria-selected="true"] { border-color: var(--oro); background: color-mix(in srgb, var(--oro) 14%, var(--tarjeta)); color: var(--texto); }
@media (min-width: 760px) { .subdespacho { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* Barra de abajo en teléfono y tableta: Tasaciones · Nueva (dorado) · Mi despacho, al alcance del pulgar. */
.pestanas button { gap: 8px; }
@media (max-width: 999px) {
  body { padding-bottom: var(--alto-barra-real, calc(var(--alto-barra) + env(safe-area-inset-bottom, 0px))); }
  .pestanas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; max-width: none; margin: 0; padding: 6px max(16px, env(safe-area-inset-left, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)); gap: 96px;
    background: color-mix(in srgb, var(--tarjeta) 94%, transparent); border-top: 1px solid var(--linea); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); }
  .pestanas button { flex-direction: column; gap: 2px; font-size: var(--t-xs); min-height: 56px; border: 0; color: var(--tenue); }
  .pestanas button .ic { width: 26px; height: 26px; transition: transform .25s; }
  .pestanas button[aria-selected="true"] { color: var(--acento); border: 0; }
  .pestanas button[aria-selected="true"] .ic { transform: translateY(-2px) scale(1.12); }
  .b-nueva { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 6; }
  .b-nueva:active:not(:disabled) { transform: translateX(-50%) scale(.95); }
  main :is(input, select, textarea, button, summary, a) { scroll-margin-bottom: calc(var(--alto-barra) + 80px); }
}
.b-nueva { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; padding: 0; background: none; color: var(--acento); font-size: var(--t-xs); font-weight: 800; min-height: 0; }
.b-nueva .ic { width: 58px; height: 58px; padding: 15px; border-radius: 50%; color: var(--acento-texto); background: linear-gradient(135deg, var(--oro), var(--oro-claro)); box-shadow: 0 8px 20px color-mix(in srgb, var(--oro) 45%, transparent); animation: brilla 3.5s ease-in-out infinite; }
@keyframes brilla { 0%, 85%, 100% { box-shadow: 0 8px 20px color-mix(in srgb, var(--oro) 45%, transparent) } 92% { box-shadow: 0 8px 28px color-mix(in srgb, var(--oro-claro) 80%, transparent) } }
@media (min-width: 1000px) {
  .b-nueva { position: fixed; right: 28px; bottom: 28px; z-index: 6; }
  .valor-flotante { display: none !important; }
  .pestanas button[aria-selected="true"] .ic { color: var(--acento); }
}
/* Celebración al emitir: sello y confeti, sin bloquear la pantalla. */
/* El sello va arriba, bajo la cabecera, compacto y con «Cerrar»: no tapa los botones del centro (Lía, REV-037). */
.fiesta { position: fixed; inset: 0; z-index: 200; pointer-events: none; display: flex; justify-content: center; align-items: flex-start; padding-top: calc(var(--alto-cabecera, 56px) + 10px + env(safe-area-inset-top, 0px)); overflow: hidden; transition: opacity .5s; }
.fiesta-sello { pointer-events: auto; }
.fiesta-sello button { min-height: 44px; }
.fiesta.fuera { opacity: 0; }
.fiesta-sello { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 20px; border-radius: 22px; background: var(--tarjeta); color: var(--texto); box-shadow: var(--sombra-alta); text-align: center; animation: sello .7s cubic-bezier(.2, 1.4, .3, 1) both; max-width: calc(100vw - 32px); }
.fiesta-sello .ic { width: 48px; height: 48px; color: var(--ok); }
.fiesta-sello b { font-family: var(--f-titulo); font-size: var(--t-xl); }
.fiesta-sello span { color: var(--tenue); font-size: var(--t-s); overflow-wrap: anywhere; }
@keyframes sello { from { transform: scale(.4) rotate(-12deg); opacity: 0 } to { transform: none; opacity: 1 } }
.confeti { position: absolute; top: -16px; width: 9px; height: 14px; border-radius: 2px; animation: cae 1.8s ease-in forwards; }
@keyframes cae { to { transform: translateY(110vh) rotate(var(--giro, 540deg)); opacity: .2 } }
@media (prefers-reduced-motion: reduce) { .portada img, .b-nueva .ic, .pista .ic, label.siguiente :is(input, select, textarea) { animation: none !important; } }
/* Con el teclado abierto (lo mide app.js con visualViewport), la barra de abajo, «Nueva» y el importe flotante se
   apartan: nada fijo tapa lo que se escribe (DESIGN.md 8; Lía, REV-037). Vuelven al cerrar el teclado. */
html.teclado .pestanas, html.teclado .b-nueva, html.teclado .valor-flotante { display: none !important; }
html.teclado body { padding-bottom: 0; }
/* Movimiento tranquilo (Mi despacho › Cuenta): lo mismo que «reducir movimiento» del sistema. */
html.tranquilo *, html.tranquilo *::before, html.tranquilo *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
.ajustes-aparato { margin-top: var(--e-4); border: 1.5px solid var(--linea); border-radius: 14px; padding: var(--e-3) var(--e-4); display: flex; flex-direction: column; gap: var(--e-2); }
.ajustes-aparato legend { font-weight: 800; padding: 0 6px; }

/* ===================================================== Fotos con protagonismo (Manuel, 27-10-2026) */
/* Cabecera con foto: la lista, cada paso de la tasación. El texto va sobre un degradado oscuro (contraste ≥ 7:1). */
.tarjeta { --rel-v: 18px; --rel-h: 16px; }
@media (min-width: 768px) { .tarjeta { --rel-v: 22px; --rel-h: 24px; } }
.banner { position: relative; margin: calc(-1 * var(--rel-v)) calc(-1 * var(--rel-h)) var(--e-4); height: 190px; border-radius: var(--radio) var(--radio) 0 0; overflow: hidden; background: #15110d; }
.banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 15, 10, 0) 30%, rgba(20, 15, 10, .82) 100%); }
.banner-texto { position: absolute; left: var(--e-4); right: var(--e-4); bottom: var(--e-3); z-index: 1; color: #fffaf1; }
.banner-texto .eyebrow { color: var(--oro-claro); margin: 0; }
.banner-texto h2, .banner-texto .banner-titulo { margin: 0; color: #fffaf1; font-family: var(--f-titulo); font-weight: 800; font-size: var(--t-xl); line-height: 1.1; text-wrap: balance; }
.banner-texto .banner-sub { margin: 2px 0 0; font-size: var(--t-s); color: #f1e6d4; }
.entra .banner img { animation: lento 14s ease-in-out infinite alternate; }
.banner-paso { margin: 0 0 var(--e-4); height: 150px; border-radius: var(--radio); box-shadow: var(--sombra); }
@media (min-width: 768px) { .banner { height: 240px; } .banner-paso { height: 180px; } }
/* Una foto por tasación en la lista, según la pieza. */
.fila-tas { grid-template-columns: 64px minmax(0, 1fr) auto; }
@media (max-width: 559px) { .fila-tas { grid-template-columns: 64px minmax(0, 1fr) auto; } }
.fila-tas .ico-tas.foto-tas { width: 64px; height: 64px; border-radius: 16px; overflow: hidden; background: #15110d; box-shadow: var(--sombra); }
.fila-tas .foto-tas img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.fila-tas:hover:not(:disabled) .foto-tas img { transform: scale(1.08); }
/* Cada apartado de la ficha, con su foto encima del título (también cerrado). */
details.seccion > summary .sec-img { width: calc(100% + 2 * var(--rel-h) + 28px); max-width: none; height: 96px; object-fit: cover; display: block; margin: calc(-1 * var(--rel-v)) calc(-1 * var(--rel-h)) var(--e-2); border-radius: var(--radio) var(--radio) 0 0; }
details.seccion > summary::after { top: 104px; }
details.seccion[data-seccion] { border-top: 0; overflow: hidden; }
/* Mi despacho: baldosas con foto y el nombre encima. */
.subdespacho button { position: relative; overflow: hidden; justify-content: flex-end; min-height: 104px; padding: 10px 6px; color: #fffaf1; background: #15110d; border: 2px solid transparent; }
.subdespacho button .baldosa-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.subdespacho button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 15, 10, .05) 20%, rgba(20, 15, 10, .85) 100%); }
.subdespacho button > :not(.baldosa-img) { position: relative; z-index: 1; }
.subdespacho button .ic { color: var(--oro-claro); }
.subdespacho button:hover .baldosa-img { transform: scale(1.06); }
.subdespacho button[aria-selected="true"] { border-color: var(--oro); background: #15110d; color: #fffaf1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro) 35%, transparent); }
.subdespacho button[aria-selected="true"]::before { content: "✓"; position: absolute; top: 6px; right: 8px; z-index: 1; font-weight: 800; color: var(--oro-claro); }
@media (min-width: 760px) { .subdespacho button { min-height: 120px; } }

/* ======================================================================= «La vitrina» (REV-038, Manuel 27-10-2026)
   Toda la app es una sala en penumbra: sin tarjetas, las cosas se separan por la luz y por las fotos a sangre. El oro
   (--acento) solo en lo que se pulsa y en el siguiente paso sugerido. Letra clara (≥ 8:1) sobre negro cálido. */
body { background: var(--fondo); color: var(--texto); }
h1, h2, h3, .cab-tas h1 { font-family: var(--f-titulo); font-weight: 500; letter-spacing: -.02em; }
h2 { font-size: var(--t-xl); line-height: 1.05; }
h3 { font-size: var(--t-l); }
b, strong { font-weight: 600; }
.eyebrow { font-weight: 500; color: var(--tenue); letter-spacing: .08em; }
.tarjeta, main .tarjeta { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 10px 0; }
.tarjeta { --rel-v: 10px; --rel-h: var(--margen); }
.tarjeta.peligro { background: transparent; border-top: 1px solid var(--linea); }
.entra :is(.tarjeta, .lista-tas > li, .vacio) { animation-name: aparece; }
/* Casillas: paneles de negro pardo, borde fino; el foco, oro. */
input:not([type=checkbox]):not([type=file]):not([type=radio]), select, textarea { background: var(--tarjeta); color: var(--texto); border: 1px solid var(--linea); border-radius: var(--radio); font: 400 var(--t-m)/1.4 var(--f-texto); }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--tenue) 75%, transparent); }
select option { background: var(--tarjeta); color: var(--texto); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 28%, transparent); }
input[type=checkbox] { accent-color: var(--acento); }
label { color: var(--tenue); }
/* Botones: uno solo de oro macizo por pantalla; los demás, finos. */
button.principal { background: var(--acento); color: var(--acento-texto); border-radius: 999px; font-weight: 600; box-shadow: none; }
button.secundario, .boton { background: transparent; color: var(--texto); border: 1px solid var(--linea); border-radius: 999px; }
button.secundario:hover, .boton:hover { border-color: var(--acento); }
button.enlace { color: var(--acento); font-weight: 500; }
button, .boton { border-radius: 999px; }
/* Cabecera: casi invisible, el nombre a la izquierda y el guardado a la derecha. */
.cabecera { background: linear-gradient(var(--fondo) 55%, color-mix(in srgb, var(--fondo) 0%, transparent)); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; color: var(--texto); }
.marca { font-family: var(--f-titulo); font-weight: 500; }
.b-sonido { background: transparent; border: 1px solid var(--linea); color: var(--texto); }
/* Lista: título grande y la vitrina de fotos que se arrastra. */
.lista-cab { padding: 8px 0 14px; }
.lista-cab h2 { font-size: var(--t-xxl); margin: 0; line-height: .95; }
.vitrina { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--margen)) 8px; padding: 0 var(--margen) 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
.vitrina::-webkit-scrollbar { display: none; }
.vitrina figure { flex: 0 0 min(70%, 300px); margin: 0; scroll-snap-align: center; }
.vitrina button { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radio); overflow: hidden; background: #000; min-height: 0; }
.vitrina img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; filter: brightness(.5); transition: filter .45s, transform .45s; }
.vitrina figure.luz img { filter: none; }
.vitrina figcaption { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 10px 2px 0; font-size: var(--t-s); color: var(--tenue); }
.vitrina figcaption b { color: var(--texto); font-weight: 500; }
/* Las fotos de cada tipo de pieza son cuadradas: marco cuadrado, la joya entera. Con pocas tasaciones (caben todas),
   la franja va centrada en vez de pegada a la izquierda. */
.vitrina figure:first-child { margin-left: auto; }
.vitrina figure:last-child { margin-right: auto; }
.vitrina-sola figure { flex-basis: 100%; }
.vitrina-sola img { aspect-ratio: 16 / 10; filter: none; }
.lista-cab + .vitrina + .fila-titulo button.principal { margin-top: 18px; }
.buscador label { color: var(--tenue); }
#t-buscar { border-radius: 999px; padding-left: 18px; }
/* Filas: la foto de la pieza, número, estado y cliente; separadas por una línea. */
.fila-tas { grid-template-columns: 72px minmax(0, 1fr) auto; padding: 12px 0; border-radius: 0; background: transparent; color: var(--texto); }
@media (max-width: 559px) { .fila-tas { grid-template-columns: 72px minmax(0, 1fr) auto; } }
.lista-tas > li + li .fila-tas, .lista-tas > li .fila-tas { border-top: 1px solid var(--linea); border-radius: 0; }
.fila-tas .ico-tas.foto-tas { width: 72px; height: 72px; border-radius: 4px; box-shadow: none; background: #000; }
.fila-tas .num { font-family: var(--f-titulo); font-weight: 500; font-size: var(--t-m); }
.fila-tas:hover:not(:disabled) { background: transparent; }
.fila-tas:hover:not(:disabled) .num { color: var(--acento); }
.chip-estado { background: transparent; padding: 0; font-weight: 500; color: var(--acento); }
.chip-estado[data-estado="emitida"] { background: transparent; color: var(--ok); }
.chip-estado[data-estado="corrigiendo"] { background: transparent; color: var(--aviso); }
.estado-tas { background: transparent; color: var(--acento); padding: 0; font-weight: 500; }
.estado-tas[data-estado="emitida"] { color: var(--ok); }
.estado-tas[data-estado="corrigiendo"] { color: var(--aviso); }
.vacio img { width: 100%; border-radius: var(--radio); }
/* Tasación: cabecera fija fina; debajo, el héroe a sangre. */
.cab-tas { background: color-mix(in srgb, var(--fondo) 92%, transparent); border-bottom: 1px solid var(--linea); }
.cab-tas h1 { font-weight: 500; }
.subpestanas:not(.subdespacho) { background: transparent; padding: 0; gap: 22px; border-radius: 0; border-bottom: 0; }
.subpestanas:not(.subdespacho) button { flex: 0 0 auto; background: transparent; color: var(--tenue); border-radius: 0; padding: 8px 0; min-height: 44px; font-weight: 500; font-size: var(--t-m); border-bottom: 1px solid transparent; box-shadow: none; }
.subpestanas:not(.subdespacho) button[aria-selected="true"] { background: transparent; color: var(--texto); border-bottom-color: var(--acento); box-shadow: none; }
.heroe { position: relative; margin: 0 calc(-1 * var(--margen)) 14px; aspect-ratio: 9 / 10; max-height: 72vh; overflow: hidden; background: #000; }
.heroe img { width: 100%; height: 100%; object-fit: cover; display: block; }
.heroe::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 10, 8, 0) 45%, var(--fondo) 97%); }
.heroe-texto { position: absolute; left: var(--margen); right: var(--margen); bottom: 12px; z-index: 1; }
.heroe-texto p { margin: 0; color: var(--tenue); font-size: var(--t-s); }
.heroe-texto .heroe-titulo { color: var(--texto); font-family: var(--f-titulo); font-weight: 500; font-size: var(--t-xl); line-height: 1.02; letter-spacing: -.02em; margin: 4px 0 8px; text-wrap: balance; }
.heroe-texto .heroe-sub { font-size: var(--t-m); }
.heroe-valor { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.heroe-valor b { color: var(--texto); font-family: var(--f-titulo); font-weight: 500; font-size: var(--t-xxl); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.heroe-verbo { aspect-ratio: 4 / 5; }
.heroe-palabra { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-family: var(--f-titulo); font-weight: 500; font-size: clamp(4rem, 24vw, 8rem); letter-spacing: -.04em; color: var(--texto); text-shadow: 0 4px 40px rgba(0, 0, 0, .65);
  /* Velo oscuro solo detrás de la palabra, para que se lea sobre cualquier zona de la foto (Lía, REV-038). */
  background: radial-gradient(ellipse 62% 30% at 50% 50%, rgba(12, 10, 8, .6), rgba(12, 10, 8, 0) 72%); }
@media (min-width: 768px) { .heroe { aspect-ratio: auto; height: 420px; max-height: none; border-radius: var(--radio); margin-inline: 0; } .heroe-verbo { height: 460px; } }
.entra .heroe img { animation: lento 16s ease-in-out infinite alternate; }
/* Índice de fichas: píldoras con la miniatura de la pieza. */
.indice-fichas button { border-radius: 999px; padding: 4px 14px 4px 4px; gap: 8px; background: transparent; border: 1px solid var(--linea); color: var(--texto); }
.indice-fichas button[aria-selected="true"] { border-color: var(--acento); box-shadow: none; background: transparent; }
.indice-fichas .mini-ficha { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
/* Apartados de la ficha: una banda de foto a sangre con el título encima; nada de cajas. */
details.seccion, details.seccion[data-seccion] { background: transparent; border: 0; border-top: 0; padding: 0; overflow: visible; margin-top: 18px; }
details.seccion > summary { position: relative; padding: 0; display: block; }
details.seccion > summary .sec-img { display: block; width: calc(100% + 2 * var(--margen)); max-width: none; height: 170px; object-fit: cover; margin: 0 calc(-1 * var(--margen)); border-radius: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 100%); mask-image: linear-gradient(180deg, #000 35%, transparent 100%); }
details.seccion > summary h3 { position: relative; z-index: 1; margin: -1.25em 0 0; font-size: var(--t-xl); line-height: 1; text-shadow: 0 2px 18px rgba(0, 0, 0, .8); }
details.seccion > summary .resumen { display: block; margin-top: 4px; color: var(--tenue); }
details.seccion[open] > summary .resumen { display: none; }
details.seccion > summary::after { top: 12px; right: 0; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(12, 10, 8, .6); color: var(--texto); z-index: 1; }
details.seccion[open] > summary { margin-bottom: 8px; }
@media (min-width: 768px) { details.seccion > summary .sec-img { width: 100%; margin: 0; border-radius: var(--radio); } }
.precios-ficha.tarjeta, .tarjeta.precios-ficha { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px; }
.escalon.elegido { background: color-mix(in srgb, var(--acento) 12%, transparent); border-color: var(--acento); }
.aviso-ficha { background: var(--tarjeta); color: var(--texto); }
/* Valor flotante, barra de abajo y «Nueva». */
.valor-flotante { background: var(--tarjeta-2); color: var(--texto); border: 1px solid var(--acento); }
.valor-flotante .ic { color: var(--acento); }
@media (max-width: 999px) {
  .pestanas { background: linear-gradient(color-mix(in srgb, var(--fondo) 0%, transparent), var(--fondo) 40%); border-top: 0; box-shadow: none; }
  .pestanas button { color: var(--tenue); background: transparent; }
  .pestanas button[aria-selected="true"] { color: var(--texto); background: transparent; }
}
.b-nueva .ic { background: var(--acento); color: var(--acento-texto); box-shadow: 0 10px 30px color-mix(in srgb, var(--acento) 35%, transparent); animation: none; }
.b-nueva { color: var(--acento); }
/* Mi despacho: el título y seis baldosas grandes de foto, de dos en dos. */
.cab-despacho img { display: none; }
.cab-despacho h1 { font-size: var(--t-xxl); line-height: .95; }
.subdespacho { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .subdespacho { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.subdespacho button { aspect-ratio: 1; min-height: 0; border-radius: var(--radio); align-items: flex-start; text-align: left; padding: 12px; font-size: var(--t-l); font-family: var(--f-titulo); font-weight: 500; line-height: 1.05; border: 0; }
.subdespacho button .ic { display: none; }
.subdespacho button[aria-selected="true"] { outline: 2px solid var(--acento); outline-offset: 3px; box-shadow: none; border: 0; }
.subdespacho button[aria-selected="true"]::before { content: none; }
/* Entrada: la joya ocupa media pantalla y el formulario va debajo. */
.con-portada .tarjeta { max-width: 460px; padding: 0 0 24px; }
.con-portada .portada { margin: 0 -16px 18px; height: 56vh; min-height: 300px; }
.con-portada .portada img { object-fit: cover; object-position: 50% 30%; }
.con-portada .portada img { -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.con-portada h1 { font-size: var(--t-xxl); line-height: .95; }
/* Capas y celebración en la sala oscura. */
.capa-aviso .tarjeta, .capa-foto .tarjeta, .capa-informe .tarjeta, .fiesta-sello { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 16px; }
.guardado[data-estado="error"] { background: var(--aviso); color: var(--acento-texto); }
/* Mi despacho por secciones (Manuel, 27-10-2026): el menú de baldosas o una sección, nunca las dos cosas a la vez.
   La sección abre con «← Mi despacho», su foto a sangre y su título; debajo, su contenido. */
.cab-parte { display: flex; flex-direction: column; }
.volver-despacho { align-self: flex-start; gap: 6px; padding: 8px 0; margin-bottom: 6px; font-size: var(--t-m); }
.heroe-parte { aspect-ratio: 16 / 9; max-height: 42vh; margin-bottom: 0; }
.titulo-parte { margin: -2.4em 0 12px; position: relative; z-index: 1; }
.titulo-parte h1 { font-size: var(--t-xxl); line-height: .95; margin: 0; text-shadow: 0 2px 20px rgba(0, 0, 0, .7); }
.titulo-parte h1:focus { outline: none; }
.titulo-parte p { margin: 6px 0 0; }
@media (min-width: 768px) { .heroe-parte { height: 300px; } }
#panel-despacho[data-vista="parte"] .tarjeta:not(#salida) > h2:first-child { display: none; } /* el título ya está arriba, en grande */
/* «Tus datos» es una sección de Cuenta con su propio título, que se ve y recibe el foco como las otras tres (Lía, REV-060). */
#salida > h2 { font-size: var(--t-l); }

/* Casillas que se distinguen y secciones de Mi despacho en paneles (Manuel, 28-10-2026: «hay poco contraste y cuesta
   distinguir unas cosas de otras. Necesito que se vea mejor y que se organice todo mejor»). Vale para toda la app. */
input:not([type=checkbox]):not([type=file]):not([type=range]):not([type=radio]), select, textarea { background: var(--casilla); border: 1px solid var(--casilla-borde); }
input:not([type=checkbox]):not([type=file]):not([type=radio]):disabled, select:disabled, textarea:disabled { border-style: dashed; opacity: .75; }
label { color: var(--etiqueta); font-weight: 500; }
label.casilla { color: var(--texto); }
input[type=checkbox] { width: 22px; height: 22px; flex: none; }
.grupo { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 10px; padding: 14px 16px 16px; margin: 0 0 14px; min-width: 0; }
fieldset.grupo { margin-inline: 0; }
.grupo > legend, .grupo > h3 { float: left; width: 100%; margin: 0 0 6px; padding: 0; font-family: var(--f-titulo); font-weight: 500; font-size: var(--t-l); color: var(--titulo, var(--texto)); letter-spacing: -.01em; }
.grupo > legend + *, .grupo > h3 + * { clear: both; }
.grupo > :last-child { margin-bottom: 0; }
.grupo.peligro { border-color: color-mix(in srgb, var(--aviso) 55%, var(--panel-borde)); }
.grupo .tenue { color: var(--tenue); }
/* Criterios: cada escalón, su recuadro. */
.tabla-escalones { display: flex; flex-direction: column; gap: 10px; }
.tabla-escalones .fila-esc { background: var(--tarjeta-2); border: 1px solid var(--panel-borde); border-radius: 8px; padding: 10px 12px; border-top: 1px solid var(--panel-borde); }
.tabla-escalones .fila-esc b { font-size: var(--t-m); }
/* «En este aparato»: ya es un grupo; sin el borde propio de antes. */
.ajustes-aparato.grupo { margin-top: 0; }
@media (min-width: 768px) { .grupo { padding: 18px 20px 20px; } }
/* Logotipo, firma y sello (Manuel, 28-10-2026: «apenas se puede ver»): suelen ser tinta oscura sobre transparente, así
   que se enseñan grandes y sobre papel claro, como saldrán en el informe; cada uno en su panel. */
.imagenes { grid-template-columns: 1fr; gap: 14px; }
.imagen { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 10px; padding: 14px 16px 16px; gap: 12px; }
.imagen .vista { aspect-ratio: 5 / 2; background: #fbf8f2; border: 1px solid #d9cfbf; border-radius: 6px; padding: 12px; }
.imagen .vista .tenue { color: #6b5e4e; }
.imagen .rotulo { font-family: var(--f-titulo); font-weight: 500; font-size: var(--t-l); color: var(--texto); }
.imagen .detalle { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.imagen .boton { flex: 0 0 auto; }
@media (min-width: 1000px) { .lateral .imagen { grid-template-columns: minmax(0, 1fr) 200px; } }
/* Criterios (Manuel, 28-10-2026): subsecciones que se abren una a una y el porcentaje de cada escalón, en grande. */
details.grupo.plegable { padding: 0; }
details.grupo.plegable > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 16px; min-height: 64px; }
details.grupo.plegable > summary::-webkit-details-marker { display: none; }
details.grupo.plegable > summary::after { content: "▾"; grid-column: 2; grid-row: 1 / span 2; font-size: var(--t-l); color: var(--acento); transition: transform .2s; }
details.grupo.plegable:not([open]) > summary::after { transform: rotate(-90deg); }
details.grupo.plegable > summary h3 { margin: 0; float: none; font-family: var(--f-titulo); font-weight: 500; font-size: var(--t-l); color: var(--texto); }
details.grupo.plegable > summary .resumen-sub { grid-column: 1; color: var(--tenue); font-size: var(--t-s); }
details.grupo.plegable > summary:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; border-radius: 10px; }
details.grupo.plegable[open] > summary { border-bottom: 1px solid var(--panel-borde); margin-bottom: 12px; }
details.grupo.plegable > :not(summary) { margin-inline: 16px; }
details.grupo.plegable > :last-child { margin-bottom: 16px; }
.tabla-escalones .fila-esc { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 760px) { .tabla-escalones .fila-esc { display: flex; } }
.esc-cab { display: flex; flex-direction: column; gap: 2px; }
.esc-cab b { font-family: var(--f-titulo); font-weight: 500; font-size: var(--t-l); }
.esc-pcts { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; }
.esc-pcts label.pct { margin: 0; flex: 0 1 auto; }
.con-unidad { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.con-unidad input { width: 6.5em !important; font-family: var(--f-titulo) !important; font-weight: 500 !important; font-size: var(--t-xl) !important; text-align: right; padding: 6px 12px !important; margin-top: 0 !important; color: var(--texto); }
.con-unidad span { font-family: var(--f-titulo); font-size: var(--t-xl); color: var(--acento); }
.esc-base, .esc-nota { margin: 0; color: var(--tenue); flex-basis: 100%; }
.tabla-escalones .fila-esc > .esc-pcts { flex-direction: row; align-items: flex-end; }
.esc-pcts label.pct { display: flex; flex-direction: column; align-items: flex-start; }
.con-unidad input { width: 4.2em !important; }
/* La regla de cada escalón, el dato que importa (Manuel, 28-10-2026), en grande; las casillas siguen grandes. */
/* Criterios (Manuel, 31-10-2026: «Lo más importante es el nombre del escalón. Y después, los descuentos»): el nombre
   es el título; debajo, en tamaño de lectura, lo que se hace, con las cifras resaltadas. */
.esc-cab { display: flex; flex-direction: column; gap: 4px; }
.esc-cab > b { font-family: var(--f-titulo); font-size: var(--t-xl); font-weight: 500; line-height: 1.2; color: var(--texto); letter-spacing: 0; }
.esc-regla { display: block; font-family: var(--f-texto); font-size: var(--t-m); line-height: 1.4; color: var(--tenue); }
.esc-regla::first-letter { text-transform: uppercase; }
.esc-regla b.regla-cifra { color: var(--acento); font-weight: 700; white-space: nowrap; font-size: inherit; font-family: inherit; }
.etiqueta-campo { margin: 12px 0 6px; color: var(--etiqueta); font-weight: 500; font-size: var(--t-s); }
/* Criterios: un porcentaje que no es el de partida (Manuel, 28-10-2026; Lía, REV-039). */
.personalizado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 6px; color: var(--tenue); }
.personalizado .enlace { padding: 4px 0; min-height: 0; }
/* Modo de trabajo (Manuel, 28-10-2026: «Compacta al editar»; Lía, REV-038): en cuanto se escribe en una tasación, la
   cabecera es una franja baja con la miniatura a la izquierda y las bandas de los apartados se estrechan. */
html.trabajando .heroe:not(.heroe-parte) { aspect-ratio: auto; height: 104px; max-height: none; margin-bottom: 10px; background: var(--tarjeta); border-bottom: 1px solid var(--linea); }
html.trabajando .heroe:not(.heroe-parte)::after { display: none; }
html.trabajando .heroe:not(.heroe-parte) > img { position: absolute; left: 0; top: 0; width: 104px; height: 104px; animation: none; }
html.trabajando .heroe:not(.heroe-parte) .heroe-texto { left: calc(104px + 14px); right: var(--margen); top: 50%; bottom: auto; transform: translateY(-50%); }
html.trabajando .heroe .heroe-texto p { font-size: var(--t-xs); }
html.trabajando .heroe .heroe-texto .heroe-titulo { font-size: var(--t-m); margin: 2px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.trabajando .heroe .heroe-sub, html.trabajando .heroe .heroe-palabra { display: none; }
html.trabajando .heroe .heroe-valor b { font-size: var(--t-l); }
html.trabajando details.seccion > summary .sec-img { height: 56px; }
/* Foto propia de la pieza en la vitrina y la cabecera (Manuel: «Foto propia si la hay»). */
.vitrina button, .heroe { position: relative; }
img[data-ruta]:not([src]) { background: var(--tarjeta-2); }
.foto .va-informe { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: var(--t-s); min-height: 44px; }
.foto .tam-foto { display: block; font-size: var(--t-s); margin: 0 0 4px; }
.foto .tam-foto select { width: 100%; min-height: 44px; margin-top: 2px; }
/* Plan y pagos: los tres planes a la vista, con lo que incluye y lo que no cada uno (28-10-2026). */
.planes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 10px 0 4px; }
.paquete-tarjeta { border-style: dashed; }
.plan-tarjeta { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--panel-borde); border-radius: var(--radio); background: var(--tarjeta-2); }
.plan-tarjeta.mio { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset; }
.plan-tarjeta header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.plan-tarjeta h4 { margin: 0; font-family: var(--f-titulo); font-size: var(--t-l); font-weight: 500; }
.precio-plan { flex-basis: 100%; margin: 0; color: var(--tenue); }
.precio-plan b { color: var(--texto); font-family: var(--f-titulo); font-size: var(--t-xl); font-weight: 500; }
.etiqueta-plan { margin: 6px 0 0; font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--etiqueta); }
.lista-plan { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.lista-plan li { line-height: 1.4; }
.lista-plan.si li::marker { content: "✓  "; color: var(--ok); }
.lista-plan.no li::marker { content: "✕  "; color: var(--aviso); }
.plan-tarjeta button { margin-top: auto; }
/* Retocar: enderezar con cuadrícula y recorte con forma fija (28-10-2026). */
.marco-ret { background-image: linear-gradient(to right, rgba(255,255,255,.55) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.55) 1px, transparent 1px); background-size: 33.333% 33.333%; background-position: -1px -1px; }
.enderezar-ret { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0; color: var(--texto); }
.enderezar-ret input[type=range] { flex: 1 1 180px; min-width: 0; accent-color: var(--acento); height: 44px; }
.enderezar-ret output { min-width: 3.5em; font-variant-numeric: tabular-nums; }
.botones-ret .estrecho { padding: 6px 12px; }
/* Plan y pagos: una tarjeta cada vez, elegida arriba (Manuel, 28-10-2026: «que no tenga que estar bajando»). */
.selector-planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0 8px; }
@media (min-width: 700px) { .selector-planes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.selector-planes button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; min-height: 64px; text-align: left; background: var(--tarjeta-2); color: var(--texto); border: 1px solid var(--panel-borde); border-radius: var(--radio); }
.selector-planes button span { font-size: var(--t-s); color: var(--tenue); }
.selector-planes button small { font-size: var(--t-xs); color: var(--ok); }
.selector-planes button[aria-pressed=true] { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset; background: color-mix(in srgb, var(--acento) 14%, var(--tarjeta-2)); }
.ia-plan { margin: 8px 0 4px; padding: 12px 14px; border-radius: var(--radio); background: color-mix(in srgb, var(--acento) 10%, var(--tarjeta)); border: 1px solid color-mix(in srgb, var(--acento) 45%, transparent); }
.ia-plan p { margin: 6px 0; line-height: 1.45; }
.ia-titulo { margin-top: 0 !important; font-family: var(--f-titulo); font-size: var(--t-l); color: var(--acento); }
details.bloque-plan { margin: 8px 0; padding: 10px 14px; border: 1px solid var(--panel-borde); border-radius: var(--radio); background: var(--panel); }
details.bloque-plan > summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
details.bloque-plan[open] > summary { margin-bottom: 8px; }
/* Plan y pagos: todo lo que hace cada plan, línea a línea (29-10-2026). */
.grupo-func { margin: 10px 0 2px; font-weight: 600; color: var(--texto); }
.lista-plan.func li.si::marker { content: "✓  "; color: var(--ok); }
.lista-plan.func li.no::marker { content: "✕  "; color: var(--aviso); }
.lista-plan.func li.no { color: var(--tenue); }
/* Qué hace la app, en la entrada, y el acceso a la guía (29-10-2026). */
.intro-entrar { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea); }
.intro-entrar h2 { font-family: var(--f-titulo); font-weight: 500; font-size: var(--t-l); margin: 0 0 6px; }
.intro-entrar ul { margin: 0 0 12px; padding-left: 1.1em; display: grid; gap: 6px; line-height: 1.4; }
.intro-entrar b { color: var(--acento); font-weight: 600; }
a.boton { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; min-height: 44px; padding: 8px 16px; border-radius: 999px; }
.enlace-guia { margin: 4px 0 12px; }
/* La entrada como anuncio (29-10-2026). */
.intro-entrar .eyebrow { margin: 0 0 4px; }
.intro-entrar h2 { font-size: var(--t-xl); line-height: 1.05; letter-spacing: -.02em; margin-bottom: 8px; }
.intro-sub { font-size: var(--t-m); line-height: 1.45; margin: 0 0 12px; }
.intro-golpes { list-style: none; padding: 0 !important; }
.intro-golpes li { padding: 10px 12px; border-left: 3px solid var(--acento); background: var(--tarjeta-2); border-radius: 0 var(--radio) var(--radio) 0; }
.intro-golpes b { display: block; font-family: var(--f-titulo); font-weight: 500; font-size: var(--t-l); margin-bottom: 2px; }
.intro-entrar .fila-botones { align-items: center; }
.intro-h3 { font-family: var(--f-titulo); font-weight: 500; font-size: var(--t-l); margin: 14px 0 6px; color: var(--acento); }
.intro-dolor { list-style: none; padding: 0 !important; }
.intro-dolor li { position: relative; padding-left: 26px; }
.intro-dolor li::before { content: "✕"; position: absolute; left: 4px; color: var(--aviso); font-weight: 700; }
.intro-dolor li + li { margin-top: 6px; }
.intro-dolor b { color: var(--texto); }
/* «Salir», siempre a la vista en la cabecera (29-10-2026). */
.b-salir-cab { background: transparent; color: var(--texto); border: 1px solid var(--linea); border-radius: 999px; padding: 6px 14px; min-height: 40px; font-size: var(--t-s); }
.b-salir-cab:hover { border-color: var(--acento); }
/* La introducción, dentro de la app, arriba de Mi despacho (29-10-2026). */
details.intro-app { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--panel-borde); border-radius: var(--radio); background: var(--panel); border-top: 1px solid var(--panel-borde); }
details.intro-app > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
details.intro-app > summary::-webkit-details-marker { display: none; }
.intro-titulo { font-family: var(--f-titulo); font-weight: 500; font-size: var(--t-xl); line-height: 1.05; letter-spacing: -.02em; }
details.intro-app[open] .intro-plegar { display: none; }
.enlace-entrar { margin: 12px 0 0; text-align: center; }
.enlace-entrar a { color: var(--acento); }
/* La prueba gratis, a la vista: en la entrada y, mientras dura, arriba en la app (29-10-2026). */
.cta-prueba { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--acento); border-radius: var(--radio); background: color-mix(in srgb, var(--acento) 10%, var(--tarjeta)); }
.cta-prueba p { margin: 0 0 10px; line-height: 1.45; }
.cta-prueba b { color: var(--acento); }
.aviso-prueba { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; max-width: 1280px; margin: 0 auto; padding: 10px var(--margen); background: color-mix(in srgb, var(--acento) 14%, var(--fondo)); border-bottom: 1px solid color-mix(in srgb, var(--acento) 40%, transparent); }
.aviso-prueba[hidden] { display: none; }
.aviso-prueba p { margin: 0; }
.aviso-prueba .botones { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- «4 · Documentos» (REV-043): expediente, piezas en depósito, firma con el dedo y QR de descarga ---- */
@media (max-width: 480px) { .subpestanas:not(.subdespacho) { gap: 14px; } }
.documentos > .tarjeta { margin: 12px 0; }
.lista-deposito { display: grid; gap: 10px; margin: 8px 0; }
.linea-deposito { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); padding: 10px 12px; min-width: 0; }
.linea-deposito p { margin: 0 0 6px; }
.lista-expediente { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 10px; }
.doc-exp { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px; min-width: 0; }
.doc-exp p { margin: 0 0 6px; overflow-wrap: anywhere; }
.botones-envio { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .botones-envio button { width: 100%; min-width: 0; white-space: normal; }
.doc-exp .envios { margin-top: 8px; }
.doc-exp .envios ul { margin: 6px 0; padding-left: 18px; }
.capa-firma { background: var(--fondo); }
.cuerpo-firma { flex: 1; overflow: auto; padding: 12px var(--margen) 32px; max-width: 900px; width: 100%; margin: 0 auto; }
/* El documento a firmar, como una hoja a lo ancho de la pantalla, sin desplazamiento propio (Manuel, 30-10-2026). */
.doc-firma-caja { position: relative; width: 100%; overflow: hidden; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; min-height: 200px; }
.doc-firma { display: block; width: 794px; height: 1123px; border: 0; background: #fff; transform-origin: 0 0; pointer-events: none; } /* solo para leer: el dedo mueve la página, no el documento (en el iPhone se quedaba fijo) */
.firma-papel { margin: 14px 0; }
.sitio-lienzo { margin: 8px 0 4px; }
.lienzo-firma { display: block; width: 100%; height: 180px; background: #fff; border: 1px dashed var(--acento); border-radius: var(--radio); touch-action: none; }
@media (orientation: landscape) and (max-height: 500px) { .lienzo-firma { height: 140px; } }
.capa-qr { position: fixed; inset: 0; z-index: 60; background: #fff; color: #111; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 16px; }
.qr-caja { max-width: 560px; width: 100%; text-align: center; }
.qr-caja h2 { color: #111; margin: 0 0 10px; }
.qr-caja img { width: min(80vw, 60vh, 420px); height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.qr-caja p { color: #222; } .qr-caja .qr-plazo { font-weight: 600; }
.qr-caja .fila-botones { justify-content: center; flex-wrap: wrap; }
.qr-caja .secundario, .qr-caja .boton.secundario { color: #111; border-color: #999; background: #f3f3f3; }
.fotos-linea { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; }
.foto-dep { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.foto-dep img { width: 72px; height: 72px; object-fit: contain; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); }
#t-documentos .sin-guardar { outline: 2px solid var(--peligro, #e06c5a); }

/* «Tu despacho, de un vistazo» (REV-046): cuatro cifras que filtran la lista, en lugar de la franja de fotos. */
.resumen-despacho { margin: 4px 0 18px; }
.resumen-despacho .eyebrow { margin: 0 0 8px; }
.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cifra { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 96px; padding: 14px; text-align: left; border: 1px solid var(--linea); border-radius: 16px; background: var(--tarjeta); color: var(--texto); box-shadow: var(--sombra); cursor: pointer; transition: border-color .2s, background-color .2s, transform .2s; }
.cifra:hover { border-color: color-mix(in srgb, var(--oro) 60%, var(--linea)); }
.cifra:active { transform: scale(.98); }
.cifra.activa { border-color: var(--oro); background: color-mix(in srgb, var(--oro) 14%, var(--tarjeta)); }
.cifra-n { font-size: var(--t-l); font-weight: 800; color: var(--acento); line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cifra-t { font-weight: 700; }
.cifra-d { font-size: var(--t-s); color: var(--tenue); }
@media (prefers-reduced-motion: reduce) { .cifra { transition: none; } .cifra:active { transform: none; } }

/* Portada de la tasación, como Mi despacho (REV-046): cuatro baldosas con foto y cómo va cada parte. */
.baldosas-tas { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
@media (min-width: 760px) { .baldosas-tas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.subdespacho.baldosas-tas button { min-height: 132px; font-size: var(--t-m); font-weight: 800; }
.baldosas-tas .baldosa-estado { position: relative; z-index: 1; font-size: var(--t-xs); font-weight: 600; color: #f1e7d6; }

/* El nombre del tasador, siempre entero (Manuel, 29-10-2026: «El nombre del tasador ha de salir completo»): si no cabe
   en una línea, pasa a la siguiente; nunca se corta con puntos suspensivos. */
.cabecera .marca { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.15; min-width: 0; flex: 1 1 auto; }
@media (max-width: 480px) { .cabecera .marca { font-size: var(--t-m); } }
/* Al bajar, nada se ve a través de las dos cabeceras fijas (Manuel, 30-10-2026: «las líneas se solapan junto a las de
   la subcabecera cuando se hace scroll. Esto está muy feo»). El texto de las fotos (héroe, baldosas, títulos de los
   apartados) queda dentro de su foto y por debajo de las cabeceras, que son opacas. «← La tasación», en una línea. */
.heroe, .banner, .subdespacho button, details.seccion > summary { isolation: isolate; }
.cabecera { z-index: 4; background: var(--fondo); }
.cab-tas { z-index: 3; background: var(--fondo); }
.cab-tas [data-sub=portada] { white-space: nowrap; flex: 0 0 auto; }
.cab-tas.compacta [data-sub=portada] { padding: var(--e-1) 0; min-height: 0; }
/* Ayuda de cada apartado (Manuel, 30-10-2026; REV-048): un «?» en círculo y «Ayuda: qué es y cómo se rellena»; abierta,
   tres respuestas cortas (qué es, para qué sirve, cómo se rellena). */
details.ayuda-ap { margin: 0 0 var(--e-3); }
details.ayuda-ap > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; color: var(--acento); font-size: var(--t-s); font-weight: 500; }
details.ayuda-ap > summary::-webkit-details-marker { display: none; }
details.ayuda-ap > summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 999px; }
.ico-ayuda { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; border: 1.5px solid var(--acento); font-family: var(--f-titulo); font-weight: 600; font-size: 15px; line-height: 1; }
details.ayuda-ap[open] .ico-ayuda { background: var(--acento); color: var(--fondo); }
details.ayuda-ap > dl { margin: 4px 0 0; padding: var(--e-2) var(--e-3); border-left: 2px solid var(--acento); background: color-mix(in srgb, var(--acento) 6%, transparent); border-radius: 0 var(--radio) var(--radio) 0; }
details.ayuda-ap dt { font-weight: 600; color: var(--texto); font-size: var(--t-s); margin-top: var(--e-2); }
details.ayuda-ap dt:first-child { margin-top: 0; }
details.ayuda-ap dd { margin: 2px 0 0; color: var(--tenue); font-size: var(--t-s); line-height: 1.45; }
/* En los apartados de la ficha, la ayuda va justo debajo de la banda de foto. */
details.seccion > details.ayuda-ap { margin-top: var(--e-2); }
/* Lotes (REV-049): condiciones en lista, fichas para elegir en columnas y la tabla de cómo quedan. */
.lista-cond { list-style: none; padding: 0; margin: 0 0 var(--e-2); }
.lista-cond li { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); padding: 6px 0; border-bottom: 1px solid var(--linea); }
details.nueva-cond { margin: var(--e-2) 0; }
details.nueva-cond > summary { cursor: pointer; color: var(--acento); min-height: 44px; display: flex; align-items: center; }
fieldset.fichas-cond { border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e-2) var(--e-3); margin: var(--e-2) 0; max-height: 260px; overflow-y: auto; }
@media (min-width: 560px) { fieldset.fichas-cond { columns: 2; } }
.tabla-lotes { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabla-lotes th, .tabla-lotes td { text-align: left; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla-lotes td:nth-child(3), .tabla-lotes td:nth-child(4), .tabla-lotes thead th:nth-child(3), .tabla-lotes thead th:nth-child(4) { text-align: right; }
.tabla-lotes tr.fuera { color: var(--tenue); }
/* Ficha (Manuel, 30-10-2026: «Es un caos rellenar las fichas… Es su corazón»; REV-049): apartados como los de «1 ·
   Datos» y casillas «sin dato» en una fila: el desplegable corto («Escribir», «Sin comprobar»…) y, al lado, el dato. */
.sd { min-width: 0; }
.sd-titulo { display: block; font-size: var(--t-s); color: var(--tenue); margin: 12px 0 4px; }
.sd-fila { display: flex; gap: 8px; align-items: stretch; }
.sd-fila > select { flex: 0 0 auto; width: auto; max-width: 48%; }
.sd-fila > input { flex: 1 1 auto; min-width: 0; margin-top: 0; width: auto; }
.sd-fila.sin-casilla > select { flex: 1 1 auto; max-width: none; width: 100%; }
.sd-fila.apilada { flex-direction: column; }
.sd-fila.apilada > select { max-width: none; width: 100%; }
.fila-titulo { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); flex-wrap: wrap; margin: var(--e-2) 0; }
.fila-titulo h3 { margin: 0; }
details.seccion-ficha { margin-top: 0; }
/* «?» de cada casilla (Manuel, 30-10-2026; REV-049): pequeño, junto al nombre de la casilla, con 44 px de zona de
   toque; su explicación, debajo, ocupando toda la fila. */
.b-ayuda-c { display: inline-grid; place-items: center; width: 22px; height: 22px; min-height: 0; padding: 0; margin: 0 0 0 6px; vertical-align: 1px;
  border-radius: 50%; border: 1.5px solid var(--acento); background: transparent; color: var(--acento); font: 600 13px/1 var(--f-titulo); position: relative; }
.b-ayuda-c::before { content: ""; position: absolute; inset: -11px; }
.b-ayuda-c[aria-expanded="true"] { background: var(--acento); color: var(--fondo); }
.b-ayuda-c:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.ayuda-c-texto { grid-column: 1 / -1; margin: 6px 0 4px; padding: 8px 12px; font-size: var(--t-s); line-height: 1.45; color: var(--texto);
  border-left: 2px solid var(--acento); background: color-mix(in srgb, var(--acento) 8%, transparent); border-radius: 0 var(--radio) var(--radio) 0; }
label > .b-ayuda-c + input, label > .b-ayuda-c + select, label > .b-ayuda-c + textarea { margin-top: 4px; }
/* Muchas fichas (REV-049): barra «‹ Ficha 37 de 150 ›» fija bajo la cabecera y «Buscar ficha» con su lista. */
.nav-fichas { display: flex; align-items: stretch; gap: 6px; margin: 0 0 10px; }
.nav-fichas .nav-flecha { flex: 0 0 44px; min-width: 44px; padding: 0; font-size: var(--t-l); }
.nav-fichas .nav-actual { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; text-align: left; background: transparent; border: 1px solid var(--acento); border-radius: 999px; color: var(--texto); padding: 4px 12px 4px 4px; }
.nav-fichas .nav-actual > span:first-of-type { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-fichas .nav-buscar { flex: 0 0 auto; color: var(--acento); font-size: var(--t-s); }
.nav-fichas .mini-ficha { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 32px; }
.lista-fichas { list-style: none; margin: 0; padding: 0; }
.lista-fichas button { display: grid; grid-template-columns: 40px 2.5em 1fr auto; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; padding: 8px 0; color: var(--texto); min-height: 56px; }
.lista-fichas button[aria-current="true"] { background: color-mix(in srgb, var(--acento) 10%, transparent); }
.lista-fichas .mini-ficha { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.lista-fichas .lf-n { font-variant-numeric: tabular-nums; color: var(--acento); font-weight: 600; text-align: right; }
.lista-fichas .lf-t { min-width: 0; display: flex; flex-direction: column; }
.lista-fichas .lf-t b, .lista-fichas .lf-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-fichas .lf-t small { color: var(--tenue); }
.lista-fichas .lf-t em { color: var(--aviso); font-style: normal; }
.lista-fichas .lf-v { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Ficha de una sola columna, como «1 · Datos» (Manuel, 30-10-2026): todo plegable, también la valoración; el valor
   sigue a la vista en el importe flotante. */
.rejilla-ficha { display: block; max-width: 860px; }
/* Barra de muchas fichas: el número, siempre entero y a la vista. */
.nav-fichas .nav-num { display: flex; flex-direction: column; line-height: 1.15; flex: 1 1 auto; min-width: 0; }
.nav-fichas .nav-num b { white-space: nowrap; }
.nav-fichas .nav-num small { color: var(--tenue); font-size: var(--t-xs); white-space: nowrap; }
.nav-fichas .nav-actual { min-height: 52px; }
.nav-fichas .nav-flecha { align-self: center; height: 52px; border-radius: 999px; }
/* Tabla de lotes que cabe siempre en la pantalla (Manuel, 30-10-2026: «Se sale de la pantalla»): columnas fijas, las
   fichas en tramos («1–14») y los importes sin partir. */
.tabla-lotes { table-layout: fixed; font-size: var(--t-s); }
.tabla-lotes col.c-lote { width: 3.2em; } .tabla-lotes col.c-n { width: 3.6em; } .tabla-lotes col.c-v { width: 7.6em; }
.tabla-lotes td, .tabla-lotes th { overflow-wrap: anywhere; }
.tabla-lotes td:nth-child(4) { white-space: nowrap; padding-right: 0; }
/* Valoración: cada gema con su valor y, con varias, su total (Manuel, 30-10-2026). */
.desglose div.subtotal { border-bottom: 1px solid var(--linea); font-weight: 600; }
/* Mano de obra: primero el tipo y debajo el importe (Manuel, 30-10-2026). */
.mano-linea { margin-top: var(--e-2); }
/* «4 · Firmas y entregas»: cinco pasos en el orden del trabajo, plegables como los de «1 · Datos» (Manuel, 30-10-2026). */
.apartado-exp .doc-exp { margin: var(--e-2) 0; }
/* Buscar en el archivo: el campo y un botón por tipo (Manuel, 30-10-2026). */
.buscar-arc { margin: var(--e-2) 0; }
.buscar-arc input[type=search] { width: 100%; }
.tipos-arc { flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tipos-arc .chip-filtro { width: auto; min-height: 44px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linea); background: var(--tarjeta-2); color: var(--texto); font-size: var(--t-s); }
.tipos-arc .chip-filtro[aria-pressed=true] { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }
.tipos-arc .chip-filtro[aria-pressed=true] .tenue { color: inherit; opacity: .8; }
.lista-expediente > li[hidden] { display: none; }

/* Lista de fichas y ficha abierta por separado (Manuel, 31-10-2026; REV-052). */
.barra-ficha { flex-wrap: wrap; align-items: center; }
.barra-ficha .volver-fichas { flex: 0 0 auto; min-height: 44px; }
.barra-ficha .nav-actual { flex: 1 1 auto; border: 0; padding: 0 4px; min-height: 44px; }
.barra-ficha .nav-flecha { height: 44px; }
.todas-fichas { margin-bottom: 10px; }

/* Preguntar a la IA desde el «?» (REV-054). */
.ayuda-c-caja { grid-column: 1 / -1; }
.pregunta-ia { margin: var(--e-2) 0 var(--e-3); padding: var(--e-2) var(--e-3); border-left: 2px solid var(--acento); display: grid; gap: 6px; }
.pregunta-ia > label { font-size: var(--t-s); font-weight: 600; color: var(--texto); }
.pregunta-ia textarea { width: 100%; min-height: 64px; font-size: 16px; }
.pregunta-ia .pia-aviso { margin: 0; }
.pregunta-ia .b-preguntar-ia { justify-self: start; min-height: 44px; }
.pia-respuesta:empty { display: none; }
.pia-respuesta { font-size: var(--t-s); line-height: 1.5; }
.pia-eti { margin: 4px 0 2px; font-size: var(--t-xs); font-weight: 600; color: var(--tenue); text-transform: none; }
.pia-texto-respuesta { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--texto); }
.en-prueba .pregunta-ia { display: none; }

/* Aceptación de las condiciones (REV-053). */
.acepta-legal { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; font-size: var(--t-s); line-height: 1.45; text-align: left; }
.acepta-legal input { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; }
.acepta-legal a { color: var(--acento); }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 18px 0 8px; font-size: var(--t-xs); }
.pie-legal a { color: var(--tenue); }
.capa-condiciones { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 7, 6, .82); }
.capa-condiciones > div { max-width: 560px; width: 100%; max-height: calc(100dvh - 32px); overflow: auto; background: var(--tarjeta); border-radius: var(--radio); padding: 20px; }
.capa-condiciones .etiqueta-firma { margin: 8px 0 4px; font-weight: 600; font-size: var(--t-s); }
.capa-condiciones .lienzo-firma { height: 150px; }

/* Criterios: las casillas de porcentaje, del tamaño justo para leerlas sin quitarle protagonismo al nombre (31-10-2026). */
.tabla-escalones .con-unidad input { font-size: var(--t-l) !important; }
.tabla-escalones .con-unidad span { font-size: var(--t-l); }

/* Valoración preliminar (REV-057): elegir la foto de cada pieza. */
.elegir-foto { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.elegir-foto input { position: absolute; opacity: 0; }
.elegir-foto:has(input:checked) img { outline: 3px solid var(--acento); outline-offset: 2px; }
.elegir-foto:has(input:focus-visible) img { outline: 3px solid var(--texto); outline-offset: 2px; }

/* Lo recién hecho se señala un momento al llegar a él (valoración preliminar). */
.doc-exp.recien { outline: 3px solid var(--acento); outline-offset: 4px; border-radius: var(--radio); transition: outline-color 1s; }
label.casilla input[type=radio] { width: 22px; height: 22px; margin: 0; accent-color: var(--acento); flex: 0 0 auto; }
label.casilla input[type=checkbox] { accent-color: var(--acento); }
.vp-larga summary { cursor: pointer; color: var(--acento); }
.vp-larga .vp-texto { white-space: pre-wrap; }
.vp-foto-grande img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto 12px; object-fit: contain; background: #fff; }

/* Cuenta: un botón por sección (Manuel, 01-11-2026). Botones anchos, de 56 px o más, con título, qué hay dentro y una
   flecha; el filo de color de cada aspecto a la izquierda. */
.menu-cuenta { display: grid; gap: var(--e-3); margin: var(--e-4) 0; }
.menu-cuenta button { display: flex; align-items: center; gap: var(--e-3); width: 100%; min-height: 56px; margin: 0; padding: var(--e-3) var(--e-4);
  text-align: left; background: var(--panel); color: var(--texto); border: 1px solid var(--panel-borde); border-left: 4px solid var(--filo, var(--acento));
  border-radius: 10px; font: inherit; cursor: pointer; }
.menu-cuenta button:hover { background: var(--tarjeta-2); }
.menu-cuenta .ic { width: 24px; height: 24px; flex: none; color: var(--acento); }
.menu-cuenta .mc-texto { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.menu-cuenta .mc-texto b { font-size: var(--t-m); color: var(--titulo, var(--texto)); }
.menu-cuenta .mc-texto .tenue { font-size: var(--t-s); }
.menu-cuenta .mc-flecha { color: var(--tenue); }
.menu-cuenta .mc-marca { flex: none; font-size: var(--t-xs); font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--aviso); color: var(--fondo); }
.volver-cuenta { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; margin: var(--e-2) 0 var(--e-3); }
.volver-cuenta .ic { width: 20px; height: 20px; }
[data-cuenta-sec] > h3:focus, #salida > h2:focus { outline: none; }

/* «Mostrar» la contraseña (Manuel, 02-11-2026): botón dentro de la casilla, a la derecha, de 44 px de alto. */
.campo-clave { position: relative; }
.campo-clave > input { padding-right: 96px; }
label > .b-ayuda-c + .campo-clave { margin-top: 4px; }
.b-ver-clave { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: auto; min-width: 84px; min-height: 44px;
  margin: 0; padding: 0 12px; border: 0; border-radius: calc(var(--radio) - 2px); background: transparent; color: var(--acento);
  font-size: var(--t-s); font-weight: 700; cursor: pointer; }
.b-ver-clave:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

/* Nombre de la app en la cabecera (Manuel, 02-11-2026: «Hazlo así, arriba en la cabecera»): «Tasatia» pequeño, en el
   color de acento, encima del nombre del despacho, siempre visible. */
.cabecera .marca-app { display: block; font-family: var(--f-titulo); font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); line-height: 1.1; margin-bottom: 2px; }
.cabecera .marca-despacho { display: block; }
.cab-despacho h1 { overflow-wrap: break-word; hyphens: auto; } /* el nombre del despacho puede ser largo */

/* Señales de dificultad con tres estados (REV-068): cada una en su recuadro, con «Sí» y «No» en una fila. */
fieldset.senal { border: 1px solid var(--linea, rgba(127,127,127,.35)); border-radius: 10px; padding: .5rem .75rem; margin: .5rem 0; }
fieldset.senal legend { padding: 0 .25rem; font-size: .9rem; }
fieldset.senal .casilla { display: inline-flex; margin-right: 1.25rem; }
.no-procede { margin: .25rem 0 .75rem; }
/* Guion junto a las notas (REV-068). */
.guion ul { list-style: none; padding: 0; margin: .25rem 0 .5rem; }
.guion li { padding: .15rem 0; font-size: .9rem; }
.guion li span[aria-hidden] { display: inline-block; width: 1.2em; text-align: center; }
.guion-mencionado span[aria-hidden] { color: var(--filo); }
.guion-duda span[aria-hidden] { color: var(--viso); font-weight: 700; }
/* Propuestas de la IA a partir de las fotos (REV-068). */
.prop-fotos { margin: .5rem 0 .75rem; }
.prop-foto { border-top: 1px solid var(--linea); padding-top: .4rem; margin-top: .4rem; }