/* Portal de Shevet Ahim — estilos comunes de todas las páginas (núcleo y secciones).
   Dirección B+ ("Mesa de la Junta" con firma editorial), aprobada por Moisés el 23-oct-2026:
   marino + dorado del escudo, papel tibio, Caslon solo en titulares y fechas, Atkinson Hyperlegible
   para leer, doble filete dorado bajo la banda, estados con punto + palabra. Un solo acento.
   Sin estilos en línea: la CSP no los permite. Fuentes servidas desde este mismo sitio (font-src 'self'). */

@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fuentes/atkinson-hyperlegible-next.woff2) format('woff2'); }
@font-face { font-family: 'Libre Caslon Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fuentes/libre-caslon-display.woff2) format('woff2'); }
@font-face { font-family: 'Libre Caslon Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fuentes/libre-caslon-text-400.woff2) format('woff2'); }
@font-face { font-family: 'Libre Caslon Text'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fuentes/libre-caslon-text-700.woff2) format('woff2'); }
@font-face { font-family: 'Frank Ruhl Libre'; font-style: normal; font-weight: 500 600; font-display: swap; src: url(/fuentes/frank-ruhl-libre-hebreo.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }

/* ===================== Tokens B+ (los mismos de diseno/bplus/tokens.css) ===================== */
:root {
  color-scheme: light;
  --marca-marino: #1F3354; --marca-oro: #9E915E; --marca-oro-claro: #D9C88F;
  --c-papel: #F9F7F2; --c-hoja: #FFFFFF; --c-hundido: #F1EEE6;
  --c-linea: #E2DCCF; --c-linea-suave: #EDE9E0; --c-linea-fuerte: #C9C1AF;
  --c-tinta: #141E2D; --c-tinta-2: #3B4453; --c-tinta-3: #5A6371;
  --c-acento: #1F3354; --c-acento-hondo: #15253F; --c-acento-texto: #FFFFFF; --c-acento-suave: #E9EDF4; --c-acento-borde: #D3DBE8; --c-enlace: #1F3354;
  --c-oro-texto: #6F6235; --c-oro-suave: #F3EEDD; --c-oro-filete: #9E915E;
  --c-banda: #1F3354; --c-banda-texto: #F4F1E8; --c-banda-oro: #D9C88F; --c-banda-tenue: #B9C2D2;
  --c-rojo: #A8372C; --c-rojo-suave: #F8E9E6; --c-ambar: #8E5C0E; --c-ambar-suave: #F6EEDC; --c-verde: #2B6B46; --c-verde-suave: #E5F0E8; --c-neutro: #8A909A;
  --foco: 0 0 0 3px var(--c-papel), 0 0 0 5px #2F5A99;

  --f-display: 'Libre Caslon Display', 'Libre Caslon Text', Georgia, serif;   /* solo ≥ 28 px */
  --f-titulo: 'Libre Caslon Text', Georgia, serif;
  --f-texto: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-hebreo: 'Frank Ruhl Libre', 'Times New Roman', serif;
  --t-meta: .875rem; --t-chico: .96875rem; --t-base: 1.0625rem; --t-medio: 1.25rem; --t-h3: 1.3125rem; --t-h2: 1.625rem;
  --t-h1: clamp(2.125rem, 1.4rem + 2.6vw, 3.25rem); --t-cifra: clamp(4rem, 3rem + 3vw, 5.5rem);
  --lh-texto: 1.55; --lh-titulo: 1.12;
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-16: 64px;
  --gutter: 16px; --ancho: 1200px;
  --r-campo: 10px; --r-tarjeta: 14px; --r-boton: 10px; --toque: 48px;
  --sombra: 0 1px 2px rgba(20, 30, 45, .05);
  --ease-out: cubic-bezier(.22, .61, .36, 1); --dur-toque: 120ms; --dur: 200ms;
  --alto-nav: 66px;
  --c-seg: #FFFFFF;   /* pestaña elegida dentro del control segmentado */

  /* ---- Nombres de antes (los usan las secciones): ahora apuntan a los tokens B+ ---- */
  --serif: var(--f-titulo); --display: var(--f-display); --sans: var(--f-texto); --mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --bg: var(--c-papel); --surface: var(--c-hoja); --surface-alt: var(--c-hundido); --surface-hover: var(--c-hundido);
  --ink: var(--c-tinta); --ink-soft: var(--c-tinta-2); --ink-faint: var(--c-tinta-3);
  --accent: var(--c-acento); --accent-hover: var(--c-acento-hondo); --accent-ink: var(--c-acento-texto);
  --gold: var(--c-oro-texto); --gold-soft: var(--c-oro-suave);
  --ok: var(--c-verde); --ok-soft: var(--c-verde-suave); --warn: var(--c-ambar); --warn-soft: var(--c-ambar-suave); --danger: var(--c-rojo); --danger-soft: var(--c-rojo-suave);
  --border: var(--c-linea); --border-strong: var(--c-linea-fuerte);
  --shadow: var(--sombra); --shadow-hover: 0 1px 2px rgba(20, 30, 45, .06), 0 10px 24px -14px rgba(20, 30, 45, .22);
  --radius: var(--r-tarjeta); --radius-chico: var(--r-campo);
  --band: var(--c-banda); --band-ink: var(--c-banda-texto); --band-soft: var(--c-banda-tenue); --band-gold: var(--c-banda-oro); --band-line: rgba(217, 200, 143, .28);
  /* Un solo acento: ya no hay un color por sección (el arcoíris era cosa de IA). */
  --d-metas: var(--c-acento); --d-membresias: var(--c-acento); --d-aliot: var(--c-oro-texto); --d-subasta: var(--c-acento);
  --d-compras: var(--c-acento); --d-minyanim: var(--c-acento); --d-mediacion: var(--c-acento); --d-ejemplo: var(--c-tinta-3);
  --tint: 9%;
  --facil: var(--ease-out);
}
@media (min-width: 900px) { :root { --gutter: 40px; } }

/* Modo oscuro: "noche de gala" (marino hondo, texto hueso, dorado claro como acento). No es invertido. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-papel: #0E1726; --c-hoja: #152137; --c-hundido: #1B2942;
    --c-linea: #2A3852; --c-linea-suave: #223049; --c-linea-fuerte: #3D4D6A;
    --c-tinta: #EEEADF; --c-tinta-2: #C3C8D2; --c-tinta-3: #98A1B0;
    --c-acento: #D9C88F; --c-acento-hondo: #C9B77A; --c-acento-texto: #14213A; --c-acento-suave: #1D2B47; --c-acento-borde: #2E3F60; --c-enlace: #E3D6A8;
    --c-oro-texto: #D9C88F; --c-oro-filete: #8F8456; --c-oro-suave: #24263A;
    --c-banda: #111D33; --c-banda-tenue: #9FAABD;
    --c-rojo: #F0958A; --c-rojo-suave: #3A2026; --c-ambar: #E4B866; --c-ambar-suave: #352B1A; --c-verde: #86C9A0; --c-verde-suave: #18332A; --c-neutro: #6F7888;
    --foco: 0 0 0 3px var(--c-papel), 0 0 0 5px #D9C88F;
    --sombra: none; --shadow-hover: 0 12px 28px -16px rgba(0, 0, 0, .7);
    --tint: 14%; --c-seg: #2C3D60;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-papel: #0E1726; --c-hoja: #152137; --c-hundido: #1B2942;
  --c-linea: #2A3852; --c-linea-suave: #223049; --c-linea-fuerte: #3D4D6A;
  --c-tinta: #EEEADF; --c-tinta-2: #C3C8D2; --c-tinta-3: #98A1B0;
  --c-acento: #D9C88F; --c-acento-hondo: #C9B77A; --c-acento-texto: #14213A; --c-acento-suave: #1D2B47; --c-acento-borde: #2E3F60; --c-enlace: #E3D6A8;
  --c-oro-texto: #D9C88F; --c-oro-filete: #8F8456; --c-oro-suave: #24263A;
  --c-banda: #111D33; --c-banda-tenue: #9FAABD;
  --c-rojo: #F0958A; --c-rojo-suave: #3A2026; --c-ambar: #E4B866; --c-ambar-suave: #352B1A; --c-verde: #86C9A0; --c-verde-suave: #18332A; --c-neutro: #6F7888;
  --foco: 0 0 0 3px var(--c-papel), 0 0 0 5px #D9C88F;
  --sombra: none; --shadow-hover: 0 12px 28px -16px rgba(0, 0, 0, .7);
  --tint: 14%; --c-seg: #2C3D60;
}
@media (prefers-reduced-motion: reduce) { :root { --dur-toque: 0ms; --dur: 0ms; } }

/* ===================== Base ===================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--c-papel); color: var(--c-tinta);
  font: 400 var(--t-base)/var(--lh-texto) var(--f-texto); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; font-variant-numeric: tabular-nums; }
body > main { flex: 1 0 auto; width: 100%; }
h1, h2, h3 { color: var(--c-tinta); text-wrap: balance; }
h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: var(--lh-titulo); letter-spacing: -.01em; margin: 0 0 .4rem; }
h2 { font-family: var(--f-titulo); font-weight: 400; font-size: var(--t-h2); line-height: 1.2; letter-spacing: -.005em; margin: 1.5rem 0 .7rem; }
h3 { font-family: var(--f-texto); font-weight: 600; font-size: var(--t-medio); line-height: 1.3; }
p { text-wrap: pretty; }
a { color: var(--c-enlace); text-underline-offset: 3px; text-decoration-thickness: 1px; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 6px; }
[lang="he"] { font-family: var(--f-hebreo); font-weight: 500; }
svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Franja de datos de prueba (solo en local): se queda */
.franja-prueba { position: sticky; top: 0; z-index: 1000; background: #A8372C; color: #fff; text-align: center;
  font: 600 12px/1.3 var(--f-texto); letter-spacing: .06em; padding: 6px 12px; padding-top: max(6px, env(safe-area-inset-top)); }

/* ===================== Logo oficial (escudo + "Fundada: 17 de Septiembre del 1933") ===================== */
.lockup { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; text-decoration: none; color: var(--c-tinta); }
.lockup img { height: 50px; width: auto; display: block; }
.lk-text { text-align: center; line-height: 1.1; white-space: nowrap; }
.lk-text > span { display: block; }
.lk-1 { font-family: var(--f-display); font-size: 1.5rem; letter-spacing: .08em; line-height: 1; }
.lk-2 { font-family: var(--f-texto); font-size: var(--t-meta); color: var(--c-tinta-3); margin-top: 8px; }
.lk-3 { font-family: var(--f-texto); font-size: var(--t-meta); color: var(--c-oro-texto); margin-top: 3px; }
.lockup-grande { gap: 16px; }
.lockup-grande img { height: 104px; }
.lockup-grande .lk-1 { font-size: 1.875rem; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lockup-grande img { content: url(/escudo-oficial-sobre-marino.svg); } }
:root[data-theme="dark"] .lockup-grande img { content: url(/escudo-oficial-sobre-marino.svg); }
.escudo { width: 76px; height: auto; display: block; margin: 0 auto 14px; }

/* ===================== Banda de arriba (siempre marino, con doble filete dorado) ===================== */
header.barra { background: var(--c-banda); color: var(--c-banda-texto); position: relative; z-index: 20; margin-bottom: 6px; }
header.barra::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: var(--c-banda);
  border-top: 1px solid var(--marca-oro); border-bottom: 1px solid var(--marca-oro); }
.barra-in { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right));
  min-height: 80px; display: flex; align-items: center; gap: 24px; }
.barra .lockup { flex-direction: row; gap: 14px; color: var(--c-banda-texto); border-radius: 8px; }
.barra .lockup img { height: 50px; }
.barra .lk-text { text-align: left; }
.barra .lk-1 { color: var(--c-banda-texto); }
.barra .lk-2 { display: none; }
.barra .lk-3 { color: var(--c-banda-oro); margin-top: 7px; }
.barra-titulo { display: flex; align-items: center; min-width: 0; padding-left: 24px; border-left: 1px solid var(--band-line); min-height: 44px; }
.barra-titulo .mod-ic, .barra-titulo small { display: none; }
.barra-titulo div { min-width: 0; }
.barra-titulo strong { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: 1.375rem; line-height: 1.2; color: var(--c-banda-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body:has(#v-inicio) .barra-titulo { display: none; }   /* en el inicio la banda lleva solo el escudo, como en la maqueta */
.barra-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.btn-banda { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: var(--toque); padding: 0 12px; border: 0; border-radius: 8px;
  background: none; color: var(--c-banda-texto); font: 500 var(--t-chico)/1 var(--f-texto); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur-toque) var(--ease-out); touch-action: manipulation; }
.btn-banda svg.i { width: 19px; height: 19px; color: var(--c-banda-oro); }
@media (hover: hover) { .btn-banda:hover { background: rgba(255, 255, 255, .07); } }
.btn-banda:active { transform: scale(.96); }
.btn-banda[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--c-banda-oro); }
.btn-banda .avatar { order: 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: var(--t-meta); font-weight: 600; letter-spacing: .02em;
  border: 1.5px solid var(--c-banda-oro); color: var(--c-banda-oro); }
.btn-banda:has(.avatar) { padding-right: 4px; }
.btn-banda:has(.avatar)[aria-current="page"]::after { right: 56px; }
.barra :focus-visible { box-shadow: 0 0 0 2px var(--c-banda), 0 0 0 4px var(--c-banda-oro); }

/* ===================== Contenedor ===================== */
main { max-width: var(--ancho); margin: 0 auto; padding: 36px var(--gutter) 64px; padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.caja { background: var(--c-hoja); border: 1px solid var(--c-linea); border-radius: var(--r-tarjeta); box-shadow: var(--sombra); padding: 24px; margin: 0 0 20px; }
.caja > h2:first-child, .caja > form > h2:first-child { margin-top: 0; }
/* sin hueco arriba del primer campo de una caja */
.caja > label:first-child, .caja > :first-child > label:first-child, .caja > :first-child > div:first-child > label:first-child { margin-top: 0; }
.angosta { max-width: 440px; margin: 32px auto; }
.caja-aviso { max-width: 520px; margin: 56px auto; text-align: center; background: var(--c-hoja); border: 1px solid var(--c-linea); border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra); padding: 40px 28px 32px; flex: 0 0 auto; position: relative; }
.caja-aviso::before { content: ""; position: absolute; left: 28px; right: 28px; top: 14px; height: 5px; border-top: 1px solid var(--c-oro-filete); border-bottom: 1px solid var(--c-oro-filete); }
.caja-aviso h1 { font-size: 2rem; }
.caja-aviso p { color: var(--c-tinta-2); }
.centro { text-align: center; }
.suave { color: var(--c-tinta-2); }
.chico { font-size: var(--t-chico); }

/* ===================== Formularios ===================== */
label { display: block; font-weight: 600; font-size: var(--t-chico); margin: 16px 0 8px; }
input, select, textarea { font: inherit; font-size: 1.0625rem; color: var(--c-tinta); background: var(--c-hoja); width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--c-linea-fuerte); border-radius: var(--r-campo); min-height: 50px;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
input::placeholder, textarea::placeholder { color: var(--c-tinta-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-acento) 22%, transparent); }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; min-height: 0; padding: 0; accent-color: var(--c-acento); box-shadow: none; }
input[type="file"] { padding: 10px; }
textarea { min-height: 100px; resize: vertical; }
.codigo-input { font-family: var(--f-texto); font-size: 1.75rem; font-weight: 600; letter-spacing: .42em; text-indent: .42em; text-align: center; font-variant-numeric: tabular-nums; min-height: 64px; }
.clave-wrap { position: relative; }
.clave-wrap input { padding-right: 104px; }
.ver-clave { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); min-width: 48px; min-height: 44px; padding: 0 14px; border: 0; background: none;
  color: var(--c-enlace); font: 600 var(--t-chico)/1 var(--f-texto); border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
@media (hover: hover) { .ver-clave:hover { background: var(--c-hundido); } }
.ver-clave svg.i { width: 20px; height: 20px; }

/* ===================== Botones ===================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 var(--t-chico)/1.2 var(--f-texto); letter-spacing: .005em; cursor: pointer; text-align: center;
  border: 1.5px solid var(--c-acento); border-radius: var(--r-boton); padding: 10px 20px; min-height: var(--toque); background: var(--c-acento); color: var(--c-acento-texto); text-decoration: none;
  transition: transform var(--dur-toque) var(--ease-out), background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
@media (hover: hover) { .btn:hover { background: var(--c-acento-hondo); border-color: var(--c-acento-hondo); } }
.btn:active { transform: scale(.97); }
.btn svg.i { width: 18px; height: 18px; stroke-width: 1.9; }
.btn.sec { background: var(--c-hoja); color: var(--c-tinta); border-color: var(--c-linea-fuerte); }
@media (hover: hover) { .btn.sec:hover { background: var(--c-hoja); border-color: var(--c-tinta-3); } }
.btn.peligro { background: var(--c-rojo); border-color: var(--c-rojo); color: #fff; }
@media (hover: hover) { .btn.peligro:hover { background: color-mix(in srgb, var(--c-rojo) 86%, #000); border-color: color-mix(in srgb, var(--c-rojo) 86%, #000); } }
.btn.chico { min-height: 40px; min-width: 40px; padding: 6px 14px; font-size: var(--t-meta); border-radius: 9px; }
@media (pointer: coarse) { .btn.chico { min-height: 44px; min-width: 44px; } }
.btn.contorno-peligro { background: var(--c-hoja); color: var(--c-rojo); border-color: color-mix(in srgb, var(--c-rojo) 45%, var(--c-linea-fuerte)); }
@media (hover: hover) { .btn.contorno-peligro:hover { background: var(--c-rojo-suave); border-color: var(--c-rojo); } }
.btn.enlace { background: none; border: 0; color: var(--c-enlace); padding: 6px 2px; min-height: 0; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
@media (hover: hover) { .btn.enlace:hover { background: none; } }
.btn.enlace:active { transform: none; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn[aria-pressed="true"], .btn.sec[aria-pressed="true"] { background: var(--c-acento); color: var(--c-acento-texto); border-color: var(--c-acento); }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* ===================== Mensajes ===================== */
.error { color: var(--c-rojo); font-weight: 600; margin: 10px 0 0; }
.ok { color: var(--c-verde); font-weight: 600; margin: 10px 0 0; }
main > p.error, main > p.ok { padding: 12px 16px; border-radius: var(--r-campo); margin: 0 0 16px; }
main > p.error { background: var(--c-rojo-suave); }
main > p.ok { background: var(--c-verde-suave); }
.aviso { background: var(--c-oro-suave); border: 1px solid color-mix(in srgb, var(--c-oro-filete) 40%, transparent); border-radius: var(--r-campo); padding: 12px 16px; margin: 10px 0; overflow-wrap: anywhere; color: var(--c-tinta); }
/* Pista corta bajo un buscador (ej. "Escriba al menos 3 letras"): se ve, pero sin alarmar */
.pista { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0 0; padding: 9px 14px; border-radius: var(--r-campo); background: var(--c-hundido); color: var(--c-tinta-2); font-size: var(--t-meta); line-height: 1.4; font-weight: 400; }
.pista::before { content: ""; flex: 0 0 7px; height: 7px; margin-top: .45em; border-radius: 50%; background: var(--c-oro-filete); }
.borrador { background: var(--c-ambar-suave); color: var(--c-ambar); border: 1px solid color-mix(in srgb, var(--c-ambar) 30%, transparent); font-weight: 600; font-size: var(--t-meta); padding: 10px 16px; border-radius: var(--r-campo); text-align: center; }

/* ===================== Tablas ===================== */
.tabla-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--c-linea); border-radius: var(--r-campo);
  background: linear-gradient(to right, var(--c-hoja) 30%, transparent) left / 40px 100% no-repeat local,
    linear-gradient(to left, var(--c-hoja) 30%, transparent) right / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(10, 20, 32, .16), transparent) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(10, 20, 32, .16), transparent) right / 14px 100% no-repeat scroll, var(--c-hoja); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-chico); }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--c-linea-suave); vertical-align: top; }
th { color: var(--c-tinta-3); font-weight: 600; font-size: var(--t-meta); background: var(--c-hundido); border-bottom-color: var(--c-linea); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color var(--dur) var(--ease-out); }
@media (hover: hover) { tbody tr:hover { background: color-mix(in srgb, var(--c-hundido) 60%, transparent); } }
td select { min-height: 40px; padding: 4px 10px; font-size: var(--t-chico); width: auto; max-width: 100%; }
/* Estados: punto + palabra (sin píldoras pastel). La etiqueta neutra queda como texto callado con borde fino. */
.etiqueta { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-meta); font-weight: 600; line-height: 1.3; padding: 2px 9px; border-radius: 6px;
  border: 1px solid var(--c-linea); background: transparent; color: var(--c-tinta-2); white-space: nowrap; }
.etiqueta.mal, .etiqueta.bien, .etiqueta.alerta, .etiqueta.info { border: 0; padding: 2px 0; border-radius: 0; }
.etiqueta.mal::before, .etiqueta.bien::before, .etiqueta.alerta::before, .etiqueta.info::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.etiqueta.mal { color: var(--c-rojo); }
.etiqueta.bien { color: var(--c-verde); }
.etiqueta.alerta { color: var(--c-ambar); }
.etiqueta.info { color: var(--c-enlace); }
pre.json { white-space: pre-wrap; word-break: break-word; font: .875rem/1.45 var(--mono); max-width: 360px; margin: 0; color: var(--c-tinta-2); }
/* Pestañas: control segmentado sobre fondo hundido (como "Por votar / Faltan papeles" de la maqueta) */
.pestanas { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; padding: 4px; background: var(--c-hundido); border-radius: 12px; }
.pestanas:empty { display: none; }
.pestanas .btn { border-radius: 9px; background: transparent; border-color: transparent; color: var(--c-tinta-2); font-weight: 600; }
@media (hover: hover) { .pestanas .btn:hover { background: color-mix(in srgb, var(--c-hoja) 60%, transparent); border-color: transparent; } }
.pestanas .btn[aria-pressed="true"] { background: var(--c-seg); color: var(--c-tinta); border-color: var(--c-linea); box-shadow: 0 1px 2px rgba(20, 30, 45, .08); }

/* ===================== Diálogos ===================== */
dialog { border: 1px solid var(--c-linea); border-radius: 16px; background: var(--c-hoja); color: var(--c-tinta); max-width: 460px; width: calc(100% - 32px); padding: 28px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); }
dialog[open] { animation: hoja var(--dur) var(--ease-out); }
dialog h2 { margin-top: 0; }
dialog::backdrop { background: rgba(10, 20, 32, .55); }
@keyframes hoja { from { opacity: 0; transform: translateY(10px) scale(.985); } }

footer.pie { text-align: center; padding: 22px 0 calc(22px + env(safe-area-inset-bottom)); font-size: var(--t-meta); color: var(--c-tinta-3); border-top: 1px solid var(--c-linea);
  max-width: var(--ancho); width: calc(100% - 2 * var(--gutter)); margin: 0 auto; }
footer.pie a { color: var(--c-tinta-3); }

/* ===================== Entrar (clave, código, activar 2FA, crear clave) =====================
   Escritorio: formulario a la izquierda y panel marino de la institución a la derecha (versículo + fecha).
   Celular: la institución arriba, el formulario y, debajo, el versículo y la fecha. */
body:has(.login-tarjeta:not([hidden])) > main { max-width: none; padding: 0; }
body:has(.login-tarjeta:not([hidden])) > footer.pie { display: none; }
.acceso:not(:has(.login-tarjeta:not([hidden]))) { display: none; }
.acceso { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); }
.acceso-izq { display: flex; flex-direction: column; padding: var(--e-10) clamp(24px, 7vw, 112px); }
.acceso-cab { display: none; }
.acceso-form { margin: auto 0; width: 100%; max-width: 460px; padding: var(--e-12) 0; }
.acceso-pie { font-size: var(--t-meta); color: var(--c-tinta-3); margin: 0; }
.acceso-pie a { color: var(--c-tinta-3); }
.login-tarjeta { animation: subir 320ms var(--ease-out) both; }
.login-tarjeta h1 { font-family: var(--f-display); font-weight: 400; font-size: 3.25rem; line-height: 1.05; letter-spacing: -.01em; margin: 0 0 var(--e-3); }
.login-tarjeta h1.medio { font-size: 2.5rem; }
.login-tarjeta .lead { font-size: var(--t-medio); color: var(--c-tinta-2); margin: 0 0 var(--e-8); }
.login-tarjeta label { font-size: var(--t-base); margin-top: var(--e-5); }
.login-tarjeta input:not([type="checkbox"]):not(.codigo-input) { min-height: 58px; font-size: 1.125rem; padding: 0 16px; }
.login-tarjeta .clave-wrap input { padding-right: 104px; }
.login-tarjeta form .btn[type="submit"] { width: 100%; min-height: 58px; font-size: 1.125rem; }
.login-tarjeta form .acciones { margin-top: var(--e-6); }
.login-tarjeta .pie-tarjeta { margin: var(--e-8) 0 0; padding-top: var(--e-5); border-top: 1px solid var(--c-linea); font-size: var(--t-chico); color: var(--c-tinta-3); }
.login-tarjeta .pie-tarjeta + .pie-tarjeta { margin-top: 8px; border-top: 0; padding-top: 0; }
.login-tarjeta .pie-tarjeta .btn.enlace { font-size: var(--t-base); text-align: left; min-height: 44px; }
.paso-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 0 var(--e-5); color: var(--c-oro-texto); border: 1.5px solid var(--c-oro-filete); }
.paso-ic svg.i { width: 26px; height: 26px; }
.pasos { list-style: none; counter-reset: paso; padding: 0; margin: 4px 0 22px; display: grid; gap: 14px; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; font-size: var(--t-base); }
.pasos li::before { content: counter(paso); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: var(--t-meta); font-weight: 700;
  background: var(--c-acento); color: var(--c-acento-texto); }
.login-tarjeta .btn.sec { width: 100%; }
.secreto { font-family: var(--mono); font-size: 1.0625rem; letter-spacing: .08em; word-break: normal; overflow-wrap: anywhere; text-wrap: balance; background: var(--c-hundido); border: 1px dashed var(--c-linea-fuerte);
  padding: 14px 16px; border-radius: var(--r-campo); text-align: center; color: var(--c-tinta); user-select: all; -webkit-user-select: all; }
.codigos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font-family: var(--mono); font-size: 1.0625rem; background: var(--c-hundido);
  border: 1px dashed var(--c-linea-fuerte); padding: 16px; border-radius: var(--r-campo); text-align: center; }
.codigos span { padding: 4px 0; }
.separa { display: flex; align-items: center; gap: 12px; color: var(--c-tinta-3); font-size: var(--t-meta); margin: 22px 0 4px; }
.separa::before, .separa::after { content: ""; flex: 1; height: 1px; background: var(--c-linea); }

/* Panel de la institución */
/* Logo oficial (marca/logo-oficial-shevet.jpeg): escudo ARRIBA y el texto centrado debajo, todo en serif:
   SHEVET AHIM / COMUNIDAD HEBREA DE PANAMÁ (mayúsculas) / Fundada: 17 de Septiembre del 1933 */
.inst { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.inst img { height: 112px; width: auto; display: block; }
.inst b { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: 2rem; letter-spacing: .02em; line-height: 1.05; color: var(--c-banda-texto); }
.inst span { display: block; font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .02em; color: var(--c-banda-texto); margin-top: 6px; font-size: 1.05rem; }
.inst .fund { text-transform: none; letter-spacing: 0; color: var(--c-banda-tenue); margin-top: 4px; font-size: var(--t-chico); }
.acceso-der { background: var(--c-banda); color: var(--c-banda-texto); padding: var(--e-12) var(--e-12) var(--e-10); display: flex; flex-direction: column; position: relative; }
.acceso-der::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 6px; border-left: 1px solid var(--marca-oro); border-right: 1px solid var(--marca-oro); }
.verso { margin: auto 0; padding: var(--e-10) 0; }
.verso .heb { font-family: var(--f-hebreo); font-weight: 500; font-size: 3.1rem; line-height: 1.3; color: var(--c-banda-oro); text-align: right; margin: 0; }
.filete { height: 6px; border-top: 1px solid var(--marca-oro); border-bottom: 1px solid var(--marca-oro); margin: var(--e-6) 0; opacity: .75; }
.verso .es { font-family: var(--f-titulo); font-style: italic; font-size: 1.625rem; line-height: 1.4; max-width: 24ch; margin: 0; }
.verso .ref { margin-top: var(--e-3); font-size: var(--t-chico); color: var(--c-banda-tenue); }
.hoy { display: flex; align-items: center; gap: 18px; padding-top: var(--e-6); border-top: 1px solid rgba(217, 200, 143, .28); min-height: 80px; }
.hoy .num { font-family: var(--f-display); font-size: 3.5rem; line-height: .9; color: var(--c-banda-texto); }
.hoy .txt { font-size: var(--t-chico); color: var(--c-banda-tenue); line-height: 1.4; }
.hoy .txt b { color: var(--c-banda-texto); font-weight: 600; display: block; font-size: var(--t-base); }
.hoy .heb { margin-left: auto; font-family: var(--f-hebreo); font-size: 1.6rem; color: var(--c-banda-oro); }

/* Cargando: el escudo con una barrita (en vez de "Cargando…") */
.cargando { min-height: 70vh; display: grid; place-items: center; text-align: center; }
.barra-carga { width: 160px; height: 3px; border-radius: 3px; background: var(--c-linea); margin: 26px auto 0; overflow: hidden; }
.barra-carga span { display: block; height: 100%; width: 40%; background: var(--c-oro-filete); border-radius: 3px; animation: carga 1.3s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes carga { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ===================== Inicio ===================== */
.portada { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-10); align-items: end; padding: var(--e-6) 0 var(--e-10); }
.portada h1 { font-size: var(--t-h1); margin: 0; }
.resumen { font-size: var(--t-medio); color: var(--c-tinta-2); margin: var(--e-3) 0 0; max-width: 46ch; }
.resumen b { color: var(--c-tinta); font-weight: 600; }
.fecha { display: grid; grid-template-columns: auto auto; column-gap: var(--e-4); align-items: center; padding-left: var(--e-8); border-left: 1px solid var(--c-oro-filete); }
.fecha .num { font-family: var(--f-display); font-size: var(--t-cifra); line-height: .82; grid-row: span 2; }
.fecha .fdia { font-weight: 600; font-size: var(--t-base); align-self: end; }
.fecha .mes { font-size: var(--t-chico); color: var(--c-tinta-3); align-self: start; }
.fecha .heb { grid-column: 1 / -1; margin-top: var(--e-4); font-size: 1.5rem; color: var(--c-oro-texto); line-height: 1.2; }
.fecha .heb-es { grid-column: 1 / -1; font-size: var(--t-chico); color: var(--c-tinta-3); white-space: nowrap; }
.sec-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); margin-bottom: var(--e-4); }
.sec-cab h2 { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.sec-cab h2 .n { font-family: var(--f-texto); font-size: var(--t-chico); font-weight: 600; color: var(--c-tinta-3); }
.sec-cab > a { font-size: var(--t-chico); font-weight: 600; display: inline-flex; align-items: center; min-height: var(--toque); }
.dos { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--e-10); align-items: start; }
.lista { background: var(--c-hoja); border: 1px solid var(--c-linea); border-radius: var(--r-tarjeta); box-shadow: var(--sombra); overflow: hidden; }
.dep { display: flex; align-items: center; gap: var(--e-4); min-height: 72px; padding: 14px var(--e-4) 14px var(--e-5); border-bottom: 1px solid var(--c-linea-suave);
  color: inherit; text-decoration: none; transition: background-color var(--dur) var(--ease-out); }
.dep:last-child { border-bottom: 0; }
.dep:active { background: var(--c-hundido); }
@media (hover: hover) { .dep:hover { background: var(--c-hundido); } .dep:hover .chev { transform: translateX(3px); color: var(--c-tinta); } }
.dep > svg.i:first-child { color: var(--c-tinta-2); }
.dep .cuerpo { flex: 1; min-width: 0; }
.dep .nom { display: block; font-weight: 600; font-size: var(--t-base); line-height: 1.3; }
.dep .sub { display: block; font-size: var(--t-chico); color: var(--c-tinta-3); line-height: 1.4; margin-top: 2px; }
.dep .dato { font-size: var(--t-chico); color: var(--c-tinta-2); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.dep .chev { width: 18px; height: 18px; color: var(--c-tinta-3); transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.punto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--c-neutro); flex-shrink: 0; }
.punto.rojo { background: var(--c-rojo); } .punto.ambar { background: var(--c-ambar); } .punto.verde { background: var(--c-verde); } .punto.azul { background: var(--c-acento); }
.dato.verde { color: var(--c-verde); } .dato.ambar { color: var(--c-ambar); } .dato.rojo { color: var(--c-rojo); font-weight: 600; }
.col-der { display: grid; gap: var(--e-10); }
.vacio-caja { background: var(--c-hoja); border: 1px dashed var(--c-linea-fuerte); border-radius: var(--r-tarjeta); padding: 32px 24px; text-align: center; color: var(--c-tinta-2); }
.vacio-caja .mod-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 14px; color: var(--c-oro-texto); border: 1.5px solid var(--c-oro-filete); }
.vacio-caja b { display: block; color: var(--c-tinta); font-size: var(--t-medio); margin-bottom: 4px; }
#v-inicio .aviso { margin: 0 0 var(--e-6); }
/* Una sola animación protagonista: el filete dorado de la fecha se traza al entrar */
@media (prefers-reduced-motion: no-preference) {
  .fecha { animation: filete 700ms var(--ease-out) both 120ms; }
  @keyframes filete { from { border-color: transparent; } }
}

/* Cabecera de página (Mi cuenta, Administración, secciones) */
.pagina-cab { margin: 0 0 28px; }
.pagina-cab h1 { margin: 0 0 8px; }
.pagina-cab p { margin: 0; color: var(--c-tinta-2); max-width: 68ch; font-size: var(--t-base); }

@keyframes subir { from { opacity: 0; transform: translateY(8px); } }

/* ===================== Celular ===================== */
@media (max-width: 899px) {
  .franja-prueba { font-size: 10.5px; letter-spacing: .03em; padding-left: 8px; padding-right: 8px; }
  /* Banda: escudo y nombre; el título de la página en una segunda línea */
  .barra-in { flex-wrap: wrap; gap: 0 12px; min-height: 0; padding-top: 10px; padding-bottom: 10px; }
  .barra .lockup { gap: 12px; min-height: 44px; }
  .barra .lockup img { height: 40px; }
  .barra .lk-1 { font-size: 1.25rem; }
  .barra .lk-3 { font-size: .8125rem; margin-top: 5px; }
  .barra-titulo { display: none; }   /* en el celular el título va en la página (como en la maqueta); la banda queda baja */
  /* Barra de abajo fija, como una app del iPhone */
  .barra-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0; gap: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    background: color-mix(in srgb, var(--c-hoja) 94%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--c-linea); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .btn-banda { flex-direction: column; justify-content: center; gap: 3px; min-height: 54px; padding: 0 2px; border-radius: 12px; color: var(--c-tinta-3); font-size: .875rem; font-weight: 500; letter-spacing: -.01em; }
  .btn-banda svg.i { width: 22px; height: 22px; color: currentColor; }
  .btn-banda .avatar { order: 0; width: 22px; height: 22px; line-height: 1; margin: 0; border-width: 1.5px; border-color: currentColor; color: currentColor; font-size: .5625rem; letter-spacing: 0; }
  .btn-banda:has(.avatar) { padding-right: 2px; }
  .btn-banda:active { transform: scale(.94); }
  .btn-banda[aria-current="page"] { color: var(--c-tinta); font-weight: 700; }
  .btn-banda[aria-current="page"] svg.i, .btn-banda[aria-current="page"] .avatar { color: var(--c-acento); }
  .btn-banda[aria-current="page"]::after { display: none; }
  .barra-nav .btn-banda:focus-visible { box-shadow: var(--foco); }
  body:has(header.barra) { padding-bottom: calc(var(--alto-nav) + env(safe-area-inset-bottom)); }

  main { padding-top: 24px; padding-bottom: 40px; }
  .caja { padding: 20px 16px; }
  .acciones .btn { flex: 1 1 auto; }
  .cifras > .cifra:last-child:nth-child(odd), .tiles > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  dialog { padding: 22px 18px; }
  th, td { padding: 10px 12px; }
  .tabla-envoltura > table { min-width: 620px; }
  .pestanas { display: flex; }
  /* Muchas pestañas: rejilla de 2 columnas, nunca una cortada ni filas sueltas */
  .pestanas:not(.mt-pestanas):has(> :not([hidden]) ~ :not([hidden]) ~ :not([hidden]) ~ :not([hidden])) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pestanas:not(.mt-pestanas):has(> :not([hidden]) ~ :not([hidden]) ~ :not([hidden]) ~ :not([hidden])) .btn { white-space: normal; line-height: 1.25; padding: 8px 10px; font-size: var(--t-meta); }

  /* Entrar */
  .acceso { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .acceso-izq { padding: 0; }
  .acceso-cab { display: block; background: var(--c-banda); color: var(--c-banda-texto); padding: calc(env(safe-area-inset-top) + 24px) var(--gutter) 22px; position: relative; margin-bottom: 6px; }
  .acceso-cab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; border-top: 1px solid var(--marca-oro); border-bottom: 1px solid var(--marca-oro); background: var(--c-banda); }
  .acceso-cab .inst img { height: 72px; }
  .acceso-cab .inst b { font-size: 1.5rem; }
  .acceso-cab .inst span { font-size: var(--t-meta); margin-top: 6px; }
  .acceso-form { margin: 0; padding: var(--e-8) var(--gutter) var(--e-6); max-width: none; }
  .login-tarjeta h1 { font-size: 2.25rem; }
  .login-tarjeta h1.medio { font-size: 2rem; }
  .login-tarjeta .lead { font-size: var(--t-base); margin-bottom: var(--e-5); }
  .acceso-pie { padding: 0 var(--gutter) var(--e-8); }
  .acceso-der { padding: var(--e-8) var(--gutter) calc(var(--e-8) + env(safe-area-inset-bottom)); }
  .acceso-der::before, .acceso-der .inst { display: none; }
  .verso { margin-top: 0; padding: 0 0 var(--e-6); }
  .verso .heb { font-size: 1.85rem; }
  .verso .es { font-size: 1.25rem; }
  .filete { margin: var(--e-4) 0; }
  .hoy .num { font-size: 2.75rem; }
  .hoy .heb { font-size: 1.3rem; }

  /* Inicio */
  .portada { grid-template-columns: minmax(0, 1fr); gap: var(--e-4); padding: 0 0 var(--e-8); }
  .fecha { order: -1; grid-template-columns: auto auto minmax(0, 1fr); padding: 0 0 var(--e-4); border-left: 0; border-bottom: 1px solid var(--c-linea); column-gap: var(--e-3); }
  .fecha .num { font-size: 3.25rem; }
  .fecha .heb { grid-column: 3; grid-row: 1; margin: 0; text-align: right; font-size: 1.3rem; align-self: end; }
  .fecha .heb-es { grid-column: 3; grid-row: 2; text-align: right; font-size: var(--t-meta); align-self: start; }
  .portada h1 { font-size: 2rem; }
  .resumen { font-size: var(--t-base); }
  .dos { grid-template-columns: minmax(0, 1fr); gap: var(--e-10); }
  .dep { padding: 12px var(--e-3) 12px var(--e-4); gap: var(--e-3); }
}

/* ===================== Tablas que en el celular se vuelven tarjetas (table.apilar; nucleo.js pone data-label) ===================== */
@media (max-width: 640px) {
  .tabla-envoltura:has(> table.apilar) { border: 0; background: none; overflow: visible; }
  .tabla-envoltura > table.apilar { min-width: 0; }
  table.apilar thead { display: none; }
  table.apilar, table.apilar tbody, table.apilar tr, table.apilar td { display: block; width: auto; }
  table.apilar tr { background: var(--c-hoja); border: 1px solid var(--c-linea); border-radius: var(--r-campo); box-shadow: var(--sombra); padding: 6px 16px; margin: 0 0 10px; }
  table.apilar td { border: 0; padding: 8px 0; text-align: left; overflow-wrap: anywhere; }
  table.apilar td + td { border-top: 1px solid var(--c-linea-suave); }
  table.apilar td::before { content: attr(data-label); display: block; font-size: var(--t-meta); font-weight: 600; color: var(--c-tinta-3); margin-bottom: 2px; }
  table.apilar td[data-label=""]::before, table.apilar td:first-child::before { display: none; }
  table.apilar td:first-child { font-size: var(--t-base); font-weight: 600; }
  table.apilar td:empty { display: none; }
  table.apilar .num { text-align: left; }
  table.apilar .acciones-fila { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  .barra-carga span { animation: none; width: 100%; opacity: .5; }
}

/* ===================== Aviso de privacidad (lectura) ===================== */
main.lectura { max-width: 820px; }
.priv-cab { text-align: center; margin: 28px 0 32px; }
.priv-cab .lockup { margin: 0 auto 26px; }
.priv-cab h1 { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.5rem); }
.priv-cab p { color: var(--c-tinta-2); }
.lectura .borrador { margin: 0 0 8px; }
.lectura .caja { line-height: 1.65; }
.lectura .caja h2 { font-size: 1.375rem; }
.lectura .caja ul { padding-left: 22px; margin: 8px 0; }
.lectura .caja li + li { margin-top: 8px; }

/* Notas chicas dentro de un título (ej. "Comisiones (7, en orden alfabético)"): en letra de texto, calladas */
h1 .chico, h2 .chico, h2 .suave, h3 .chico { font-family: var(--f-texto); font-size: var(--t-chico); font-weight: 400; color: var(--c-tinta-3); letter-spacing: 0; }