/* Vecinos — «el portal». La base (estructura, botones, campos, tarjetas…) está en /kit/kit.css; aquí van las letras,
   los colores (claro y oscuro), los tamaños pensados para personas mayores y las piezas del portal: la placa de latón
   de la escalera, el plano de la finca, el tablón de corcho, los buzones y el papel de los documentos. */

/* ── Letras ─────────────────────────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Young Serif';
  src: url('/fuentes/young-serif-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('/fuentes/atkinson-hyperlegible-next-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('/fuentes/atkinson-hyperlegible-next-latin-wght-italic.woff2') format('woff2');
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  src: url('/fuentes/atkinson-hyperlegible-mono-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
}

/* ── Colores: cal, azul esmalte, latón y corcho ─────────────────────────────────────────────────────────── */
:root {
  --f-texto: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-titulos: 'Young Serif', Georgia, 'Times New Roman', serif;
  --f-datos: 'Atkinson Hyperlegible Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --peso-titulos: 400;
  --tracking-titulos: -0.01em;

  --fondo: #f4efe6;
  --superficie: #fffdf8;
  --superficie-2: #efe8db;
  --hundido: #e5ddcd;
  --linea: #ddd3c1;
  --linea-fuerte: #b9ad96;
  --texto: #1d1a15;
  --texto-2: #4b4439;
  --texto-3: #6a6252;
  --acento: #1f4b8f;
  --acento-hover: #183c74;
  --acento-suave: #e2e9f5;
  --acento-texto: #1c4583;
  --sobre-acento: #ffffff;
  --ok: #1d7047;      --ok-suave: #dff1e5;
  --atencion: #8f5a07; --atencion-suave: #f9ebcf;
  --error: #ac2f27;   --error-suave: #f8e1dd;
  --info: #24609e;    --info-suave: #e3eef9;

  --laton: #b48a3c;
  --laton-claro: #ead39a;
  --laton-oscuro: #6f5420;
  --corcho: #c69a68;
  --corcho-punto: #a5784a;
  --marco-madera: #6b4a30;
  --papel: #fffef7;
  --tinta: #1f1c17;
  --ladrillo: #c98a62;
  --ladrillo-junta: #b7764f;
  --cristal: #dfe8ee;
  --cristal-luz: #ffe6a6;

  --piso-corriente: #d5ecdc;
  --piso-pendiente: #f7dfae;
  --piso-incidencia: #f6cdc5;

  --radio: 12px;
  --radio-l: 18px;
  --sombra-papel: 0 1px 1px rgb(40 30 15 / 0.12), 0 8px 18px -8px rgb(40 30 15 / 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --fondo: #13151a;
    --superficie: #1b1e24;
    --superficie-2: #23272f;
    --hundido: #0e1013;
    --linea: #2e333c;
    --linea-fuerte: #4a515d;
    --texto: #f2eee5;
    --texto-2: #c3bcaf;
    --texto-3: #979083;
    --acento: #8fb1ec;
    --acento-hover: #aac5f2;
    --acento-suave: #1c2a42;
    --acento-texto: #a9c4f1;
    --sobre-acento: #0c1628;
    --ok: #5cc98f;      --ok-suave: #15301f;
    --atencion: #f0b24f; --atencion-suave: #33260f;
    --error: #ff8576;   --error-suave: #3b1915;
    --info: #79b6f2;    --info-suave: #142a40;
    --laton: #d2ae64;
    --laton-claro: #f1dca6;
    --laton-oscuro: #7e6127;
    --corcho: #8d6b49;
    --corcho-punto: #6f5236;
    --marco-madera: #3e2b1c;
    --ladrillo: #6e4a36;
    --ladrillo-junta: #5d3e2d;
    --cristal: #2c3a48;
    --cristal-luz: #f2c96b;
    --piso-corriente: #1f4a33;
    --piso-pendiente: #5b4214;
    --piso-incidencia: #5e2620;
    --sombra-papel: 0 1px 1px rgb(0 0 0 / 0.4), 0 10px 22px -8px rgb(0 0 0 / 0.7);
  }
}
:root[data-tema='oscuro'] {
  --fondo: #13151a;
  --superficie: #1b1e24;
  --superficie-2: #23272f;
  --hundido: #0e1013;
  --linea: #2e333c;
  --linea-fuerte: #4a515d;
  --texto: #f2eee5;
  --texto-2: #c3bcaf;
  --texto-3: #979083;
  --acento: #8fb1ec;
  --acento-hover: #aac5f2;
  --acento-suave: #1c2a42;
  --acento-texto: #a9c4f1;
  --sobre-acento: #0c1628;
  --ok: #5cc98f;      --ok-suave: #15301f;
  --atencion: #f0b24f; --atencion-suave: #33260f;
  --error: #ff8576;   --error-suave: #3b1915;
  --info: #79b6f2;    --info-suave: #142a40;
  --laton: #d2ae64;
  --laton-claro: #f1dca6;
  --laton-oscuro: #7e6127;
  --corcho: #8d6b49;
  --corcho-punto: #6f5236;
  --marco-madera: #3e2b1c;
  --ladrillo: #6e4a36;
  --ladrillo-junta: #5d3e2d;
  --cristal: #2c3a48;
  --cristal-luz: #f2c96b;
  --piso-corriente: #1f4a33;
  --piso-pendiente: #5b4214;
  --piso-incidencia: #5e2620;
  --sombra-papel: 0 1px 1px rgb(0 0 0 / 0.4), 0 10px 22px -8px rgb(0 0 0 / 0.7);
}

/* ── Tamaños para leer bien: letra base de 18 px, botones y campos grandes ──────────────────────────────── */
html { font-size: 112.5%; }
body { line-height: 1.6; }
h1, h2, h3 { line-height: 1.12; }
.boton { min-height: 48px; padding: 10px 18px; font-size: 0.95rem; border-radius: var(--radio); }
.boton.grande { min-height: 56px; padding: 14px 24px; font-size: 1.05rem; }
.boton.pequeno { min-height: 40px; padding: 6px 13px; font-size: 0.85rem; }
.boton.icono { width: 48px; min-width: 48px; }
.boton.icono.pequeno { width: 40px; min-width: 40px; }
.campo input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']), .campo select, .campo textarea, .entrada { min-height: 50px; }
.campo > label, .campo > .etiqueta { font-size: 0.95rem; }
.campo .ayuda { font-size: 0.82rem; }
.casilla { font-size: 0.95rem; }
.casilla input { width: 24px; height: 24px; }
.etiqueta { font-size: 0.78rem; padding: 3px 10px; }
.lista > li, .lista > .elemento { padding: 14px 18px; }
.tabla { font-size: 0.92rem; }
.tabla th { font-size: 0.74rem; }
.tostada { font-size: 0.95rem; }
.cifra .etiqueta-cifra { font-size: 0.74rem; }
.pestanas a { font-size: 0.78rem; }
.lateral a { font-size: 0.98rem; padding: 10px 12px; }
.segmentado button, .segmentado label { padding: 9px 14px; font-size: 0.9rem; }
.antetitulo { color: var(--laton-oscuro); }
:root[data-tema='oscuro'] .antetitulo { color: var(--laton); }
@media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .antetitulo { color: var(--laton); } }
::selection { background: color-mix(in oklab, var(--laton) 40%, transparent); }

/* ── Barra ──────────────────────────────────────────────────────────────────────────────────────────────── */
.marca { font-family: var(--f-titulos); font-weight: 400; font-size: 1.25rem; gap: 10px; }
.marca img { width: 32px; height: 32px; }
.barra { --barra-alto: 64px; }

/* ── La placa de latón ──────────────────────────────────────────────────────────────────────────────────── */
.placa {
  --p-alto: auto;
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 16px 34px 14px; border-radius: 6px; text-align: center; color: #3c2c0e;
  background:
    linear-gradient(115deg, rgb(255 255 255 / 0) 30%, rgb(255 248 220 / 0.55) 45%, rgb(255 255 255 / 0) 60%),
    linear-gradient(180deg, #ecd39a 0%, #c9a14f 48%, #b08436 52%, #d8b46a 100%);
  box-shadow: inset 0 1px 0 rgb(255 250 230 / 0.9), inset 0 -2px 0 rgb(90 64 20 / 0.45), inset 0 0 0 1px rgb(110 80 25 / 0.5), 0 2px 0 rgb(80 58 20 / 0.35), 0 10px 18px -10px rgb(60 40 10 / 0.6);
  font-family: var(--f-titulos);
  text-shadow: 0 1px 0 rgb(255 245 210 / 0.75), 0 -1px 0 rgb(90 64 20 / 0.35);
}
.placa::before, .placa::after {
  content: ''; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff4d0 0 18%, #b48a3c 45%, #6f5420 100%);
  box-shadow: inset 0 0 0 1px rgb(80 58 20 / 0.5);
}
.placa::before { left: 11px; }
.placa::after { right: 11px; }
.placa .placa-sup { font-family: var(--f-datos); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.85; }
.placa .placa-nombre { font-size: clamp(1.15rem, 0.9rem + 1vw, 1.55rem); line-height: 1.15; }
.placa .placa-inf { font-size: 0.82rem; font-family: var(--f-texto); font-weight: 650; letter-spacing: 0.02em; opacity: 0.9; }
.placa.ancha { display: flex; width: 100%; }
.placa.mini { padding: 10px 26px 9px; }
.placa.mini .placa-nombre { font-size: 1.02rem; }
.placa.mini::before { left: 9px; } .placa.mini::after { right: 9px; }

/* ── El plano de la finca (fachada planta a planta) ────────────────────────────────────────────────────── */
.edificios { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-end; justify-content: center; }
.edificio { --cols: 4; position: relative; flex: 1 1 280px; max-width: 560px; margin: 0; }
.edificio .tejado {
  height: 26px; margin: 0 -10px; background: linear-gradient(180deg, #7b3f2a, #5d2f1f);
  clip-path: polygon(3% 100%, 10% 0, 90% 0, 97% 100%); border-radius: 4px 4px 0 0;
}
:root[data-tema='oscuro'] .edificio .tejado { background: linear-gradient(180deg, #3a2219, #2a1811); }
@media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .edificio .tejado { background: linear-gradient(180deg, #3a2219, #2a1811); } }
.edificio .cornisa { height: 8px; margin: 0 -6px; background: #e9e1d2; box-shadow: 0 2px 0 rgb(0 0 0 / 0.12); border-radius: 2px; }
:root[data-tema='oscuro'] .edificio .cornisa { background: #3b3a37; }
@media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .edificio .cornisa { background: #3b3a37; } }
.edificio .fachada {
  padding: 10px 10px 0;
  background-color: var(--ladrillo);
  background-image:
    repeating-linear-gradient(0deg, var(--ladrillo-junta) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(90deg, transparent 0 23px, color-mix(in oklab, var(--ladrillo-junta) 70%, transparent) 23px 24px);
  border-left: 3px solid color-mix(in oklab, var(--ladrillo-junta) 80%, #000);
  border-right: 3px solid color-mix(in oklab, var(--ladrillo-junta) 80%, #000);
}
.edificio .planta { display: grid; grid-template-columns: 2.6rem repeat(var(--cols), minmax(0, 1fr)); gap: 8px; align-items: stretch; padding-bottom: 10px; }
.edificio .rotulo-planta {
  align-self: center; justify-self: start; font-family: var(--f-datos); font-size: 0.72rem; font-weight: 700; color: #fff9ee;
  background: rgb(40 25 15 / 0.45); padding: 2px 6px; border-radius: 4px; white-space: nowrap;
}
.edificio .piso {
  position: relative; min-height: 64px; padding: 6px 4px 12px; border: 3px solid #f4efe4; border-radius: 3px 3px 2px 2px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.35), transparent 40%), var(--cristal);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12), 0 3px 0 rgb(0 0 0 / 0.18);
  color: #1c1914; font: inherit; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0;
  transition: transform var(--rapido) var(--curva), box-shadow var(--rapido);
}
:root[data-tema='oscuro'] .edificio .piso { border-color: #4b4a46; color: #f3efe6; }
@media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .edificio .piso { border-color: #4b4a46; color: #f3efe6; } }
.edificio .piso::after { /* el alféizar */
  content: ''; position: absolute; left: -6px; right: -6px; bottom: -8px; height: 5px; border-radius: 2px; background: #ece5d6; box-shadow: 0 2px 0 rgb(0 0 0 / 0.2);
}
:root[data-tema='oscuro'] .edificio .piso::after { background: #4b4a46; }
@media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .edificio .piso::after { background: #4b4a46; } }
.edificio .piso:hover { transform: translateY(-2px); }
.edificio .piso:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
.edificio .piso[aria-pressed='true'] { box-shadow: 0 0 0 3px var(--acento), 0 6px 14px -4px rgb(0 0 0 / 0.4); transform: translateY(-2px); }
.edificio .piso .letra { font-family: var(--f-titulos); font-size: 1.25rem; line-height: 1; }
.edificio .piso .estado-piso { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.edificio .piso.corriente { background: linear-gradient(180deg, rgb(255 255 255 / 0.3), transparent 40%), var(--piso-corriente); }
.edificio .piso.pendiente { background: linear-gradient(180deg, rgb(255 255 255 / 0.3), transparent 40%), var(--piso-pendiente); }
.edificio .piso.incidencia { background: linear-gradient(180deg, rgb(255 255 255 / 0.3), transparent 40%), var(--piso-incidencia); }
.edificio .piso.mia { background: radial-gradient(ellipse at 50% 30%, #fff6d6 0%, var(--cristal-luz) 70%); color: #2b2000; }
.edificio .piso.mia.pendiente { box-shadow: inset 0 0 0 3px #c98a14, 0 3px 0 rgb(0 0 0 / 0.18); }
.edificio .piso.vacia { cursor: default; opacity: 0.55; }
.edificio .piso .marca-piso { position: absolute; top: 3px; right: 4px; width: 16px; height: 16px; }
.edificio .bajos { display: grid; grid-template-columns: 2.6rem repeat(var(--cols-bajo, var(--cols)), minmax(0, 1fr)); gap: 8px; padding: 0 0 0; align-items: end; }
.edificio .bajos .piso { min-height: 74px; border-color: #3d3a35; border-width: 4px 4px 0; border-radius: 3px 3px 0 0; padding-top: 18px; }
.edificio .bajos .piso::after { display: none; }
.edificio .bajos .piso.local::before { /* el toldo */
  content: ''; position: absolute; left: -5px; right: -5px; top: -4px; height: 14px; border-radius: 2px 2px 6px 6px;
  background: repeating-linear-gradient(90deg, #a83a2e 0 10px, #f1e6d2 10px 20px); box-shadow: 0 2px 0 rgb(0 0 0 / 0.2);
}
.edificio .portal-puerta {
  position: relative; align-self: end; min-height: 84px; border-radius: 40px 40px 0 0; border: 4px solid #3d3a35; border-bottom: 0;
  background: linear-gradient(90deg, #4a3322, #5d412b 50%, #4a3322); display: grid; place-items: start center; padding-top: 12px;
}
.edificio .portal-puerta span {
  font-family: var(--f-titulos); font-size: 0.85rem; color: #3c2c0e; padding: 1px 8px; border-radius: 3px;
  background: linear-gradient(180deg, #ecd39a, #c9a14f); box-shadow: inset 0 0 0 1px rgb(110 80 25 / 0.6);
}
.edificio .portal-puerta::after { content: ''; position: absolute; right: 22%; top: 55%; width: 6px; height: 6px; border-radius: 50%; background: #e1c27a; }
.edificio .acera { height: 12px; margin: 0 -14px; background: repeating-linear-gradient(90deg, #a9a49a 0 30px, #9b968b 30px 31px); border-top: 3px solid #8e897e; border-radius: 0 0 4px 4px; }
:root[data-tema='oscuro'] .edificio .acera { background: repeating-linear-gradient(90deg, #3a3935 0 30px, #333230 30px 31px); border-top-color: #2b2a27; }
@media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .edificio .acera { background: repeating-linear-gradient(90deg, #3a3935 0 30px, #333230 30px 31px); border-top-color: #2b2a27; } }
.edificio .sotano { margin-top: 10px; padding: 10px; border-radius: 6px; background: repeating-linear-gradient(135deg, var(--hundido) 0 8px, var(--superficie-2) 8px 16px); border: 1px dashed var(--linea-fuerte); }
.edificio .sotano .planta { padding-bottom: 6px; }
.edificio .sotano .rotulo-planta { background: var(--texto-2); color: var(--fondo); }
.edificio .sotano .piso { min-height: 48px; border-color: var(--linea-fuerte); background: var(--superficie); color: var(--texto); }
.edificio .sotano .piso::after { display: none; }
.edificio figcaption { margin-top: 10px; text-align: center; font-family: var(--f-titulos); font-size: 1.05rem; }
.leyenda { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-top: 14px; font-size: 0.86rem; color: var(--texto-2); }
.leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.leyenda i { width: 16px; height: 16px; border-radius: 3px; border: 2px solid #f4efe4; box-shadow: 0 0 0 1px var(--linea-fuerte); display: inline-block; }
.leyenda i.corriente { background: var(--piso-corriente); }
.leyenda i.pendiente { background: var(--piso-pendiente); }
.leyenda i.incidencia { background: var(--piso-incidencia); }
.leyenda i.mia { background: var(--cristal-luz); }
.leyenda i.neutro { background: var(--cristal); }
@media (max-width: 420px) {
  .edificio .planta, .edificio .bajos { grid-template-columns: 2.1rem repeat(var(--cols), minmax(0, 1fr)); gap: 6px; }
  .edificio .bajos { grid-template-columns: 2.1rem repeat(var(--cols-bajo, var(--cols)), minmax(0, 1fr)); }
  .edificio .piso { min-height: 56px; }
  .edificio .piso .estado-piso { display: none; }
}

/* ── El tablón de corcho ────────────────────────────────────────────────────────────────────────────────── */
.corcho {
  position: relative; padding: clamp(18px, 3vw, 30px); border-radius: 10px;
  background-color: var(--corcho);
  background-image:
    radial-gradient(circle at 20% 30%, var(--corcho-punto) 0 1px, transparent 1.6px),
    radial-gradient(circle at 70% 80%, var(--corcho-punto) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 45% 55%, rgb(255 235 200 / 0.35) 0 1px, transparent 1.6px),
    radial-gradient(circle at 85% 15%, var(--corcho-punto) 0 0.8px, transparent 1.4px);
  background-size: 13px 11px, 17px 19px, 9px 13px, 23px 17px;
  border: 12px solid var(--marco-madera);
  box-shadow: inset 0 2px 8px rgb(0 0 0 / 0.35), 0 1px 0 rgb(255 255 255 / 0.4), 0 12px 26px -14px rgb(40 25 10 / 0.6);
  border-image: linear-gradient(135deg, #7c5638, #5a3c26 40%, #6f4c31 60%, #4e331f) 12;
}
.corcho .notas { display: grid; gap: 22px 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); align-items: start; }
.nota {
  --giro: -1.2deg; --pin: #c43a2f;
  position: relative; padding: 22px 18px 16px; background: var(--papel); color: var(--tinta); border-radius: 2px;
  box-shadow: var(--sombra-papel); transform: rotate(var(--giro)); transition: transform var(--medio) var(--curva);
  font-size: 0.98rem; line-height: 1.5; min-width: 0; overflow-wrap: anywhere;
}
.nota:nth-child(3n + 2) { --giro: 1.1deg; --pin: #2f62b3; background: #fdf9e4; }
.nota:nth-child(3n) { --giro: -0.4deg; --pin: #2f8a57; background: #f6faf8; }
.nota:nth-child(4n) { --giro: 1.6deg; --pin: #b58b2f; }
.nota.fijada { --pin: #c43a2f; background: #fff7d6; }
.nota:hover { transform: rotate(0deg) translateY(-2px); }
.nota::before { /* la chincheta */
  content: ''; position: absolute; top: -9px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / 0.85) 0 12%, var(--pin) 30%, color-mix(in oklab, var(--pin) 70%, #000) 100%);
  box-shadow: 0 3px 4px rgb(0 0 0 / 0.35);
}
.nota.fijada::before { width: 24px; height: 24px; margin-left: -12px; top: -11px; }
.nota h3 { font-size: 1.12rem; margin: 0 0 6px; color: var(--tinta); }
.nota p { margin: 0 0 8px; white-space: pre-line; }
.nota .pie-nota { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin-top: 10px; font-size: 0.78rem; color: #5b5346; font-family: var(--f-datos); }
.nota .acciones-nota { display: flex; gap: 6px; margin-top: 8px; }
.nota .acciones-nota .boton { --b-fondo: transparent; --b-texto: #3a342b; --b-borde: #cfc6b4; --b-hover: rgb(0 0 0 / 0.05); min-height: 38px; font-size: 0.8rem; box-shadow: none; }
.nota .etiqueta { background: #f1e9d6; color: #5b4a20; border-color: #e0d3b5; }
.corcho .vacio { border-color: rgb(255 255 255 / 0.5); background: rgb(255 253 245 / 0.75); color: #3a342b; }
.corcho .vacio h3 { color: #1f1c17; }
.corcho .vacio > svg { color: #6f5420; }

/* ── Los buzones de latón ───────────────────────────────────────────────────────────────────────────────── */
.buzones {
  --cols: 4;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px; padding: 14px;
  background: linear-gradient(180deg, #5f4330, #4b3422); border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgb(0 0 0 / 0.25), 0 12px 24px -14px rgb(30 18 8 / 0.7);
}
.buzon {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 6px 12px; min-width: 0;
  border: 0; border-radius: 4px; cursor: pointer; font: inherit; color: inherit;
  background: linear-gradient(180deg, #7a5a40, #684a33); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), inset 0 -2px 0 rgb(0 0 0 / 0.25);
  transition: transform var(--rapido) var(--curva), filter var(--rapido);
}
.buzon:hover { filter: brightness(1.08); }
.buzon:focus-visible { outline: 3px solid var(--laton-claro); outline-offset: 2px; }
.buzon[aria-pressed='true'] { box-shadow: 0 0 0 3px var(--laton-claro), inset 0 -2px 0 rgb(0 0 0 / 0.25); }
.buzon .ranura { width: 70%; height: 6px; border-radius: 3px; background: #1d140c; box-shadow: inset 0 2px 2px rgb(0 0 0 / 0.7), 0 1px 0 rgb(255 255 255 / 0.15); }
.buzon .chapa {
  min-width: 70%; padding: 3px 6px; border-radius: 2px; color: #3c2c0e; font-family: var(--f-titulos); font-size: 0.9rem; line-height: 1.2; text-align: center;
  background: linear-gradient(180deg, #f0d9a3, #c9a14f 55%, #b58a3e); box-shadow: inset 0 0 0 1px rgb(110 80 25 / 0.6); text-shadow: 0 1px 0 rgb(255 245 210 / 0.7);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.buzon .cerradura { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #1d140c 0 25%, #c9a14f 30% 100%); }
.buzon .sobre { position: absolute; top: 4px; right: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--laton-claro); box-shadow: 0 0 0 2px #4b3422; }
.buzon .sobre.debe { background: #f2a33a; }
@media (max-width: 480px) { .buzones { gap: 6px; padding: 10px; } .buzon .chapa { font-size: 0.78rem; } }

/* ── Panel de la comunidad ──────────────────────────────────────────────────────────────────────────────── */
.marco-c { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.marco-c > .lateral { position: sticky; top: calc(var(--barra-alto) + 16px); height: auto; max-height: calc(100dvh - var(--barra-alto) - 32px); border-right: 0; padding: 0; background: none; }
.marco-c > .lateral .placa { margin-bottom: 14px; width: 100%; }
.marco-c > .lateral .grupo { padding-left: 12px; }
.marco-c > .lateral a svg { width: 22px; height: 22px; }
.marco-c > .lateral .contador { margin-left: auto; }
.contenido-c { min-width: 0; }
@media (max-width: 900px) { .marco-c { grid-template-columns: minmax(0, 1fr); } }
.cabeza-c { display: none; margin-bottom: 16px; }
@media (max-width: 900px) { .cabeza-c { display: block; } }
.cabeza-c .placa { width: 100%; }
.pestanas { --pestanas-alto: 70px; }
.pestanas a { gap: 4px; }
.pestanas a svg { width: 24px; height: 24px; }
.pestanas a[aria-current='page'] { color: var(--acento-texto); font-weight: 800; }
.pestanas a[aria-current='page'] svg { stroke-width: 2.3; }

.cabecera h1 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); }
.cabecera .antetitulo { margin-bottom: 4px; }
.solapas a, .solapas button { font-size: 0.95rem; padding: 12px 14px; }

/* Resumen del portal */
.rejilla-portal { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 1100px) { .rejilla-portal { grid-template-columns: minmax(0, 1fr); } }
.tarjeta.saldo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.tarjeta.saldo .cifra .valor { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }
.tarjeta.saldo.debe { border-color: color-mix(in oklab, var(--atencion) 45%, var(--linea)); background: color-mix(in oklab, var(--atencion-suave) 55%, var(--superficie)); }
.pasos-inicio { counter-reset: paso; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pasos-inicio li { counter-increment: paso; display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radio); background: var(--superficie-2); }
.pasos-inicio li::before { content: counter(paso); flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--acento); color: var(--sobre-acento); font-family: var(--f-titulos); }
.pasos-inicio li.hecho { opacity: 0.65; }
.pasos-inicio li.hecho::before { content: '✓'; background: var(--ok); }
.pasos-inicio li .crece p { margin: 2px 0 0; font-size: 0.9rem; color: var(--texto-2); }
.telefonos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.telefono-tarjeta { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--superficie); text-decoration: none; color: var(--texto); min-height: 64px; }
.telefono-tarjeta:hover { background: var(--superficie-2); text-decoration: none; }
.telefono-tarjeta > svg { width: 28px; height: 28px; color: var(--acento-texto); flex-shrink: 0; }
.telefono-tarjeta strong { display: block; }
.telefono-tarjeta span { font-family: var(--f-datos); font-size: 0.95rem; color: var(--texto-2); }
.telefono-tarjeta.urgente > svg { color: var(--error); }

/* Estados con palabra y color */
.estado { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.estado::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.estado.pagado, .estado.resuelta, .estado.aprobado, .estado.corriente, .estado.cerrada { background: var(--ok-suave); color: var(--ok); }
.estado.pendiente, .estado.avisado, .estado.arreglo, .estado.convocada, .estado.en_curso, .estado.celebrada { background: var(--atencion-suave); color: var(--atencion); }
.estado.devuelto, .estado.abierta, .estado.rechazado, .estado.urgente, .estado.vencido, .estado.cancelada { background: var(--error-suave); color: var(--error); }
.estado.borrador, .estado.informado, .estado.neutro { background: var(--superficie-2); color: var(--texto-2); border-color: var(--linea); }

/* Ficha de un piso (en el plano) */
.ficha-piso { display: grid; gap: 4px; }
.ficha-piso .titulo-ficha { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ficha-piso .titulo-ficha h3 { margin: 0; font-size: 1.5rem; }
.ficha-piso dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 10px 0 0; }
.ficha-piso dt { color: var(--texto-3); font-size: 0.86rem; }
.ficha-piso dd { margin: 0; font-weight: 600; }

/* Cuentas */
.cifras-c { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.cifras-c .tarjeta { padding: 16px 18px; }
.cifras-c .cifra .valor { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.cifras-c .nota-cifra { font-size: 0.82rem; color: var(--texto-3); margin-top: 4px; }
.partida-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--linea); }
.partida-fila:first-child { border-top: 0; }
.partida-fila .progreso { grid-column: 1 / -1; height: 10px; }
.partida-fila .num { font-size: 0.9rem; color: var(--texto-2); }
.progreso.pasado > span { background: var(--error); }
.editor-partidas { display: grid; gap: 8px; }
.editor-partidas .fila-partida { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem auto auto; gap: 8px; align-items: center; }
.editor-partidas .fila-partida input { min-height: 48px; padding: 8px 12px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--superficie); width: 100%; font-size: max(16px, 1rem); }
.editor-partidas .fila-partida input.num { text-align: right; font-family: var(--f-datos); }
.editor-partidas .fila-partida .casilla { font-size: 0.8rem; }
@media (max-width: 600px) {
  .editor-partidas .fila-partida { grid-template-columns: minmax(0, 1fr) 7.5rem auto; }
  .editor-partidas .fila-partida .casilla { grid-column: 1 / 3; }
}
.seleccion-barra { position: sticky; bottom: 12px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radio-l); background: var(--texto); color: var(--fondo); box-shadow: var(--sombra-3); margin-top: 14px; }
.seleccion-barra .boton { --b-fondo: var(--fondo); --b-texto: var(--texto); --b-borde: transparent; }
.con-pestanas .seleccion-barra { bottom: calc(var(--pestanas-alto) + 12px + env(safe-area-inset-bottom)); }
.tabla td .estado { font-size: 0.75rem; }
.tabla input[type='checkbox'] { width: 22px; height: 22px; }
.fila-recibo.vencido td:first-child { box-shadow: inset 3px 0 0 var(--error); }

/* Coeficientes: la suma que tiene que dar 100 */
.suma-coef { position: sticky; top: calc(var(--barra-alto) + 8px); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: var(--radio-l); border: 2px solid var(--linea-fuerte); background: var(--superficie); box-shadow: var(--sombra-2); margin-bottom: 14px; }
.suma-coef .num { font-size: 1.35rem; font-weight: 700; }
.suma-coef.cuadra { border-color: var(--ok); background: color-mix(in oklab, var(--ok-suave) 60%, var(--superficie)); }
.suma-coef.descuadra { border-color: var(--atencion); background: color-mix(in oklab, var(--atencion-suave) 60%, var(--superficie)); }
.coefs { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.coefs label { display: grid; grid-template-columns: 1fr 6.6rem; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radio); background: var(--superficie-2); font-weight: 650; }
.coefs input { min-height: 46px; padding: 6px 10px; border: 1px solid var(--linea-fuerte); border-radius: 10px; background: var(--superficie); text-align: right; font-family: var(--f-datos); font-size: max(16px, 1rem); width: 100%; }

/* Asistente de alta */
.asistente { max-width: 980px; margin-inline: auto; }
.asistente .pasos li { font-size: 0.85rem; }
.generador { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .generador { grid-template-columns: minmax(0, 1fr); } }
.titulo-campo { font-weight: 650; font-size: 0.95rem; }
.contador-campo { display: flex; align-items: center; gap: 8px; }
.contador-campo .boton { width: 48px; padding: 0; flex-shrink: 0; }
.contador-campo output { min-width: 3ch; text-align: center; font-family: var(--f-datos); font-size: 1.3rem; font-weight: 700; }
.pie-asistente { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--linea); }
.opcion-grande { display: grid; gap: 10px; }
.opcion-grande label { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 2px solid var(--linea); border-radius: var(--radio-l); background: var(--superficie); cursor: pointer; }
.opcion-grande label:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.opcion-grande input { margin-top: 4px; width: 22px; height: 22px; accent-color: var(--acento); flex-shrink: 0; }
.opcion-grande strong { display: block; }
.opcion-grande span span { display: block; font-size: 0.88rem; color: var(--texto-2); }

/* Juntas: votación */
.punto { border: 1px solid var(--linea); border-radius: var(--radio-l); background: var(--superficie); overflow: hidden; }
.punto + .punto { margin-top: 14px; }
.punto > header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 14px; padding: 16px 18px; }
.punto > header h3 { margin: 0; font-size: 1.2rem; }
.punto > header .num-punto { font-family: var(--f-titulos); color: var(--laton-oscuro); margin-right: 6px; }
.punto .cuerpo-punto { padding: 0 18px 18px; }
.mayoria-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: var(--acento-suave); color: var(--acento-texto); font-weight: 700; font-size: 0.8rem; white-space: nowrap; }
.resultado { margin-top: 12px; padding: 14px 16px; border-radius: var(--radio); border-left: 5px solid var(--linea-fuerte); background: var(--superficie-2); font-weight: 600; }
.resultado.aprobado { border-left-color: var(--ok); background: color-mix(in oklab, var(--ok-suave) 70%, var(--superficie)); }
.resultado.rechazado { border-left-color: var(--error); background: color-mix(in oklab, var(--error-suave) 60%, var(--superficie)); }
.resultado.pendiente { border-left-color: var(--atencion); background: color-mix(in oklab, var(--atencion-suave) 70%, var(--superficie)); }
.resultado .barras-voto { display: grid; gap: 6px; margin-top: 10px; font-weight: 500; font-size: 0.88rem; }
.barra-voto { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 4.5rem; align-items: center; gap: 10px; }
.barra-voto .pista { position: relative; height: 12px; border-radius: 99px; background: var(--hundido); overflow: hidden; }
.barra-voto .pista span { position: absolute; inset: 0 auto 0 0; width: var(--v, 0%); border-radius: inherit; background: var(--texto-3); transition: width var(--lento) var(--curva); }
.barra-voto.si .pista span { background: var(--ok); }
.barra-voto.no .pista span { background: var(--error); }
.barra-voto .pista i { position: absolute; top: -3px; bottom: -3px; left: var(--umbral); width: 2px; background: var(--texto); }
.barra-voto .num { text-align: right; }
.votantes { display: grid; gap: 6px; margin-top: 12px; }
.votante { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 8px 10px; border-radius: var(--radio); background: var(--superficie-2); }
.votante .quien strong { display: block; font-size: 0.95rem; }
.votante .quien span { font-size: 0.8rem; color: var(--texto-3); }
.votante .segmentado button { min-width: 44px; min-height: 40px; padding: 6px 10px; }
.votante .segmentado button[aria-pressed='true'].si { background: var(--ok); color: #fff; }
.votante .segmentado button[aria-pressed='true'].no { background: var(--error); color: #fff; }
@media (max-width: 560px) { .votante { grid-template-columns: minmax(0, 1fr); } }
.asistencia-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--linea); }
.asistencia-fila:first-child { border-top: 0; }
.asistencia-fila .deuda { color: var(--error); font-weight: 700; font-size: 0.85rem; }
@media (max-width: 640px) { .asistencia-fila { grid-template-columns: minmax(0, 1fr); } }
.linea-junta { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.linea-junta li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; background: var(--superficie-2); color: var(--texto-3); }
.linea-junta li.hecho { background: var(--ok-suave); color: var(--ok); }
.linea-junta li.ahora { background: var(--acento); color: var(--sobre-acento); }
.firma { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radio); border: 1px dashed var(--linea-fuerte); }
.firma.firmada { border-style: solid; border-color: var(--ok); background: var(--ok-suave); }
.firma > svg { width: 28px; height: 28px; }
textarea.acta-texto { width: 100%; min-height: 60vh; padding: 18px; border-radius: var(--radio); border: 1px solid var(--linea-fuerte); background: var(--papel); color: var(--tinta); font-family: var(--f-datos); font-size: 0.92rem; line-height: 1.6; }

/* Incidencias */
.incidencia-tarjeta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.incidencia-tarjeta .miniatura { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--superficie-2); display: grid; place-items: center; color: var(--texto-3); }
.incidencia-tarjeta .miniatura svg { width: 30px; height: 30px; }
.incidencia-tarjeta h3 { font-size: 1.12rem; margin: 0 0 4px; }
.incidencia-tarjeta .meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 0.85rem; color: var(--texto-3); }
.boton.tambien[aria-pressed='true'] { --b-fondo: var(--acento); --b-texto: var(--sobre-acento); --b-borde: transparent; }
.foto-incidencia { max-height: 420px; width: 100%; object-fit: contain; border-radius: var(--radio-l); background: var(--hundido); }
.comentario { padding: 12px 14px; border-radius: var(--radio); background: var(--superficie-2); }
.comentario.mio { background: var(--acento-suave); }
.comentario .quien { font-weight: 700; font-size: 0.9rem; }
.comentario time { font-family: var(--f-datos); font-size: 0.78rem; color: var(--texto-3); margin-left: 6px; }
.comentario p { margin: 4px 0 0; white-space: pre-line; }

/* Zonas comunes */
.franjas { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 110px), 1fr)); }
.franja { min-height: 52px; border-radius: var(--radio); border: 1px solid var(--linea-fuerte); background: var(--superficie); font: inherit; font-family: var(--f-datos); font-weight: 700; cursor: pointer; display: grid; place-items: center; line-height: 1.2; padding: 4px; }
.franja small { display: block; font-family: var(--f-texto); font-weight: 600; font-size: 0.7rem; color: var(--texto-3); }
.franja:hover:not(:disabled) { border-color: var(--acento); background: var(--acento-suave); }
.franja.ocupada { background: var(--superficie-2); color: var(--texto-3); cursor: not-allowed; }
.franja.mia { background: var(--acento); color: var(--sobre-acento); border-color: transparent; }
.franja.mia small { color: inherit; }
.dias-zona { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.dias-zona button { flex: 0 0 auto; min-width: 74px; min-height: 60px; border-radius: var(--radio); border: 1px solid var(--linea-fuerte); background: var(--superficie); font: inherit; cursor: pointer; line-height: 1.2; }
.dias-zona button[aria-pressed='true'] { background: var(--acento); color: var(--sobre-acento); border-color: transparent; }
.dias-zona button small { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Portada ────────────────────────────────────────────────────────────────────────────────────────────── */
.portada { display: grid; gap: clamp(56px, 8vw, 96px); }
.heroe { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; padding-top: clamp(8px, 2vw, 24px); }
@media (max-width: 940px) { .heroe { grid-template-columns: minmax(0, 1fr); } }
.heroe h1 { font-size: clamp(2.3rem, 1.5rem + 3.4vw, 3.9rem); line-height: 1.04; margin-bottom: 18px; }
.heroe h1 em { font-style: normal; color: var(--acento-texto); }
.heroe .entradilla { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem); }
.heroe .acciones-heroe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.heroe .letra-pequena { margin-top: 14px; font-size: 0.9rem; color: var(--texto-3); }
.demo-edificio { display: grid; gap: 14px; justify-items: center; }
.demo-edificio .segmentado { max-width: 100%; }
.demo-edificio .edificio { width: 100%; max-width: 520px; }
.demo-ficha { width: 100%; max-width: 520px; min-height: 150px; }
.demo-aviso { font-size: 0.85rem; color: var(--texto-3); text-align: center; max-width: 52ch; }
.seccion-portada > h2 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); max-width: 26ch; }
.seccion-portada > .entradilla { margin-bottom: 26px; }
.portal-demo { display: grid; gap: 26px; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 940px) { .portal-demo { grid-template-columns: minmax(0, 1fr); } }
.junta-demo { display: grid; gap: 26px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 940px) { .junta-demo { grid-template-columns: minmax(0, 1fr); } }
.como-se-empieza { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: paso; border-top: 1px solid var(--linea); }
.como-se-empieza li { counter-increment: paso; display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--linea); }
.como-se-empieza li::before { content: counter(paso, decimal-leading-zero); font-family: var(--f-titulos); font-size: 2rem; color: var(--laton-oscuro); line-height: 1; }
:root[data-tema='oscuro'] .como-se-empieza li::before { color: var(--laton); }
@media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .como-se-empieza li::before { color: var(--laton); } }
.como-se-empieza h3 { font-size: 1.25rem; margin: 0 0 4px; }
.como-se-empieza p { margin: 0; color: var(--texto-2); }
.cierre-portada { text-align: center; display: grid; justify-items: center; gap: 14px; padding: clamp(28px, 5vw, 56px) 16px; border-radius: var(--radio-l); background: var(--superficie-2); }
.cierre-portada h2 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
.chuleta { width: 100%; }
.chuleta td:first-child { font-weight: 600; }
.chuleta .mayoria-chip { font-size: 0.78rem; }

/* ── El papel: convocatorias, actas, carteles y papelitos ───────────────────────────────────────────────── */
.barra-documento { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.documento {
  /* el papel es siempre claro, también en modo oscuro: sus letras y líneas, también */
  --texto: var(--tinta); --texto-2: #4b4439; --texto-3: #6a6252; --linea: #d8cfbd; --linea-fuerte: #b9ad96;
  --superficie: var(--papel); --superficie-2: #f3ecdc; --hundido: #e9e1cf; --acento-texto: #1c4583;
  --ok: #1d7047; --ok-suave: #dff1e5; --atencion: #8f5a07; --atencion-suave: #f9ebcf; --error: #ac2f27; --error-suave: #f8e1dd;
  color-scheme: light;
  max-width: 820px; margin-inline: auto; padding: clamp(24px, 5vw, 64px); background: var(--papel); color: var(--tinta);
  border-radius: 4px; box-shadow: var(--sombra-papel); font-size: 1rem; line-height: 1.6;
}
.documento .tabla th { background: transparent; }
.documento .tabla tbody tr:hover { background: none; }
.documento .tabla { margin-bottom: 8px; }
.editor-partidas input[aria-invalid] { border-color: var(--error); box-shadow: 0 0 0 2px var(--error-suave); }
.coefs input[aria-invalid='true'] { border-color: var(--error); box-shadow: 0 0 0 2px var(--error-suave); }
.documento h1, .documento h2, .documento h3 { color: var(--tinta); }
.documento h1 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); text-align: center; margin-bottom: 4px; }
.documento .sub { text-align: center; color: #4b4439; margin-bottom: 26px; }
.documento .membrete { display: flex; justify-content: center; margin-bottom: 22px; }
.documento ol, .documento ul { padding-left: 1.4em; }
.documento li { margin-bottom: 6px; }
.documento .recuadro { border: 1.5px solid #3b342a; padding: 14px 18px; margin: 20px 0; border-radius: 2px; }
.documento .recuadro h3 { font-size: 1rem; font-family: var(--f-texto); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.documento .firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px; text-align: center; }
.documento .firmas div { padding-top: 54px; border-bottom: 1px solid #3b342a; }
.documento .firmas small { display: block; margin-top: 6px; }
.documento .recorte { margin-top: 36px; padding-top: 22px; border-top: 2px dashed #6a6252; position: relative; }
.documento .recorte::before { content: '✂'; position: absolute; top: -15px; left: 10px; background: var(--papel); padding: 0 6px; font-size: 1.1rem; color: #4b4439; }
.documento .linea-rellenar { display: inline-block; min-width: 14em; border-bottom: 1px solid #3b342a; }
.documento .acta-cuerpo { white-space: pre-wrap; font-family: var(--f-texto); }
.documento .aviso-legal { font-size: 0.8rem; color: #4b4439; border-top: 1px solid #c9c0ad; margin-top: 30px; padding-top: 12px; }
.documento .etiqueta-sello { display: inline-block; padding: 4px 12px; border: 2px solid #1d7047; color: #1d7047; border-radius: 4px; font-weight: 800; letter-spacing: 0.05em; transform: rotate(-3deg); }
.cartel { text-align: center; }
.cartel h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.3rem); line-height: 1.05; }
.cartel .qr { margin: 22px auto; border: 0; padding: 10px; }
.cartel .qr svg { width: min(62vw, 300px); height: min(62vw, 300px); }
.cartel .direccion-web { font-family: var(--f-datos); font-size: 1.3rem; font-weight: 700; }
.papelitos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; max-width: 820px; margin-inline: auto; }
.papelito { padding: 18px 20px; border: 1px dashed #8a8170; background: var(--papel); color: var(--tinta); break-inside: avoid; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.papelito .codigo { font-family: var(--f-datos); font-size: 1.45rem; font-weight: 800; letter-spacing: 0.08em; }
.papelito .qr { padding: 4px; border: 0; }
.papelito .qr svg { width: 92px; height: 92px; }
.papelito .para { font-family: var(--f-titulos); font-size: 1.15rem; }
.papelito p { margin: 4px 0; font-size: 0.85rem; }
@media (max-width: 640px) { .papelitos { grid-template-columns: minmax(0, 1fr); } }
.recibo-doc .importe-grande { font-family: var(--f-datos); font-size: 2rem; font-weight: 800; }

@media print {
  html { font-size: 100%; }
  body { background: #fff !important; }
  .documento { box-shadow: none; padding: 0; max-width: none; background: #fff; }
  .barra-documento, .cabeza-c, .marco-c > .lateral, .seleccion-barra { display: none !important; }
  .marco-c { display: block; }
  .papelito { background: #fff; }
  .documento .recorte::before { background: #fff; }
  .salto { break-before: page; }
  .placa { box-shadow: none; border: 1px solid #6f5420; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── Movimiento ─────────────────────────────────────────────────────────────────────────────────────────── */
@keyframes colgar { from { opacity: 0; transform: translateY(-10px) rotate(calc(var(--giro) * 3)); } }
.corcho .nota { animation: colgar var(--lento) var(--curva-salto) both; }
.corcho .nota:nth-child(2) { animation-delay: 60ms; }
.corcho .nota:nth-child(3) { animation-delay: 120ms; }
.corcho .nota:nth-child(4) { animation-delay: 180ms; }
.corcho .nota:nth-child(5) { animation-delay: 240ms; }
@keyframes encender { from { filter: brightness(0.75); } }
.edificio .piso.mia { animation: encender 600ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .nota, .edificio .piso { transform: none !important; }
}