/* Identidad Azul + Coral aprobada por Hernán. CSS local, sin recursos externos. */
body.family-ui[data-science-theme=day],body.project-ui[data-science-theme=day] {
  --bg:#f7f8fc;--panel:#ffffff;--border:#d2d8ec;--text:#202440;--muted:#58627d;
  --other:#edf0ff;--me:#e5eaff;--send:#385bff;--send-hover:#2848d8;--accent:#385bff;--sci-selected:#e5eaff;
}
body.family-ui[data-science-theme=night],body.project-ui[data-science-theme=night] {
  --bg:#13162b;--panel:#1d223b;--border:#485471;--text:#f1f3ff;--muted:#b7c1dc;
  --other:#2a3152;--me:#303c6e;--send:#99acff;--send-hover:#bac7ff;--accent:#99acff;--sci-selected:#2a3152;
}
body.family-ui,body.project-ui { font-family:ui-rounded,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
:is(.family-ui,.project-ui) button { border-radius:16px; }
:is(.family-ui,.project-ui) dialog { border-radius:24px; }
:is(.family-ui,.project-ui) :is(button,a,input,select,textarea,summary):focus-visible { outline:3px solid var(--accent);outline-offset:3px; }
.family-ui #header { border-bottom:1px solid var(--border);background:var(--bg); }
.family-ui #familyHub > section { width:100%; }
.family-ui #familyHub h2 { letter-spacing:-1px;font-weight:650; }
.family-ui #familyHub :is(.family-card,.family-tile) { border-radius:24px;box-shadow:none; }
.family-ui #familyHub .family-primary { background:var(--send);color:var(--bg);border-radius:18px;min-height:48px; }
.family-ui #familyNav button[aria-current=page] { background:var(--me);color:var(--accent); }
.family-ui #familyNav .family-icon { stroke-width:1.8; }
.family-ui .family-ask { border-radius:24px; }
.family-ui #familyHub .conserje-gold { background:var(--me);color:var(--text);border:1px solid var(--border);box-shadow:none; }
.family-ui #familyHub .conserje-gold::before { display:none; }
.family-ui #familyHub .conserje-gold small,.family-ui #familyHub .conserje-gold>.family-icon:first-child { color:var(--accent); }
.family-ui #familyHub #familyPedir { max-width:720px;--pd-ok:var(--send); }
.family-ui #familyHub #familyPedir .pd-kicker { font-size:14px;color:var(--accent);font-weight:600; }
.family-ui #familyHub #familyPedir .pd-inicio { padding:24px;border:1px solid var(--border);background:var(--panel);border-radius:28px; }
.family-ui #familyHub #familyPedir :is(.pd-btn,.pd-campo,.pd-accesos button) { border-radius:18px; }
.family-ui #familyHub #familyPedir .pd-accesos button { background:var(--bg);border-width:1px; }
.family-ui #familyHub #familyPedir .pd-tagline { color:var(--muted);font-size:14px; }
.family-ui #familyHub #familyPedir :is(.pd-bloque,.pd-tarjeta,details.pd-det) { border-radius:22px;border-width:1px; }
.family-ui #familyHub #familyPedir .pd-campo { font-family:inherit; }
/* Casa: compras y lista juntas, comidas y cuentas a su lado. Los accesos no desaparecen. */
.family-ui .family-home-layout { display:grid;gap:20px;align-items:start;margin-top:20px; }
.family-ui .family-shopping-column,.family-ui .family-home-tools { min-width:0;display:grid;gap:20px;align-content:start; }
.family-ui .family-home-layout .family-card { margin:0;padding:20px; }
.family-ui .family-home-layout .family-grid { margin:0;gap:10px; }
.family-ui .family-home-layout .family-tile { min-height:64px;flex-direction:row;align-items:center;padding:12px;font-size:15px; }
.family-ui .family-list-desktop { background:var(--panel);border:1px solid var(--border);border-radius:24px;padding:18px; }
.family-ui .family-shopping-actions { display:flex;gap:8px;flex-wrap:wrap;margin:12px 0; }
.family-ui .family-shopping-actions button { min-height:44px;display:flex;align-items:center;gap:8px;font-size:14px; }
.family-ui #familyHome>.family-home-mobile-list .family-ask { margin:18px 0 0;background:var(--panel); }
.family-ui .family-home-tools>h3 { margin:0!important; }
.family-ui .family-utilities { display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:12px; }
.family-ui .family-utilities button { min-height:44px;background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px; }
.family-ui #familyFacturas>details { margin-top:8px; }
.family-ui #familyFacturas>details>summary { min-height:44px;color:var(--muted);font-size:14px; }
.family-ui #familyComprar #comprarTitulo { font-size:20px; }
.family-ui #familyComprar #comprarLista { margin:10px 0; }
.family-ui #familyListFrame { border-radius:16px; }
.family-ui .family-team-intro { max-width:620px; }
.family-ui #conJobsPanel>h4 { font-size:20px; }
@media(min-width:900px) {
  .family-ui #main #familyNav:not([hidden]) { flex-basis:164px;width:164px;max-width:164px;padding:24px 10px; }
  .family-ui #familyNav button { border-radius:18px;font-size:14px;padding:12px 10px; }
  .family-ui #familyHub:not([hidden]) { padding:30px clamp(20px,3vw,44px); }
  .family-ui .family-home-layout { grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:20px; }
}
@media(max-width:600px) {
  .family-ui #familyHub:not([hidden]) { padding:22px 16px; }
  .family-ui #familyHub #familyPedir .pd-inicio { padding:18px 14px; }
  .family-ui #familyHub #familyPedir .pd-accesos { gap:6px; }
  .family-ui #familyHub #familyPedir .pd-accesos button { font-size:15px;overflow-wrap:anywhere; }
  .family-ui .family-home-layout { grid-template-columns:minmax(0,1fr); }
  .family-ui .family-home-layout .family-card { padding:16px; }
}
/* Ingreso: Compañeros y la promesa de marca, sin la ilustración anterior. */
#login { --text:#202440;--muted:#58627d;--border:#bcc6e1;background:#f7f8fc; }
#login .login-landscape { background:#f7f8fc; }
#login .login-brand { color:#385bff; }
#login #loginTitle { font-size:28px;letter-spacing:-.8px;font-weight:650; }
#login .login-slogan { color:#385bff;font-size:18px;line-height:1.4;margin:0; }
#login :is(input,button,.login-pw) { border-radius:18px; }
#login #googleLogin,#login button[type=submit] { background:#385bff;color:#ffffff; }
#login #googleLogin:hover,#login button[type=submit]:hover { background:#2848d8; }
#login :is(a,button,input):focus-visible { outline:3px solid #385bff;outline-offset:3px; }
#login a { color:#385bff; }
#login input { background:#ffffff;border-color:#99a8cc; }
#login input:focus { border-color:#385bff;outline-color:#385bff; }
#login .login-portada details>summary { min-height:44px;display:flex;align-items:center;color:#385bff; }
#login .login-portada details p { margin:0 0 8px; }
/* Selector de grupos: espacios vivos y próximos, sin botones que prometan funciones inexistentes. */
#home { --text:#202440;--muted:#58627d;--border:#d2d8ec;background:#f7f8fc;color:var(--text); }
#home .home-wrap { max-width:1040px;gap:24px;padding:28px 24px 48px; }
#home h2 { color:var(--text);font-size:32px;letter-spacing:-1px; }
#home h3 { color:var(--text);font-size:22px;letter-spacing:-.4px; }
#home p,#home small { color:var(--muted); }
#home .home-slogan { color:#385bff;font-size:18px; }
#home .home-grid { grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:12px; }
#home .home-card { padding:20px;border-radius:24px;background:#ffffff;border:1px solid var(--border);color:var(--text);min-height:104px; }
#home .home-card:hover:not(:disabled) { border-color:#385bff;background:#edf0ff; }
#home .home-card[aria-pressed=true] { border:2px solid #385bff;background:#e5eaff; }
#home .home-card small { color:var(--muted);font-size:14px; }
#home :is(.home-main,button[type=submit]) { background:#385bff;color:#ffffff;border-radius:18px;min-height:48px; }
#home :is(input,select) { background:#ffffff;border:1px solid #99a8cc;border-radius:14px;color:var(--text);min-height:48px; }
#home :is(button,a,input,summary):focus-visible { outline:3px solid #385bff;outline-offset:3px; }
#home .home-discover { border-top:1px solid var(--border);padding-top:20px; }
#home .home-discover>summary { min-height:48px;font-size:20px;font-weight:600; }
#home .home-preview { padding:14px 0;border-bottom:1px solid var(--border); }
#home .home-preview strong { display:block; }
#home .home-preview small { display:block;margin-top:4px; }
#home .home-preview-state { color:#385bff;font-size:13px; }
#home #homeSoonBox { border-top:1px solid var(--border);padding-top:20px; }
#home #homeSoon .home-card:disabled { opacity:1;background:#eceef5; }
@media(max-width:600px) { #home .home-wrap { padding:20px 16px 40px; } }
/* Páginas de la casa: misma paleta, conservando sus listas, formularios y estados. */
html:has(body.tunel-page) { color-scheme:light;--paper:#f7f8fc;--ink:#202440;--muted:#58627d;--line:#d2d8ec;--field:#edf0ff;--card:#ffffff;--green:#385bff;--on-green:#ffffff; }
html[data-theme=night]:has(body.tunel-page) { color-scheme:dark;--paper:#13162b;--ink:#f1f3ff;--muted:#b7c1dc;--line:#485471;--field:#2a3152;--card:#1d223b;--green:#99acff;--on-green:#182043; }
body.tunel-page { font-family:ui-rounded,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body.tunel-page :is(button,input,select,textarea,a.btn) { border-radius:16px; }
body.tunel-page :is(dialog,.turno,.avisos,.banner,.card,#falta) { border-radius:22px; }
body.tunel-page h1 { font-weight:650;letter-spacing:-.8px; }
body.tunel-page :is(button,a,summary,input,select):focus-visible { outline:3px solid var(--green);outline-offset:3px; }
body.tunel-page .turno.proximo { background:var(--field);padding:18px; }
body.tunel-page #agregarBtn { border-radius:16px; }
body.tunel-page .item { border-radius:0; }
body.tunel-page .item>button,body.tunel-page .item-name { border-radius:0; }
@media(prefers-reduced-motion:reduce) { body.family-ui *,body.project-ui *,body.tunel-page * { scroll-behavior:auto!important; } }

#home:not(.portada) #homeDiscover { display:none; }
#home #homeCreateDetails>summary { min-height:48px;display:flex;align-items:center;font-size:20px;font-weight:600; }
body.project-ui[data-science-theme=day] { --sci-link:#385bff; }
body.project-ui[data-science-theme=night] { --sci-link:#99acff; }
body.tunel-page.embedded .lista-top { margin-bottom:8px; }
body.tunel-page.embedded #carritos { margin-top:4px; }

#home .logo-tunel { fill:#385bff; }
#home .home-main:hover { background:#2848d8; }
#home a { color:#385bff; }
body.tunel-sticker { background:var(--paper);color:var(--ink); }
body.tunel-sticker :is(#sub,#volver,#deshacer) { color:var(--muted); }
body.tunel-sticker :is(.chip,#otro,#mic) { background:var(--card);color:var(--ink);border-color:var(--line);min-height:48px; }
body.tunel-sticker .chip[aria-pressed=true],body.tunel-sticker #listo { background:var(--green);color:var(--on-green);border-color:var(--green); }
body.tunel-sticker #login a { color:var(--green); }
body.tunel-legal { --bg:#f7f8fc;--panel:#ffffff;--text:#202440;--muted:#58627d;--border:#d2d8ec;--accent:#385bff; }
body.tunel-legal nav button { min-height:48px; }
body.tunel-legal nav button.on { color:#ffffff; }
body.tunel-legal article { border-radius:24px; }
body.tunel-legal :is(button,a):focus-visible { outline:3px solid var(--accent);outline-offset:3px; }
@media(prefers-color-scheme:dark) { body.tunel-legal { --bg:#13162b;--panel:#1d223b;--text:#f1f3ff;--muted:#b7c1dc;--border:#485471;--accent:#99acff; } body.tunel-legal nav button.on { color:#182043; } }

#login #passkeyHint summary { min-height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer; }
@media (max-width:350px) { .family-ui #familyHub #familyPedir .pd-accesos { grid-template-columns:1fr; } }

/* Portada: identidad arriba, bienvenida aparte, formatos plegados como tarjetas. */
#home .home-top { align-items:flex-start;gap:24px;padding:20px 0 32px;border-bottom:1px solid var(--border); }
#home .home-brand { min-width:0; }
#home .home-brand .logo-tunel { width:clamp(200px,32vw,360px);height:auto;color:#385bff; }
#home .home-brand .home-slogan { margin:22px 0 0;color:#202440;font-size:clamp(24px,2.8vw,32px);font-weight:500;letter-spacing:-.6px;line-height:1.3; }
#home .home-wordmark { margin:0;line-height:0; }
#home .home-slogan-lead { display:block;color:#58627d;font-size:18px;font-weight:500;letter-spacing:0;margin-bottom:4px; }
#home .home-slogan-promise { display:block; }
#home .home-slogan-promise strong { color:#385bff;font-weight:650; }
#home .home-welcome h2 { font-size:20px;letter-spacing:-.3px;margin-bottom:8px; }
#home .home-welcome p { margin:0; }
#home .home-preview { border:1px solid #d2d8ec;border-radius:22px;padding:20px;text-align:left;display:flex;flex-direction:column;gap:10px;min-height:170px;box-shadow:none;font:inherit; }
#home .home-preview strong { font-size:20px; }
#home .home-preview small { font-size:14px;line-height:1.5;margin:0; }
#home .home-preview-state { margin-top:auto;font-size:13px; }
#home .home-preview-active { background:#ffffff;border:2px solid #385bff;color:#202440;cursor:pointer; }
#home .home-preview-active:hover { background:#edf0ff; }
#home .home-preview-inactive { background:#eceef4;border-color:#d1d5df;color:#626a7b; }
#home .home-preview-inactive small,#home .home-preview-inactive .home-preview-state { color:#626a7b; }
#home .home-preview-inactive strong { filter:grayscale(1); }
#home .home-discover>p { margin:12px 0 20px; }
#home.portada #portadaMasterBox { display:none; }
@media (max-width:600px) {
  #home .home-top { gap:12px;padding:8px 0 24px; }
  #home .home-brand .logo-tunel { width:190px; }
  #home .home-brand .home-slogan { font-size:25px;margin-top:20px; }
  #home .home-top #homeLogout { font-size:13px;padding:10px; }
}

/* Compañeros: violeta y coral, paleta aprobada por Hernán el 22/10/2026. Se conservan los nombres de las variables por compatibilidad. */
:root { --brand-blue:#7041e8;--brand-coral:#e35754;--brand-ink:#29203f; }
body.project-ui[data-science-theme=night],body.family-ui[data-science-theme=night] { --brand-blue:#ad8aff;--brand-coral:#ff9895;--brand-ink:#f1f0f7; }
.logo-science { display:none!important; }
.science-ui .logo-science { display:block!important; }
.science-ui .logo-identity { display:none!important; }
#login .login-brand { width:100%;margin-bottom:10px; }
#login .login-brand .logo-tunel { width:min(100%,310px);height:auto; }
#login .login-slogan { color:#202440;font-size:24px;line-height:1.35; }
#login .login-slogan strong { color:#385bff;font-weight:650; }
#login .login-slogan .login-slogan-lead { display:block;font-size:16px;color:#58627d;margin-bottom:4px; }
:is(.family-ui,.project-ui) #header .logo-tunel { max-width:124px; }
.family-ui #familyHub #familyPedir { --pd-ok:#277c48;--pd-mark:#ffe7e6; }
.family-ui[data-science-theme=night] #familyHub #familyPedir { --pd-ok:#7ad49c;--pd-mark:#523235;--pd-prep:#eac783;--pd-wait:#99acff;--pd-ask:#c7afff;--pd-bad:#ff9895; }
.family-ui #familyHub #familyPedir .pd-inicio { border-top:3px solid var(--brand-coral); }
#home .home-welcome { border-left:3px solid #ff6b6b;padding-left:16px; }
body.tunel-page .tunel-brand { display:block;width:160px;min-height:44px;margin-bottom:14px; }
body.tunel-page .tunel-brand img,body.tunel-legal .tunel-brand img { display:block;width:100%;height:auto; }
body.tunel-page.embedded .tunel-brand { display:none; }
html[data-theme=night] body.tunel-page .tunel-brand img { content:url('/static/tunel-brand-night.svg?v=1991c9a75d3a'); }
body.tunel-legal .tunel-brand { display:block;width:160px;margin-bottom:16px; }
@media(prefers-color-scheme:dark) { body.tunel-legal .tunel-brand img { content:url('/static/tunel-brand-night.svg?v=1991c9a75d3a'); } }

#welcome .logo-identity { width:220px;height:auto;margin:0 auto; }
#brandHome .logo-identity { width:124px;height:auto; }

.project-ui #header #brandHome .logo-identity { height:29px!important;width:124px; }
body.tunel-legal .tunel-brand { margin:24px auto 16px; }

/* Ingreso sin paisaje: la marca y el formulario comparten un eje central. */
#login { justify-content:center; }
#login .panel { flex:0 1 520px;width:100%;max-width:520px;margin:auto;padding:48px 32px; }
#login form { margin:0 auto; }
@media(max-width:760px) {
  #login .panel { padding:32px 24px; }
}


/* Ingreso esencial: la identidad y las acciones comparten el mismo eje. */
#login .login-brand { justify-content:center; }
#login .login-slogan { text-align:center; }
#login #loginTitle[hidden] { display:none; }
#login .login-note,#login #loginPie { text-align:center; }

/* El antiguo bloque introductorio queda sin contenido visible; conserva sus IDs. */
#login #portadaIntro { display:none; }

/* Un solo cuadro reúne escritura, voz y búsqueda. */
.family-ui #familyHub #familyPedir .pd-composer { border:1px solid var(--border);border-radius:24px;background:var(--bg);padding:12px;display:grid;gap:8px; }
.family-ui #familyHub #familyPedir .pd-composer:focus-within { outline:2px solid var(--accent);outline-offset:2px; }
.family-ui #familyHub #familyPedir .pd-composer .pd-campo { border:0;background:transparent;resize:vertical;min-height:48px;padding:4px;box-shadow:none;outline:none;font-size:18px; }
.family-ui #familyHub #familyPedir .pd-composer-tools { display:flex;justify-content:flex-end;gap:8px; }
.family-ui #familyHub #familyPedir .pd-composer-tools button { width:48px;min-width:48px;height:48px;padding:0;border-radius:50%;font-size:26px;display:grid;place-items:center; }
.family-ui #familyHub #familyPedir .pd-composer-tools .pd-microfono { background:var(--panel);color:var(--text);border:1px solid var(--border); }
.family-ui #familyHub #familyPedir .pd-composer-tools .pd-microfono.pd-grabando { background:var(--pd-bad);color:white;border-color:var(--pd-bad); }

.family-ui #familyHub #familyPedir .pd-composer .pd-campo::placeholder { color:var(--muted);opacity:1; }

@media (max-width:899px) { .family-ui #comprarLista { display:none; } }

/* Casa: un ancho útil centrado; el padding no se suma al 100% de la sección. */
.family-ui #familyHub,.family-ui #familyHub > section { box-sizing:border-box; }
.family-ui #familyHub > section { margin-inline:auto; }
.family-ui #familyHome { max-width:1160px; }
.family-ui #familyHub .family-home-layout { grid-template-columns:minmax(0,1fr); }
.family-ui #familyHub .family-home-layout details>summary { cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:600; }
.family-ui #familyHub .family-home-layout details>summary h3 { margin:0; }
.family-ui #familyComprar>summary { font-size:20px; }
#home #homeReturn { background:#ffffff;color:#385bff;border:1px solid #bcc6e1;padding:10px 16px; }
#home #homeReturn:hover { background:#edf0ff; }
@media(min-width:1100px) { .family-ui #familyHub .family-home-layout { grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:24px; } }
body.tunel-page.embedded .preview-extra { display:none; }
body.tunel-page #verListaCompleta { min-height:48px;width:100%;margin-top:12px;background:var(--field);color:var(--green);border:1px solid var(--line); }
body.tunel-page #utilidades>details>summary { min-height:48px;display:flex;align-items:center;cursor:pointer; }

body.tunel-page #compraStockDlg { box-sizing:border-box;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto; }
body.tunel-page #compraStockForm { display:grid;gap:12px;margin:0; }
body.tunel-page #compraStockForm h2,body.tunel-page #compraStockForm p { margin:0; }
body.tunel-page #compraStockForm label { display:grid;gap:6px; }
body.tunel-page #compraStockForm :is(input,select,button) { box-sizing:border-box;min-height:48px;max-width:100%;font:inherit;padding:10px 12px;border:1px solid var(--line);background:var(--paper);color:var(--ink); }
body.tunel-page #compraStockForm #compraStockGuardar { background:var(--green);color:var(--on-green);border-color:var(--green); }

.family-ui #familyHome :is(#familyComprar,#familyFacturas)>summary::after { content:"＋";margin-left:auto;padding-left:12px;color:var(--accent); }
.family-ui #familyHome :is(#familyComprar,#familyFacturas)[open]>summary::after { content:"−"; }

/* ======================================================================================================================
   Nueva estética de las familias (17/10/2026, maqueta de Codex `nueva-estetica/fuentes/conserje.html`, decisión de Hernán).
   Conserje · Casa · Pool · Más; tipografía del sistema; fondo #f7f7fd, panel blanco, líneas #d9dce8 y azul #4356f8 para las
   acciones. El Conserje viste de dorado (#d9a52e / #f3cf74): su pestaña activa, el borde de su pantalla y su botón de enviar.
   Nada más usa ese dorado. Todo lo tocable mide 44 px o más y nada se corre de costado a 390 px. Login y portada no se tocan.
   ====================================================================================================================== */
body.family-ui {
  --fam-bg:#f7f7fd;--fam-panel:#ffffff;--fam-ink:#222338;--fam-sub:#5d6377;--fam-line:#d9dce8;--fam-soft:#eeefff;
  --fam-blue:#4356f8;--fam-button:#4356f8;--fam-on-button:#ffffff;--fam-warm:#fff4e5;--fam-ok:#257a45;--fam-ok-soft:#e3f4e8;--fam-alert:#c4312b;
  --fam-gold:#d9a52e;--fam-gold-soft:#fbf1d8;--fam-gold-ink:#5c430b;--fam-on-gold:#2a2111;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
body.family-ui[data-science-theme=night] {
  --fam-bg:#171a28;--fam-panel:#222638;--fam-ink:#f3f2fa;--fam-sub:#b8bdd1;--fam-line:#3b4158;--fam-soft:#2c3151;
  --fam-blue:#9ba8ff;--fam-button:#4356f8;--fam-on-button:#ffffff;--fam-warm:#383123;--fam-ok:#82d6a0;--fam-ok-soft:#1f3a2b;--fam-alert:#ff8f88;
  --fam-gold:#f3cf74;--fam-gold-soft:#3a3220;--fam-gold-ink:#f3cf74;--fam-on-gold:#2a2111;
  /* el logotipo «TÚNEL» en claro sobre la noche (en la maqueta quedaba azul oscuro sobre fondo oscuro) */
  --brand-ink:#f1f0f7;--brand-blue:#ad8aff;--brand-coral:#ff9895;
}
body.family-ui[data-science-theme=day],body.family-ui[data-science-theme=night] {
  --bg:var(--fam-bg);--panel:var(--fam-panel);--border:var(--fam-line);--text:var(--fam-ink);--muted:var(--fam-sub);
  --other:var(--fam-soft);--me:var(--fam-soft);--accent:var(--fam-blue);--sci-selected:var(--fam-soft);
}
body.family-ui[data-science-theme=day] { --send:#4356f8;--send-hover:#3446e0;color-scheme:light; }
body.family-ui[data-science-theme=night] { --send:#9ba8ff;--send-hover:#b9c2ff;color-scheme:dark; }
body.family-ui { background:var(--fam-bg);color:var(--fam-ink); }
.family-ui :is(button,a,summary,input,select,textarea):focus-visible { outline:3px solid var(--fam-blue);outline-offset:2px; }
.family-ui #header { background:var(--fam-panel);border-bottom:1px solid var(--fam-line); }
.family-ui #header #users { display:none; }  /* la franja «N online · Ver familia» lo reemplaza */
.family-ui .family-icon { stroke-width:1.8; }

/* 👥 Quién está */
.family-ui #familyPresence { flex:none;background:var(--fam-panel);border-bottom:1px solid var(--fam-line);font-size:14px;color:var(--fam-ink); }
.family-ui #familyPresence > summary { display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 16px;list-style:none;cursor:pointer; }
.family-ui #familyPresence > summary::-webkit-details-marker { display:none; }
.family-ui #familyPresence .fam-presence-right { margin-left:auto;color:var(--fam-sub); }
.family-ui #familyPresence .fam-presence-right::after { content:" ▾"; }
.family-ui #familyPresence[open] .fam-presence-right::after { content:" ▴"; }
.family-ui #familyPresenceList { list-style:none;margin:0;padding:0 16px 10px;max-height:40vh;overflow:auto; }
.family-ui #familyPresenceList li { display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;border-top:1px solid var(--fam-line); }
.family-ui #familyPresenceList strong { font-weight:600;min-width:0;overflow-wrap:anywhere; }
.family-ui #familyPresenceList small { font-weight:400;color:var(--fam-sub); }
.family-ui #familyPresenceList li > span { white-space:nowrap;color:var(--fam-sub); }
.family-ui .fam-dot { display:inline-block;width:9px;height:9px;flex:none;border-radius:50%;background:var(--fam-ok); }
.family-ui .fam-dot.fam-off { background:transparent;border:1.5px solid var(--fam-sub);box-sizing:border-box; }

/* La barra: abajo en el celular, al costado en la computadora */
.family-ui #familyNav:not([hidden]) { gap:4px;padding:6px 8px max(6px,env(safe-area-inset-bottom));background:var(--fam-panel);border-top:1px solid var(--fam-line); }
.family-ui #familyNav button { position:relative;flex:1;max-width:none;min-width:0;min-height:56px;gap:2px;border:0;border-radius:16px;background:transparent;color:var(--fam-sub);font-size:12px;font-weight:500;padding:6px 4px; }
.family-ui #familyNav button:hover { background:var(--fam-soft); }
.family-ui #familyNav button[aria-current=page] { background:var(--fam-soft);color:var(--fam-blue);font-weight:700; }
.family-ui[data-science-theme=day] #familyNav button[aria-current=page]:not(.fam-nav-conserje) { color:#3346e6; }
.family-ui #familyNav .fam-nav-conserje[aria-current=page] { background:var(--fam-gold-soft);color:var(--fam-gold-ink);box-shadow:inset 0 3px 0 var(--fam-gold); }
.family-ui #familyNav .fam-nav-ico { position:relative;display:inline-flex; }
.family-ui #familyNav .fam-nav-txt { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%; }
.family-ui .fam-badge { position:absolute;top:-6px;right:-10px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--fam-alert);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center; }
.family-ui[data-science-theme=night] .fam-badge { color:#2a1210; }
@media(min-width:900px) {
  .family-ui #main #familyNav:not([hidden]) { flex:0 0 196px;width:196px;max-width:196px;padding:24px 12px;gap:6px;border-top:0;border-right:1px solid var(--fam-line);background:var(--fam-bg); }
  .family-ui #familyNav button { flex:none;flex-direction:row;justify-content:flex-start;gap:12px;min-height:48px;padding:12px 14px;font-size:15px;border-radius:14px; }
  .family-ui #familyNav .fam-nav-conserje[aria-current=page] { box-shadow:inset 3px 0 0 var(--fam-gold); }
  .family-ui .fam-badge { right:-8px; }
}
/* 👤 «Mi cuenta» destacado (19/10/2026, pedido de Hernán): en la compu, un botón propio en la barra, debajo de «Más» y separado de
   las cuatro pestañas (borde, fondo y la inicial de la cuenta en un círculo azul). En el celular la barra de abajo sigue con cuatro
   pestañas: ahí lo destacado es la primera tarjeta de Más. Azul de la familia, nunca el dorado (es del Conserje). */
.family-ui #familyNav .fam-nav-cuenta { display:none; }
.family-ui .fam-cuenta-avatar { display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--fam-button);color:var(--fam-on-button);font-size:16px;font-weight:700;line-height:1; }
.family-ui .fam-cuenta-avatar .family-icon { width:20px;height:20px; }
.family-ui #familyMore .fam-list .fam-cuenta-destacada { min-height:68px;margin:12px 0;padding:12px 14px;border:1.5px solid var(--fam-blue);border-radius:16px;background:var(--fam-soft);font-weight:700; }
.family-ui #familyMore .fam-cuenta-destacada > .fam-cuenta-avatar { flex:none;width:42px;height:42px;font-size:19px; }
@media(min-width:900px) {
  .family-ui #familyNav .fam-nav-cuenta { display:flex;align-items:center;margin-top:20px;border:1.5px solid var(--fam-blue);background:var(--fam-panel);color:var(--fam-ink);font-weight:700;text-align:left; }
  .family-ui #familyNav .fam-nav-cuenta:hover { background:var(--fam-soft); }
  .family-ui .fam-nav-cuenta-txt { display:flex;flex-direction:column;min-width:0; }
  .family-ui .fam-nav-cuenta-txt small { font-size:13px;font-weight:400;color:var(--fam-sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
}

/* El área de cada pestaña */
.family-ui #familyHub:not([hidden]) { background:var(--fam-bg);padding:20px 16px 28px; }
.family-ui #familyHub > section { max-width:720px;margin-inline:auto; }
.family-ui #familyHub h2 { font-size:30px;line-height:1.15;letter-spacing:-1px;font-weight:800;margin:0 0 6px;color:var(--fam-ink); }
.family-ui #familyHub h3 { font-size:20px;letter-spacing:-.3px;font-weight:750;margin:0 0 8px;color:var(--fam-ink); }
.family-ui #familyHub p.fam-sub,.family-ui #familyHub .fam-sub { color:var(--fam-sub);margin:0 0 16px;font-size:16px; }
.family-ui #familyHub .family-copy { color:var(--fam-sub); }
@media(min-width:900px) { .family-ui #familyHub:not([hidden]) { padding:32px clamp(24px,4vw,56px); } }
.family-ui .fam-block { background:var(--fam-panel);border:1px solid var(--fam-line);border-radius:18px;padding:16px;margin:14px 0; }
.family-ui .fam-block > summary { display:flex;align-items:center;gap:10px;min-height:48px;font-weight:650;cursor:pointer;color:var(--fam-ink); }
.family-ui .fam-door,.family-ui .fam-row,.family-ui .fam-chica { display:flex;align-items:center;gap:12px;width:100%;text-align:left;color:var(--fam-ink);background:var(--fam-panel);border:1px solid var(--fam-line);text-decoration:none;font:inherit;box-sizing:border-box; }
.family-ui .fam-door { min-height:76px;margin:10px 0;padding:14px 16px;border-radius:18px; }
.family-ui .fam-door strong { display:block;font-size:20px;letter-spacing:-.4px; }
.family-ui .fam-row { min-height:52px;margin:10px 0;padding:12px 14px;border-radius:14px;font-size:16px; }
.family-ui .fam-chica { min-height:48px;margin:6px 0;padding:8px 14px;border-radius:12px;background:transparent;font-size:15px; }
.family-ui :is(.fam-door,.fam-row,.fam-chica) > span { flex:1;min-width:0;overflow-wrap:anywhere; }
.family-ui :is(.fam-door,.fam-row,.fam-chica) small { display:block;color:var(--fam-sub);font-size:14px;margin-top:2px;font-weight:400; }
.family-ui :is(.fam-door,.fam-row,.fam-chica):hover { background:var(--fam-soft); }
.family-ui .fam-door > .family-icon:first-child,.family-ui .fam-row > .family-icon:first-child { color:var(--fam-blue); }
.family-ui .fam-chev { width:20px;height:20px;color:var(--fam-sub);margin-left:auto; }
.family-ui .fam-primary { display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 18px;border:0;border-radius:14px;background:var(--fam-button);color:var(--fam-on-button);font-weight:650;font-size:16px; }
.family-ui .fam-primary:hover { background:#3446e0; }
.family-ui .fam-primary:disabled { opacity:.6; }
.family-ui .fam-wide { width:100%;margin-top:6px; }
.family-ui .fam-caption { display:block;font-size:13px;line-height:1.5;color:var(--fam-sub);margin:10px 0 0; }
.family-ui .fam-extras { display:grid;gap:0;margin:14px 0; }
.family-ui .fam-back { display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 12px 8px 4px;border:0;background:transparent;color:var(--fam-blue);font-weight:600;font-size:16px; }
.family-ui .fam-frame,.family-ui #familyListFrame { display:block;width:100%;height:520px;border:0;border-radius:16px;background:transparent; }
.family-ui .fam-falta { background:var(--fam-warm);border-radius:16px;padding:14px 16px;margin:0 0 14px; }
.family-ui .fam-falta strong { display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;color:var(--fam-ink); }
.family-ui #familyHub .fam-falta p { margin:4px 0 0;color:var(--fam-ink);font-size:17px;font-weight:600; }
.family-ui .fam-chips { display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px; }
.family-ui .fam-chip { min-height:44px;padding:8px 14px;border-radius:22px;border:1px solid var(--fam-line);background:var(--fam-panel);color:var(--fam-ink); }
.family-ui .fam-chip { position:relative; }
.family-ui .fam-chip .fam-chip-badge { position:static;display:inline-block;margin-left:8px;vertical-align:1px; }
.family-ui #header #officeTop .family-icon { width:16px;height:16px;vertical-align:-3px;margin-right:4px; }
.family-ui .fam-chip[aria-pressed=true] { background:var(--fam-soft);border-color:var(--fam-blue);font-weight:650; }
.family-ui .fam-form { display:grid;gap:12px;padding:4px 0 6px;margin:0;background:transparent;border:0; }
.family-ui .fam-form label { display:grid;gap:6px;font-size:14px;color:var(--fam-ink); }
.family-ui .fam-form input { min-height:48px;padding:10px 12px;border:1px solid var(--fam-line);border-radius:12px;background:var(--fam-bg);color:var(--fam-ink);font-size:16px;width:100%;box-sizing:border-box; }
.family-ui .fam-err { color:var(--fam-alert);margin:0;font-size:14px; }
/* 🍽️ Reservar mesa (18/10/2026): tarjeta por pedido; todo lo tocable ≥ 44 px; el estado va en texto (el borde solo acompaña) */
.family-ui .reserva { background:var(--fam-panel);border:1px solid var(--fam-line);border-radius:18px;padding:14px 16px;margin:10px 0; }
.family-ui .reserva strong { display:block;font-size:18px;letter-spacing:-.3px; }
.family-ui #familyHub .reserva .fam-sub { margin:4px 0 0;font-size:15px; }
.family-ui .reserva .reserva-estado { margin:8px 0 0;font-size:15px;line-height:1.45; }
.family-ui .reserva .family-actions { margin-top:12px; }
.family-ui .reserva .family-actions :is(a,button) { min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--fam-line);background:var(--fam-panel);color:var(--fam-ink);text-decoration:none;font:inherit;font-size:15px;max-width:100%;overflow-wrap:anywhere; }
.family-ui .reserva .family-actions .fam-primary { border:0;background:var(--fam-button);color:var(--fam-on-button); }
.family-ui .reserva .family-actions button[disabled] { opacity:.55; }
.family-ui .reserva.est-confirmada { border-color:#2f9e5f; }
.family-ui .reserva.est-no_pude { border-color:var(--fam-alert); }
.family-ui .reserva.est-llamando { border-color:var(--fam-blue); }
.family-ui .reserva .reserva-motivo { margin-top:6px; }
.family-ui .fam-stepper { display:flex;align-items:center;gap:8px; }
.family-ui .fam-stepper button { min-width:44px;min-height:44px;border-radius:12px;border:1px solid var(--fam-line);background:var(--fam-panel);color:var(--fam-ink);font-size:22px;line-height:1; }
.family-ui .fam-form .fam-stepper input { width:72px;text-align:center;font-size:18px;flex:0 0 auto; }
.family-ui .fam-err:empty { display:none; }
.family-ui .fam-list { padding:4px 16px; }
.family-ui .fam-list .fam-row { margin:0;border:0;border-bottom:1px solid var(--fam-line);border-radius:0;background:transparent;padding:12px 0; }
.family-ui .fam-list .fam-row:last-child { border-bottom:0; }
.family-ui .fam-salir { color:var(--fam-alert); }
.family-ui .fam-salir > .family-icon:first-child { color:var(--fam-alert)!important; }
/* Casa: lo que ya existía (Organizar la compra, Cuentas) queda plegado como una fila más */
.family-ui #casaMain > details.family-card { padding:0 16px;margin:10px 0;border-radius:18px;border:1px solid var(--fam-line);background:var(--fam-panel); }
.family-ui #casaMain > details.family-card > summary { min-height:52px;font-size:16px;font-weight:600;color:var(--fam-ink);gap:10px; }
.family-ui #casaMain > details.family-card[open] { padding-bottom:16px; }
.family-ui #familyHome :is(#familyComprar,#familyFacturas) > summary::after { color:var(--fam-blue); }
.family-ui #familyComprar #comprarTitulo { font-size:16px; }
.family-ui #casaPanel h2 { margin-top:6px; }
.family-ui #familyBack:not([hidden]) { color:var(--fam-blue);font-weight:600; }

/* 🧩 Organizar algo con la familia (17/10/2026, Hernán: «no está intuitiva»): lo que ya están organizando arriba; abajo, tarjetas
   grandes tocables («¿Qué querés organizar?») y después UNA sola pregunta. Azul de acciones, nunca el dorado del Conserje. */
.family-ui .fam-orgs { display:grid;gap:0; }
.family-ui .fam-org { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.family-ui .fam-org > .fam-org-main { flex:1 1 240px;width:auto; }
.family-ui .fam-row:disabled { opacity:.75;cursor:default; }
.family-ui .fam-org-archivar { width:auto;flex:none;margin:0;color:var(--fam-sub); }
.family-ui #familyHub .fam-org-sub { font-size:15px;margin:18px 0 0;color:var(--fam-sub);font-weight:650; }
.family-ui .fam-tipos { display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px;margin-top:14px; }
.family-ui .fam-tipo { display:flex;align-items:center;gap:14px;min-height:88px;padding:14px 16px;border:1px solid var(--fam-line);border-radius:18px;background:var(--fam-bg);color:var(--fam-ink);text-align:left;font:inherit;cursor:pointer;width:100%;box-sizing:border-box; }
.family-ui .fam-tipo:hover { border-color:var(--fam-blue);background:var(--fam-soft); }
.family-ui .fam-tipo > .family-icon { width:28px;height:28px;padding:12px;flex:none;color:var(--fam-blue);background:var(--fam-soft);border-radius:16px;box-sizing:content-box; }
.family-ui .fam-tipo > span { flex:1;min-width:0;overflow-wrap:anywhere; }
.family-ui .fam-tipo strong { display:block;font-size:17px;letter-spacing:-.2px; }
.family-ui .fam-tipo small { display:block;color:var(--fam-sub);font-size:14px;margin-top:3px;font-weight:400; }
.family-ui .fam-elegido { display:flex;align-items:center;gap:10px;margin:0;font-weight:650;font-size:16px;color:var(--fam-sub); }
.family-ui .fam-elegido .family-icon { color:var(--fam-blue); }
.family-ui #famNewForm > label { font-size:22px;font-weight:750;letter-spacing:-.3px;color:var(--fam-ink); }
.family-ui #famNewForm .fam-back { justify-self:start; }
.family-ui .fam-sugerencia { display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;color:var(--fam-sub);font-size:14px; }
.family-ui .fam-sugerencia .fam-chip { font:inherit;font-size:15px;color:var(--fam-blue);border-style:dashed; }
@media(min-width:900px) {
  .family-ui .fam-tipo { min-height:96px; }
  .family-ui .fam-tipo strong { font-size:18px; }
  .family-ui .fam-tipo small { font-size:15px; }
}

/* 🛎️ El Conserje: limpio y de dorado */
.family-ui #familyHub #familyPedir { max-width:640px;--pd-ok:var(--fam-ok); }
/* 🚗 El Pool (19/10/2026, ítem 49): el mismo ancho que la ventana del Conserje; sin Pool, un dibujo que dé ganas (ítem 33) */
.family-ui #familyHub #familyPool { max-width:640px;margin-inline:auto; }
.family-ui .fam-pool-ilus { display:block;width:100%;max-width:420px;margin:0 auto; }
.family-ui .fam-pool-ilus svg { display:block;width:100%;height:auto; }
.family-ui .fam-pool-ilus[hidden] { display:none; }
.family-ui .fam-pool-auto { animation:fam-pool-bob 1.6s ease-in-out infinite; }
@keyframes fam-pool-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@media (prefers-reduced-motion:reduce) { .family-ui .fam-pool-auto { animation:none; } }
.family-ui .fam-pool-lema { text-align:center;margin:4px 0 14px; }
.family-ui .fam-pool-lema strong { display:block;font-size:30px;letter-spacing:-1px;line-height:1.1;color:var(--fam-ink); }
.family-ui .fam-pool-lema span { display:block;color:var(--fam-sub);font-size:19px;margin-top:2px; }
.family-ui #familyPoolNada #familyPoolArmar { width:100%;min-height:56px;font-size:18px; }
.family-ui #familyHub #familyPedir .pd-inicio { --pd-px:18px;--pd-py:22px;padding:var(--pd-py) var(--pd-px);border:1px solid var(--fam-line);border-top:3px solid var(--fam-gold);background:var(--fam-panel);border-radius:25px; }
.family-ui #familyHub #familyPedir .pd-kicker { color:var(--fam-gold-ink);margin:0; }
.family-ui[data-science-theme=day] #familyHub #familyPedir .pd-kicker { color:#7a5a0c; }
.family-ui #familyHub #familyPedir h2 { font-size:30px;font-weight:800;letter-spacing:-1px; }
.family-ui #familyHub #familyPedir .pd-marca { color:var(--fam-sub);font-size:17px; }
.family-ui #familyHub #familyPedir .pd-composer { border:1px solid var(--fam-line);border-radius:23px;background:var(--fam-bg);padding:14px; }
.family-ui #familyHub #familyPedir .pd-composer:focus-within { outline:2px solid var(--fam-gold);outline-offset:2px; }
.family-ui #familyHub #familyPedir .pd-composer .pd-campo { min-height:76px;font-size:17px;color:var(--fam-ink); }
.family-ui #familyHub #familyPedir .pd-composer-tools button { width:48px;min-width:48px;height:48px;border-radius:50%;padding:0;display:grid;place-items:center;background:var(--fam-panel);color:var(--fam-ink);border:1px solid var(--fam-line); }
.family-ui #familyHub #familyPedir .pd-composer-tools .pd-enviar { background:var(--fam-gold);border-color:var(--fam-gold);color:var(--fam-on-gold); }
.family-ui #familyHub #familyPedir .pd-composer-tools .pd-enviar:hover { filter:brightness(1.05); }
.family-ui #familyHub #familyPedir .pd-composer-tools .pd-ico { width:22px;height:22px; }
.family-ui #familyHub #familyPedir .pd-composer-tools .pd-microfono.pd-grabando { background:var(--pd-bad);border-color:var(--pd-bad);color:#fff; }
.family-ui #familyHub #familyPedir .pd-prim:not(.pd-enviar) { background:var(--fam-button);border-color:var(--fam-button);color:var(--fam-on-button); }
.family-ui #familyHub #familyPedir :is(.pd-bloque,.pd-tarjeta,details.pd-det) { background:var(--fam-panel);border:1px solid var(--fam-line);border-radius:20px; }
.family-ui #familyHub #familyPedir .pd-tarjeta { border-top:3px solid var(--fam-gold); }
.family-ui #familyHub #familyPedir .pd-btn { border-width:1px;border-radius:14px; }
@media(max-width:420px) { .family-ui #familyHub #familyPedir .pd-inicio { --pd-px:14px;--pd-py:18px; } }

/* Las páginas de la casa (lista, stock, Pool) con la misma paleta, también embebidas */
html:has(body.tunel-page) { --paper:#f7f7fd;--ink:#222338;--muted:#5d6377;--line:#d9dce8;--field:#eeefff;--card:#ffffff;--green:#4356f8;--on-green:#ffffff; }
html[data-theme=night]:has(body.tunel-page) { --paper:#171a28;--ink:#f3f2fa;--muted:#b8bdd1;--line:#3b4158;--field:#2c3151;--card:#222638;--green:#9ba8ff;--on-green:#171a28; }
body.tunel-page.embedded { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; }

/* 🛎️ «Tu próxima compra» en Casa (17/10/2026): la arma el Conserje, así que su fila es la única de Casa que viste de dorado */
.family-ui #familyHome .conserje-proxima-fila { border-color:var(--fam-gold);background:var(--fam-gold-soft);box-shadow:inset 3px 0 0 var(--fam-gold); }
.family-ui #familyHome .conserje-proxima-fila > .family-icon:first-child { color:var(--fam-gold-ink); }
.family-ui #familyHome .conserje-proxima-fila:hover { background:var(--fam-gold-soft);filter:brightness(.98); }

/* En la compu (≥ 900 px, 17/10/2026: «se ve todo muy chico»): más letra, una barra más ancha con íconos de 24 px, el Conserje centrado
   hasta 760 px y Casa y Pool en dos columnas como la maqueta de la Alacena. El celular no cambia. */
@media(min-width:900px) {
  body.family-ui { font-size:17px; }
  .family-ui #main #familyNav:not([hidden]) { flex:0 0 240px;width:240px;max-width:240px;padding:28px 16px;gap:8px; }
  .family-ui #familyNav button { min-height:52px;padding:12px 16px;font-size:16px;gap:14px;border-radius:16px; }
  .family-ui #familyNav .family-icon { width:24px;height:24px; }
  .family-ui #familyHub:not([hidden]) { padding:36px clamp(28px,4vw,64px); }
  .family-ui #familyHub > section { max-width:1120px; }
  .family-ui #familyHub h2 { font-size:38px;margin-bottom:8px; }
  .family-ui #familyHub h3 { font-size:22px; }
  .family-ui #familyHub p.fam-sub,.family-ui #familyHub .fam-sub { font-size:17px; }
  .family-ui #familyHub #familyPedir { max-width:760px;margin-inline:auto; }
  .family-ui #familyHub #familyPool { max-width:760px;margin-inline:auto; }
  .family-ui #familyHub #familyPedir h2 { font-size:38px; }
  .family-ui #familyHub #familyPedir .pd-composer .pd-campo { font-size:18px; }
  .family-ui #familyHub :is(#familyToday,#familyMore,#familyAsistente,#familyProjects) { max-width:820px; }
  .family-ui .fam-door { min-height:84px;padding:16px 18px; }
  .family-ui .fam-door strong { font-size:22px; }
  .family-ui .fam-row { min-height:56px;font-size:17px; }
  .family-ui .fam-chica { min-height:52px;font-size:16px; }
  .family-ui :is(.fam-door,.fam-row,.fam-chica) small { font-size:15px; }
  .family-ui .fam-primary { min-height:52px;font-size:17px;padding:14px 22px; }
  .family-ui .fam-caption { font-size:14px; }
  .family-ui .fam-block { padding:20px 22px;border-radius:22px; }
  .family-ui #casaMain > details.family-card > summary { min-height:56px;font-size:17px; }
  /* Casa: Compras a la izquierda y la Alacena a la derecha; lo plegado y las filas chicas, a lo ancho */
  /* 19/10/2026: las dos tarjetas a la misma altura y alineadas arriba (antes `align-items:start` las dejaba desniveladas) */
  .family-ui #casaMain:not([hidden]) { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px;align-items:stretch; }
  .family-ui #casaMain > :not(.fam-block) { grid-column:1 / -1; }
  .family-ui #casaMain > .fam-block { margin:18px 0 6px; }
  .family-ui .fam-frame,.family-ui #familyListFrame { border-radius:20px; }
}

/* 🏠 Casa más simple (19/10/2026, Hernán en vivo: «menos es más»): título con la casita, el ticket como botón principal, las
   tarjetas con títulos y estados (check verde suave «Está todo en casa» o «Faltan N» bien marcado) y el tachito en cada evento. */
.family-ui #familyHub .casa-tit { display:flex;align-items:center;gap:10px; }
.family-ui #familyHub .casa-tit .family-icon { width:30px;height:30px;color:var(--fam-blue);flex:none; }
.family-ui .casa-ticket { min-height:56px;margin:6px 0 4px; }
.family-ui .casa-tarjeta { display:flex;flex-direction:column; }
.family-ui .casa-tarjeta > h3 { margin:0 0 4px; }
.family-ui .casa-estado { display:flex;align-items:center;gap:8px;margin-top:6px;font-size:15px;color:var(--fam-sub); }
.family-ui .casa-estado.casa-ok { color:var(--fam-ok);font-weight:650; }
.family-ui .casa-check { display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--fam-ok-soft);color:var(--fam-ok);flex:none; }
.family-ui .casa-check .family-icon { width:16px;height:16px;stroke-width:2.6; }
.family-ui .casa-estado.casa-falta { display:inline-flex;width:fit-content;padding:3px 12px;border-radius:999px;background:var(--fam-warm);color:var(--fam-ink);font-weight:700;font-size:16px; }
.family-ui .casa-vacio { display:grid;justify-items:center;gap:10px;text-align:center;padding:24px 16px;margin:10px 0;border:1px dashed var(--fam-line);border-radius:18px; }
.family-ui #familyHub .casa-vacio p { margin:0;font-size:18px;font-weight:650;color:var(--fam-ink); }
.family-ui .casa-vacio-ic { display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--fam-soft);color:var(--fam-blue); }
.family-ui .casa-vacio-ic .family-icon { width:28px;height:28px; }
.family-ui .casa-evento { display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:10px 0; }
.family-ui .casa-evento .fam-door { margin:0;flex:1 1 0;min-width:0; }
.family-ui .casa-evento-borrar { flex:none;display:inline-flex;align-items:center;justify-content:center;width:56px;min-height:44px;padding:0;border:1px solid var(--fam-line);border-radius:18px;background:var(--fam-panel);color:var(--fam-sub);cursor:pointer; }
.family-ui .casa-evento-borrar:hover { color:var(--fam-alert);background:var(--fam-soft); }
.family-ui .casa-evento-borrar .family-icon { width:22px;height:22px; }
.family-ui .casa-evento-confirma { flex-basis:100%;display:grid; gap:8px; margin-top:0; padding:12px; border:1px solid var(--fam-line); border-radius:14px; background:var(--fam-panel); }
.family-ui .casa-evento-confirma p { margin:0; }
.family-ui .casa-evento-confirma button { min-height:44px; }
.family-ui .casa-evento-confirma button:not(.secondary) { background:var(--fam-button);color:var(--fam-on-button);border:0;font-weight:650; }

/* Simplificación aprobada 19/10: tres destinos principales; opciones secundarias. */
.family-ui #familyNav button[data-family-view=more] { flex:0 0 52px;max-width:52px; }
/* Ítems 55 y 56 (19/10/2026): dos tarjetas parejas debajo del Conserje (Recordatorios · Ayudante de familia), con la línea
   y el ancho de su tarjeta; en el celular se apilan. */
.family-ui #familyConserjeTarjetas { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:640px;margin:16px auto 0;width:100%;box-sizing:border-box; }
/* Mismo ancho que #familyPedir en escritorio; ambos conservan 640 px debajo de 900 px. */
@media (min-width:900px) { .family-ui #familyConserjeTarjetas { max-width:760px; } }
.family-ui #familyConserjeTarjetas[hidden] { display:none; }
.family-ui .fam-tarjeta { display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:120px;padding:20px 22px;border:1px solid var(--fam-line);border-radius:24px;background:var(--fam-panel);color:var(--fam-ink);text-align:left;font:inherit;font-weight:650;font-size:17px;cursor:pointer; }
.family-ui .fam-tarjeta:hover { background:var(--fam-soft); }
.family-ui .fam-tarjeta > .family-icon { width:26px;height:26px;color:var(--fam-blue);flex:none; }
.family-ui .fam-tarjeta > span { min-width:0;overflow-wrap:anywhere; }
.family-ui .fam-tarjeta small { display:block;color:var(--fam-sub);font-size:14px;font-weight:400;margin-top:2px; }
@media (max-width:560px) { .family-ui #familyConserjeTarjetas { grid-template-columns:1fr; } .family-ui .fam-tarjeta { flex-direction:row;align-items:center;min-height:80px;gap:12px; } }
.family-ui #familyRecordatoriosVista .fam-back,.family-ui #familyAsistente .fam-back { justify-self:start; }
.family-ui .pd-foto-opciones { display:flex;flex-wrap:wrap;gap:8px; }
.family-ui .pd-foto-opciones button,.family-ui .pd-acciones summary,.rec-crear summary { min-height:44px;padding:10px 14px; }
.family-ui #familyPedir .pd-tagline { display:none; }
@media(min-width:900px) { .family-ui #familyNav button[data-family-view=more] { flex:none;max-width:none;margin-top:24px; } }

/* 🧾 «¿De qué es esta compra?» (19/10/2026): Para casa o un evento abierto, como opciones tocables en la propuesta del ticket */
.ticket-lista { margin:6px 0 4px; }
.ticket-lista-tit { margin:0 0 6px;font-weight:650; }
.ticket-lista [role=radiogroup] { display:flex;flex-wrap:wrap;gap:8px; }
.ticket-lista-op { min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid var(--border,#d9dce8);background:transparent;color:inherit;font:inherit;cursor:pointer; }
.ticket-lista-op[aria-checked=true] { background:var(--accent,#4356f8);border-color:var(--accent,#4356f8);color:#fff;font-weight:650; }
body.family-ui[data-science-theme=night] .ticket-lista-op[aria-checked=true] { background:#4356f8;border-color:#4356f8; }
@media(min-width:900px) { .family-ui #familyHub .casa-tit .family-icon { width:36px;height:36px; } }

/* 🏠 Lo que hay en casa (19/10/2026, Hernán en vivo): una tarjeta por lugar del inventario, con su ícono de línea, y «+ Agregar lugar» */
.family-ui .casa-tit-ic { display:flex;align-items:center;gap:8px; }
.family-ui .casa-tit-ic .family-icon { width:26px;height:26px;color:var(--fam-blue);flex:none; }
.family-ui .casa-lugares-hay { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0; }
.family-ui .casa-lugar { display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:116px;padding:14px;border:1px solid var(--fam-line);border-radius:18px;background:var(--fam-panel);color:var(--fam-ink);text-align:left;font:inherit;cursor:pointer;box-sizing:border-box;min-width:0; }
.family-ui .casa-lugar:hover { background:var(--fam-soft); }
.family-ui .casa-lugar-ic { display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:var(--fam-soft);color:var(--fam-blue);margin-bottom:6px; }
.family-ui .casa-lugar-ic .family-icon { width:24px;height:24px; }
.family-ui .casa-lugar strong { font-size:18px;letter-spacing:-.2px;overflow-wrap:anywhere;max-width:100%; }
.family-ui .casa-lugar small { font-size:14px;color:var(--fam-sub); }
.family-ui .casa-lugar small.casa-lugar-falta { color:var(--fam-ink);font-weight:650; }
.family-ui .casa-lugar-nuevo { border-style:dashed;justify-content:center;align-items:center;text-align:center;background:transparent; }
.family-ui .casa-lugar-nuevo strong { font-size:16px; }
.family-ui .casa-lugar-iconos { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px; }
.family-ui .casa-lugar-iconos button { min-height:52px;border:1px solid var(--fam-line);border-radius:14px;background:var(--fam-panel);color:var(--fam-ink);display:grid;place-items:center;cursor:pointer;padding:0; }
.family-ui .casa-lugar-iconos button[aria-checked=true] { border:2px solid var(--fam-blue);color:var(--fam-blue);background:var(--fam-soft); }
.family-ui .casa-lugar-iconos .family-icon { width:24px;height:24px; }
@media(min-width:900px) { .family-ui .casa-lugar { min-height:124px; } .family-ui .casa-lugar strong { font-size:19px; } }
.family-ui #casaPanelTit.casa-tit-ic .family-icon { width:30px;height:30px; }
.family-ui #casaPanelLugarNuevo .fam-form { max-width:560px; }
/* ---------------------------------------------------------------- Revisión en vivo del 19/10/2026 */
/* Mi cuenta en el celular: el avatar con la inicial en el encabezado; «Salir» queda en Más y en Mi cuenta. En la compu, la barra. */
#familyHeadCuenta { display:none; }
@media (max-width:899px) {
  .family-ui #familyHeadCuenta { display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border:0;background:transparent;border-radius:50%;flex:none; }
  .family-ui #familyHeadCuenta:focus-visible { outline:3px solid var(--fam-blue);outline-offset:2px; }
  .family-ui #familyHeadCuenta .fam-cuenta-avatar { width:38px;height:38px;font-size:17px; }
  .family-ui #logoutTop { display:none; }
}
/* Más: «Ajustes de pantalla» es una ruedita al lado del título */
.family-ui #familyMore .fam-mas-cabeza { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.family-ui #familyMore .fam-gear { width:48px;height:48px;min-width:48px;padding:0;display:grid;place-items:center;border-radius:50%;background:var(--fam-panel);color:var(--fam-ink);border:1px solid var(--fam-line); }
.family-ui #familyMore .fam-gear[aria-expanded=true] { background:var(--fam-soft);border-color:var(--fam-blue); }
.family-ui #familyMore .fam-gear .family-icon { width:24px;height:24px; }
.family-ui #familyMore #familyScreenSettings { padding:14px 16px; }
.family-ui #familyMore #familyScreenSettings p { margin:0 0 8px; }
/* El chat de la familia: sin «Para: Grupo · Opciones» ni las opciones de los ayudantes; «Vaciar chat» detrás de «···» */
.family-ui #scienceMessageOptionsToggle, .family-ui #scienceMessageOptions { display:none !important; }
.family-ui #threadTitle #searchToggle { margin-left:auto; }
.family-ui #threadTitle .fam-chat-mas { position:relative; }
.family-ui #threadTitle .fam-chat-mas > summary { list-style:none;cursor:pointer;min-width:44px;min-height:44px;display:grid;place-items:center;border-radius:12px;font-size:20px;font-weight:700;letter-spacing:1px;color:var(--fam-ink); }
.family-ui #threadTitle .fam-chat-mas > summary::-webkit-details-marker { display:none; }
.family-ui #threadTitle .fam-chat-mas .fam-chat-menu { position:absolute;right:0;top:100%;z-index:5;background:var(--fam-panel);border:1px solid var(--fam-line);border-radius:14px;padding:6px;box-shadow:0 8px 24px rgba(20,24,60,.14); }
.family-ui #threadTitle .fam-chat-mas .fam-chat-menu button { min-height:44px;white-space:nowrap;color:var(--danger,#b5442c); }
.family-ui #threadTitle b { font-size:20px; }
/* Ítem 53 (19/10/2026): el chat abre en lo último; «N nuevos desde la última vez» separa lo que faltaba leer. */
.family-ui .sinleer-sep { display:flex;align-items:center;gap:10px;margin:14px 4px;color:var(--fam-blue);font-size:13px;font-weight:700;letter-spacing:.02em; }
.family-ui .sinleer-sep::before,.family-ui .sinleer-sep::after { content:"";flex:1;border-top:1.5px solid var(--fam-blue);opacity:.45; }
.conserje-pregunta { display:none; }
.family-ui .conserje-pregunta:not([hidden]) { display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 12px 0;padding:10px 12px;border:1px solid var(--fam-gold);border-radius:16px;background:var(--fam-panel);color:var(--fam-ink); }
.family-ui .conserje-pregunta span { flex:1 1 100%;font-weight:600; }
.family-ui .conserje-pregunta button { min-height:44px;border-radius:14px; }
.family-ui .conserje-pregunta .conserje-si { background:var(--fam-gold);border-color:var(--fam-gold);color:var(--fam-on-gold);font-weight:700; }
/* El Conserje: su nombre es el título grande; la familia y Reservar debajo del cuadro */
.family-ui #familyHub #familyPedir .pd-conserje-tit { font-size:40px;font-weight:800;letter-spacing:-1.2px;color:var(--fam-ink); }
.family-ui #familyHub #familyPedir .pd-conserje-tit .pd-ico { color:var(--fam-gold); }
.family-ui #familyHub #familyPedir .pd-saludo { font-size:20px;color:var(--fam-sub);font-weight:600; }
/* Familia y Reservar, centrados debajo del cuadro (20/10/2026): mismos colores de la casa. */
.family-ui #familyHub #familyPedir .pd-accesos .pd-btn { min-height:48px;border:1px solid var(--fam-line);background:var(--fam-panel);color:var(--fam-ink);border-radius:18px;font-size:17px; }
.family-ui #familyHub #familyPedir .pd-familia { border-color:var(--fam-blue) !important;color:var(--fam-blue); }
.family-ui #familyHub #familyPedir .pd-familia .pd-ico { width:24px;height:24px;color:var(--fam-blue); }
.family-ui #familyHub #familyPedir .pd-link { background:none;border:0;color:var(--fam-sub);text-decoration:underline;text-underline-offset:3px;font-weight:500;font-size:16px;min-height:44px;padding:0 8px; }
.family-ui #familyHub #familyPedir .pd-badge { background:#d93a2f; }
@media (max-width:420px) { .family-ui #familyHub #familyPedir .pd-conserje-tit { font-size:34px; } }
/* 🧾 La hoja del ticket (19/10/2026, revisión en vivo ítems 19, 24 y 26): la compra se revisa en Casa o en el Conserje, nunca en el
   panel viejo. Renglones con nombre, − n + (44 px), lugar y ×; «¿De qué es esta compra?», el gasto opcional, Guardar y Cancelar. */
.family-ui #casaMain > #ticketFam { grid-column:1 / -1; }
.family-ui .ticket-fam { display:grid;gap:12px;margin:10px 0; }
.family-ui .ticket-fam[hidden] { display:none; }
.family-ui #familyHub .ticket-fam h3 { margin:0;font-size:20px;color:var(--fam-ink); }
.family-ui .ticket-fam-estado { margin:0;color:var(--fam-sub);font-size:16px; }
.family-ui .ticket-fam-estado:empty { display:none; }
.family-ui .ticket-fam-filas { display:grid;gap:0;margin:0;padding:0;list-style:none; }
.family-ui .ticket-fam-fila { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-items:center;padding:12px 0;border-top:1px solid var(--fam-line); }
.family-ui .ticket-fam-fila:first-child { border-top:0;padding-top:4px; }
.family-ui .ticket-fam-nombre { min-height:44px;padding:8px 12px;border:1px solid var(--fam-line);border-radius:12px;background:var(--fam-bg);color:var(--fam-ink);font-size:16px;width:100%;box-sizing:border-box; }
.family-ui .ticket-fam-quitar { min-width:44px;min-height:44px;border-radius:12px;border:1px solid var(--fam-line);background:transparent;color:var(--fam-sub);font-size:22px;line-height:1; }
.family-ui .ticket-fam-linea { grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px; }
.family-ui .ticket-fam-linea .fam-stepper input { width:64px;min-height:44px;padding:6px;text-align:center;font-size:17px;border:1px solid var(--fam-line);border-radius:12px;background:var(--fam-bg);color:var(--fam-ink);box-sizing:border-box; }
.family-ui .ticket-fam-lugar { min-height:44px;padding:8px 10px;border:1px solid var(--fam-line);border-radius:12px;background:var(--fam-panel);color:var(--fam-ink);font-size:16px;max-width:100%; }
.family-ui .ticket-fam-precio { margin-left:auto;color:var(--fam-sub);font-size:15px; }
.family-ui .ticket-fam-aviso { grid-column:1 / -1;margin:0;font-size:14px;color:var(--fam-sub); }
.family-ui .ticket-fam-check { display:flex;align-items:center;gap:10px;min-height:44px;font-size:16px;color:var(--fam-ink); }
.family-ui .ticket-fam-check input { width:22px;height:22px;margin:0;flex:none; }
.family-ui .ticket-fam-acciones { display:flex;flex-wrap:wrap;gap:10px; }
.family-ui .ticket-fam-acciones[hidden] { display:none; }
.family-ui .ticket-fam-acciones button { flex:1 1 140px; }
.family-ui .ticket-fam-sec { display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 18px;border:1px solid var(--fam-line);border-radius:14px;background:var(--fam-panel);color:var(--fam-ink);font-weight:600;font-size:16px; }
.family-ui #familyHub .ticket-fam .ticket-lista-op { min-height:44px;background:var(--fam-panel);border:1px solid var(--fam-line);color:var(--fam-ink);filter:none; }
.family-ui #familyHub .ticket-fam .ticket-lista-op[aria-checked=true] { background:var(--fam-button);border-color:var(--fam-button);color:var(--fam-on-button);font-weight:650; }
.family-ui #ticketFamTit:focus { outline:none; }

/* ======================================================================================================================
   🎨 La familia gráfica (20/10/2026, decisión de Hernán, ítem 62 de docs/revision_en_vivo_2026-10-19.md; docs/familia_grafica.md).
   Las piezas las dibuja chat/static/familia_grafica.js (SVG plano, sin contorno) con estos colores: la gente (f1–f3 familias,
   k1–k3 chicos: a la misma persona siempre el mismo) y el paisaje. Son dibujo, no interfaz: nunca pintan un botón ni un borde.
   El dorado sigue siendo SOLO del Conserje (su campanita, su tapa). Las micro-animaciones se apagan con prefers-reduced-motion.
   ====================================================================================================================== */
body.family-ui { --fam-f1:#4356f8;--fam-f2:#e2675f;--fam-f3:#2fa5a0;--fam-k1:#f2a93b;--fam-k2:#2fa5a0;--fam-k3:#9b6cf2;--fam-loma:#cfe6d4; }
body.family-ui[data-science-theme=night] { --fam-loma:#223a33; }
.fg { display:block;width:100%;height:100%; }
@keyframes fg-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-1.6px); } }
@keyframes fg-luz { 0%,100% { opacity:.25; } 50% { opacity:.6; } }
@keyframes fg-entra { from { opacity:0;transform:translateY(10px); } to { opacity:1;transform:none; } }
.fg .fg-bob { animation:fg-bob 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center; }
.fg .fg-luz { animation:fg-luz 3s ease-in-out infinite; }
/* 🏠 Casa: la casita en su escudo suave, cada tarjeta abre con su micro-escena (la bolsa, los frascos) y las filas llevan su marca de color */
.family-ui .casa-tit-esc { display:inline-grid;place-items:center;flex:none;width:48px;height:48px;border-radius:16px;background:var(--fam-soft);color:var(--fam-blue); }
.family-ui #familyHub .casa-tit .casa-tit-esc .family-icon { width:28px;height:28px; }
.family-ui .casa-tarjeta { overflow:hidden; }
.family-ui .casa-tapa { flex:none;height:96px;margin:-16px -16px 12px;background:var(--fam-soft);overflow:hidden; }
.family-ui .casa-tapa > span,.family-ui .casa-tapa .fg { display:block;width:100%;height:100%; }
.family-ui .fg-marca { display:inline-grid;place-items:center;width:38px;height:38px;border-radius:13px;color:#fff; }
.family-ui :is(.fam-door,.fam-row,.fam-chica) > .fg-marca { flex:none; }
.family-ui .fg-marca .family-icon { width:20px;height:20px;stroke-width:2; }
.family-ui .fg-f1 { background:var(--fam-f1); } .family-ui .fg-f2 { background:var(--fam-f2); } .family-ui .fg-f3 { background:var(--fam-f3); }
.family-ui .fg-k1 { background:var(--fam-k1); } .family-ui .fg-k2 { background:var(--fam-k2); } .family-ui .fg-k3 { background:var(--fam-k3); }
.family-ui .casa-falta-ic { display:inline-flex;align-items:center;flex:none;color:inherit; }
.family-ui .casa-falta-ic .family-icon { width:17px;height:17px;stroke-width:2; }
/* cada lugar, dibujado en su color; el tilde verde en la punta solo cuando de verdad está todo */
.family-ui .casa-lugar { position:relative; }
.family-ui .casa-lugar-ic:has(.fg) { width:100%;height:60px;border-radius:0;background:transparent;margin-bottom:4px; }
.family-ui .casa-lugar-ic .fg { width:auto;height:100%;margin:0 auto; }
.family-ui .casa-lugar-ok { position:absolute;top:10px;right:10px;width:24px;height:24px; }
.family-ui .casa-lugar-ok .fg { width:24px;height:24px; }
.family-ui .casa-vacio-ic:has(.fg) { width:72px;height:72px;border-radius:22px;background:transparent;overflow:hidden; }
@media(min-width:900px) {
  .family-ui .casa-tapa { height:116px;margin:-20px -22px 14px; }
  .family-ui .casa-tit-esc { width:54px;height:54px;border-radius:18px; }
  .family-ui #familyHub .casa-tit .casa-tit-esc .family-icon { width:30px;height:30px; }
}
/* 🛎️ El Conserje: la campanita con su luz arriba de la tarjeta (la única tapa dorada), las dos tarjetas de abajo con su pieza */
.family-ui #familyHub #familyPedir .pd-tapa { height:104px;margin:calc(-1 * var(--pd-py)) calc(-1 * var(--pd-px)) 0;border-radius:22px 22px 0 0;overflow:hidden;background:var(--fam-gold-soft); }
.family-ui #familyHub #familyPedir .pd-tapa .fg { display:block;width:100%;height:100%; }
.family-ui .fam-tarjeta-mini { flex:none;width:72px;height:72px;border-radius:18px;overflow:hidden;background:var(--fam-soft); }
.family-ui .fam-tarjeta-mini .fg { display:block;width:100%;height:100%; }
@media (max-width:560px) { .family-ui .fam-tarjeta-mini { width:56px;height:56px;border-radius:14px; } }
@media(min-width:900px) { .family-ui #familyHub #familyPedir .pd-tapa { height:120px; } }
/* entrar desde abajo (0,34 s) cuando la pantalla aparece; nada se mueve si la persona pidió menos movimiento */
.family-ui #familyHome:not([hidden]) #casaMain:not([hidden]) > .casa-tarjeta,.family-ui #familyPedir:not([hidden]) .pd-inicio,
.family-ui #familyConserjeTarjetas:not([hidden]) > .fam-tarjeta { animation:fg-entra .34s ease both; }
.family-ui #familyConserjeTarjetas:not([hidden]) > .fam-tarjeta:nth-child(2),.family-ui #familyHome:not([hidden]) #casaMain:not([hidden]) > .casa-tarjeta + .casa-tarjeta { animation-delay:.06s; }
@media (prefers-reduced-motion:reduce) { .fg *,.family-ui .casa-tarjeta,.family-ui .pd-inicio,.family-ui .fam-tarjeta { animation:none !important; } }

/* ======================================================================================================================
   La familia gráfica del Túnel (20/10/2026, docs/familia_grafica.md; maquetas docs/prototipos/familia_grafica.html y
   pool_mundo.html). Los colores del PAISAJE (dibujo, nunca acentos de la interfaz), los de la gente (tres para familias, tres
   para chicos) y las micro-animaciones. Las piezas (auto, casa, club, camino, cono, bandera, caritas) las arma
   chat/static/familia_grafica.js con createElementNS y leen estas variables, así se ven igual en index.html y en pool.html.
   Claro = tarde (cielo celeste a durazno); noche = azules profundos y estrellas. El dorado sigue siendo SOLO del Conserje.
   ====================================================================================================================== */
:root {
  --fg-cielo1:#bcd8f7;--fg-cielo2:#e3e2fb;--fg-cielo3:#fbe0d2;--fg-sol:#ffd49b;
  --fg-loma1:#cfe6d4;--fg-loma2:#bcd9c6;--fg-arbol:#9ccfae;--fg-arbol2:#79b792;
  --fg-road:#e4e7f2;--fg-road-line:#ffffff;--fg-noche1:#2a3570;--fg-noche2:#4a4a8e;--fg-estrella:#fff6cf;
  --fg-f1:#4356f8;--fg-f2:#e2675f;--fg-f3:#2fa5a0;--fg-k1:#f2a93b;--fg-k2:#2fa5a0;--fg-k3:#9b6cf2;
  --fg-piel:#f3cfae;--fg-piel2:#e8b991;--fg-pelo:#49331f;--fg-pelo2:#3a2a46;--fg-tinta:#2b2335;--fg-rueda:#2b2f45;--fg-rin:#aeb4d0;--fg-vidrio:#dfe6ff;
  --fg-panel:#ffffff;--fg-line:#d9dce8;--fg-ink:#222338;--fg-sub:#5d6377;--fg-soft:#eeefff;--fg-blue:#4356f8;
  --fg-ok:#257a45;--fg-wait:#7a5300;--fg-alert:#c4312b;--fg-alert-soft:#fde9e7;
}
html[data-theme=night], body.family-ui[data-science-theme=night] {
  --fg-cielo1:#1e2a52;--fg-cielo2:#2b2f57;--fg-cielo3:#46345a;--fg-sol:#6f5aa0;
  --fg-loma1:#223a33;--fg-loma2:#1d3029;--fg-arbol:#2d5a44;--fg-arbol2:#23493a;
  --fg-road:#333a54;--fg-road-line:#525b7d;--fg-noche1:#131a3a;--fg-noche2:#242a56;
  --fg-panel:#222638;--fg-line:#3b4158;--fg-ink:#f3f2fa;--fg-sub:#b8bdd1;--fg-soft:#2c3151;--fg-blue:#9ba8ff;
  --fg-ok:#82d6a0;--fg-wait:#f3d38d;--fg-alert:#ff8f88;--fg-alert-soft:#3d2222;
}
.fg-av { display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff;font-weight:800;font-size:17px;flex:none;box-shadow:0 4px 10px rgba(20,24,60,.18); }
.fg-av.f1 { background:var(--fg-f1); } .fg-av.f2 { background:var(--fg-f2); } .fg-av.f3 { background:var(--fg-f3); }
.fg-av.k1 { background:var(--fg-k1);color:#2a1a00; } .fg-av.k2 { background:var(--fg-k2); } .fg-av.k3 { background:var(--fg-k3); }
.fg-av.vacio { background:transparent;border:2px dashed var(--fg-alert);color:var(--fg-alert);box-shadow:none; }
.fg-cara { display:block;flex:none;border-radius:50%;box-shadow:0 6px 14px rgba(20,24,60,.18); }
.fg-cara.apagada { opacity:.38;filter:grayscale(.7); }
.fg-ico { width:22px;height:22px;flex:none; } .fg-ico.s { width:18px;height:18px; }
.fg-escena { display:block;width:100%;height:auto; }
.fg-sprite { position:absolute;width:0;height:0;overflow:hidden; }
@keyframes fg-tiembla { 0%,100% { transform:rotate(-4deg); } 50% { transform:rotate(4deg); } }
@keyframes fg-brilla { 0%,100% { opacity:.35; } 50% { opacity:1; } }
.fg-bob { animation:fg-bob 1.8s ease-in-out infinite; }
.fg-cono { animation:fg-tiembla 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 90%; }
.fg-estrella { animation:fg-brilla 3s ease-in-out infinite; }
.fg-entra { animation:fg-entra .34s ease both; }
/* el auto que se mueve va ADENTRO de otro <g> que lo posiciona (`.fg-auto-pos`): una animación CSS sobre transform pisa el transform del <g> */
.fg-auto-pos { transition:transform .9s cubic-bezier(.4,.1,.2,1); }
.fg-hecho { transition:stroke-dashoffset .9s cubic-bezier(.4,.1,.2,1); }
@media (prefers-reduced-motion:reduce) { .fg-bob,.fg-cono,.fg-estrella,.fg-entra { animation:none; } .fg-auto-pos,.fg-hecho { transition:none; } }

/* 👧 Los chicos de la casa (20/10/2026, maqueta docs/prototipos/pool_mundo.html, escenas 1 y 2): la ficha de cada hijo y lo que cuelga de él.
   Colores de la interfaz: los --fam-*; las caritas y los íconos, de familia_grafica.js (--fg-*). El dorado es SOLO del Conserje (.conserje-nota). */
.family-ui .fam-mundo-h { display:flex;align-items:flex-start;gap:12px;margin:0 0 14px; }
.family-ui .fam-mundo-h > div { flex:1;min-width:0; }
.family-ui #familyHub .fam-mundo-h h2 { margin:0;font-size:28px;line-height:1.05;letter-spacing:-.8px;font-weight:800; }
.family-ui #familyHub .fam-mundo-h .fam-sub { margin:4px 0 0;font-size:15px; }
.family-ui .fam-esc { width:54px;height:54px;border-radius:18px;background:var(--fam-soft);display:grid;place-items:center;color:var(--fam-blue);flex:none; }
.family-ui .fam-esc .family-icon { width:30px;height:30px; }
.family-ui .fam-hijo { display:block;width:100%;text-align:left;background:var(--fam-panel);border:1px solid var(--fam-line);border-radius:26px;padding:16px;margin:0 0 14px;box-shadow:0 12px 30px rgba(30,34,80,.08);color:var(--fam-ink);font:inherit;box-sizing:border-box; }
.family-ui .fam-hijo-top { display:flex;align-items:center;gap:14px; }
.family-ui .fam-hijo-top > div { flex:1;min-width:0; }
.family-ui .fam-hijo-top b { font-size:23px;letter-spacing:-.4px;display:block;line-height:1.15;overflow-wrap:anywhere; }
.family-ui .fam-hijo-top small { color:var(--fam-sub);font-size:15px; }
.family-ui .fam-lapiz { width:44px;height:44px;border-radius:50%;border:1px solid var(--fam-line);background:var(--fam-panel);display:grid;place-items:center;color:var(--fam-sub);flex:none;padding:0;cursor:pointer; }
.family-ui .fam-lapiz:hover { border-color:var(--fam-blue);color:var(--fam-blue); }
.family-ui .fam-cuelga { display:grid;gap:8px;margin-top:14px; }
.family-ui .fam-cosa { display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:56px;padding:11px 12px;border-radius:18px;border:1px solid var(--fam-line);background:var(--fam-bg);color:var(--fam-ink);font:inherit;flex-wrap:wrap;cursor:pointer;box-sizing:border-box; }
.family-ui .fam-cosa:hover { border-color:var(--fam-blue);background:var(--fam-soft); }
.family-ui .fam-cosa > span:nth-child(2) { flex:1;min-width:140px; }
.family-ui .fam-cosa b { display:block;font-size:17px;line-height:1.2;overflow-wrap:anywhere; }
.family-ui .fam-cosa small { display:block;color:var(--fam-sub);font-size:14px;margin-top:2px; }
.family-ui .fam-cosa-nueva { border-style:dashed;background:transparent; }
.family-ui .fam-cosa-eligiendo { cursor:default;background:var(--fam-panel); }
.family-ui .fam-cosa-eligiendo .fam-chips { margin:8px 0 0; }
.family-ui .fam-bolita { width:40px;height:40px;border-radius:14px;display:grid;place-items:center;color:#fff;flex:none; }
.family-ui .fam-bolita.k1 { background:var(--fg-k1);color:#2a1a00; } .family-ui .fam-bolita.k2 { background:var(--fg-k2); } .family-ui .fam-bolita.k3 { background:var(--fg-k3); }
.family-ui .fam-bolita.f1 { background:var(--fg-f1); } .family-ui .fam-bolita.f2 { background:var(--fg-f2); } .family-ui .fam-bolita.f3 { background:var(--fg-f3); }
.family-ui .fam-bolita.soft { background:var(--fam-soft);color:var(--fam-blue); }
.family-ui .fam-est { display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;border-radius:999px;padding:5px 11px;white-space:nowrap;background:var(--fam-soft);color:var(--fam-sub);margin-left:auto; }
.family-ui .fam-est.ok { background:var(--fam-ok-soft);color:var(--fam-ok); }
.family-ui .fam-est.wait { background:#fff0d2;color:#7a5300; }
.family-ui[data-science-theme=night] .fam-est.wait { background:#3a3020;color:#f3d38d; }
.family-ui .fam-est.no { background:var(--fam-alert);color:#fff; }
.family-ui[data-science-theme=night] .fam-est.no { color:#2a1210; }
.family-ui .fam-hijo-nuevo { display:flex;align-items:center;gap:14px;border-style:dashed;box-shadow:none;background:transparent;cursor:pointer;min-height:88px; }
.family-ui .fam-hijo-nuevo:hover { border-color:var(--fam-blue);background:var(--fam-soft); }
.family-ui .fam-hijo-nuevo b { font-size:19px;display:block; }
.family-ui .fam-hijo-nuevo small { color:var(--fam-sub);font-size:14px; }
.family-ui .fam-cara-vacia { width:68px;height:68px;border-radius:50%;border:2px dashed var(--fam-line);display:grid;place-items:center;color:var(--fam-sub);font-size:30px;font-weight:700;flex:none; }
.family-ui :is(.fam-door,.fam-row,.fam-chica,.fam-cosa) > .fam-bolita { flex:none;width:40px;height:40px; }
.family-ui .conserje-nota { background:var(--fam-panel);border:1px solid var(--fam-line);border-top:3px solid var(--fam-gold);border-radius:22px;padding:14px 16px;margin:14px 0 0; }
.family-ui #familyHub .conserje-nota p { margin:0;font-size:16px;color:var(--fam-ink); }
.family-ui #familyHub .conserje-nota .conserje-nota-kick { font-size:13px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;color:var(--fam-gold-ink);margin:0 0 6px; }
/* la ficha: una tarjeta amable, nada de formulario */
.family-ui .fam-ficha { padding:20px;border-radius:24px; }
.family-ui .fam-elegir-cara { display:flex;align-items:center;gap:16px;flex-wrap:wrap; }
.family-ui .fam-colores { display:flex;gap:8px;flex-wrap:wrap; }
.family-ui .fam-color { width:44px;height:44px;border-radius:50%;border:3px solid transparent;padding:0;display:grid;place-items:center;color:#fff;cursor:pointer; }
.family-ui .fam-color.k1 { background:var(--fg-k1); } .family-ui .fam-color.k2 { background:var(--fg-k2); } .family-ui .fam-color.k3 { background:var(--fg-k3); } .family-ui .fam-color.f2 { background:var(--fg-f2); }
.family-ui .fam-color.otra { background:var(--fam-soft);color:var(--fam-blue);border-color:var(--fam-line); }
.family-ui .fam-color[aria-pressed=true] { border-color:var(--fam-ink); }
.family-ui #familyHub .fam-rotulo { margin:20px 0 8px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--fam-sub); }
.family-ui .fam-nombre { width:100%;box-sizing:border-box;border:0;border-bottom:2px solid var(--fam-line);border-radius:0;background:transparent;color:var(--fam-ink);font:inherit;font-size:28px;font-weight:800;letter-spacing:-.6px;padding:4px 0 6px;min-height:48px; }
.family-ui .fam-nombre:focus { outline:none;border-bottom-color:var(--fam-blue); }
.family-ui .fam-texto { width:100%;box-sizing:border-box;min-height:48px;margin-top:8px;border:1px solid var(--fam-line);border-radius:14px;background:var(--fam-panel);color:var(--fam-ink);font:inherit;font-size:17px;padding:10px 14px; }
.family-ui .fam-stepw { display:flex;align-items:center;gap:12px;color:var(--fam-sub); }
.family-ui .fam-step { display:inline-flex;align-items:center;border:1px solid var(--fam-line);border-radius:14px;background:var(--fam-panel); }
.family-ui .fam-step button { width:48px;height:48px;border:0;background:none;font-size:22px;color:var(--fam-ink);cursor:pointer;font:inherit; }
.family-ui .fam-step output { min-width:34px;text-align:center;font-weight:800;font-size:20px;color:var(--fam-ink); }
.family-ui .fam-chip[aria-pressed=true] { background:var(--fam-soft);border-color:var(--fam-blue);color:var(--fam-blue);font-weight:650; }
.family-ui .fam-chip .fg-ico { margin-right:6px;vertical-align:-4px; }
.family-ui .fam-ficha-acc { display:flex;gap:10px;flex-wrap:wrap;margin-top:20px; }
.family-ui .fam-ficha-acc .fam-primary { flex:1 1 180px; }
.family-ui .fam-ghost { display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 16px;border:1px solid var(--fam-line);border-radius:14px;background:var(--fam-panel);color:var(--fam-ink);font:inherit;font-weight:650;cursor:pointer; }
.family-ui .fam-link-mal { display:block;margin:16px auto 0;min-height:44px;border:0;background:transparent;color:var(--fam-alert);font:inherit;font-weight:650;text-decoration:underline;cursor:pointer; }
.family-ui #familyHub .fam-error { color:var(--fam-alert);font-weight:650;margin:12px 0 0; }
@media (min-width:900px) { .family-ui #familyHub .fam-mundo-h h2 { font-size:36px; } .family-ui .fam-esc { width:64px;height:64px; } }

/* 🚗 La intro de la pestaña Pool (20/10/2026, Hernán: «hacé algo como intro estético»): la escena del camino de la familia gráfica como
   encabezado VIVO. Se ve SIEMPRE al entrar, y al tocarla o al bajar la pantalla se achica a una tira: nunca es una puerta que hay que
   atravesar, y lo urgente se resuelve DESDE la intro. El dibujo recorta el cielo y conserva el camino (`xMidYMax slice`). */
.family-ui .fam-intro { margin:0 0 16px; }
.family-ui .fam-intro-escena { display:block;width:100%;max-width:560px;margin:0 auto;padding:0;border:1px solid var(--fam-line);border-radius:26px;
  overflow:hidden;background:var(--fam-soft);cursor:pointer;height:min(62vw,250px);transition:height .36s cubic-bezier(.4,.1,.2,1); }
.family-ui .fam-intro[data-abierta=false] .fam-intro-escena { height:112px; }
.family-ui .fam-intro-escena > svg { display:block;width:100%;height:100%; }
.family-ui .fam-intro-escena:empty { display:none; }
.family-ui .fam-intro-pie { max-width:560px;margin:14px auto 0;text-align:center; }
.family-ui #familyHub .fam-intro-linea { margin:0;font-size:17px;color:var(--fam-sub);line-height:1.35; }
.family-ui #familyHub .fam-intro-linea b { display:block;font-size:26px;letter-spacing:-.7px;font-weight:800;line-height:1.15;color:var(--fam-ink);margin-bottom:2px; }
.family-ui .fam-intro[data-urgente=true] .fam-intro-linea b { color:var(--fam-alert); }
.family-ui .fam-intro[data-abierta=false] .fam-intro-linea b { font-size:20px; }
.family-ui #familyPoolIntroBtn { width:100%;max-width:420px;min-height:54px;margin:14px auto 0;font-size:18px; }
@media (min-width:900px) { .family-ui #familyHub .fam-intro-linea b { font-size:30px; }
  /* en la compu el cuadro mide 560 px: con más alto el dibujo entra casi entero */
  .family-ui .fam-intro-escena { height:min(36vw,320px); } }
@media (prefers-reduced-motion:reduce) { .family-ui .fam-intro-escena { transition:none; } }
/* «Armar un Pool», siempre a la vista; y las preguntas de un toque (para quién / de qué es) */
.family-ui .fam-row-armar { border-style:dashed;background:transparent;min-height:64px;margin:0 0 14px; }
.family-ui .fam-row-armar:hover { border-color:var(--fam-blue);background:var(--fam-soft); }
.family-ui .fam-elegir { background:var(--fam-panel);border:1px solid var(--fam-line);border-radius:18px;padding:12px 14px;margin:0 0 14px; }
.family-ui #familyHub .fam-elegir-tit { margin:0 0 10px;font-weight:700;font-size:16px;color:var(--fam-ink); }
.family-ui .fam-cuelga .fam-elegir { margin:0; }
.family-ui #familyHub .fam-vacio-chico { margin:0;padding:10px 12px;color:var(--fam-sub);font-size:15px; }
.family-ui .fam-cuelga .fam-link { display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:0;background:none;color:var(--fam-blue);font:inherit;font-weight:650;text-decoration:underline;cursor:pointer;align-self:flex-start; }

/* 🎖️ la chapita de quien fundó la casa (23/10/2026, pedido de Hernán: «una credencial, una chapita, algo»).
   Violeta de la marca, NUNCA dorado: el dorado es del Conserje y de nadie más (frontend_familia_nav.cjs lo vigila). */
.chapa-fundadora { display:inline-flex; align-items:center; gap:4px; margin-left:8px; padding:2px 9px 2px 7px;
  border-radius:999px; font-size:11.5px; font-weight:650; letter-spacing:.01em; vertical-align:2px;
  color:#fff; background:linear-gradient(135deg, #7041e8, #8f63f2); box-shadow:0 1px 3px rgba(112,65,232,.35); }
.chapa-fundadora svg { width:11px; height:11px; fill:#fff; flex:none; }
@media (prefers-color-scheme: dark) { .chapa-fundadora { background:linear-gradient(135deg, #8a63f0, #ad8aff); color:#17122a; }
  .chapa-fundadora svg { fill:#17122a; } }

/* 🔗 el código de a dos (27/10/2026): lo que se lee en voz alta o se copia, así que grande y espaciado */
.fam-codigo{font:700 2rem/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:var(--fam-ink);
  background:var(--fam-panel);border:1px solid var(--fam-line);border-radius:14px;padding:.6rem 1rem;text-align:center;margin:.2rem 0 .4rem}

/* 🔁 El hábito que el Túnel notó (27/10/2026): la misma caja que las ofertas, sin dorado (no es del Conserje-que-cobra) */
.pd-habito{display:flex;flex-direction:column;gap:8px}

/* ======================================================================================================================
   🔠 «Verlo más grande» (27/10/2026, idea de Hernán: «el abuelo puede ser de la familia… el entorno gráfico y de
   comunicación es font más grandes y más claro»).

   Es una preferencia PERSONAL (`users.json`, campo `grande`, apagada de fábrica), no una etiqueta de edad: el atributo
   `data-grande="1"` lo pone el front en <html> con lo que dice la cuenta. Vive en <html> y no en <body> para que las
   páginas que se embeben en Casa (lista, alacena, Pool) lo apliquen leyendo el espejo de localStorage, igual que el
   Día/Noche.

   Qué cambia, y por qué solo esto:
   · **Letra.** Base 20 px (22 px en la compu) y los tamaños que de verdad se leen, uno por uno. No se escala la
     página entera con `zoom`: eso rompe lo que está fijo arriba y abajo, y en el celular hace que la pantalla se corra
     de costado — justo el problema que esto venía a resolver.
   · **Lo tocable, más grande todavía.** La casa ya exige 44 px; acá las filas y los botones van a 56-64 px. Un botón
     que se falla al tocar es peor que una letra chica: la persona no sabe si el Túnel la escuchó.
   · **Contraste.** El gris de los textos secundarios y las líneas de las cajas se oscurecen (en la noche se aclaran):
     el gris suave de la maqueta se lee bien a los 30 y desaparece a los 70.
   · **Interlineado 1.5.** Es lo que más ayuda a no perder el renglón, y no cuesta nada.
   Lo que NO cambia: los colores de la marca, el dorado del Conserje (es de él y de nadie más) y la disposición de las
   pantallas. No es otro Túnel: es el mismo, más grande. Ver `docs/modo_grande.md`.
   ====================================================================================================================== */
html[data-grande="1"] body.family-ui { font-size:20px;line-height:1.5;--fam-sub:#4a5064;--fam-line:#b9bed2; }
html[data-grande="1"] body.family-ui[data-science-theme=night] { --fam-sub:#ccd2e6;--fam-line:#4e5574; }
@media(min-width:900px) { html[data-grande="1"] body.family-ui { font-size:22px; } }

/* Los títulos y los textos de la pestaña de la familia */
html[data-grande="1"] .family-ui #familyHub h2 { font-size:34px; }
html[data-grande="1"] .family-ui #familyHub h3 { font-size:23px; }
html[data-grande="1"] .family-ui #familyHub :is(p.fam-sub,.fam-sub) { font-size:19px; }
html[data-grande="1"] .family-ui #familyHub .fam-falta p { font-size:20px; }
html[data-grande="1"] .family-ui #familyHub .fam-elegir-tit { font-size:19px; }
html[data-grande="1"] .family-ui #familyHub .fam-vacio-chico { font-size:18px; }
html[data-grande="1"] .family-ui #familyHub .fam-intro-linea { font-size:20px; }
html[data-grande="1"] .family-ui #familyHub .fam-intro-linea b { font-size:30px; }
html[data-grande="1"] .family-ui .fam-intro[data-abierta=false] .fam-intro-linea b { font-size:23px; }
html[data-grande="1"] .family-ui #familyPresence { font-size:17px; }
@media(min-width:900px) {
  html[data-grande="1"] .family-ui #familyHub h2 { font-size:44px; }
  html[data-grande="1"] .family-ui #familyHub #familyPedir h2 { font-size:44px; }
  html[data-grande="1"] .family-ui #familyHub :is(p.fam-sub,.fam-sub) { font-size:20px; }
  html[data-grande="1"] .family-ui #familyHub .fam-intro-linea b { font-size:34px; }
}

/* Lo tocable: filas, tarjetas, botones y la barra. Nunca por debajo de lo que ya pide la casa. */
html[data-grande="1"] .family-ui :is(.fam-row,.fam-door,.fam-chica) { min-height:64px;font-size:19px; }
html[data-grande="1"] .family-ui .fam-block > summary { min-height:56px;font-size:19px; }
html[data-grande="1"] .family-ui .fam-tarjeta { min-height:136px;font-size:20px; }
html[data-grande="1"] .family-ui .fam-primary { min-height:60px;font-size:20px; }
html[data-grande="1"] .family-ui .fam-cosa b { font-size:20px; }
html[data-grande="1"] .family-ui .fam-texto { min-height:56px;font-size:20px; }
html[data-grande="1"] .family-ui .fam-link { min-height:52px;font-size:19px; }
html[data-grande="1"] .family-ui #familyNav button { min-height:64px;font-size:15px; }
html[data-grande="1"] .family-ui .ticket-fam-linea .fam-stepper input { min-height:52px;font-size:21px; }
@media(min-width:900px) {
  html[data-grande="1"] .family-ui .fam-row { min-height:64px;font-size:20px; }
  html[data-grande="1"] .family-ui .fam-primary { min-height:60px;font-size:20px; }
  html[data-grande="1"] .family-ui #casaMain > details.family-card > summary { min-height:64px;font-size:20px; }
  html[data-grande="1"] .family-ui #familyNav button { min-height:56px;font-size:18px; }
}

/* Los campos de texto. En el celular hay una regla de la casa que los fija en 16px **!important** para que iOS no
   haga zoom al enfocarlos (index.html, 11/10/2026). Esa regla le gana a todo, así que en este modo el cuadro del
   Conserje —lo primero que se usa— se quedaba en 16 px aunque el resto creciera: se vio mirando la pantalla, no en
   un test. Se suben a 20 px, que sigue siendo ≥ 16 px y por lo tanto mantiene intacta la promesa de aquella regla. */
html[data-grande="1"] :is(input,select,textarea) { font-size:20px !important; }

/* El cuadro del Conserje y sus textos chicos: es la pantalla donde más se lee. */
html[data-grande="1"] .family-ui #familyHub #familyPedir .pd-composer .pd-campo { min-height:92px;font-size:20px; }
html[data-grande="1"] .family-ui #familyHub #familyPedir .pd-marca { font-size:20px; }
html[data-grande="1"] .family-ui #familyHub #familyPedir .pd-accesos .pd-btn { min-height:56px;font-size:20px; }
html[data-grande="1"] .family-ui #familyHub #familyPedir :is(.pd-hoy-tit,.pd-fam-tit) { font-size:17px; }
html[data-grande="1"] .family-ui #familyHub #familyPedir :is(.pd-wa-txt,.pd-hoy-acc,.pd-fam-nombre) { font-size:19px; }
html[data-grande="1"] .family-ui #familyHub #familyPedir .pd-wa-tit { font-size:21px; }
html[data-grande="1"] .family-ui #familyHub #familyPedir .pd-wa .pd-btn { min-height:48px;font-size:19px; }
html[data-grande="1"] .family-ui #familyHub #familyPedir .pd-tagline { font-size:17px; }
html[data-grande="1"] .family-ui #familyHub #familyPedir .pd-hoy-item { min-height:64px; }

/* Las páginas de la casa que se embeben en Casa (lista, alacena, Pool) y las sueltas con la marca del Túnel.
   Tienen su propia paleta, así que acá solo se agranda: la letra base, los títulos y lo tocable. */
html[data-grande="1"] body.tunel-page { font-size:20px;line-height:1.5; }
html[data-grande="1"] body.tunel-page h1 { font-size:32px; }
html[data-grande="1"] body.tunel-page h2 { font-size:25px; }
html[data-grande="1"] body.tunel-page :is(button,summary,[role=button]) { min-height:56px; }
html[data-grande="1"] body.tunel-page :is(input,select,textarea) { min-height:52px;font-size:20px; }

/* 📖 «Todo lo que te puedo resolver» (el catálogo, 28/10/2026). Sin dorado (es solo del Conserje) ni ✨: acento azul de marca. */
.family-ui #familyCatalogo .fam-cat-rubro { margin:0 0 20px; }
.family-ui #familyCatalogo .fam-cat-rubro h3 { font-size:16px;margin:0 0 6px;color:var(--fam-ink); }
.family-ui #familyCatalogo .fam-cat-item { display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--fam-line); }
.family-ui #familyCatalogo .fam-cat-texto { flex:1;min-width:160px;color:var(--fam-ink); }
.family-ui #familyCatalogo .fam-cat-ej { border:1px solid var(--accent);color:var(--accent);background:transparent;border-radius:999px;padding:8px 14px;font:inherit;cursor:pointer;min-height:44px; }
.family-ui #familyCatalogo .fam-cat-ej:hover { background:var(--me); }
.family-ui #familyCatalogo .fam-cat-pronto { color:var(--fam-sub);border:1px solid var(--fam-line);border-radius:999px;padding:4px 10px;font-size:13px; }