/* ==========================================================================================
   HabiKaan · hoja global de la app (layouts/app.php).

   Antes vivía inline en cada página (~150 KB por navegación). Ahora es un archivo versionado con
   ?v=<filemtime> y cacheado como inmutable (P2 de docs/app/performance/impl-performance-app.md).
   Lo que cambia por usuario o condominio (tokens del tema, partials/tema_css) SIGUE inline en el layout.
   Solo tokens var(--…): el tema por condominio sobrescribe :root después de este archivo.
   El orden de los bloques es el mismo que tenían en la página: no reordenar (cascada).
   ========================================================================================== */

/* ===== Layout base: tokens de marca, componentes (.card/.btn/.kaan-tabs/.ra-*…), rail, tab bar, topbar ===== */
/* ---- Brand palette (HabiKaan manual de marca) ---- */
:root {
    --bg:#1C2621;        /* Tinta — topbar/dark surfaces */
    --panel:#fff;
    --muted:#56625B;     /* Texto secundario: 5.8:1 sobre crema, 6.4:1 sobre blanco (AA; antes #6b7a70 = 4.1:1) */
    --accent:#2C6E52;    /* Verde profundo — primary actions */
    --accent2:#43A074;   /* Verde medio — highlights/active */
    --sand:#F1D492;      /* Acento arena */
    --tint:#E4F0E9;      /* Verde tinte */
    --cream:#F6F4ED;     /* Crema — page background */
    --ink:#1C2621;
    --line:#dbe5de;
    --danger:#C0492F;       /* Rojo terracota — error/destructivo (theme-overridable) */
    --danger-tint:#fdf3f1;  /* Fondo suave para errores / baja lógica */
    --warn:#92400e;         /* Ámbar — advertencia (pausado, por vencer) */
    --warn-tint:#fffbeb;    /* Fondo suave de advertencia */
    --info:#3730a3;         /* Índigo — informativo (programado, futuro) */
    --info-tint:#e0e7ff;    /* Fondo suave informativo */
    --ok:#166534;           /* Verde éxito — texto sobre fondo suave */
    --ok-tint:#dcfce7;      /* Fondo suave de éxito */
    --on-dark-dim:#cbd5e1;  /* Texto tenue sobre superficies oscuras (topbar/rail/modal) */
    --chat-leido:#9BE7FF;   /* Chat: dos palomitas de «leído» (azul claro, legible sobre la burbuja de acento) */
    /* Texto/icono ENCIMA de una superficie de acento (--accent, --danger, --warn). Antes cada
       vista lo resolvía sola —unas con blanco fijo, otras con --cream— y en un tema oscuro
       --cream es oscuro: texto oscuro sobre rojo. Un tema con acento claro sobrescribe ésta. */
    --on-accent:#fff;
    /* Texto/icono ENCIMA de arena (--sand). El arena es claro: sobre él el blanco no contrasta,
       así que lleva su propio par en café oscuro (pills "Recomendado", CTA de domiciliación). */
    --on-sand:#5A3E0B;
    /* Alto de la tab bar móvil: lo usan los CTA pegajosos para no quedar debajo de ella.
       En escritorio no hay tab bar y se pone en 0 (ver @media min-width:768px). */
    --tabbar-h:62px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background:var(--cream); }
body { margin:0; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--cream); color:var(--ink); min-height:100dvh; display:flex; flex-direction:column; }
body > footer { flex:0 0 auto; }
h1, h2, h3, .brand { font-weight:800; letter-spacing:-.01em; }
.mono { font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ===== App shell: icon rail (desktop) + adaptive topbar + bottom tab bar (mobile).
   Mobile-first: base = teléfono (topbar oscura + rail como drawer + tab bar). El
   escritorio (rail fijo + topbar blanca contextual) se realza en @media (min-width:768px). ===== */
.nav-toggle { display:none; }

/* Topbar — móvil: header oscuro (☰ + logo + condominio + campanas + cuenta).
   Escritorio: barra blanca delgada contextual (título + condominio + campanas). */
header.topbar { background:var(--bg); color:#fff; display:flex; align-items:center; gap:.55rem; padding:.5rem .8rem; position:sticky; top:0; z-index:40; min-height:52px; }
header.topbar .brand { display:inline-flex; align-items:center; text-decoration:none; margin-right:auto; }
header.topbar .brand img { height:24px; width:auto; display:block; }
header.topbar.public { justify-content:flex-start; }
.ctx-title { display:none; font-weight:800; font-size:1.05rem; letter-spacing:-.01em; margin-right:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw; }
.hamburger { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin-left:-.3rem; color:#cbd5e1; cursor:pointer; border-radius:8px; font-size:1.4rem; user-select:none; }
.hamburger svg { width:24px; height:24px; }
.hamburger:hover { color:#fff; background:#2a3a31; }
.bar-right { display:flex; align-items:center; gap:.55rem; flex-wrap:nowrap; }
.bar-right a { color:#cbd5e1; text-decoration:none; }
.bar-right a:hover { color:#fff; }
.bell { position:relative; display:inline-flex; align-items:center; color:#cbd5e1; padding:.2rem; }
.bell:hover { color:#fff; }
.bell .badge { position:absolute; top:-6px; right:-8px; background:var(--danger); color:var(--on-accent); border-radius:999px; font-size:.62rem; font-weight:700; padding:.05rem .3rem; }

/* Icon rail — escritorio: columna fija de iconos a la izquierda. Móvil: drawer deslizable (toggle #navtoggle). */
.rail { position:fixed; z-index:60; top:0; left:0; bottom:0; width:264px; background:var(--bg); color:#fff; display:flex; flex-direction:column; padding:.9rem .7rem; gap:.2rem; transform:translateX(-100%); transition:transform .22s ease; overflow-y:auto; }
.nav-toggle:checked ~ .rail { transform:translateX(0); }
.rail-backdrop { display:none; position:fixed; inset:0; z-index:55; background:color-mix(in srgb, var(--ink) 55%, transparent); }
.nav-toggle:checked ~ .rail-backdrop { display:block; }
.rail-brand { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:13px; background:linear-gradient(155deg, var(--accent), var(--accent2)); margin:0 auto .8rem; flex:none; }
.rail-brand img { width:46px; height:46px; border-radius:13px; display:block; }
.rail-nav { display:flex; flex-direction:column; gap:.15rem; }
.rail-item { display:flex; align-items:center; gap:.75rem; padding:.6rem .7rem; border-radius:11px; text-decoration:none; color:#9fb0a6; position:relative; min-height:44px; transition:background .14s, color .14s; }
.rail-item:hover { color:#fff; background:#2a3a31; }
/* Legales al fondo del drawer (móvil). El pie de cada página se oculta ahí abajo. */
.rail-legal { margin-top:auto; padding:.9rem .7rem calc(.5rem + env(safe-area-inset-bottom));
    border-top:1px solid color-mix(in srgb, var(--tint) 16%, var(--bg));
    display:flex; flex-direction:column; gap:.45rem; font-size:.78rem; }
.rail-legal a { color:#9fb0a6; text-decoration:none; min-height:24px; }
.rail-legal a:hover { color:#fff; }
.rail-legal span { color:color-mix(in srgb, var(--tint) 45%, var(--bg)); font-size:.72rem; }
.rail-item.active { color:var(--on-accent); background:var(--accent); }
.rail-item .ri-ico { flex:none; display:inline-flex; }
.rail-item .ri-ico svg { width:22px; height:22px; }
.rail-item .ri-short { display:none; }
.rail-item .ri-full { font-size:.95rem; font-weight:600; }
/* Encabezado de grupo del rail. Base (drawer móvil, con etiquetas): micro-encabezado + regla. */
.rail-group { display:flex; align-items:center; gap:8px; padding:.7rem 6px .3rem; }
.rail-group span { font-size:.58rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#6f8377; white-space:nowrap; }
.rail-group::after { content:""; flex:1; height:1px; background:#2a3a31; }
.rail-group.is-plat span { color:var(--sand); }
.rail-group.is-plat::after { background:color-mix(in srgb, var(--sand) 45%, #2a3a31); }
/* ── D1 · rail favoritos-first: Buscar, Fijados (editables) y Todos los módulos ───────── */
.rail-search { display:flex; align-items:center; gap:.75rem; width:100%; min-height:44px; padding:.6rem .7rem; border-radius:11px;
    border:1px dashed color-mix(in srgb, var(--tint) 34%, transparent); background:none; color:var(--tint); font:inherit; cursor:pointer; text-align:left; }
.rail-search:hover { background:#2a3a31; }
.rail-search .ri-ico { flex:none; display:inline-flex; }
.rail-search .ri-ico svg { width:21px; height:21px; }
.rail-search .ri-full { font-size:.95rem; font-weight:700; }
.rail-search .ri-short { display:none; }
.rail-search kbd { margin-left:auto; font-size:.62rem; font-weight:700; color:var(--on-dark-dim); }
.rail-add .ra-short { display:none; }
.rail-item.is-todos { background:#2a3a31; color:var(--tint); }
.rail-item.is-todos:hover { color:#fff; }
.rail-group.is-fij { justify-content:flex-start; }
.rail-edit-toggle { margin-left:auto; background:none; border:0; padding:.15rem .3rem; font:inherit; font-size:.66rem; font-weight:700; color:var(--accent2); cursor:pointer; }
.rail-edit-toggle:hover { color:var(--tint); }
.rail-item .ri-drag, .rail-item .ri-x { display:none; }
.rail-edit-acciones { display:none; flex-direction:column; gap:.3rem; padding:.35rem 0 .1rem; }
.rail-add { display:flex; align-items:center; justify-content:center; gap:.4rem; min-height:40px; border-radius:11px;
    border:1px dashed color-mix(in srgb, var(--tint) 26%, transparent); color:var(--tint); text-decoration:none; font-size:.78rem; font-weight:700; }
.rail-add svg { width:16px; height:16px; }
/* En edición el pin deja de navegar: muestra el asa de arrastre y la × para quitarlo. */
.rail.is-editing .rail-edit-acciones { display:flex; }
.rail.is-editing .rail-item[data-key] { background:#2a3a31; }
.rail.is-editing .rail-item[data-key] .ri-drag { display:inline-flex; flex:none; color:var(--on-dark-dim); cursor:grab; touch-action:none; }
.rail.is-editing .rail-item[data-key] .ri-drag svg { width:16px; height:16px; }
.rail.is-editing .rail-item[data-key] .ri-x { display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:22px; height:22px; margin-left:auto; border:0; border-radius:7px; background:var(--danger); color:var(--on-accent); cursor:pointer; }
.rail.is-editing .rail-item[data-key] .ri-x svg { width:13px; height:13px; }
.rail-item.arrastrando { opacity:.5; }
/* Mientras se arrastra un acceso, nadie selecciona texto (si no, el gesto pinta de azul
   media pantalla en vez de mover la tarjeta). Aplica al rail y a «Todos los módulos». */
body.kaan-dragging, body.kaan-dragging * { user-select:none; -webkit-user-select:none; cursor:grabbing !important; }
/* Buscar en la topbar: pill en escritorio, lupa suelta en móvil. */
.topbar-search { display:none; align-items:center; gap:.55rem; height:34px; padding:0 .7rem; margin-left:auto;
    border:1px solid var(--line); border-radius:10px; background:none; color:var(--muted); font:inherit; font-size:.8rem; font-weight:600; cursor:pointer; }
.topbar-search:hover { border-color:var(--accent2); color:var(--ink); }
.topbar-search svg { width:16px; height:16px; }
.topbar-search kbd { font-size:.62rem; font-weight:700; padding:.1rem .3rem; border-radius:6px; background:var(--cream); border:1px solid var(--line); }
.bell.tb-lupa { background:none; border:0; cursor:pointer; padding:.2rem; }
.bell.tb-lupa svg { width:22px; height:22px; }
/* Bottom tab bar (destinos primarios en móvil). */
.tabbar { position:fixed; z-index:35; left:0; right:0; bottom:0; background:var(--panel); border-top:1px solid var(--line); display:flex; justify-content:space-around; padding:.4rem 0 max(.5rem, env(safe-area-inset-bottom)); }
.tabbar .tabbar-pins { display:contents; }
.tabbar .tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:.15rem; text-decoration:none; color:var(--muted); font-size:.66rem; font-weight:600; cursor:pointer; padding:.1rem 0; }
.tabbar .tab svg { width:22px; height:22px; }
.tabbar .tab.active { color:var(--accent); font-weight:700; }
/* La barra operativa de caseta (S2) es más alta que la tab bar genérica: 58 px de fila
   + su padding. Los CTA pegajosos se separan del fondo con `--tabbar-h`, así que si no
   se ajusta aquí quedan tapados por la barra. */
body.tiene-barra-caseta { --tabbar-h:74px; }
.notif-menu summary { list-style:none; }
.notif-menu summary::-webkit-details-marker { display:none; }
.notif-drop { width:340px; max-width:88vw; padding:0; }
.notif-drop-head { padding:.6rem .9rem; font-weight:800; font-size:.85rem; color:var(--ink); border-bottom:1px solid var(--line); }
.notif-drop-list { max-height:60vh; overflow:auto; }
.notif-drop-item { display:flex; gap:.6rem; align-items:flex-start; padding:.6rem .9rem; border-bottom:1px solid var(--line); text-decoration:none; }
.notif-drop-item:hover { background:color-mix(in srgb, var(--tint) 55%, transparent); }
.notif-drop-item.unread { background:color-mix(in srgb, var(--tint) 45%, #fff); }
.notif-drop-item.unread:hover { background:var(--tint); }
.notif-drop-item .nd-ico { flex:none; width:32px; height:32px; border-radius:9px; background:var(--tint); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; }
.notif-drop-item .nd-ico svg { width:18px; height:18px; }
.notif-drop-item .nd-body { flex:1; min-width:0; }
.notif-drop-item .nd-top { display:flex; justify-content:space-between; gap:.5rem; align-items:baseline; }
.notif-drop-item .nd-title { font-weight:700; font-size:.85rem; color:var(--ink); }
.notif-drop-item.unread .nd-title::before { content:"●"; color:var(--accent2); font-size:.7rem; margin-right:.3rem; vertical-align:middle; }
.notif-drop-item .nd-time { color:var(--muted); font-size:.72rem; white-space:nowrap; }
.notif-drop-item .nd-msg { color:var(--muted); font-size:.8rem; margin-top:.15rem; line-height:1.3; display:block; }
.notif-drop-empty { padding:1.2rem .9rem; text-align:center; color:var(--muted); font-size:.85rem; }
.notif-drop-more { display:block; padding:.6rem .9rem; text-align:center; font-weight:700; color:var(--accent) !important; font-size:.85rem; border-top:1px solid var(--line); }
.notif-drop-more:hover { background:color-mix(in srgb, var(--tint) 55%, transparent); }
.user-menu { position:relative; }
.user-menu summary { list-style:none; cursor:pointer; color:#cbd5e1; display:inline-flex; align-items:center; gap:.35rem; font-size:.9rem; }
.user-menu summary::-webkit-details-marker { display:none; }
.user-menu summary:hover, .user-menu[open] summary { color:#fff; }
.user-menu .user-glyph { display:inline-flex; }
.user-menu .user-glyph svg { width:22px; height:22px; }
.user-menu .user-glyph.has-foto { width:26px; height:26px; border-radius:50%; }
.user-menu .um-caret { font-size:.7rem; }
.user-menu .email-text { display:none; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-menu .menu { position:absolute; right:0; top:calc(100% + .4rem); background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:12px; min-width:236px; box-shadow:0 14px 34px -12px color-mix(in srgb, var(--ink) 40%, transparent); z-index:30; overflow:hidden; padding:.3rem; }
.user-menu .menu a { display:flex; align-items:center; gap:.6rem; padding:.6rem .7rem; border-radius:9px; color:var(--ink); font-size:.9rem; font-weight:600; }
.user-menu .menu a:hover { background:color-mix(in srgb, var(--tint) 60%, transparent); }
.user-menu .menu .um-ico { flex:none; display:inline-flex; color:var(--muted); }
.user-menu .menu .um-ico svg { width:18px; height:18px; }
.user-menu .menu a:hover .um-ico { color:var(--accent); }
/* Encabezado de identidad del menú. */
.um-head { display:flex; align-items:center; gap:.6rem; padding:.6rem .6rem .7rem; margin:0 0 .25rem; border-bottom:1px solid var(--line); }
.um-avatar { flex:none; width:38px; height:38px; border-radius:11px; background:var(--tint); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; font-weight:800; overflow:hidden; }
.um-avatar img { width:100%; height:100%; object-fit:cover; }
/* Avatar con foto (App\Libraries\Avatar): cualquier avatar de iniciales (`av`, `gv-av`, `ra-av`…) que trae foto
   recibe `has-foto`; la imagen llena la forma que ya define la vista (círculo, cuadro redondeado). */
.has-foto { overflow:hidden; padding:0 !important; background:var(--tint); }
.has-foto > img { width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
.um-id { display:flex; flex-direction:column; min-width:0; }
.um-id .um-name { font-weight:700; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
.um-id .um-mail { font-size:.74rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
.um-id .um-rol { margin-top:.2rem; align-self:flex-start; font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); background:var(--tint); border-radius:999px; padding:.05rem .5rem; }
.menu-sep { height:1px; background:var(--line); margin:.3rem 0; }
.user-menu .menu a.um-logout { color:var(--danger); }
.user-menu .menu a.um-logout .um-ico { color:var(--danger); }
.user-menu .menu a.um-logout:hover { background:color-mix(in srgb, var(--danger) 10%, #fff); }
/* Mobile: hide the native select; show a compact building-icon dropdown. */
.tenant-select { display:none; align-items:center; gap:.4rem; }
.tenant-select label { display:none; color:#94a3b8; font-size:.8rem; }
.tenant-select select { background:#2a3a31; color:#fff; border:1px solid #3a4a41; border-radius:8px; padding:.35rem .5rem; font-size:.85rem; max-width:none; }
.condo-menu { position:relative; display:inline-flex; }
.condo-menu summary { list-style:none; cursor:pointer; color:#cbd5e1; display:inline-flex; align-items:center; gap:.3rem; font-size:.9rem; }
.condo-menu summary::-webkit-details-marker { display:none; }
.condo-menu summary:hover, .condo-menu[open] summary { color:#fff; }
.condo-menu summary svg { width:18px; height:18px; }
.condo-menu .condo-name { display:none; }
.condo-menu .menu { position:absolute; right:0; left:auto; top:calc(100% + .4rem); background:#fff; color:#1C2621; border:1px solid var(--line); border-radius:8px; min-width:210px; max-width:82vw; max-height:60vh; overflow:auto; box-shadow:0 8px 24px rgba(0,0,0,.18); z-index:30; }
.condo-menu .menu button { display:block; width:100%; text-align:left; padding:.7rem .9rem; background:none; border:0; border-bottom:1px solid #eef2f0; color:#1C2621; font:inherit; font-size:.9rem; cursor:pointer; }
.condo-menu .menu button:last-child { border-bottom:0; }
.condo-menu .menu button:hover { background:#eaf1ec; }
.condo-menu .menu button.on { font-weight:700; color:var(--accent); }

main { max-width:1040px; margin:1rem auto; padding:0 1rem; flex:1 0 auto; width:100%; box-sizing:border-box; }
.alert { padding:.75rem 1rem; border-radius:8px; margin-bottom:1rem; font-size:.9rem; }
.alert.error { background:var(--danger-tint); color:var(--danger); }
.alert.success { background:var(--ok-tint); color:var(--ok); }
.alert.warn { background:var(--warn-tint); color:var(--warn); }
.alert.info { background:var(--info-tint); color:var(--info); }
/* Resultado de una acción (partials/resultado.php): modal breve y animado que se va solo y deja el
   banner. La salida la hace CSS (animation-delay), así nunca se queda pegado aunque falle el JS.
   Tiempos: éxito ~1.5 s a la vista, error ~2.6 s (hay que leerlo). La salida es más rápida que la entrada. */
.kaan-resultado { --kr-col:var(--ok); --kr-tint:var(--ok-tint); --kr-vista:1.5s;
    position:fixed; inset:0; z-index:9995; display:flex; align-items:center; justify-content:center; padding:24px;
    background:color-mix(in srgb, var(--ink) 30%, transparent); cursor:pointer;
    animation:kr-fondo .2s ease-out both, kr-fuera .18s ease-in var(--kr-vista) forwards; }
.kaan-resultado.error { --kr-col:var(--danger); --kr-tint:var(--danger-tint); --kr-vista:2.6s; }
.kaan-resultado .kr-card { width:min(340px, 100%); padding:28px 24px 24px; border-radius:24px; background:var(--panel);
    box-shadow:0 24px 60px color-mix(in srgb, var(--ink) 28%, transparent); text-align:center;
    animation:kr-entra .32s cubic-bezier(.2,.9,.3,1.25) both; }
.kaan-resultado.error .kr-card { animation:kr-entra .32s cubic-bezier(.2,.9,.3,1.25) both, kr-sacude .36s ease-in-out .78s; }
.kr-ico { display:block; margin:0 auto 12px; overflow:visible; }
.kr-ico .kr-aro { fill:var(--kr-tint); stroke:var(--kr-col); stroke-width:2.5; stroke-dasharray:145; stroke-dashoffset:145;
    transform-box:fill-box; transform-origin:center; transform:rotate(-90deg); animation:kr-traza .45s ease-out .08s forwards; }
.kr-ico .kr-trazo { fill:none; stroke:var(--kr-col); stroke-width:4; stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:40; stroke-dashoffset:40; animation:kr-traza .3s ease-out .45s forwards; }
.kr-ico .kr-trazo2 { animation-delay:.6s; }
.kaan-resultado .kr-titulo { margin:0; font-size:1.35rem; font-weight:800; color:var(--kr-col); }
.kaan-resultado .kr-texto { margin:.4rem 0 0; font-size:1rem; line-height:1.45; color:var(--ink);
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
@keyframes kr-fondo { from { opacity:0; } }
@keyframes kr-entra { from { opacity:0; transform:scale(.86) translateY(8px); } }
@keyframes kr-traza { to { stroke-dashoffset:0; } }
@keyframes kr-sacude { 20%, 60% { transform:translateX(-7px); } 40%, 80% { transform:translateX(7px); } }
@keyframes kr-fuera { to { opacity:0; visibility:hidden; pointer-events:none; } }
.kaan-resultado.cerrando { animation:kr-fuera .16s ease-in forwards; }
/* Al irse el modal, el banner hace un destello corto para que la vista vaya ahí. */
.alert.kr-destello { animation:kr-destello .9s ease-out; }
@keyframes kr-destello { 0% { box-shadow:0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 100% { box-shadow:0 0 0 10px transparent; } }
html.kaan-embed .kaan-resultado { display:none; }
@media (prefers-reduced-motion: reduce) {
    .kaan-resultado, .kaan-resultado .kr-card, .kaan-resultado.error .kr-card { animation:kr-fuera .01s linear var(--kr-vista) forwards; }
    .kr-ico .kr-aro, .kr-ico .kr-trazo { animation:none; stroke-dashoffset:0; }
    .alert.kr-destello { animation:none; }
}
/* Estado vacío con salida: qué falta · qué consecuencia tiene · qué hacer.
   Ningún vacío es un párrafo gris sin acción (regla transversal del rediseño de casas). */
.empty-cta strong { display:block; margin-bottom:.15rem; }
.empty-cta > span { display:block; opacity:.88; }
.empty-cta .btn-row { margin:.65rem 0 0; }
.badge { display:inline-block; background:var(--tint); color:var(--accent); border-radius:999px; padding:.15rem .6rem; font-size:.75rem; font-weight:600; }

.btn { background:var(--accent); color:var(--on-accent); border:none; padding:.55rem 1.05rem; border-radius:10px; text-decoration:none; font-size:.9rem; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:42px; box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent); transition:filter .12s, transform .06s, box-shadow .12s; }
.btn:hover { filter:brightness(.96); }
.btn:active { transform:translateY(1px); }
/* Icono de línea inline (en botones, títulos, pills). Reemplaza a los emoji de UI.
   Usar: <span class="ic">Iconos::line('key')</span> Texto */
.ic { display:inline-flex; align-items:center; vertical-align:middle; flex:none; }
.ic svg { width:1.05em; height:1.05em; display:block; }
.btn .ic svg, .btn-row .btn .ic svg { width:16px; height:16px; }
/* Red de seguridad: un Iconos::line() pegado SIN el wrapper .ic no tiene width/height
   (el svg solo trae viewBox) y se estira al tamaño del contenedor — un botón con un icono
   de 300px. Sizear el svg hijo directo evita que ese olvido rompa la pantalla. */
.btn > svg, .alert > svg { width:16px; height:16px; flex:none; vertical-align:middle; }
/* Mismo olvido dentro de un encabezado: sin tamaño el svg se pinta a 300×150 (el default de
   un elemento reemplazado) y se come la pantalla. Sizearlo a 1em lo deja como el texto. */
h1 > svg, h2 > svg, h3 > svg, h4 > svg, h5 > svg { width:1em; height:1em; vertical-align:middle; }
h1 .ic svg, h2 .ic svg, h3 .ic svg { width:1em; height:1em; }
/* Badge de icono (tint + accent) para encabezados de tarjeta / tiles. */
.ico-badge { flex:none; width:36px; height:36px; border-radius:10px; background:var(--tint); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; }
.ico-badge svg { width:19px; height:19px; }
.btn.secondary { background:var(--tint); color:var(--accent); box-shadow:none; }
.btn.secondary:hover { background:color-mix(in srgb, var(--tint) 70%, var(--accent2)); }
.btn.danger { background:var(--danger); color:var(--on-accent); }
.btn.danger-soft { background:var(--danger-tint); color:var(--danger); border:1.5px solid color-mix(in srgb, var(--danger) 40%, transparent); box-shadow:none; }
.btn.danger-soft:hover { background:color-mix(in srgb, var(--danger) 12%, #fff); }
/* Create/add actions ("+") — distinct sand/gold so they stand out from primary/secondary. */
.btn.add { background:var(--sand); color:var(--ink); border:1px solid color-mix(in srgb, var(--sand) 55%, var(--ink)); box-shadow:0 1px 2px color-mix(in srgb, var(--sand) 60%, transparent); }
.btn.add:hover { filter:brightness(.97); }
.btn.small { padding:.35rem .75rem; font-size:.82rem; min-height:34px; border-radius:9px; }
/* ── Caseta (S1 §7) · densidad TÁCTIL ────────────────────────────────────────────────
   Un guardia de pie, de noche, con guantes y un coche esperando. Las reglas viven aquí
   (no repetidas por vista) y aplican a TODO `caseta/*` vía `body.es-caseta`:
   acciones a 56 px y el dato que se compara contra el parabrisas —folio, placa, código—
   grande y en `.mono`. El `.btn.small` de escritorio se neutraliza dentro de acciones. */
body.es-caseta .btn, body.es-caseta .btn-caseta { min-height:56px; font-size:.95rem; padding:.6rem 1.05rem; }
body.es-caseta .btn.small { min-height:44px; font-size:.86rem; }
body.es-caseta .caseta-acciones .btn { min-height:56px; font-size:.95rem; }
body.es-caseta .pill { font-size:.78rem; padding:.2rem .6rem; }
/* El dato de búsqueda: folio / placa / código. `.dato` es la versión "lo que se compara". */
.dato { display:inline-flex; align-items:center; gap:.35rem; font-family:'Space Mono', ui-monospace, monospace;
    font-size:19px; font-weight:700; letter-spacing:.02em; background:var(--tint); color:var(--accent);
    padding:.15rem .55rem; border-radius:9px; }
.dato.lg { font-size:23px; }
.dato.busca { background:var(--danger-tint); color:var(--danger); }
.dato .ic svg { width:17px; height:17px; }
body.es-caseta input[type="search"], body.es-caseta input[type="text"] { min-height:52px; font-size:17px; }
/* Acción de un solo icono DENTRO de otro componente (quitar un folio de un pill, cerrar
   un chip). Un .btn completo ahí rompe la altura del contenedor; antes cada vista lo
   resolvía con un <button> sin clase y estilos inline. */
.btn-icon { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
    padding:0; border:0; border-radius:999px; background:none; color:var(--muted);
    font-size:.9rem; line-height:1; font-weight:700; cursor:pointer; transition:background .12s, color .12s; }
.btn-icon:hover { background:color-mix(in srgb, var(--danger) 14%, transparent); color:var(--danger); }
.btn-icon svg { width:12px; height:12px; }

.page-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:1.1rem; }
.page-head h1 { margin:0; font-size:1.25rem; }
.head-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px; }
table.grid { width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
table.grid th, table.grid td { text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--line); font-size:.88rem; white-space:nowrap; }
table.grid th { background:color-mix(in srgb, var(--tint) 45%, var(--panel)); color:var(--muted); font-weight:700; font-size:.78rem; letter-spacing:.02em; text-transform:uppercase; }
table.grid tbody tr { transition:background .12s; }
table.grid tbody tr:hover { background:color-mix(in srgb, var(--tint) 32%, transparent); }
table.grid tr:last-child td { border-bottom:none; }

.muted { color:var(--muted); }
.pill { display:inline-block; border-radius:999px; padding:.1rem .55rem; font-size:.72rem; font-weight:600; }
.pill.on { background:var(--tint); color:var(--accent); }
.pill.off { background:color-mix(in srgb, var(--sand) 30%, var(--cream)); color:color-mix(in srgb, var(--sand) 30%, var(--ink)); }
/* Vibrant status pills (theme-aware green for confirmed, red for cancelled). */
.pill.ok  { background:var(--accent2); color:var(--on-accent); }
.pill.bad { background:var(--danger); color:var(--on-accent); }
/* Variantes semánticas — antes cada vista repetía el hex inline (ilegible en tema oscuro). */
.pill.info { background:var(--info-tint); color:var(--info); }
.pill.warn { background:var(--warn-tint); color:var(--warn); }

.cards-list { display:flex; flex-direction:column; gap:.75rem; }
.list-card { padding:.9rem 1rem; }
.pager { display:flex; flex-wrap:wrap; gap:.3rem; justify-content:center; margin-top:1rem; }
.pager .pg { min-width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; padding:0 .6rem; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); text-decoration:none; font-size:.9rem; }
.pager .pg:hover { background:color-mix(in srgb, var(--tint) 60%, var(--panel)); }
.pager .pg.active { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:600; }
.filters { display:flex; flex-wrap:wrap; gap:.5rem; align-items:end; margin-bottom:1rem; }
.filters .field { margin:0; }
.tabs { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:1rem; }
.tabs a { padding:.45rem .8rem; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--ink); text-decoration:none; font-size:.85rem; }
.tabs a.active { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:600; }
/* Tabs reutilizables estilo "subrayado" (indicador de activo claro; scroll horizontal en móvil). */
.kaan-tabs { display:flex; gap:.1rem; margin-bottom:1.25rem; border-bottom:2px solid var(--line);
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.kaan-tabs::-webkit-scrollbar { display:none; }
.kaan-tabs a { text-decoration:none; padding:.6rem .95rem; font-size:.9rem; font-weight:600; color:var(--muted);
    border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap; display:inline-flex;
    align-items:center; gap:.4rem; transition:color .15s ease, border-color .15s ease, background .15s ease;
    border-radius:8px 8px 0 0; }
.kaan-tabs a:hover { color:var(--accent); background:var(--tint); }
.kaan-tabs a.active { color:var(--accent); border-bottom-color:var(--accent); }
.kaan-tabs a .tab-badge { background:var(--tint); color:var(--accent); border-radius:999px; font-size:.72rem;
    font-weight:700; padding:.05rem .4rem; }
.kaan-tabs a.active .tab-badge { background:var(--accent); color:var(--on-accent); }
/* Badge de ATENCIÓN (falta algo), no de conteo: rojo también cuando la pestaña está activa. */
.kaan-tabs a .tab-badge.bad, .kaan-tabs a.active .tab-badge.bad { background:var(--danger); color:var(--on-accent); }

/* Expediente de una casa: encabezado + segmented de sub-destinos (enlaces, no radios:
   el segmented navega server-side con ?tab= para que la PWA y el «atrás» funcionen). */
.casa-head { margin-bottom:.5rem; }
.casa-back { display:inline-flex; align-items:center; gap:.15rem; color:var(--muted); text-decoration:none;
    font-size:.85rem; font-weight:600; padding:.35rem .35rem .35rem 0; }
.casa-back:hover { color:var(--accent); }
.casa-head h1 { margin:.1rem 0 0; font-size:1.35rem; }
.segmented.casa-sub { margin:-.45rem 0 1.1rem; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
.segmented.casa-sub::-webkit-scrollbar { display:none; }
.segmented.casa-sub a { border:1px solid var(--line); border-radius:999px; padding:.5rem .85rem; min-height:44px;
    font-size:.88rem; display:inline-flex; gap:.35rem; align-items:center; background:var(--panel);
    color:var(--ink); text-decoration:none; white-space:nowrap; }
.segmented.casa-sub a:hover { border-color:var(--accent); color:var(--accent); }
.segmented.casa-sub a.on { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:600; }
.segmented.casa-sub a.warn:not(.on) { border-color:color-mix(in srgb, var(--danger) 45%, transparent); color:var(--danger); }
.segmented.casa-sub a.on .tab-badge { background:color-mix(in srgb, var(--on-accent) 26%, transparent); color:var(--on-accent); }
.segmented.casa-sub .tab-badge { background:var(--tint); color:var(--accent); border-radius:999px;
    font-size:.72rem; font-weight:700; padding:.05rem .4rem; }
/* Indicador de scroll: si hay más pestañas fuera de vista, ese borde se desvanece
   (clases .ind-left/.ind-right las pone kaanTabsIndicators según la posición de scroll). */
.kaan-tabs.ind-left.ind-right { -webkit-mask-image:linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent); mask-image:linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent); }
.kaan-tabs.ind-left:not(.ind-right) { -webkit-mask-image:linear-gradient(to right, transparent, #000 26px); mask-image:linear-gradient(to right, transparent, #000 26px); }
.kaan-tabs.ind-right:not(.ind-left) { -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 26px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 26px), transparent); }

/* Submenú de sección (patrón 3a/3b del Design Doc): NUNCA un 2º riel oscuro.
   (1) Sub-nav horizontal .sec-subnav (kaan-tabs) fijo en el encabezado del contenido —
       móvil + escritorio, siempre visible, deslizable. Es el "dónde estoy".
   (2) Launcher .seclauncher: panel CLARO flotante pegado al riel (solo escritorio),
       abierto desde el título contextual. Flota sobre el contenido (no lo corta/refluye). */
.sec-subnav { margin-bottom:1.1rem; }
.sec-subnav a { display:inline-flex; align-items:center; gap:.4rem; }
.sec-subnav a .st-ico { flex:none; display:inline-flex; }
.sec-subnav a .st-ico svg { width:17px; height:17px; }

/* Launcher flotante (escritorio) */
.sec-launch { display:none; }
.seclauncher { display:none; }
@media (min-width:768px) {
    .sec-launch { display:inline-flex; align-items:center; gap:.4rem; background:none; border:none;
        cursor:pointer; font:inherit; font-size:1.05rem; font-weight:700; color:var(--ink);
        padding:0; margin-right:auto; max-width:60%; }
    .sec-launch .cl-caret { font-size:.7rem; color:var(--muted); transition:transform .16s; }
    body.seclauncher-open .sec-launch .cl-caret { transform:rotate(180deg); }
    /* En escritorio, el launcher (título + caret) sustituye al título estático. */
    body.has-secnav .ctx-title { display:none; }
    .seclauncher { display:flex; flex-direction:column; position:fixed; z-index:59; top:0; bottom:0;
        left:74px; width:250px; background:var(--panel); border-right:1px solid var(--line);
        box-shadow:14px 0 40px -30px rgba(28,38,33,.5); padding:16px 12px; overflow-y:auto;
        transform:translateX(-12px); opacity:0; visibility:hidden; pointer-events:none;
        transition:transform .18s ease, opacity .18s ease, visibility .18s; }
    body.seclauncher-open .seclauncher { transform:none; opacity:1; visibility:visible; pointer-events:auto; }
    .seclauncher-head { display:flex; align-items:center; justify-content:space-between; gap:6px;
        font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
        color:var(--muted); padding:0 8px 12px; }
    .sl-collapse { background:none; border:0; color:var(--muted); font-size:1rem; cursor:pointer;
        line-height:1; padding:.1rem .3rem; border-radius:6px; }
    .sl-collapse::before { content:"«"; }
    .sl-collapse:hover { color:var(--ink); background:color-mix(in srgb, var(--tint) 60%, transparent); }
    .seclauncher a { display:flex; align-items:center; gap:10px; padding:.55rem .7rem; border-radius:10px;
        margin-bottom:2px; text-decoration:none; color:var(--ink); font-size:.9rem; font-weight:600;
        position:relative; transition:background .14s, color .14s; }
    .seclauncher a .sl-ico { flex:none; display:inline-flex; color:var(--muted); }
    .seclauncher a .sl-ico svg { width:19px; height:19px; }
    .seclauncher a:hover { background:color-mix(in srgb, var(--tint) 55%, transparent); }
    .seclauncher a.active { background:var(--tint); color:var(--accent); font-weight:700; }
    .seclauncher a.active .sl-ico { color:var(--accent); }
    .seclauncher a.active::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
        border-radius:2px; background:var(--accent); }
    .seclauncher a .sl-badge { margin-left:auto; background:var(--tint); color:var(--accent); border-radius:999px;
        font-size:.68rem; font-weight:700; padding:.05rem .45rem; }
    .seclauncher a.active .sl-badge { background:var(--accent); color:var(--on-accent); }
    .seclauncher .sl-group { font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
        color:var(--accent); padding:.7rem 8px .3rem; }
    .seclauncher .sl-group:first-child { padding-top:.15rem; }
    .seclauncher-backdrop { display:none; position:fixed; inset:0; left:calc(74px + 250px); z-index:57; }
    body.seclauncher-open .seclauncher-backdrop { display:block; }
    /* Contraído (persistido en localStorage): angosto, icono arriba + etiqueta corta debajo.
       La etiqueta SIEMPRE visible (regla del doc: nada de solo-icono crudo). */
    body.launcher-collapsed .seclauncher { width:84px; padding:14px 6px; }
    body.launcher-collapsed .seclauncher-head { justify-content:center; }
    body.launcher-collapsed .seclauncher-head span:first-child { display:none; }
    body.launcher-collapsed .sl-collapse::before { content:"»"; }
    body.launcher-collapsed .seclauncher a { flex-direction:column; gap:.2rem; padding:.5rem .2rem; text-align:center; }
    body.launcher-collapsed .seclauncher a .sl-label { font-size:.56rem; font-weight:600; line-height:1.05; }
    body.launcher-collapsed .seclauncher .sl-group { text-align:center; padding:.5rem 2px .2rem; font-size:.52rem; }
    body.launcher-collapsed .seclauncher a .sl-badge { position:absolute; top:3px; right:8px; margin:0; padding:0;
        width:8px; height:8px; min-width:0; border-radius:50%; font-size:0; overflow:hidden; }
    body.launcher-collapsed .seclauncher a.active::before { top:6px; bottom:6px; }
    body.launcher-collapsed .seclauncher-backdrop { left:calc(74px + 84px); }
}

/* Menú de la sección FIJO en tablet horizontal y escritorio (≥1024px), como el lado de la caseta.
   Antes era un panel flotante que solo se abría tocando el título (nadie lo encontraba). Ahora:
   - Siempre visible, pegado al riel; el contenido se recorre a la derecha (no lo tapa).
   - Sustituye a las pestañas horizontales (.sec-subnav) y al botón del título: el título vuelve a ser texto.
   - El encabezado es el nombre de la sección, legible; cada opción mide ≥44px (táctil).
   - ««» lo contrae a 84px (icono + etiqueta corta) y se recuerda por navegador.
   Entre 768 y 1023px (tablet vertical) no cabe sin apretar el contenido: ahí siguen las pestañas
   horizontales y el panel flotante. La caseta no entra (tiene su propia reja). */
@media (min-width:1024px) {
    body.secnav-fija.has-rail { padding-left:calc(74px + 236px); }
    body.secnav-fija.launcher-collapsed.has-rail { padding-left:calc(74px + 84px); }
    body.secnav-fija .seclauncher { width:236px; transform:none; opacity:1; visibility:visible; pointer-events:auto;
        box-shadow:none; transition:none; padding:18px 12px 24px; }
    body.secnav-fija.launcher-collapsed .seclauncher { width:84px; padding:14px 6px; }
    body.secnav-fija .seclauncher-backdrop { display:none !important; }
    body.secnav-fija .sec-launch { display:none; }
    body.secnav-fija .ctx-title { display:block; }
    /* Mismo texto que el encabezado del menú expandido: no se repite (contraído, el menú no lo muestra). */
    body.secnav-fija:not(.launcher-collapsed) .ctx-title.ctx-dup { visibility:hidden; }
    body.secnav-fija .sec-subnav { display:none; }
    body.secnav-fija .seclauncher-head { font-size:1.05rem; font-weight:800; letter-spacing:0; text-transform:none;
        color:var(--ink); padding:2px 8px 14px; }
    body.secnav-fija .sl-collapse { width:36px; height:36px; display:inline-grid; place-items:center; padding:0; }
    body.secnav-fija .seclauncher a { min-height:44px; font-size:.95rem; }
    body.secnav-fija .seclauncher .sl-group { font-size:.68rem; color:var(--muted); padding:.9rem 8px .35rem; }
    body.secnav-fija .seclauncher a .sl-badge { font-size:.72rem; min-width:20px; text-align:center; }
    body.secnav-fija.launcher-collapsed .seclauncher a .sl-label { font-size:.62rem; }
    body.secnav-fija.launcher-collapsed .seclauncher .sl-group { font-size:0; padding:.4rem 0; border-top:1px solid var(--line); margin:.3rem 8px 0; }
}

.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1.15rem; margin-bottom:1rem; box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent), 0 1px 3px color-mix(in srgb, var(--ink) 3%, transparent); }
form.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1.15rem; margin-bottom:1rem; box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent), 0 1px 3px color-mix(in srgb, var(--ink) 3%, transparent); }
/* Dentro de rejillas (usan gap) el margen sobra → se resetea para no duplicar espacio. */
.grid2 > .card, .cards-list > .card, .modules-grid > .card, .kpi-strip > .card, .qa-grid > .card { margin-bottom:0; }
.card > :last-child { margin-bottom:0; }
/* Links de contenido (tipo "Gestionar") con estilo de marca: acento, semibold, subrayado suave
   solo al hover. Excluye botones/pills/tabs. Aplica global en el contenido de tarjetas/secciones. */
main .card a:not(.btn):not(.pill):not([class*="tab"]):not(.tile),
main .page-head p a:not(.btn):not(.pill):not([class*="tab"]):not(.tile),
main .portal-section a:not(.btn):not(.pill):not([class*="tab"]):not(.tile) {
    color:var(--accent); font-weight:600; text-decoration:none;
    text-underline-offset:2px; transition:color .12s ease; }
main .card a:not(.btn):not(.pill):not([class*="tab"]):not(.tile):hover,
main .page-head p a:not(.btn):not(.pill):not([class*="tab"]):not(.tile):hover,
main .portal-section a:not(.btn):not(.pill):not([class*="tab"]):not(.tile):hover {
    text-decoration:underline; text-decoration-thickness:2px; }
/* Fila de casilla + etiqueta. Vive también en el layout de auth; aquí la usan los formularios
   de configuración (tabulador de multas, bitácoras, expediente, conservación). */
.check-row { display:flex; align-items:flex-start; gap:.55rem; font-size:.88rem; margin:.2rem 0 .5rem; cursor:pointer; line-height:1.45; }
.check-row input { width:18px; height:18px; flex:none; margin-top:.1rem; accent-color:var(--accent); }
/* Sólo para lectores de pantalla. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.field { margin-bottom:1rem; }
.field label { display:block; font-size:.82rem; font-weight:600; margin-bottom:.3rem; color:var(--ink); }
.field input[type=text], .field input[type=email], .field input[type=number], .field input[type=password], .field input[type=date], .field input[type=datetime-local], .field input[type=time], .field input[type=tel], .field select, .field textarea {
    width:100%; padding:.6rem .7rem; border:1px solid var(--line); border-radius:9px; font-size:16px; }
/* Estilo base para CUALQUIER input de texto/select/textarea (dentro o fuera de .field),
   así los inputs sueltos (p. ej. opciones de encuesta) se ven consistentes. Sin `width`
   para no estirar los selects/filtros inline; `.field` aporta el 100% donde aplica. */
input[type=text], input[type=email], input[type=number], input[type=password], input[type=tel], input[type=search], input[type=url], input[type=date], input[type=datetime-local], input[type=time], select, textarea {
    font-size:16px; padding:.6rem .7rem; border:1px solid var(--line); border-radius:9px; background:var(--panel); font-family:inherit; color:inherit; transition:border-color .12s, box-shadow .12s; }
/* Un campo bloqueado tiene que VERSE bloqueado: si se ve igual que uno editable, el usuario
   teclea, no pasa nada y lo lee como que la app está rota. Fondo apagado + cursor de "no
   editable" (`readonly` conserva el foco y la selección, por eso no se atenúa el texto). */
input[readonly], textarea[readonly] { background:color-mix(in srgb, var(--line) 30%, var(--panel)); cursor:not-allowed; }
input[readonly]:focus, textarea[readonly]:focus { box-shadow:none; border-color:var(--line); }
/* Anillo de foco con acento (theme-aware). */
input[type=text]:focus, input[type=email]:focus, input[type=number]:focus, input[type=password]:focus, input[type=tel]:focus, input[type=search]:focus, input[type=url]:focus, input[type=date]:focus, input[type=datetime-local]:focus, input[type=time]:focus, select:focus, textarea:focus {
    outline:none; border-color:var(--accent2); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
/* Input de archivo — el control nativo no hereda nada, así que se compone: el input es
   la "caja" (como cualquier campo) y ::file-selector-button es un .btn.secondary.
   Va FUERA de .field a propósito (como los inputs de texto) para cubrir los sueltos.
   Sin wrapper: el JS de .file-preview inserta la miniatura como hermano del input. */
input[type=file] {
    font-family:inherit; font-size:.88rem; color:var(--ink); width:100%; max-width:100%;
    padding:.45rem .55rem; border:1px solid var(--line); border-radius:9px;
    background:var(--panel); cursor:pointer; transition:border-color .12s, box-shadow .12s;
}
input[type=file]::file-selector-button {
    font-family:inherit; font-size:.82rem; font-weight:600; cursor:pointer;
    margin:0 .6rem 0 0; padding:.35rem .75rem; min-height:32px; border:none;
    border-radius:8px; background:var(--tint); color:var(--accent);
    transition:background .12s;
}
input[type=file]:hover { border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); }
input[type=file]:hover::file-selector-button { background:color-mix(in srgb, var(--tint) 70%, var(--accent2)); }
input[type=file]:focus-visible {
    outline:none; border-color:var(--accent2);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
input[type=file]:disabled { opacity:.55; cursor:default; background:var(--cream); }
/* Captura de cámara (caseta, rondines, bitácoras): el input ES la acción, no un campo
   secundario — se lee como botón de ancho completo. */
input[type=file][capture] {
    padding:.55rem .7rem; background:var(--tint); border-color:transparent; font-weight:600;
}
input[type=file][capture]::file-selector-button { background:var(--accent); color:var(--on-accent); }
input[type=file][capture]:hover::file-selector-button { filter:brightness(.96); }
/* Errores por campo (pintados por el helper field_feedback() desde session('errors')). */
/* block: dentro de un <label> (checkbox + descripción) un span inline se pega al texto. */
.field-hint { display:block; font-size:.74rem; color:var(--muted); margin-top:.3rem; line-height:1.35; }
.field .req, .req { color:var(--danger); }
.field.error label { color:var(--danger); }
.field.error input, .field.error select, .field.error textarea,
.field.error input:focus, .field.error select:focus, .field.error textarea:focus {
    border-color:var(--danger); background:var(--danger-tint);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent); }
.field-error { display:flex; align-items:center; gap:.35rem; font-size:.76rem; color:var(--danger); font-weight:600; margin-top:.35rem; }
.field-error svg { width:14px; height:14px; flex:none; }
.segmented { display:flex; flex-wrap:wrap; gap:.4rem; }
/* min-height 44px: el segmented es un control táctil de decisión (no una etiqueta). */
.segmented label { border:1px solid var(--line); border-radius:999px; padding:.5rem .85rem; min-height:44px; cursor:pointer; font-size:.9rem; display:inline-flex; gap:.35rem; align-items:center; background:var(--panel); }
.segmented input { position:absolute; opacity:0; width:0; height:0; }
.segmented label:has(input:checked) { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
/* Un control segmentado también puede ser NAVEGACIÓN: opciones que son URLs (?vista=semana)
   en vez de radios. Sin esta regla los `<a>` caían al estilo de enlace de contenido —
   subrayados, morados al visitarse y sin marcar cuál está activo, que es justo lo único
   que un segmentado tiene que comunicar. */
.segmented a { border:1px solid var(--line); border-radius:999px; padding:.5rem .85rem; min-height:44px;
    display:inline-flex; align-items:center; gap:.35rem; background:var(--panel); color:var(--ink);
    font-size:.9rem; font-weight:600; text-decoration:none; }
.segmented a:hover { border-color:var(--accent); color:var(--accent); }
.segmented a.on { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.stepper { display:inline-flex; align-items:stretch; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--panel); }
.stepper button { border:none; background:color-mix(in srgb, var(--tint) 60%, var(--panel)); color:var(--ink); width:46px; min-height:44px; font-size:1.3rem; line-height:1; cursor:pointer; }
.stepper button:hover { background:var(--line); }
.stepper input { border:none; width:70px; text-align:center; font-size:1rem; padding:.55rem 0; -moz-appearance:textfield; appearance:textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* Checkbox / radio con estilo de marca (consistente en todos los temas). Los toggles internos
   (.segmented, .nav-toggle) se re-ocultan abajo. Alta especificidad + !important para ganarle
   a los overrides de `main input` de los temas de firma (clay, neumorfismo…). */
input[type=checkbox], input[type=radio] {
    -webkit-appearance:none !important; appearance:none !important; flex:none;
    width:1.2em !important; height:1.2em !important; min-width:1.2em; margin:0; padding:0 !important;
    border:2px solid var(--line) !important; background:var(--panel) !important; cursor:pointer;
    display:inline-grid; place-content:center; vertical-align:-.22em; box-shadow:none !important;
    transition:background .15s ease, border-color .15s ease, box-shadow .15s ease; }
input[type=checkbox] { border-radius:.38em !important; }
input[type=radio] { border-radius:50% !important; }
input[type=checkbox]::before { content:""; width:.72em; height:.72em; transform:scale(0);
    transition:transform .12s ease; background:var(--panel);
    clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%); }
input[type=radio]::before { content:""; width:.6em; height:.6em; border-radius:50%; background:var(--panel);
    transform:scale(0); transition:transform .12s ease; }
input[type=checkbox]:checked::before, input[type=radio]:checked::before { transform:scale(1); }
input[type=checkbox]:checked, input[type=radio]:checked { background:var(--accent) !important; border-color:var(--accent) !important; }
input[type=checkbox]:hover:not(:disabled), input[type=radio]:hover:not(:disabled) { border-color:var(--accent) !important; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent) !important; }
input[type=checkbox]:disabled, input[type=radio]:disabled { opacity:.5; cursor:default; }
/* re-ocultar los checkboxes usados como toggles internos (mi regla global les gana en
   especificidad, así que hay que re-ocultarlos explícitamente). */
.segmented input { -webkit-appearance:none !important; appearance:none !important; width:0 !important; height:0 !important; min-width:0; border:0 !important; position:absolute; opacity:0; }
input.nav-toggle { display:none !important; }

.grid2 { display:grid; grid-template-columns:1fr; gap:1rem; margin-bottom:1rem; }
/* En el teléfono, un hijo del grid NO puede ensanchar la columna. Un elemento de grid
   trae `min-width:auto`, así que su ancho mínimo intrínseco manda: basta un <select> con
   una opción larga (p. ej. «Comisiones bancarias / de cobro») para que la columna crezca
   más que la pantalla y toda la página se deslice de lado. Medido en /reportes/{id} a
   360px: 382 → 360. Solo <768px: en escritorio sobra el espacio y ahí el crecimiento no
   produce scroll horizontal. */
@media (max-width:767px) { .grid2 > * { min-width:0; } }
.form-actions { display:flex; gap:.6rem; margin-top:1rem; flex-wrap:wrap; }
fieldset { border:1px solid var(--line); border-radius:10px; padding:1rem; margin:0 0 1.25rem; min-width:0; }
legend { font-size:.8rem; font-weight:700; color:var(--accent); padding:0 .4rem; }

.notif-banner { display:none; align-items:center; flex-wrap:wrap; gap:.6rem .75rem; background:var(--warn-tint); border:1px solid color-mix(in srgb, var(--warn) 35%, #fff); color:var(--warn); border-radius:10px; padding:.7rem 1rem; margin-bottom:1rem; font-size:.88rem; }
.notif-banner .nb-ico { display:inline-flex; } .notif-banner .nb-ico svg { width:20px; height:20px; }
.notif-banner .nb-actions { margin-left:auto; display:flex; gap:.5rem; align-items:center; white-space:nowrap; }
.notif-banner .nb-cta { background:var(--accent); color:var(--on-accent); text-decoration:none; padding:.4rem .8rem; border-radius:8px; font-weight:600; border:0; cursor:pointer; font-size:.88rem; }
.notif-banner .nb-cta:disabled { opacity:.6; cursor:default; }
.notif-banner button.nb-close { background:none; border:none; color:var(--warn); cursor:pointer; font-size:1.1rem; line-height:1; }

/* On phones, .grid tables become stacked cards (no horizontal scroll); each
   cell shows its column label (set from the header via JS: data-label). */
@media (max-width:767px) {
    table.grid { display:block; border:0; background:none; overflow:visible; }
    table.grid thead { display:none; }
    table.grid tbody, table.grid tr, table.grid td { display:block; width:auto; }
    table.grid tr { border:1px solid var(--tint); border-radius:10px; background:#fff; padding:.3rem .75rem; margin-bottom:.55rem; }
    table.grid tr:last-child td { border-bottom:0; }
    table.grid td { border:0; padding:.34rem 0; white-space:normal; text-align:left; display:flex; gap:.75rem; justify-content:space-between; align-items:center; }
    table.grid td::before { content:attr(data-label); font-weight:700; color:var(--ink); font-size:.76rem; flex:0 0 auto; }
    table.grid td[data-label=""]::before, table.grid td:not([data-label])::before { content:""; }
    table.grid td[data-label=""], table.grid td:not([data-label]) { justify-content:flex-end; }
    /* Action cells (many buttons): label on top, buttons wrap full-width below. */
    table.grid td.actions { display:block; padding:.5rem 0 .2rem; }
    table.grid td.actions::before { display:block; margin-bottom:.4rem; }
    table.grid td.actions .btn-row { justify-content:flex-start; }
    table.grid td.actions .btn-row > * { flex:1 1 auto; }
    table.grid td.actions .btn-row .btn { display:block; text-align:center; }
    table.grid td.actions .btn-row form { display:flex; }
    /* Deja espacio para la barra inferior y sube los FAB sobre ella. Se mide con
       `--tabbar-h` y no con números fijos: la barra operativa de caseta (S2) es más alta
       que la tab bar genérica, y con los 66 px de antes el botón de ayuda le caía encima. */
    body.has-rail { padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
    body.has-rail #kaan-help, body.has-rail #kaan-corner { bottom:calc(var(--tabbar-h) + 6px + env(safe-area-inset-bottom)); }
    body.has-rail:has(#kaan-help) #kaan-corner { bottom:calc(var(--tabbar-h) + 56px + env(safe-area-inset-bottom)); }
    body.has-rail #kpi-refresh { bottom:calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom)); }
    /* El pie legal no se repite bajo cada módulo en el teléfono: vive al fondo del menú. */
    body.has-rail > .site-footer { display:none; }
}
.site-footer { max-width:1040px; margin:2rem auto 1rem; padding:1rem 1.25rem 0; border-top:1px solid var(--tint);
    color:var(--muted); font-size:.82rem; display:flex; flex-wrap:wrap; gap:.4rem .9rem; align-items:center; }
.site-footer a { color:var(--muted); }
.file-preview { display:block; max-width:120px; max-height:120px; object-fit:cover; border-radius:8px; border:1px solid var(--line); margin-top:.45rem; }
/* Reusable inline button cluster (wraps on narrow widths). */
.btn-row { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; justify-content:flex-end; }
.btn-row.start { justify-content:flex-start; }
.btn-row form { display:inline; margin:0; }

/* ================= Flujo de pagos del residente (estado de cuenta → pagar → acuse) =========
   Un solo CTA por pantalla, pegado abajo y por ENCIMA de la tab bar (de ahí --tabbar-h). */
.btn.block { display:flex; width:100%; justify-content:center; min-height:52px; border-radius:14px; font-size:1rem; font-weight:800; }
.sticky-cta { position:sticky; bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index:20;
    margin:1rem -1rem 0; padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--cream) 92%, transparent); backdrop-filter:blur(8px);
    border-top:1px solid var(--line); }
.sticky-cta .hint { display:block; text-align:center; margin:.4rem 0 0; font-size:.72rem; font-weight:600; color:var(--muted); }

/* --- Encabezado de saldo (bloque oscuro) --- */
.ec-saldo { background:var(--bg); color:var(--on-accent); border-radius:16px; padding:1rem 1rem .9rem; margin-bottom:.9rem; }
.ec-saldo .top { display:flex; justify-content:space-between; align-items:center; gap:.6rem; }
.ec-saldo .lbl { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
    color:color-mix(in srgb, var(--tint) 68%, var(--bg)); }
.ec-saldo .casa { background:color-mix(in srgb, var(--tint) 18%, var(--bg)); color:var(--tint);
    border-radius:999px; padding:.15rem .6rem; font-size:.7rem; font-weight:700; }
.ec-saldo .monto { font-family:'Space Mono',monospace; font-size:2.1rem; font-weight:700; line-height:1; margin:.4rem 0 0; }
.ec-saldo .det { display:flex; align-items:center; gap:.4rem; margin:.5rem 0 0; font-size:.78rem; font-weight:600;
    color:color-mix(in srgb, var(--tint) 78%, var(--bg)); }
.ec-saldo .dot { width:7px; height:7px; border-radius:50%; background:var(--danger); flex:none; }
.ec-saldo .acciones { display:flex; gap:.5rem; margin-top:.8rem; }
.ec-saldo .acciones .btn { flex:1; justify-content:center; }

/* --- Cargos: tarjetas en móvil, tabla desde 768px --- */
.ec-list { display:flex; flex-direction:column; gap:.55rem; list-style:none; padding:0; margin:0; }
.ec-tabla { display:none; }
.ec-casa + .ec-casa { margin-top:1.4rem; }
.ec-item { display:flex; align-items:center; gap:.7rem; background:var(--panel); border:1px solid var(--line);
    border-radius:13px; padding:.8rem .85rem; color:inherit; text-decoration:none; }
.ec-item.vencido { border-left:3px solid var(--danger); }
.ec-item .cuerpo { flex:1; min-width:0; }
.ec-item .fila { display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; }
.ec-item .concepto { font-size:.92rem; font-weight:800; }
.ec-item .monto { font-family:'Space Mono',monospace; font-size:.92rem; font-weight:700; white-space:nowrap; }
.ec-item .meta { display:flex; align-items:center; gap:.4rem; margin-top:.3rem; font-size:.76rem; font-weight:600; color:var(--muted); flex-wrap:wrap; }
.ec-item .est { border-radius:6px; padding:.1rem .4rem; font-size:.7rem; font-weight:800; }
.ec-item .est.venc { background:var(--danger-tint); color:var(--danger); }
.ec-item .est.prox { background:var(--tint); color:var(--accent); }
.ec-item .est.prog { background:var(--info-tint); color:var(--info); }
.ec-item .est.pag  { background:var(--tint); color:var(--accent); }
/* Seleccionar NO es un modo: un cargo pagable siempre trae su círculo y la tarjeta COMPLETA
   es el área táctil (no una casilla de 16px). Al marcar uno aparece la barra con la suma. */
.ec-item .marca { display:none; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line);
    flex:none; align-items:center; justify-content:center; }
.ec-item[data-pagable] .marca { display:flex; }
.ec-item[data-pagable] { cursor:pointer; user-select:none; }
.ec-item[data-pagable]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.ec-item.on { border-color:var(--accent); border-width:1.5px; }
.ec-item.on .marca { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.ec-item .marca svg { width:14px; height:14px; display:none; }
.ec-item.on .marca svg { display:block; }

/* ===== App de residente — componentes base `.ra-*` (rediseño 2026-10) ======================
   Ver docs/design/rediseño-app/impl-app-residentes.md. Mobile-first, solo tokens, tocables
   ≥48px, una acción principal por pantalla. Estados con .pill.ok/.warn/.bad/.info del layout. */
.ra-page { display:flex; flex-direction:column; gap:1.5rem; max-width:640px; margin:0 auto; }
.ra-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.ra-head > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ra-h1 { margin:0; font-size:1.75rem; font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.ra-hola { font-size:1.625rem; }
.ra-lead { font-size:.94rem; font-weight:500; color:var(--muted); }
.ra-h2 { font-size:1.125rem; font-weight:800; margin:0 0 .75rem; letter-spacing:-.01em; }
.ra-sechead { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }
.ra-sechead a { min-height:44px; display:inline-flex; align-items:center; font-size:.94rem; font-weight:700; color:var(--accent); text-decoration:none; margin-top:-.75rem; }
.ra-casa-link { display:inline-flex; align-items:center; gap:4px; min-height:32px; padding:0; border:0; background:none; font:inherit; font-size:.94rem; font-weight:700; color:var(--accent); text-decoration:none; cursor:pointer; text-align:left; }
.ra-casa-link svg { width:20px; height:20px; flex:none; }
.ra-casa-txt { font-size:.94rem; font-weight:600; color:var(--muted); }
.ra-iconbtn { width:48px; height:48px; border-radius:16px; background:var(--panel); border:1px solid var(--line); display:grid; place-items:center; color:var(--ink); text-decoration:none; padding:0; font:inherit; cursor:pointer; flex:none; position:relative; }
.ra-iconbtn svg { width:24px; height:24px; }
.ra-iconbtn.sm { width:44px; height:44px; border-radius:12px; }
.ra-iconbtn.sm svg { width:20px; height:20px; }
.ra-search { display:flex; align-items:center; gap:.75rem; height:56px; padding:0 1rem; border-radius:16px;
    background:var(--panel); border:1px solid var(--line); color:var(--muted); font:inherit; font-size:1rem; font-weight:500; text-decoration:none; width:100%; cursor:pointer; text-align:left; }
.ra-search svg { color:var(--accent); width:24px; height:24px; flex:none; }
.ra-ic { width:48px; height:48px; border-radius:14px; background:var(--tint); color:var(--accent); display:grid; place-items:center; flex:none; }
.ra-ic svg { width:24px; height:24px; }
.ra-ic.sm { width:44px; height:44px; }
.ra-tiles { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.ra-tile { position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:1rem; min-height:116px;
    padding:1rem; border-radius:20px; background:var(--panel); border:1px solid var(--line);
    color:var(--ink); font-size:1.06rem; font-weight:700; text-decoration:none; line-height:1.25; }
.ra-tile.h { flex-direction:row; align-items:center; justify-content:flex-start; gap:.75rem; min-height:76px; font-size:1rem; }
/* El texto nunca se sale del botón: puede partirse (con guion, `lang="es"`) en vez de desbordar. */
.ra-tiles, .ra-mgrid { container-type:inline-size; }
.ra-tile > span:not(.ra-ic):not(.ra-count), .ra-mini > span { min-width:0; overflow-wrap:break-word; hyphens:auto; }
.ra-tile.h .ra-count { top:50%; transform:translateY(-50%); }
/* Rejilla angosta (teléfono, 2 columnas de ~150 px): «Paquetería» o «Transparencia» no caben
   junto al ícono, así que los tiles horizontales se apilan — ícono arriba, texto abajo. */
@container (max-width: 459px) {
    .ra-tiles > .ra-tile.h { flex-direction:column; align-items:flex-start; justify-content:space-between; gap:.75rem; min-height:104px; }
    .ra-tiles > .ra-tile.h .ra-count { top:14px; transform:none; }
    .ra-mgrid > .ra-mini.row { flex-direction:column; align-items:flex-start; justify-content:space-between; min-height:80px; }
}
.ra-tile .ra-count { position:absolute; top:14px; right:14px; min-width:28px; height:28px; padding:0 6px; border-radius:14px; background:var(--accent); color:var(--on-accent); font-size:.875rem; font-weight:700; display:grid; place-items:center; }
.ra-list { background:var(--panel); border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.ra-row { display:flex; align-items:center; gap:.875rem; min-height:72px; padding:.75rem 1rem; color:var(--ink);
    text-decoration:none; border:0; border-top:1px solid var(--line); background:none; width:100%; font:inherit; text-align:left; }
.ra-row:first-child { border-top:0; }
.ra-list > form:not(:first-child) > .ra-row { border-top:1px solid var(--line); }
.ra-row .ra-t { flex:1; min-width:0; }
.ra-row b { display:block; font-size:1rem; font-weight:700; }
.ra-row small { display:block; font-size:.875rem; font-weight:500; color:var(--muted); margin-top:2px; }
.ra-row .chev { color:var(--muted); width:20px; height:20px; flex:none; }
.ra-row .ra-amt { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none; }
.ra-row .ra-amt .mono { font-size:.95rem; font-weight:700; }
.ra-av { width:44px; height:44px; border-radius:50%; background:var(--tint); color:var(--accent); display:grid; place-items:center; flex:none; font-weight:800; font-size:.9rem; }
.ra-av svg { width:22px; height:22px; }
.ra-mini { display:flex; flex-direction:column; justify-content:space-between; gap:.6rem; min-height:88px; padding:.875rem; border-radius:16px;
    background:var(--cream); color:var(--ink); font-size:.94rem; font-weight:700; text-decoration:none; line-height:1.25; }
.ra-mini svg { width:24px; height:24px; color:var(--accent); }
.ra-mini.row { flex-direction:row; align-items:center; justify-content:flex-start; min-height:56px; background:var(--panel); border:1px solid var(--line); }
.ra-mini.ancho { grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:flex-start; min-height:72px; background:var(--tint); }
.ra-mini.ancho .ra-t { flex:1; display:flex; flex-direction:column; gap:2px; }
.ra-mini.ancho small { font-size:.81rem; font-weight:500; color:var(--muted); }
.ra-mgrid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.ra-cta { display:flex; align-items:center; justify-content:center; gap:.6rem; height:56px; border-radius:16px; width:100%;
    font:inherit; font-size:1.06rem; font-weight:800; text-decoration:none; border:0; background:var(--accent); color:var(--on-accent); cursor:pointer; }
.ra-cta svg { width:24px; height:24px; }
.ra-cta.xl { height:64px; font-size:1.125rem; border-radius:18px; }
.ra-cta.sand { background:var(--sand); color:var(--on-sand); }
.ra-cta.sec { background:var(--panel); color:var(--accent); border:1.5px solid var(--line); }
.ra-cta.on-accent { background:color-mix(in srgb, var(--on-accent) 16%, transparent); color:var(--on-accent); border:1.5px solid color-mix(in srgb, var(--on-accent) 45%, transparent); }
.ra-sos { display:inline-flex; align-items:center; gap:.4rem; height:48px; padding:0 .875rem; border-radius:16px; flex:none;
    background:var(--danger-tint); color:var(--danger); font-size:.94rem; font-weight:800; text-decoration:none;
    border:1.5px solid color-mix(in srgb, var(--danger) 45%, transparent); }
.ra-sos svg { width:20px; height:20px; }
.ra-sos-ancho { display:flex; align-items:center; gap:.875rem; min-height:72px; padding:.75rem 1rem; border-radius:20px;
    background:var(--danger-tint); border:1.5px solid color-mix(in srgb, var(--danger) 40%, transparent); color:var(--danger); text-decoration:none; }
.ra-sos-ancho svg { width:28px; height:28px; flex:none; }
.ra-sos-ancho b { display:block; font-size:1rem; font-weight:800; }
.ra-sos-ancho span span { display:block; font-size:.875rem; font-weight:600; }
.ra-alerta { display:flex; align-items:center; gap:.75rem; min-height:56px; padding:.75rem 1rem; border-radius:16px; width:100%;
    background:var(--danger-tint); color:var(--danger); border:0; font:inherit; font-size:.94rem; font-weight:600; text-decoration:none; text-align:left; cursor:pointer; }
.ra-alerta svg { width:20px; height:20px; flex:none; }
.ra-alerta .ra-t { flex:1; }
/* Tarjeta de cuota / total (fondo de acento). */
.ra-cuota { background:var(--accent); color:var(--on-accent); border-radius:24px; padding:1.25rem; display:flex; flex-direction:column; gap:1rem; }
.ra-cuota .k { font-size:.875rem; font-weight:600; opacity:.92; }
.ra-cuota .amt { font-size:2rem; font-weight:700; letter-spacing:-.02em; line-height:1.15; }
.ra-cuota .amt.xl { font-size:2.25rem; }
.ra-cuota .top { display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; }
.ra-cuota .top > div { display:flex; flex-direction:column; gap:4px; min-width:0; }
.ra-cuota .top > svg { width:24px; height:24px; opacity:.9; flex:none; }
.ra-cuota .pill.bad { background:var(--danger-tint); color:var(--danger); font-size:.8rem; padding:.2rem .6rem; align-self:flex-start; }
.ra-cuota.neutra { background:var(--panel); color:var(--ink); border:1px solid var(--line); }
/* Etiquetas de relación (Vives aquí · Dueña 50%). */
/* «Lo que tienes activo» (Inicio, `portal/bloques/_activo`): rejilla de 2 en teléfono, 3 en escritorio.
   Sin scroll horizontal: todo lo activo se ve sin deslizar. Impar en teléfono → la última ocupa el ancho. */
.ra-activo { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.ra-act { display:flex; flex-direction:column; align-items:flex-start; gap:.3rem; min-width:0; min-height:112px; padding:.875rem;
    border-radius:18px; background:var(--panel); border:1px solid var(--line); color:var(--ink); text-decoration:none; }
.ra-act-top { display:flex; align-items:center; justify-content:space-between; width:100%; margin-bottom:.2rem; }
.ra-act-ic { width:36px; height:36px; border-radius:10px; background:var(--tint); color:var(--accent); display:grid; place-items:center; flex:none; }
.ra-act-ic svg { width:20px; height:20px; }
.ra-act-n { font-size:1.6rem; font-weight:700; line-height:1; color:var(--accent); }
.ra-act-l { font-size:.95rem; font-weight:700; line-height:1.2; overflow-wrap:break-word; hyphens:auto; max-width:100%; }
.ra-act small { font-size:.81rem; font-weight:500; color:var(--muted); line-height:1.3; max-width:100%;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ra-act .pill { margin-top:auto; }
.ra-act.urg { background:var(--tint); border-color:color-mix(in srgb, var(--accent) 35%, var(--line)); }
.ra-act.urg .ra-act-ic, .ra-act.urg .pill { background:var(--accent); color:var(--on-accent); }
.ra-activo > .ra-act:last-child:nth-child(odd) { grid-column:1 / -1; }
.ra-act { transition:background-color .12s ease; -webkit-tap-highlight-color:transparent; }
.ra-act:active { background:color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.ra-act.urg:active { background:color-mix(in srgb, var(--accent) 18%, var(--panel)); }
@media (prefers-reduced-motion: reduce) { .ra-act { transition:none; } }
@media (min-width:768px) {
    .ra-activo { grid-template-columns:repeat(3, minmax(0,1fr)); }
    .ra-activo > .ra-act:last-child:nth-child(odd) { grid-column:auto; }
}
/* Esqueleto del bloque: mismo alto que una fila de tarjetas, así Inicio no salta al llegar. */
.ra-skel .ra-act .ra-skel-l { width:80%; }
.ra-skel .ra-act .ra-skel-l + .ra-skel-l { width:55%; margin-top:.25rem; }
.ra-chips { display:flex; flex-wrap:wrap; gap:6px; }
.ra-chip { display:inline-flex; align-items:center; gap:5px; min-height:28px; padding:0 .6rem; border-radius:999px; background:var(--tint); color:var(--accent); font-size:.81rem; font-weight:700; }
.ra-chip svg { width:16px; height:16px; }
/* Segmentado de botones (filtro en cliente). */
.ra-seg { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:4px; padding:4px; border-radius:16px; background:var(--panel); border:1px solid var(--line); }
.ra-seg button { min-height:44px; border:0; border-radius:12px; background:none; font:inherit; font-size:.9rem; font-weight:700; color:var(--muted); cursor:pointer; padding:0 .5rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ra-seg button[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); }
/* Acordeón de «Todo». */
.ra-grp { background:var(--panel); border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.ra-grp > summary { list-style:none; display:flex; align-items:center; gap:.875rem; min-height:80px; padding:.75rem 1rem; cursor:pointer; }
.ra-grp > summary::-webkit-details-marker { display:none; }
.ra-grp > summary .ra-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ra-grp > summary b { font-size:1.125rem; font-weight:800; }
.ra-grp > summary small { font-size:.875rem; font-weight:500; color:var(--muted); }
.ra-grp > summary .chev { width:24px; height:24px; color:var(--muted); transition:transform .2s ease; flex:none; }
.ra-grp[open] > summary .chev { transform:rotate(180deg); }
.ra-grp .ra-mgrid { padding:0 1rem 1rem; }
.ra-tile, .ra-row, .ra-search, .ra-mini, .ra-grp > summary, .ra-iconbtn { transition:background-color .12s ease; -webkit-tap-highlight-color:transparent; }
.ra-tile:active, .ra-row:active, .ra-mini:active, .ra-grp > summary:active, .ra-iconbtn:active, .ra-search:active { background:color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.ra-cta:active, .ra-sos:active { filter:brightness(.92); }
.ra-page a:focus-visible, .ra-page button:focus-visible, .ra-page summary:focus-visible, .ra-page input:focus-visible,
.ra-tabbar a:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:2px; }
/* Hoja inferior (selector de casa activa). */
.ra-sheet { position:fixed; inset:0; z-index:9990; display:flex; align-items:flex-end; justify-content:center; }
.ra-sheet[hidden] { display:none; }
.ra-sheet-scrim { position:absolute; inset:0; background:color-mix(in srgb, var(--ink) 60%, transparent); border:0; padding:0; cursor:pointer; }
.ra-sheet-box { position:relative; width:100%; max-width:560px; max-height:88dvh; overflow-y:auto; background:var(--cream); border-radius:24px 24px 0 0;
    padding:.5rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:1.25rem; }
.ra-sheet-grip { width:40px; height:5px; border-radius:3px; background:var(--line); margin:0 auto; }
.ra-sheet-head { display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; }
.ra-sheet-head b { display:block; font-size:1.25rem; font-weight:800; }
.ra-sheet-head span { display:block; font-size:.875rem; font-weight:500; color:var(--muted); margin-top:2px; }
.ra-opt { display:flex; align-items:center; gap:.875rem; min-height:72px; padding:.75rem 1rem; border-radius:18px; background:var(--panel); border:2px solid var(--line);
    width:100%; font:inherit; color:var(--ink); text-align:left; cursor:pointer; }
.ra-opt + .ra-opt { margin-top:10px; }
.ra-opt .ra-t { flex:1; min-width:0; }
.ra-opt b { display:block; font-size:1rem; font-weight:700; }
.ra-opt small { display:block; font-size:.875rem; font-weight:500; color:var(--muted); margin-top:2px; }
.ra-opt small.debe { color:var(--danger); font-weight:700; }
.ra-opt .ra-radio { width:24px; height:24px; border-radius:50%; border:2px solid var(--muted); flex:none; display:grid; place-items:center; }
.ra-opt[aria-pressed="true"] { border-color:var(--accent); }
.ra-opt[aria-pressed="true"] .ra-radio { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.ra-opt .ra-radio svg { width:16px; height:16px; display:none; }
.ra-opt[aria-pressed="true"] .ra-radio svg { display:block; }
body.ra-sheet-open { overflow:hidden; }
/* Tab bar fija de residente (5 destinos). Reusa .tabbar (posición, safe area); cambia la forma. */
.tabbar.ra-tabbar { display:grid; grid-template-columns:repeat(var(--ra-tabs, 5), minmax(0,1fr)); padding:.5rem 4px max(.6rem, env(safe-area-inset-bottom)); }
.tabbar.ra-tabbar .tab { position:relative; gap:4px; font-size:.75rem; font-weight:600; color:var(--muted); min-height:52px; justify-content:center; }
.tabbar.ra-tabbar .tab .tpill { width:56px; height:32px; border-radius:16px; display:grid; place-items:center; transition:background-color .12s ease; }
.tabbar.ra-tabbar .tab svg { width:24px; height:24px; }
.tabbar.ra-tabbar .tab.active { color:var(--accent); font-weight:800; }
.tabbar.ra-tabbar .tab.active .tpill { background:var(--tint); }
.tabbar.ra-tabbar .tab .tbadge { position:absolute; top:2px; left:calc(50% + 8px); min-width:18px; height:18px; padding:0 5px; border-radius:9px;
    background:var(--danger); color:var(--on-accent); font-size:.69rem; font-weight:800; display:grid; place-items:center; }
body.app-residente { --tabbar-h:76px; }
/* App instalada / TWA: el notch lo absorbe la barra superior (es lo primero que se pinta). */
@media (display-mode: standalone) { body.app-residente header.topbar { padding-top:max(.5rem, env(safe-area-inset-top)); } }
@media (prefers-reduced-motion: reduce) {
    .ra-tile, .ra-row, .ra-search, .ra-cta, .ra-mini, .ra-grp > summary, .ra-grp > summary .chev, .ra-iconbtn, .tabbar.ra-tabbar .tab .tpill { transition:none; }
}
@media (min-width:768px) {
    .ra-page { gap:1.75rem; }
    .ra-tiles.cuatro { grid-template-columns:repeat(4, minmax(0,1fr)); }
    .ra-mgrid.tres { grid-template-columns:repeat(3, minmax(0,1fr)); }
    .ra-sheet { align-items:center; }
    .ra-sheet-box { border-radius:24px; }
    /* En escritorio manda el rail: la tab bar de residente también se oculta. */
    .tabbar.ra-tabbar { display:none; }
    body.app-residente { --tabbar-h:0px; }
}

/* --- Pantalla de pago: monedero + métodos excluyentes --- */
.pay-wallet { display:flex; align-items:center; gap:.7rem; background:var(--tint); border-radius:11px;
    padding:.6rem .75rem; cursor:pointer; }
.pay-wallet .txt { flex:1; }
.pay-wallet .t { font-size:.82rem; font-weight:800; color:var(--accent); }
.pay-wallet .s { font-size:.73rem; font-weight:600; color:var(--accent); }
.pay-wallet input { position:absolute; opacity:0; width:0; height:0; }
.pay-wallet .sw { width:44px; height:26px; border-radius:999px; background:var(--line); flex:none; position:relative; transition:background .15s; }
.pay-wallet .sw::after { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
    background:var(--panel); transition:transform .15s; }
.pay-wallet:has(input:checked) .sw { background:var(--accent); }
.pay-wallet:has(input:checked) .sw::after { transform:translateX(18px); }
.pay-total { display:flex; justify-content:space-between; align-items:flex-end; gap:.6rem;
    border-top:1px dashed var(--line); padding-top:.6rem; margin-top:.7rem; }
.pay-total .lbl { font-size:.78rem; font-weight:700; color:var(--muted); }
.pay-total .antes { font-family:'Space Mono',monospace; font-size:.75rem; font-weight:600; color:var(--muted); text-decoration:line-through; }
.pay-total .n { font-family:'Space Mono',monospace; font-size:1.6rem; font-weight:700; line-height:1; color:var(--accent); }
.pay-methods { display:flex; flex-direction:column; gap:.55rem; }
.pay-method { display:flex; align-items:center; gap:.7rem; background:var(--panel); border:1px solid var(--line);
    border-radius:13px; padding:.75rem .8rem; cursor:pointer; min-height:44px; }
.pay-method input { position:absolute; opacity:0; width:0; height:0; }
.pay-method .ico { width:38px; height:38px; border-radius:11px; background:var(--cream); color:var(--ink);
    display:flex; align-items:center; justify-content:center; flex:none; }
.pay-method .ico svg { width:19px; height:19px; }
.pay-method .txt { flex:1; min-width:0; }
.pay-method .t { font-size:.92rem; font-weight:800; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.pay-method .s { font-size:.76rem; font-weight:600; color:var(--muted); margin-top:.1rem; }
.pay-method .radio { width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); flex:none; }
.pay-method:has(input:checked) { border:1.5px solid var(--accent); box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 14%, transparent); }
.pay-method:has(input:checked) .ico { background:var(--tint); color:var(--accent); }
.pay-method:has(input:checked) .radio { border:6px solid var(--accent); }
.pay-method.tenue .t, .pay-method.tenue .ico { color:var(--muted); }
.pay-rec { background:var(--sand); color:var(--on-sand); border-radius:5px; padding:.05rem .35rem; font-size:.66rem; font-weight:800; }

/* --- SPEI: cada dato con su botón de copiar (44px) --- */
.copy-row { display:flex; align-items:center; gap:.7rem; }
.copy-row + .copy-row { border-top:1px solid var(--line); padding-top:.7rem; margin-top:.7rem; }
.copy-row .dato { flex:1; min-width:0; }
.copy-row .lbl { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); }
/* display:block — `overflow` no aplica a un elemento inline, así que un valor largo
   (la URL de un pase) se salía de su caja y pasaba POR DEBAJO del botón de copiar. */
.copy-row .val { display:block; font-family:'Space Mono',monospace; font-size:1.05rem; font-weight:700; white-space:nowrap; overflow-x:auto; }
.copy-row .val.grande { font-size:1.3rem; color:var(--accent); }
.copy-btn { width:44px; height:44px; flex:none; border:0; border-radius:12px; background:var(--tint); color:var(--accent);
    display:flex; align-items:center; justify-content:center; cursor:pointer; font:inherit; }
.copy-btn.fuerte { background:var(--accent); color:var(--on-accent); }
.copy-btn svg { width:19px; height:19px; }
.pasos { list-style:none; padding:0; margin:.6rem 0 0; display:flex; flex-direction:column; gap:.6rem; counter-reset:p; }
.pasos li { display:flex; gap:.6rem; font-size:.8rem; font-weight:600; color:var(--muted); line-height:1.45; }
.pasos li::before { counter-increment:p; content:counter(p); flex:none; width:20px; height:20px; border-radius:50%;
    background:var(--tint); color:var(--accent); font-size:.7rem; font-weight:800; display:flex; align-items:center; justify-content:center; }

/* --- Estado del pago: línea de tiempo y acuse --- */
.pay-timeline { list-style:none; padding:0; margin:0; }
.pay-timeline li { display:flex; gap:.75rem; }
/* `.rail` es también el menú lateral (fixed, 264px, oscuro, y 74px en escritorio): se neutraliza todo aquí. */
.pay-timeline .rail { display:flex; flex-direction:column; align-items:center; flex:none; position:static; z-index:auto;
    width:auto; padding:0; gap:0; background:none; color:inherit; transform:none; transition:none; overflow:visible; }
.pay-timeline .dot { width:11px; height:11px; border-radius:50%; background:var(--accent); margin-top:.25rem; }
.pay-timeline li.pend .dot { background:var(--panel); border:2px solid var(--line); }
.pay-timeline .linea { width:2px; flex:1; background:var(--line); }
.pay-timeline li.hecho .linea { background:var(--accent); }
.pay-timeline .txt { padding-bottom:1rem; }
.pay-timeline li:last-child .txt { padding-bottom:0; }
.pay-timeline .t { display:block; font-size:.85rem; font-weight:800; }
.pay-timeline li.pend .t { color:var(--muted); }
.pay-timeline .s { display:block; font-size:.73rem; font-weight:600; color:var(--muted); }
.pay-timeline .s.mono { font-family:'Space Mono',monospace; }
.pay-ok { background:var(--accent); color:var(--on-accent); border-radius:16px; padding:1.6rem 1.2rem 1.8rem;
    text-align:center; margin-bottom:1rem; }
.pay-ok .check { width:66px; height:66px; border-radius:50%; margin:0 auto .7rem;
    background:color-mix(in srgb, var(--on-accent) 18%, transparent); display:flex; align-items:center; justify-content:center; }
.pay-ok .check svg { width:32px; height:32px; }
.pay-espera { display:flex; width:72px; height:72px; border-radius:50%; background:var(--tint); color:var(--accent);
    align-items:center; justify-content:center; margin:.3rem auto .7rem; }
.pay-espera svg { width:34px; height:34px; }
.pay-ok .monto { font-family:'Space Mono',monospace; font-size:1.9rem; font-weight:700; line-height:1; }
.pay-ok .sub { font-size:.88rem; font-weight:700; margin-top:.45rem; color:color-mix(in srgb, var(--tint) 88%, var(--accent)); }
.pay-cubre { display:flex; justify-content:space-between; gap:.6rem; font-size:.85rem; font-weight:700; padding:.25rem 0; }
.pay-cubre .mono { font-size:.82rem; }

/* ============ Acciones rápidas del portal (visita, aviso, reserva, huésped) ============
   Mismo esqueleto (form.card + .field + .segmented + .stepper + .sticky-cta); lo que cambia
   es el ORDEN y la densidad: resumen arriba, decisiones en segmented, lo avanzado plegado. */
.qa-frase { background:var(--bg); color:var(--on-accent); border-radius:16px; padding:.9rem 1rem; margin-bottom:.9rem; }
.qa-frase .k { display:block; font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    color:color-mix(in srgb, var(--tint) 60%, var(--bg)); margin-bottom:.35rem; }
.qa-frase p { margin:0; font-size:1rem; font-weight:700; line-height:1.45; }
.qa-frase b { font-weight:700; border-bottom:2px dashed var(--accent2); }

/* Secciones planas dentro de la card (sustituyen fieldset/grid2, que en 360px nunca aplican). */
.qa-sec + .qa-sec { border-top:1px solid var(--line); margin-top:.9rem; padding-top:.9rem; }
.qa-sec > .lbl { display:block; font-size:.82rem; font-weight:600; margin-bottom:.4rem; }
.qa-sec > .lbl .req { color:var(--danger); }
.qa-hint { display:block; font-size:.74rem; color:var(--muted); line-height:1.35; margin-top:.35rem; }

.qa-avanzado { border-top:1px solid var(--line); margin-top:.9rem; padding-top:.75rem; }
.qa-avanzado > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:.4rem;
    min-height:44px; font-size:.85rem; font-weight:700; color:var(--accent); }
.qa-avanzado > summary::-webkit-details-marker { display:none; }
.qa-avanzado > summary::after { content:"▾"; transition:transform .15s; }
.qa-avanzado > summary .op { margin-left:auto; font-size:.72rem; font-weight:600; color:var(--muted); }
.qa-avanzado[open] > summary::after { transform:rotate(180deg); }

/* Chips de sugerencia (visitantes frecuentes, proveedores más usados). */
.qa-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.4rem; }
.qa-chip { border:1px solid var(--line); background:var(--panel); color:var(--ink); border-radius:999px;
    padding:0 .9rem; min-height:44px; display:inline-flex; align-items:center; font:inherit; font-size:.85rem; cursor:pointer; }
.qa-chip.on { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:700; }
.qa-chip.otro { border-style:dashed; color:var(--muted); }

/* Tira de días con carga real (el mes completo queda tras un toggle en móvil). */
.qa-dias { display:flex; gap:5px; }
.qa-dia { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
    min-height:58px; border:1px solid var(--line); border-radius:10px; background:var(--panel);
    font-size:1rem; font-weight:700; cursor:pointer; color:inherit; font-family:inherit; padding:0; }
.qa-dia .dow { font-size:.62rem; font-weight:700; color:var(--muted); }
.qa-dia .cap { font-size:.56rem; color:var(--muted); }
.qa-dia.sel { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.qa-dia.sel .dow, .qa-dia.sel .cap { color:color-mix(in srgb, var(--tint) 85%, var(--accent)); }
.qa-dia.full { background:var(--cream); color:var(--muted); cursor:not-allowed; }

/* Horarios: rejilla de horas de inicio, NO una fila por cada tramo de 30 min (un día
   abierto de 09:00 a 23:00 son 28 filas = 1800px de scroll). Agrupadas por franja. */
.qa-franja { font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
    color:var(--muted); margin:.7rem 0 .35rem; }
.qa-franja:first-child { margin-top:.2rem; }
.qa-horas { display:flex; flex-wrap:wrap; gap:.4rem; }
.qa-hora { position:relative; display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
    min-height:44px; min-width:74px; padding:.2rem .5rem; border:1px solid var(--line); border-radius:10px;
    background:var(--panel); cursor:pointer; font-family:'Space Mono',monospace; font-size:.88rem; font-weight:700; }
.qa-hora input { position:absolute; opacity:0; width:0; height:0; }
.qa-hora .cupo { font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:.58rem; font-weight:700; color:var(--muted); }
.qa-hora:has(input:checked) { background:var(--accent); color:var(--on-accent); border-color:var(--accent);
    box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 18%, transparent); }
.qa-hora:has(input:checked) .cupo { color:color-mix(in srgb, var(--tint) 85%, var(--accent)); }
/* Lo ocupado se lista como pastilla compacta (informa, no se elige). */
.qa-ocupados { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.2rem; }
.qa-ocu { display:inline-flex; align-items:center; gap:.3rem; border-radius:999px; padding:.25rem .6rem;
    font-size:.76rem; font-weight:700; background:var(--danger-tint); color:var(--danger); }
.qa-ocu.pend { background:var(--warn-tint); color:var(--warn); }

/* Una fila por persona del grupo (huésped), en vez de dos .field apilados. */
.qa-pax { display:flex; align-items:center; gap:.6rem; border:1px solid var(--line); border-radius:11px;
    padding:.5rem .6rem; min-height:56px; }
.qa-pax + .qa-pax { margin-top:.45rem; }
.qa-pax .av { flex:none; width:38px; height:38px; border-radius:11px; background:var(--tint); color:var(--accent);
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; object-fit:cover; }
.qa-pax .av.vacio { background:var(--cream); border:1px dashed var(--line); color:var(--muted); }
.qa-pax .cuerpo { flex:1; min-width:0; }
.qa-pax .cuerpo input { width:100%; }
.qa-pax .st { display:block; font-size:.72rem; font-weight:600; color:var(--muted); margin-top:.15rem; }
.qa-pax .st.ok { color:var(--ok); }
/* La miniatura de cada persona es .av; el preview global sobra dentro del botón de cámara. */
.qa-pax label .file-preview { display:none; }

/* Rango de estancia (huésped): ENTRA → SALE. En el teléfono se apilan (dos fechas
   completas lado a lado no caben en 360px y el control se desborda de su caja). */
.qa-rango { display:flex; flex-direction:column; gap:.5rem; }
.qa-rango .lado { flex:1; min-width:0; border:1px solid var(--line); border-radius:11px; background:var(--panel);
    padding:.45rem .7rem; text-align:left; font:inherit; color:inherit; }
.qa-rango .lado .k { display:block; font-size:.62rem; font-weight:800; letter-spacing:.08em; color:var(--muted); }
.qa-rango .lado input { width:100%; min-width:0; border:0 !important; background:none !important;
    padding:.1rem 0; font-size:.95rem; font-weight:700; box-shadow:none !important; }
.qa-rango .flecha { display:none; }
@media (min-width:560px) {
    .qa-rango { flex-direction:row; align-items:stretch; }
    .qa-rango .flecha { display:flex; align-items:center; color:var(--muted); font-weight:700; }
}

/* Pase a superficie oscura (el QR se lee al sol). */
.qa-pase { background:var(--bg); color:var(--on-accent); border-radius:16px; padding:1.1rem; text-align:center; }
.qa-pase .qr { background:var(--panel); border-radius:12px; padding:14px; display:inline-block; }
.qa-pase .qr img { display:block; }
.qa-pase .datos { background:color-mix(in srgb, var(--tint) 12%, var(--bg)); border-radius:14px;
    padding:.8rem .9rem; margin-top:.9rem; text-align:left; }
.qa-pase .datos .r { display:flex; justify-content:space-between; gap:.6rem; padding:.2rem 0; }
.qa-pase .datos .k { font-size:.78rem; font-weight:600; color:color-mix(in srgb, var(--tint) 72%, var(--bg)); }
.qa-pase .datos .v { font-size:.84rem; font-weight:800; }
@media print { .qa-pase { background:none; color:#000; } .qa-pase .datos { background:none; } }

/* ---- Compositor de escritorio (formulario + objeto en vivo) ----
   En el teléfono cada acción termina en una pantalla de confirmación porque no cabe
   antes; en escritorio esa pantalla sobra: la columna derecha muestra el objeto
   MIENTRAS se llena el formulario. El aside NO existe en móvil (display:none): el
   teléfono queda exactamente como está. Todo lo demás vive en @media (min-width:768px). */
.qa-preview { display:none; }
/* Los azulejos de tipo son de escritorio: en el teléfono el control sigue siendo el
   segmented de texto de siempre, sin iconos. */
.qa-tiles label svg { display:none; }

/* ============ Paquetería · cola de trabajo (caseta + portal) ============
   No es una tabla: mezcla foto, contacto y acciones. Se ordena por ANTIGÜEDAD y
   lo que lleva días esperando se marca en ámbar (--warn), que es el estado real
   del trabajo pendiente, no un error.
   `.pk-kpis`/`.pk-kpi` es el contador de cabecera de CUALQUIER cola de trabajo
   (paquetería y reportes lo comparten): tres cifras tocables que además filtran. */
.pk-kpis { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:1rem; }
.pk-kpi { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:.7rem .8rem;
    display:flex; flex-direction:column; gap:.15rem; text-decoration:none; color:inherit; }
.pk-kpi.primary { border-left:3px solid var(--accent); }
.pk-kpi.warn { background:var(--warn-tint); border-color:color-mix(in srgb, var(--warn) 22%, transparent); }
.pk-kpi .k { font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.pk-kpi.warn .k, .pk-kpi.warn .v, .pk-kpi.warn .s { color:var(--warn); }
.pk-kpi .v { font-family:'Space Mono',monospace; font-size:1.6rem; font-weight:700; line-height:1; }
.pk-kpi .s { font-size:.72rem; color:var(--muted); }
a.pk-kpi:hover { border-color:color-mix(in srgb, var(--warn) 45%, transparent); }

.pk-groupbar { display:flex; align-items:center; gap:.6rem; margin:.9rem 0 .5rem; }
.pk-groupbar .t { font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.pk-groupbar.late .t { color:var(--warn); }
.pk-groupbar hr { flex:1; border:0; border-top:1px solid var(--line); margin:0; }
.pk-groupbar.late hr { border-color:color-mix(in srgb, var(--warn) 20%, transparent); }

.pk-card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:.8rem;
    display:flex; flex-direction:column; gap:.7rem; margin-bottom:.6rem; }
.pk-card.late { border-left:3px solid var(--warn); }
.pk-top { display:flex; gap:.7rem; align-items:flex-start; }
.pk-thumb { width:52px; height:52px; flex:0 0 52px; border-radius:10px; object-fit:cover; border:1px solid var(--line);
    background:var(--tint); color:var(--accent); display:flex; align-items:center; justify-content:center; }
.pk-thumb svg { width:22px; height:22px; }
.pk-meta { flex:1; min-width:0; display:flex; flex-direction:column; gap:.15rem; }
.pk-casa { font-size:1.05rem; font-weight:800; }
.pk-desc { font-size:.86rem; }
.pk-sub { font-size:.76rem; color:var(--muted); }
.pk-age { display:inline-flex; align-items:center; height:21px; padding:0 .5rem; border-radius:999px;
    background:var(--tint); color:var(--accent); font-size:.7rem; font-weight:800; }
.pk-age.late { background:var(--warn-tint); color:var(--warn); }
.pk-when { font-size:.76rem; color:var(--muted); }
.pk-acts { display:flex; gap:.5rem; flex-wrap:wrap; }
.pk-acts .btn { min-height:46px; }
.pk-acts .btn.icon { width:46px; flex:0 0 46px; padding:0; justify-content:center; }

@media (min-width:768px) {
    .pk-kpis { grid-template-columns:repeat(4,1fr); gap:.75rem; }
    /* Tarjetas → filas densas: en escritorio caben 20 paquetes en una pantalla. */
    .pk-list { background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
    .pk-card { border:0; border-radius:0; margin:0; padding:.7rem .85rem; flex-direction:row; align-items:center; gap:.75rem; }
    .pk-card + .pk-card { border-top:1px solid var(--line); }
    .pk-card.late { border-left:3px solid var(--warn); }
    .pk-top { flex:1; min-width:0; gap:.75rem; align-items:center; }
    .pk-casa { font-size:.9rem; }
    .pk-when { width:120px; flex:0 0 120px; }
    .pk-acts { flex-wrap:nowrap; }
    .pk-acts .btn { min-height:34px; font-size:.78rem; }
    .pk-acts .btn.icon { width:34px; flex:0 0 34px; }
    .pk-acts { opacity:.55; transition:opacity .12s; }
    .pk-card:hover .pk-acts, .pk-card:focus-within .pk-acts, .pk-card.late .pk-acts { opacity:1; }
}

/* ============ Reportes · renglón de triaje (admin) y avance (residente) ============
   Un ticket es una promesa: lo que decide el triaje es la EDAD y si tiene dueño, no
   la fecha de creación. Por eso el renglón sustituye a `table.grid` (7 columnas que
   en 390px se apilan sin jerarquía) y trae la acción que resuelve el caso —asignar o
   cerrar— sin abrir la ficha. Hermano de `.pk-card`: mismo esqueleto (miniatura +
   cuerpo + acciones), con las dos columnas que un ticket sí necesita (dueño y SLA). */
.ticket { background:var(--panel); border:1px solid var(--line); border-radius:14px;
    padding:.8rem .85rem; display:flex; flex-direction:column; gap:.62rem; }
a.ticket { color:inherit; text-decoration:none; }
/* Rojo, no ámbar: pasarse del SLA no es "va tarde", es una promesa incumplida. */
.ticket.urge { border-color:color-mix(in srgb, var(--danger) 40%, transparent); border-left:3px solid var(--danger); }
.ticket.cerrado { opacity:.78; }
.ticket-id { display:flex; gap:.7rem; }
.ticket-thumb { flex:0 0 52px; width:52px; height:52px; border-radius:10px; object-fit:cover;
    background:var(--tint); color:var(--accent); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; }
.ticket-thumb svg { width:22px; height:22px; }
.ticket-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:.18rem; }
.ticket-meta { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap;
    font-size:.72rem; font-weight:700; color:var(--muted); }
.ticket-meta .mono { font-size:.72rem; }
.ticket-titulo { font-size:.94rem; font-weight:800; line-height:1.25; margin:0; }
.ticket-sub { font-size:.78rem; font-weight:600; color:var(--muted); margin:0; }
.ticket-edad { display:inline-flex; align-items:center; gap:.25rem; }
.ticket-edad.urge { color:var(--danger); }
.ticket-edad svg { width:13px; height:13px; }
.ticket-acts { display:flex; gap:.5rem; align-items:center; }
/* En el teléfono la acción del renglón ES el trabajo: 44px, aunque sea `.small`
   (que de fábrica mide 34). En escritorio la fila es densa y sobra con menos. */
.ticket-acts .btn { min-height:44px; }
.ticket-acts .spacer { margin-left:auto; }
.ticket-dueno { display:inline-flex; align-items:center; gap:.4rem; min-width:0;
    font-size:.78rem; font-weight:700; color:var(--accent); }
.ticket-dueno.nadie { color:var(--danger); }
.ticket-dueno .avatar { display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px; flex:0 0 24px; border-radius:50%;
    background:var(--tint); color:var(--accent); font-size:.66rem; font-weight:800; }
.ticket-dueno.nadie .avatar { background:var(--danger-tint); color:var(--danger); }
.ticket-dueno .quien { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (min-width:900px) {
    /* El renglón se estira; no vuelve a ser una tabla de 7 columnas. */
    .ticket { flex-direction:row; align-items:center; gap:1rem; padding:.85rem 1rem; }
    .ticket-id { flex:1; min-width:0; }
    .ticket-dueno { flex:0 0 170px; }
    .ticket-acts { flex:0 0 auto; }
    .ticket-acts .btn { min-height:36px; font-size:.82rem; }
    .ticket-acts .spacer { display:none; }
}

/* Tareas de un ticket: la casilla ES la acción (marcar hecha), de ahí los 44px de área
   táctil aunque el círculo se dibuje de 26. Reusa `.gv-row` para la fila. */
.tarea-chk { position:relative; width:26px; height:26px; flex:0 0 26px; border-radius:50%;
    border:2px solid var(--line); background:var(--panel); color:transparent; cursor:pointer;
    display:flex; align-items:center; justify-content:center; padding:0; }
.tarea-chk svg { width:15px; height:15px; }
.tarea-chk::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:44px; height:44px; }
.tarea-chk.on { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.tarea-chk:disabled { cursor:default; opacity:.5; }
.gv-row.tarea.hecha .gv-name { text-decoration:line-through; color:var(--muted); }
.gv-row.tarea.off .gv-name { text-decoration:line-through; }
/* Asa de reordenado. `touch-action:none` es obligatorio: sin ella el navegador se queda con
   el gesto para hacer scroll y el arrastre no llega nunca. Discreta hasta que se busca —el
   orden se cambia de vez en cuando; marcar hecha, todo el tiempo. */
.tarea-drag { flex:0 0 34px; width:34px; min-height:34px; border:0; background:none; padding:0;
    display:flex; align-items:center; justify-content:center; color:var(--line);
    cursor:grab; touch-action:none; }
.tarea-drag svg { width:16px; height:16px; }
.gv-row.tarea:hover .tarea-drag, .tarea-drag:focus-visible { color:var(--muted); }
.gv-row.tarea.arrastrando { opacity:.5; }
/* En el teléfono el asa se agarra con el pulgar: 44px de área, mismo dibujo de 16. */
@media (max-width:767px) {
    .tarea-drag { flex-basis:44px; width:44px; min-height:44px; color:var(--muted); }
}

/* Barra de avance de 4 pasos (recibido → visto → en proceso → resuelto). */
.avance { display:flex; gap:.25rem; }
.avance i { flex:1; height:5px; border-radius:3px; background:var(--line); }
.avance i.on { background:var(--accent); }
.avance-label { font-size:.8rem; font-weight:800; color:var(--accent); }
.avance-label .muted { font-weight:700; }

/* Stepper con marca (ficha del admin): el estado se mueve por pasos, no por <select>. */
.stepper4 { display:flex; }
.stepper4 > span { width:25%; display:flex; flex-direction:column; align-items:center; gap:.3rem;
    font-size:.68rem; font-weight:800; color:var(--muted); text-align:center; }
.stepper4 > span.done, .stepper4 > span.now { color:var(--accent); }
.stepper4 b { width:22px; height:22px; border-radius:50%; background:var(--cream);
    border:2px solid var(--line); display:inline-flex; align-items:center; justify-content:center;
    color:var(--on-accent); }
.stepper4 b svg { width:13px; height:13px; }
.stepper4 > span.done b { background:var(--accent); border-color:var(--accent); }
.stepper4 > span.now b { background:var(--panel); border:3px solid var(--accent); }

/* Línea de tiempo (bitácora del admin / historia del residente). Más reciente arriba. */
.timeline { display:flex; flex-direction:column; gap:.6rem; list-style:none; margin:0; padding:0; }
.timeline > li { display:flex; gap:.6rem; align-items:flex-start;
    font-size:.79rem; line-height:1.45; font-weight:600; color:var(--muted); }
.timeline > li::before { content:''; flex:0 0 8px; height:8px; border-radius:50%;
    background:var(--line); margin-top:.32rem; }
.timeline > li:first-child { color:var(--ink); }
.timeline > li:first-child::before { background:var(--accent); }
.timeline time { display:block; font-size:.72rem; font-weight:700; color:var(--muted); margin-top:.1rem; }
.timeline > li.nota { color:var(--ink); }
.timeline > li.nota .txt { background:var(--tint); border-radius:12px; padding:.6rem .75rem; }

/* ============ Hilo del ticket — bitácora + comentarios + evidencia (.hilo-*) ============
   Sustituye a `.timeline` en la ficha y en el portal: el mismo renglón tiene que poder
   llevar autor, burbuja y fotos, porque lo que pasa entre «Recibido» y «Resuelto» —lo que
   se probó, la foto de media reparación, lo que dijo el plomero— antes no tenía dónde ir.
   Las burbujas se distinguen por autor: `--tint` la administración, `--panel` con borde
   el residente; lo automático no lleva burbuja, su encabezado ya lo dice todo. */
.hilo { display:flex; flex-direction:column; gap:.9rem; list-style:none; margin:0; padding:0; }
.hilo-ev { display:flex; gap:.6rem; align-items:flex-start; }
.hilo-av { flex:0 0 30px; width:30px; height:30px; border-radius:50%; display:flex;
    align-items:center; justify-content:center; font-size:.68rem; font-weight:800;
    background:var(--tint); color:var(--accent); }
.hilo-av svg { width:15px; height:15px; }
.hilo-ev.res .hilo-av { background:var(--sand); color:var(--on-sand); }
.hilo-cuerpo { flex:1; min-width:0; }
.hilo-t { font-size:.82rem; font-weight:700; line-height:1.4; color:var(--ink); }
.hilo-t .muted { font-weight:600; }
.hilo-burbuja { margin-top:.35rem; background:var(--tint); border-radius:12px;
    padding:.55rem .7rem; font-size:.85rem; line-height:1.5; white-space:pre-line; }
.hilo-ev.res .hilo-burbuja { background:var(--panel); border:1px solid var(--line); }
.hilo-ev.off .hilo-t { color:var(--muted); font-style:italic; font-weight:600; }
.hilo-pie { margin-top:.3rem; font-size:.72rem; font-weight:700; color:var(--muted);
    display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.hilo-pie form { margin:0; }
.hilo-pie button.link { background:none; border:0; padding:0; cursor:pointer;
    font:inherit; color:var(--muted); text-decoration:underline; }
/* «Interna» es la señal de que esto NO salió del edificio. Se dice en el renglón, no en
   un tooltip: publicar es un acto y hay que poder auditarlo de un vistazo. */
.hilo-int { display:inline-flex; align-items:center; gap:.2rem; padding:.05rem .35rem;
    border-radius:99px; background:var(--warn-tint); color:var(--warn); font-size:.68rem; }

/* Tira de evidencia: miniaturas cuadradas que abren en el lightbox global del layout. */
.ev-fotos { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.45rem; }
.ev-fotos img { width:74px; height:74px; object-fit:cover; border-radius:9px;
    border:1px solid var(--line); cursor:zoom-in; }
.ev-fotos .hueco { width:74px; height:74px; border-radius:9px; border:1px dashed var(--line);
    display:flex; align-items:center; justify-content:center; color:var(--muted); }
/* Lo que la foto dice de sí misma (EXIF): solo aparece cuando NO coincide con la subida,
   o cuando trae coordenadas. Repetir la misma hora dos veces sería ruido. */
.ev-meta { display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; margin-top:.3rem;
    font-size:.72rem; font-weight:700; color:var(--muted); }
.ev-meta span, .ev-meta a { display:inline-flex; align-items:center; gap:.25rem; }
.ev-meta svg { width:12px; height:12px; }

/* Composer: escribir es lo normal, publicar al residente es la excepción — por eso el
   checkbox nace apagado y va pegado al botón, donde se decide. */
.hilo-composer { margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--line); }
.hilo-composer textarea { min-height:74px; }
.hilo-composer .pub { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
    justify-content:space-between; margin-top:.55rem; }
.hilo-composer .pub label { display:flex; gap:.45rem; align-items:center;
    font-size:.82rem; font-weight:700; margin:0; }
.hilo-composer .pub input[type=checkbox] { width:auto; margin:0; }

/* ============ Trabajo y costo — tareas + órdenes de trabajo en un solo bloque ============
   Son la misma pregunta —qué falta y cuánto va a costar—, así que dejan de vivir en
   pantallas distintas. La OT se crea desde aquí, no desde el encabezado, donde no tenía
   contexto y era el único acceso. */
.trabajo-sec { margin-top:1rem; }
.trabajo-sec:first-of-type { margin-top:.8rem; }
.trabajo-sec > h4 { margin:0 0 .5rem; font-size:.74rem; font-weight:800; letter-spacing:.05em;
    text-transform:uppercase; color:var(--muted); }
.bloque-ot { border:1px solid var(--line); border-left:3px solid var(--accent);
    border-radius:12px; padding:.7rem .85rem; background:var(--panel); margin-bottom:.5rem; }
.bloque-ot.off { border-left-color:var(--line); opacity:.7; }
.bloque-ot .ot-h { display:flex; gap:.5rem; align-items:baseline; flex-wrap:wrap; }
.bloque-ot .ot-h .mono { font-weight:800; color:var(--accent); }
.bloque-ot .ot-d { display:flex; gap:.4rem 1rem; flex-wrap:wrap; margin:.45rem 0 .55rem;
    font-size:.79rem; color:var(--muted); font-weight:600; }
.bloque-ot .ot-d b { color:var(--ink); font-weight:700; }
/* Contadores del renglón de tarea: qué evidencia hay sin abrirla. */
.gv-row .cnt { display:inline-flex; align-items:center; gap:.18rem; font-weight:700; }
.gv-row .cnt svg { width:12px; height:12px; }

/* ============ Gestión de vivienda (móvil) — namespace .gv-* ============
   Lo que el residente administra de SU vivienda: ocupantes, vehículos y TAGs,
   llaveros, personal de servicio, mascotas. El hub es un índice de filas (no
   pestañas: en 360px una fila de 4 tabs se desborda y esconde la mitad). */
.gv-hero { background:var(--bg); border-radius:16px; padding:15px 16px; display:flex; align-items:center; gap:13px; color:var(--on-accent); }
.gv-hero .gv-hero-ic { width:44px; height:44px; flex:0 0 44px; border-radius:13px; display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--accent2) 34%, transparent); }
.gv-hero .gv-hero-ic svg { width:22px; height:22px; }
.gv-hero h2 { font-size:1.05rem; margin:0; }
.gv-hero .sub { font-size:.78rem; color:color-mix(in srgb, var(--tint) 72%, var(--bg)); }

/* Índice del hub (una fila por módulo, con su conteo). */
.gv-index { background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.gv-index a { display:flex; align-items:center; gap:12px; min-height:62px; padding:11px 14px;
    border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; }
.gv-index a:last-child { border-bottom:0; }
.gv-index a:hover { background:color-mix(in srgb, var(--tint) 45%, var(--panel)); }
.gv-index a:active { background:var(--tint); }
.gv-index .ic-box { width:34px; height:34px; flex:0 0 34px; border-radius:10px; background:var(--tint); color:var(--accent);
    display:flex; align-items:center; justify-content:center; }
.gv-index .ic-box svg { width:19px; height:19px; }
.gv-index .t { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.gv-index .t b { font-size:.92rem; font-weight:700; }
.gv-index .t span { font-size:.75rem; color:var(--muted); }
.gv-index .chev { color:var(--muted); flex:0 0 auto; display:flex; }
.gv-index .chev svg { width:18px; height:18px; }
/* El conteo suelto es del índice de escritorio (donde el renglón no lleva subtítulo).
   En el teléfono el número ya va dicho en el resumen: repetirlo solo estorba. */
.gv-index .n { display:none; }

/* Filas de lista (ocupantes, llaveros, personal, mascotas). */
.gv-row { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:13px 14px;
    display:flex; align-items:center; gap:12px; margin-bottom:.6rem; }
.gv-row .gv-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.gv-row .gv-name { font-size:.95rem; font-weight:700; }
.gv-row .gv-meta { font-size:.78rem; color:var(--muted); }
.gv-row.off .gv-name { color:var(--muted); }
.gv-av { width:42px; height:42px; flex:0 0 42px; border-radius:50%; background:var(--tint); color:var(--accent);
    display:flex; align-items:center; justify-content:center; font-weight:800; overflow:hidden; }
.gv-av img { width:100%; height:100%; object-fit:cover; }
.gv-av.is-me { background:var(--accent); color:var(--on-accent); }
.gv-av svg { width:20px; height:20px; }
.gv-thumb { width:60px; height:60px; flex:0 0 60px; border-radius:13px; object-fit:cover; border:1px solid var(--line); }
.gv-thumb.vacio { background:var(--cream); border:1px dashed var(--line); color:var(--muted);
    display:flex; align-items:center; justify-content:center; }
.gv-thumb.vacio svg { width:24px; height:24px; }

/* Menú de acciones secundarias (⋮). Lo destructivo vive aquí, nunca suelto en la fila. */
.gv-more { position:relative; width:32px; height:32px; flex:0 0 32px; border-radius:9px; border:1px solid var(--line); background:transparent;
    color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.gv-more svg { width:18px; height:18px; }
/* Área táctil de 44px sin engordar el dibujo: el botón se ve de 32/34px pero el dedo
   acierta en 44 (que es la medida que falla en el teléfono, no la visual). */
.gv-more::after, .gv-row .btn.small::after, .gv-strip .btn.small::after {
    content:''; position:absolute; top:50%; transform:translateY(-50%); left:-6px; right:-6px; height:44px; }
.gv-row .btn.small, .gv-strip .btn.small { position:relative; }
.gv-menu { position:relative; }
.gv-menu > .gv-menu-pop { display:none; position:absolute; right:0; top:38px; z-index:30; min-width:190px;
    background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:6px;
    box-shadow:0 14px 34px color-mix(in srgb, var(--ink) 18%, transparent); }
.gv-menu.open > .gv-menu-pop { display:block; }
.gv-menu-pop form { margin:0; }
.gv-menu-pop button, .gv-menu-pop a { display:flex; width:100%; align-items:center; gap:8px; min-height:44px; padding:0 10px;
    background:none; border:0; border-radius:8px; font:inherit; font-size:.88rem; font-weight:600; color:var(--ink);
    text-align:left; text-decoration:none; cursor:pointer; box-shadow:none; min-width:0; }
.gv-menu-pop button:hover, .gv-menu-pop a:hover { background:var(--tint); }
.gv-menu-pop .danger { color:var(--danger); }

/* Bandas de estado dentro de una tarjeta (TAG / engomado / horario). */
.gv-strip { border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; padding:10px 14px; }
.gv-strip .lbl { font-size:.75rem; font-weight:700; color:var(--muted); width:66px; flex:0 0 66px;
    display:flex; align-items:center; gap:.3rem; }
.gv-strip .lbl svg { width:15px; height:15px; }
.gv-alert { border-top:1px solid var(--line); background:var(--warn-tint); padding:11px 14px;
    display:flex; flex-direction:column; gap:9px; }
.gv-alert .txt { font-size:.78rem; font-weight:700; color:var(--warn); line-height:1.4; }

/* CTA fijo inferior. Va por ENCIMA de la tab bar (de ahí --tabbar-h), como .sticky-cta. */
.gv-cta { position:sticky; bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); margin:1rem -1rem 0;
    padding:12px 1rem calc(12px + env(safe-area-inset-bottom));
    background:var(--panel); border-top:1px solid var(--line); z-index:20; }
.gv-cta .btn { width:100%; min-height:46px; font-size:.95rem; }
.gv-cta.dos { display:flex; gap:.5rem; align-items:center; }
.gv-cta.dos .btn { width:auto; flex:1; }

/* Hoja inferior (bottom sheet) — <dialog> nativo. */
.gv-sheet { border:0; padding:0; background:transparent; max-width:none; max-height:none; }
.gv-sheet[open] { position:fixed; inset:0; z-index:60; width:100%; height:100%; }
.gv-sheet::backdrop { background:color-mix(in srgb, var(--ink) 42%, transparent); }
.gv-sheet .gv-sheet-body { position:absolute; left:0; right:0; bottom:0; background:var(--panel);
    border-radius:22px 22px 0 0; padding:14px 16px calc(18px + env(safe-area-inset-bottom));
    display:flex; flex-direction:column; gap:14px; max-height:88vh; overflow:auto; }
.gv-sheet .gv-sheet-body h3 { margin:0; font-size:1.02rem; }
.gv-sheet .gv-grab { width:42px; height:4px; border-radius:99px; background:var(--line); align-self:center; }
.gv-sheet .field { margin:0; }
.gv-opt { position:relative; border:1px solid var(--line); border-radius:14px; padding:13px 14px; display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
/* El radio real se oculta sin quitarlo del DOM (sigue enfocable y sigue emitiendo change);
   lo que comunica la elección es .sel, que pinta kaanPintaOpciones(). */
.gv-opt input[type=radio] { position:absolute; opacity:0; pointer-events:none; }
.gv-opt.sel { border:2px solid var(--accent); background:var(--tint); padding:12px 13px; }
.gv-opt .gv-radio { width:20px; height:20px; flex:0 0 20px; border-radius:50%; border:1.5px solid var(--line); margin-top:1px; }
.gv-opt.sel .gv-radio { border:6px solid var(--accent); background:var(--panel); }

/* Lista de pendientes dentro de un .alert: cada renglón dice QUÉ falta y lleva a
   donde se resuelve (un contador suelto obliga a buscar dónde está lo que falta). */
.gv-pend { display:flex; flex-direction:column; gap:.15rem; }
.gv-pend a { display:flex; align-items:center; gap:.5rem; min-height:38px; padding:.25rem 0;
    color:inherit; text-decoration:none; font-size:.84rem; line-height:1.4; }
.gv-pend a > span:first-child { flex:1; min-width:0; }
.gv-pend a:hover > span:first-child { text-decoration:underline; }
.gv-pend .chev { flex:none; display:flex; opacity:.7; }
.gv-pend .chev svg { width:16px; height:16px; }

/* Vacío con motivo (no un "no hay nada" a secas). */
.gv-empty { background:var(--panel); border:1px dashed color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius:14px; padding:18px 16px; display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; }
.gv-empty .gv-empty-ic { width:44px; height:44px; border-radius:13px; background:var(--tint); color:var(--accent);
    display:flex; align-items:center; justify-content:center; }
.gv-empty .gv-empty-ic svg { width:22px; height:22px; }

/* ============ Gestionar propiedad (móvil) — namespace .gp-* ============
   Lo que el DUEÑO decide sobre su propiedad: ocupación, principal, representantes.
   Reutiliza .gv-index / .gv-row / .gv-menu / .gv-cta del bloque anterior. */
.gp-state { background:var(--bg); border-radius:16px; padding:15px 16px; display:flex; flex-direction:column; gap:12px; color:var(--on-accent); }
.gp-state .gp-badge { display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px;
    background:color-mix(in srgb, var(--accent2) 40%, transparent); color:var(--on-accent); font-size:.7rem; font-weight:700; }
.gp-state .gp-sub { font-size:.75rem; color:color-mix(in srgb, var(--tint) 70%, var(--bg)); }
.gp-state .gp-figs { display:flex; gap:.8rem; }
.gp-state .gp-figs > div { flex:1; display:flex; flex-direction:column; gap:.1rem; }
.gp-state .gp-figs .k { font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:color-mix(in srgb, var(--tint) 60%, var(--bg)); }

/* Resumen "vas a solicitar" — se lee ANTES de enviar, no en un confirm(). */
.gp-summary { background:var(--bg); border-radius:14px; padding:13px 15px; display:flex; flex-direction:column; gap:.4rem; margin-top:.8rem; }
.gp-summary .k { font-size:.65rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    color:color-mix(in srgb, var(--tint) 60%, var(--bg)); }
.gp-summary p { margin:0; font-size:.9rem; font-weight:700; line-height:1.5; color:var(--on-accent); }
.gp-summary b { font-weight:700; border-bottom:2px dashed var(--accent2); }

/* Opciones grandes (radio como tarjeta). */
.gp-choice { display:flex; flex-direction:column; gap:.5rem; }
.gp-choice label { position:relative; border:1px solid var(--line); background:var(--panel); border-radius:12px; min-height:52px;
    display:flex; align-items:center; gap:.6rem; padding:0 .8rem; font-size:.88rem; font-weight:600; cursor:pointer; }
.gp-choice label.sel { border:2px solid var(--accent); background:var(--tint); font-weight:700; }
.gp-choice .dot { width:18px; height:18px; flex:0 0 18px; border-radius:50%; border:1.5px solid var(--line); }
.gp-choice label.sel .dot { border:5px solid var(--accent); background:var(--panel); }
.gp-choice input { position:absolute; opacity:0; pointer-events:none; }

/* Chips de tipo / alcance. */
.gp-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.gp-chips label { position:relative; display:inline-flex; align-items:center; height:44px; padding:0 .9rem; border-radius:10px;
    border:1px solid var(--line); background:var(--panel); font-size:.85rem; font-weight:600; cursor:pointer; }
.gp-chips label.sel { border:2px solid var(--accent); background:var(--tint); color:var(--accent); font-weight:700; }
.gp-chips input { position:absolute; opacity:0; pointer-events:none; }
.gp-scope { display:flex; flex-wrap:wrap; gap:.4rem; }
.gp-scope .pill { font-size:.72rem; }

/* Lista de permisos (46px por fila). */
.gp-perms { background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.gp-perms label { display:flex; align-items:center; gap:.7rem; min-height:46px; padding:.6rem .9rem;
    border-bottom:1px solid var(--line); font-size:.86rem; font-weight:600; cursor:pointer; }
.gp-perms label:last-of-type { border-bottom:0; }
.gp-perms label.is-base { opacity:.72; cursor:default; }
.gp-perms .box { width:22px; height:22px; flex:0 0 22px; border-radius:7px; border:1.5px solid var(--line);
    display:flex; align-items:center; justify-content:center; color:transparent; }
.gp-perms .box svg { width:14px; height:14px; }
.gp-perms input:checked + .box { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.gp-perms label.is-base .box { background:var(--muted); border-color:var(--muted); color:var(--on-accent); }
.gp-perms input { position:absolute; opacity:0; pointer-events:none; }

/* Interruptor (cuotas para ocupantes). */
.gp-switch { width:50px; height:30px; flex:0 0 50px; border-radius:999px; background:var(--line); position:relative;
    border:0; padding:0; cursor:pointer; transition:background .15s; }
.gp-switch::after { content:''; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
    background:var(--panel); transition:transform .15s; }
.gp-switch[aria-checked="true"] { background:var(--accent); }
.gp-switch[aria-checked="true"]::after { transform:translateX(20px); }
/* Mismo criterio que .gv-more: el interruptor se dibuja de 30px de alto, pero el dedo
   acierta en 44 (es lo que falla en el teléfono, no el tamaño visual). */
.gp-switch::before { content:''; position:absolute; top:50%; transform:translateY(-50%); left:0; right:0; height:44px; }

/* Visibilidad por propiedad (el dueño recorta lo que ven quienes la habitan).
   Lo usan la pantalla suelta y la sección del hub, por eso vive aquí. */
.vis-row { padding:.8rem 0; border-top:1px solid var(--line); }
.vis-row:first-of-type { border-top:0; padding-top:.2rem; }
.vis-t strong { display:block; font-size:.95rem; }
.vis-t .muted { display:block; font-size:.8rem; margin-top:.1rem; }
.vis-auds { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.55rem; }
.vis-chip { display:inline-flex; align-items:center; gap:.4rem; min-height:44px; padding:.35rem .8rem;
    border:1px solid var(--line); border-radius:999px; background:var(--panel); font-size:.86rem;
    font-weight:600; cursor:pointer; }
.vis-chip input { width:auto; margin:0; }
.vis-chip:has(input:checked) { background:var(--tint); border-color:var(--accent); color:var(--accent); }

/* Solicitudes en revisión. */
.gp-req { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:.8rem .9rem;
    display:flex; flex-direction:column; gap:.6rem; margin-bottom:.7rem; }
.gp-req.done { opacity:.75; }
.gp-bar { flex:1; height:6px; border-radius:99px; background:var(--tint); overflow:hidden; }
.gp-bar > span { display:block; height:100%; background:var(--accent2); border-radius:99px; }

/* ============ Vivienda y propiedad en ESCRITORIO — namespace .mod-* ============
   En el teléfono el hub es un índice y cada módulo su propia pantalla (ese salto
   compra espacio). En escritorio el espacio sobra, así que la misma página trae
   el índice como navegación por anclas y TODAS las secciones a la derecha.
   Las URLs móviles siguen existiendo y respondiendo: nada de esto crea rutas.
   Base = teléfono: las secciones no se pintan y el índice sí. */
.mod-secciones { display:none; }
.sec-head { display:flex; align-items:baseline; gap:.6rem; margin-bottom:.6rem; flex-wrap:wrap; }
.sec-head h3 { font-size:1.02rem; font-weight:800; }
.sec-head .desc { flex:1; min-width:12rem; font-size:.8rem; color:var(--muted); line-height:1.45; }
/* Pie de diálogo: en el teléfono no define nada (los botones se apilan como hoy);
   en escritorio invierte el orden y los alinea a la derecha. */
.sheet-foot { display:flex; flex-direction:column; gap:14px; }

/* ---- Desktop enhancements ---- */
@media (min-width:768px) {
    /* Topbar → barra blanca delgada contextual (a la derecha del rail). */
    header.topbar { background:var(--panel); color:var(--ink); border-bottom:1px solid var(--line); padding:0 1.25rem; min-height:56px; gap:1rem; }
    .hamburger, .tabbar { display:none; }
    :root { --tabbar-h:0px; }   /* sin tab bar: los CTA pegajosos van al fondo */
    /* La barra de caseta tampoco existe en escritorio (ahí navega la reja de `caseta_nav`).
       Va en `body` porque la declaración de `body` le gana al `:root` heredado. */
    body.tiene-barra-caseta { --tabbar-h:0px; }
    /* Estado de cuenta: en escritorio manda la tabla (la lista de tarjetas es para el teléfono). */
    .ec-list { display:none; }
    .ec-tabla { display:block; }
    .sticky-cta { margin-left:0; margin-right:0; border-radius:14px; }
    /* Gestión de vivienda/propiedad: en escritorio el CTA deja de ser pegajoso. */
    .gv-cta { position:static; margin:1rem 0 0; padding:0; border-top:0; background:transparent; }
    .gv-cta .btn { width:auto; }
    .gv-cta.dos { justify-content:flex-start; }
    .gv-cta.dos .btn { flex:0 0 auto; }
    /* La hoja inferior en escritorio se centra como diálogo (no pegada al borde). */
    .gv-sheet .gv-sheet-body { left:50%; right:auto; bottom:auto; top:50%; transform:translate(-50%,-50%);
        width:min(560px, calc(100vw - 2rem)); border-radius:18px; padding:1.3rem 1.5rem; max-height:86vh; }
    .gv-sheet .gv-grab { display:none; }
    /* Primario a la derecha (orden invertido respecto del apilado móvil). */
    .sheet-foot { flex-direction:row; justify-content:flex-end; gap:.55rem;
        border-top:1px solid var(--line); padding-top:.9rem; margin-top:.2rem; }
    .sheet-foot .btn { width:auto; order:2; }
    .sheet-foot .btn.secondary { order:1; }

    /* ===== K1 · Shell de dos columnas (vivienda / propiedad) =====
       top:76px = topbar de escritorio (56px) + respiro. Si cambia la altura de
       header.topbar hay que mover los sticky y el scroll-margin a la par. */
    /* Va PRIMERO: las reglas de .mod-main / .mod-aside que siguen deben ganarle el
       `display` a este bloque cuando un elemento lleva las dos clases. */
    .mod-secciones { display:block; }
    .mod-secciones section[id] { scroll-margin-top:76px; }
    .mod-shell { display:grid; grid-template-columns:236px minmax(0,1fr); gap:1.4rem; align-items:start; max-width:1140px; }
    .mod-shell.with-aside { grid-template-columns:minmax(0,1fr) 268px; }
    .mod-nav { position:sticky; top:76px; display:flex; flex-direction:column; gap:.9rem; min-width:0; }
    .mod-main { min-width:0; display:flex; flex-direction:column; gap:1.7rem; }
    .mod-aside { position:sticky; top:76px; display:flex; flex-direction:column; gap:.6rem; min-width:0; }
    /* El índice móvil y su rótulo salen: en escritorio los sustituye .mod-nav. */
    .mod-indice { display:none; }

    /* Índice del hub → navegación por anclas (mismo orden, mismos conteos). */
    .gv-index.as-nav { background:none; border:0; border-radius:0; display:flex; flex-direction:column; gap:2px; overflow:visible; }
    .gv-index.as-nav a { min-height:40px; padding:0 .7rem; border:0; border-radius:10px; gap:.55rem; font-size:.82rem; }
    .gv-index.as-nav a:hover { background:color-mix(in srgb, var(--tint) 55%, transparent); }
    .gv-index.as-nav a[aria-current="true"] { background:var(--tint); color:var(--accent); font-weight:700; }
    .gv-index.as-nav .ic-box { width:22px; height:22px; flex:0 0 22px; background:none; border-radius:0; color:inherit; }
    .gv-index.as-nav .ic-box svg { width:17px; height:17px; }
    .gv-index.as-nav .t { flex-direction:row; align-items:center; gap:.4rem; }
    .gv-index.as-nav .t b { font-weight:600; font-size:.82rem; }
    .gv-index.as-nav .t > span, .gv-index.as-nav .chev { display:none; }   /* el subtítulo vive en la sección */
    .gv-index.as-nav .n { display:inline; margin-left:auto; font-size:.72rem; color:var(--muted); }

    /* Encabezado de sección: el CTA se despega del pie y se pone junto al título. */
    .sec-head .gv-cta { display:contents; }
    .sec-head .gv-cta .btn { min-height:36px; }

    /* Listas comparables (ocupantes, representantes): el MISMO markup del teléfono,
       alineado en columnas — comparar «con cuenta / sin abrir» o el alcance entre
       filas es la razón de ser de estos listados. Solo rejilla, cero cambios de HTML
       (por eso el teléfono no se mueve un pixel). */
    .gv-list > .gv-row .gv-main { display:grid; grid-template-columns:minmax(0,1fr) 240px; align-items:center; gap:.7rem; }
    .gv-list > .gv-row .gv-main > .btn-row { margin:0; }
    /* Ficha del representante + su alcance, uno al lado del otro. */
    .gv-list.dos-cols > .card { display:grid; grid-template-columns:minmax(0,1fr) 320px; align-items:stretch; }
    .gv-list.dos-cols > .card > .gv-strip { border-top:0; border-left:1px solid var(--line); align-items:flex-start; }
    .gv-list.dos-cols > .card > .gv-alert { grid-column:1 / -1; }

    /* Tarjetas de vehículo a dos columnas (cada una arrastra sus credenciales). */
    .veh-grid { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; align-items:start; }
    .veh-grid > .card { margin:0; }

    /* Estado de la propiedad: franja horizontal en vez de bloque apilado. */
    .gp-state { flex-direction:row; align-items:center; gap:1.6rem; padding:1rem 1.2rem; }
    .gp-state .gp-figs { gap:1.6rem; flex:1; }
    .gp-state .gp-figs > div { flex:0 0 auto; }
    .gp-req { padding:.75rem .8rem; margin-bottom:0; }

    header.topbar .brand { display:none; }
    .ctx-title { display:block; color:var(--ink); }
    .topbar .bell { color:var(--muted); }
    .topbar .bell:hover { color:var(--ink); }
    .topbar .bar-right a { color:var(--muted); }
    .topbar .bar-right a:hover { color:var(--ink); }

    /* Rail fijo, colapsado (icono + etiqueta corta). */
    body.has-rail { padding-left:74px; }
    .rail { width:74px; transform:none; padding:.9rem 0; align-items:center; }
    /* En 74px no caben los legales: en escritorio siguen en el pie de la página. */
    .rail-legal { display:none; }
    .rail-backdrop { display:none !important; }
    .rail-brand { width:42px; height:42px; border-radius:12px; margin:0 0 .8rem; }
    .rail-brand img { width:42px; height:42px; border-radius:12px; }
    .rail-nav { align-items:center; gap:.35rem; width:100%; }
    .rail-item { flex-direction:column; gap:.15rem; width:56px; height:48px; margin:0 auto; padding:.3rem 0; justify-content:center; }
    .rail-item .ri-full { display:none; }
    .rail-item .ri-short { display:block; font-size:.56rem; font-weight:600; letter-spacing:.01em; }
    /* Rail angosto (74px): el encabezado de grupo se reduce a una línea divisoria (sin texto). */
    .rail-group { justify-content:center; padding:.45rem 0 .2rem; }
    .rail-group span { display:none; }
    .rail-group::after { flex:0 0 40px; }
    /* D1 · rail favoritos-first en 74px: etiqueta corta SIEMPRE (nunca solo-icono). */
    .rail-search { width:58px; margin:0 auto; flex-direction:column; gap:.15rem; padding:.35rem 0; justify-content:center; }
    .rail-search .ri-full, .rail-search kbd { display:none; }
    .rail-search .ri-short { display:block; font-size:.56rem; font-weight:700; }
    .rail-pins { display:flex; flex-direction:column; gap:.35rem; width:100%; align-items:center; }
    /* «Editar» se queda visible aunque el rail esté angosto: si no, editar los accesos sólo
       sería posible desde el teléfono o desde «Todos los módulos». Pero aquí NO cabe junto
       a la línea divisoria del grupo: se queda solo y centrado (la línea se omite). */
    .rail-group.is-fij { justify-content:center; padding:.45rem 0 .15rem; }
    .rail-group.is-fij::after { display:none; }
    .rail-group.is-fij .rail-edit-toggle { margin:0; }
    .rail-edit-acciones { align-items:center; }
    .rail-add { width:58px; padding:.35rem 0; }
    .rail-add .ra-full { display:none; }
    .rail-add .ra-short { display:block; font-size:.56rem; }
    .rail.is-editing .rail-item[data-key] { flex-direction:row; width:58px; height:auto; padding:.25rem .2rem; justify-content:center; gap:.15rem; }
    .rail.is-editing .rail-item[data-key] .ri-short { display:none; }
    .rail.is-editing .rail-item[data-key] .ri-full { display:block; font-size:.56rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .rail.is-editing .rail-item[data-key] .ri-x { margin-left:0; width:18px; height:18px; }
    .topbar-search { display:flex; }
    .bell.tb-lupa { display:none; }
    /* Cuenta en la barra blanca contextual: muestra el correo, oculta el glifo. */
    .user-menu .user-glyph { display:none; }
    .user-menu .user-glyph.has-foto { display:inline-flex; }   /* con foto, el avatar sí acompaña al nombre */
    .user-menu .email-text { display:inline-block; }
    .topbar .user-menu summary { color:var(--muted); }
    .topbar .user-menu[open] summary, .topbar .user-menu summary:hover { color:var(--ink); }

    /* Selector de condominio como chip --tint en la barra blanca. */
    .tenant-select { display:flex; align-items:center; gap:.35rem; background:var(--tint); border-radius:8px; padding:.15rem .55rem; }
    .tenant-select label { display:none; }
    .tenant-select select { background:transparent; color:var(--accent); border:0; font-weight:600; font-size:.85rem; padding:.35rem .2rem; max-width:none; }
    .condo-menu { display:none; }

    main { margin:1.5rem auto; padding:0 1.25rem; }
    .page-head h1 { font-size:1.4rem; }
    table.grid th, table.grid td { white-space:normal; }
    .grid2 { grid-template-columns:1fr 1fr; }
    .field input[type=text], .field input[type=email], .field input[type=number], .field input[type=password], .field input[type=date], .field input[type=datetime-local], .field input[type=tel], .field select, .field textarea { font-size:.92rem; }

    /* ===== Acciones rápidas · compositor de escritorio =====
       Formulario a la izquierda, objeto en vivo a la derecha. El aside es la
       pantalla de confirmación adelantada: se ve mientras se captura. */
    .qa-compose { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:1.5rem;
        align-items:start; max-width:1140px; }
    .qa-compose.wide-aside { grid-template-columns:minmax(0,1fr) 380px; }
    .qa-main { min-width:0; display:flex; flex-direction:column; gap:1rem; }
    .qa-main > .card { margin-bottom:0; }
    .qa-preview { display:flex; position:sticky; top:76px; flex-direction:column; gap:.75rem; }
    .qa-preview > .k { font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
    /* El objeto en vivo sustituye a la frase "Vas a crear": dice lo mismo, estructurado. */
    .qa-compose .qa-frase { display:none; }

    /* Objeto en previsualización: nada que compartir todavía y ningún folio inventado. */
    .qa-preview[data-estado="previsualizacion"] .qa-share { display:none; }
    .qa-ghost { border:2px dashed color-mix(in srgb, var(--tint) 34%, var(--bg)); border-radius:12px;
        min-height:186px; display:flex; flex-direction:column; align-items:center; justify-content:center;
        gap:.5rem; padding:1rem; text-align:center; }
    .qa-ghost svg { width:30px; height:30px; opacity:.75; }
    .qa-ghost .t { font-size:.78rem; font-weight:700; line-height:1.4;
        color:color-mix(in srgb, var(--tint) 72%, var(--bg)); }

    /* Campos que van en pares naturales (en móvil .pair no existe → se apilan). */
    .qa-main .pair { display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; align-items:start; }
    .qa-main .pair > .field { margin-bottom:.6rem; }

    /* El CTA pegajoso vuelve al flujo: en escritorio no hay tab bar que esquivar. */
    .qa-footbar { position:static; margin:0; padding:0; border-top:0; background:none;
        backdrop-filter:none; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
    .qa-footbar .btn.block { width:auto; }
    .qa-footbar .hint { display:inline; text-align:left; margin:0 0 0 .25rem; }

    /* Azulejos de tipo (aviso de llegada): el segmented crece a 4 tarjetas. */
    .qa-tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; }
    .qa-tiles label { flex-direction:column; justify-content:center; height:78px; gap:.35rem;
        border-radius:11px; font-size:.82rem; text-align:center; }
    .qa-tiles label svg { display:block; width:20px; height:20px; }

    /* ===== Reserva: semana completa (7 días × bloques) ===== */
    .res-week { background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
        display:flex; flex-direction:column; }
    .res-week .hd { display:flex; background:color-mix(in srgb, var(--tint) 45%, var(--panel));
        border-bottom:1px solid var(--line); }
    .res-week .hd > span { flex:1; padding:.5rem 0; text-align:center; font-size:.7rem; font-weight:700; color:var(--muted); }
    .res-week .hd > span.hoy { color:var(--accent); font-weight:800; }
    .res-week .hd > span b { display:block; font-size:.9rem; color:var(--ink); }
    .res-week .hd > span.hoy b { color:var(--accent); }
    .res-week .hd .gut, .res-week .row .gut { width:58px; flex:0 0 58px; }
    .res-week .row { display:flex; border-bottom:1px solid var(--line); min-height:38px; }
    .res-week .row:last-child { border-bottom:0; }
    .res-week .row .gut { display:flex; align-items:center; justify-content:flex-end; padding-right:.55rem;
        font-size:.68rem; font-weight:700; color:var(--muted); font-family:'Space Mono',monospace; }
    .res-week .slot { flex:1; margin:3px; border-radius:6px; border:0; font:inherit; font-size:.62rem;
        font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; color:inherit; padding:0; }
    .res-week .slot.libre { background:var(--tint); border:1px solid color-mix(in srgb, var(--accent2) 35%, transparent); }
    .res-week .slot.ocupado { background:color-mix(in srgb, var(--line) 55%, var(--panel)); color:var(--muted); cursor:not-allowed; }
    .res-week .slot.cerrado { background:var(--cream); cursor:not-allowed; }
    .res-week .slot.sel { background:var(--accent); color:var(--on-accent); }
    .res-legend { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; font-size:.72rem; color:var(--muted); font-weight:600; }
    .res-legend i { width:11px; height:11px; border-radius:3px; display:inline-block; margin-right:.3rem; vertical-align:-1px; }
    .res-legend i.libre { background:var(--tint); border:1px solid color-mix(in srgb, var(--accent2) 35%, transparent); }
    .res-legend i.ocupado { background:color-mix(in srgb, var(--line) 55%, var(--panel)); }
    .res-legend i.cerrado { background:var(--cream); border:1px solid var(--line); }
    .res-legend i.sel { background:var(--accent); }
}

/* ===== flatpickr (ajustes de marca), embed (chat en iframe) e impresión. Ojo: la hoja de flatpickr se inserta ANTES de este archivo, para que estos ajustes le ganen ===== */
.flatpickr-day.selected, .flatpickr-day.selected:hover { background:var(--accent); border-color:var(--accent); }
.flatpickr-day.today { border-color:var(--accent2); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-weekdays { color:var(--ink); }
.flatpickr-input.flatpickr-alt, input.flatpickr-alt { background:var(--panel); }
.flatpickr-calendar { font-family:inherit; }
/* Bigger, friendlier time picker. flatpickr fija .flatpickr-time a 40px con max-height y overflow
   oculto: con los números de 46px la hora salía cortada (sobre todo en las de solo hora). */
.flatpickr-time { height:auto !important; max-height:none !important; line-height:46px; padding:.35rem .5rem; border-top:1px solid var(--line); }
.flatpickr-calendar.noCalendar { width:auto; min-width:250px; }
.flatpickr-calendar.noCalendar .flatpickr-time { border-top:0; }
.flatpickr-time .numInputWrapper { height:46px; }
/* Los números del selector son <input type=number>: sin la caja de los campos normales. */
.flatpickr-time input.flatpickr-hour, .flatpickr-time input.flatpickr-minute { border:0; border-radius:8px; padding:0; background:transparent; box-shadow:none; }
.flatpickr-time input.flatpickr-hour, .flatpickr-time input.flatpickr-minute { font-size:1.25rem; font-weight:700; height:46px; }
.flatpickr-time .flatpickr-am-pm { font-size:1rem; font-weight:700; height:46px; line-height:46px; color:var(--accent); }
.flatpickr-time .flatpickr-time-separator { font-size:1.25rem; line-height:46px; }
/* Pie del selector: «Borrar» (campos opcionales) y «Listo» (los que llevan hora). */
.fp-acciones { display:flex; gap:.5rem; justify-content:flex-end; padding:.5rem; border-top:1px solid var(--line); }
.fp-acciones button { min-height:44px; padding:0 1rem; border-radius:10px; border:1px solid var(--line); background:var(--panel);
    color:var(--ink); font:inherit; font-size:.92rem; font-weight:700; cursor:pointer; }
.fp-acciones .fp-borrar { margin-right:auto; color:var(--muted); }
.fp-acciones .fp-listo { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
/* En el teléfono flatpickr usa el selector nativo (.flatpickr-mobile). iOS deja el campo vacío sin
   alto y centra el valor: se le da el alto de un campo normal y se alinea a la izquierda. */
input.flatpickr-mobile { min-height:44px; -webkit-appearance:none; appearance:none; text-align:left; }
input.flatpickr-mobile::-webkit-date-and-time-value { text-align:left; }
.field input.flatpickr-mobile { width:100%; display:block; }
.flatpickr-time .numInputWrapper span.arrowUp, .flatpickr-time .numInputWrapper span.arrowDown { width:22px; opacity:.55; }
.flatpickr-time .numInputWrapper:hover span.arrowUp, .flatpickr-time .numInputWrapper:hover span.arrowDown { opacity:1; }
.flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color:var(--accent); }
.flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color:var(--accent); }
/* Embed: la app dentro de un iframe (modal de chat) oculta su chrome y muestra solo el contenido.
   Ojo: #kaan-loader (barra de progreso superior) SÍ se conserva → da feedback al navegar dentro. */
html.kaan-embed .topbar, html.kaan-embed > body > footer, html.kaan-embed .notif-banner, html.kaan-embed .rail, html.kaan-embed .rail-backdrop, html.kaan-embed .tabbar, html.kaan-embed .seclauncher, html.kaan-embed .seclauncher-backdrop, html.kaan-embed .sec-subnav, html.kaan-embed .kpal, html.kaan-embed #kaan-toast { display:none !important; }
/* En el modal de chat: oculta SOLO el h1 (redundante con la barra del modal), NO la .page-head
   entera — así se conservan los botones de acción (.chat-actions) y el menú del hilo (.chat-menu). */
html.kaan-embed .page-head h1 { display:none !important; }
/* Impresión: oculta TODO el chrome de la app (rail/tabbar/topbar/launcher/banners/FABs) para que
   los documentos imprimibles (recibo, estado de cuenta, informes) salgan limpios. Regla global —
   así ninguna vista imprimible tiene que repetir esto. */
@media print {
    .topbar, .rail, .rail-backdrop, .tabbar, .seclauncher, .seclauncher-backdrop, .sec-subnav,
    .notif-banner, .ch-pop, #kaan-help, #kaan-corner, #kaan-loader, .hamburger, .kpal, #kaan-toast, .topbar-search,
    body > footer, .no-print, .head-actions, .btn-row { display:none !important; }
    body { background:#fff !important; }
    body.has-rail main, main { margin:0 !important; padding:0 !important; max-width:none !important; }
    .card { box-shadow:none !important; border-color:#ccc; }
}
html.kaan-embed .page-head { margin:0 0 .6rem !important; }
html.kaan-embed, html.kaan-embed body { background:transparent !important; }
html.kaan-embed body { padding:0 !important; }
html.kaan-embed main { padding:0 !important; margin:0 !important; max-width:none !important; }

/* ===== D1 · Command palette + toast de fijar (antes en partials/kaan_palette) ===== */
/* ===== D1 · Command palette ===================================================================
   Escritorio: overlay centrado, caja de 620px. Móvil: pantalla propia (mismo markup, otro @media)
   — nada de un diálogo diminuto sobre el contenido en un teléfono. */
.kpal { position:fixed; inset:0; z-index:9995; background:color-mix(in srgb, var(--ink) 42%, transparent); }
.kpal[hidden] { display:none !important; }
body.kpal-open { overflow:hidden; }
.kpal-box { position:absolute; top:0; left:0; right:0; bottom:0; background:var(--panel); display:flex; flex-direction:column; }
.kpal-head { display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem; border-bottom:1px solid var(--line); }
.kpal-head-ico { display:inline-flex; color:var(--muted); flex:none; }
.kpal-head-ico svg { width:19px; height:19px; }
.kpal-head input { flex:1; min-width:0; border:0; outline:0; background:none; font:inherit; font-size:1rem; font-weight:600; color:var(--ink); padding:.2rem 0; }
.kpal-head input::placeholder { color:var(--muted); font-weight:500; }
.kpal-condo { flex:none; font-size:.72rem; font-weight:700; color:var(--accent); background:var(--tint); padding:.25rem .55rem; border-radius:7px; max-width:34%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kpal-esc { flex:none; font-size:.68rem; font-weight:700; color:var(--muted); border:1px solid var(--line); background:var(--panel); padding:.2rem .45rem; border-radius:6px; cursor:pointer; }
.kpal-results { flex:1; overflow-y:auto; padding:.4rem 0 .5rem; }
.kpal-sec { padding:.6rem 1rem .3rem; font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.kpal-row { display:flex; align-items:center; gap:.75rem; padding:.55rem 1rem; cursor:pointer; min-height:52px; }
.kpal-row.on, .kpal-row:hover { background:var(--tint); }
.kpal-ico { flex:none; width:32px; height:32px; border-radius:9px; background:var(--tint); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; }
.kpal-row.on .kpal-ico { background:var(--panel); }
.kpal-ico svg { width:18px; height:18px; }
.kpal-ico.sigla { background:var(--cream); color:var(--muted); font-family:'Space Mono', ui-monospace, monospace; font-size:.68rem; font-weight:700; }
.kpal-txt { flex:1; min-width:0; }
.kpal-l { display:block; font-size:.9rem; font-weight:700; color:var(--ink); }
.kpal-l mark { background:var(--sand); color:var(--ink); border-radius:3px; padding:0 2px; }
.kpal-s { display:block; font-size:.76rem; font-weight:600; color:var(--muted); margin-top:.05rem; }
.kpal-pin { flex:none; display:none; align-items:center; gap:.3rem; font-size:.72rem; font-weight:700; color:var(--accent); padding:.25rem .5rem; border-radius:7px; }
.kpal-pin svg { width:14px; height:14px; }
.kpal-pin.on { display:inline-flex; color:var(--accent); }
.kpal-pin.on svg { fill:var(--sand); }
.kpal-row.on .kpal-pin, .kpal-row:hover .kpal-pin { display:inline-flex; }
.kpal-pin:hover { background:var(--panel); }
.kpal-badge { flex:none; min-width:20px; text-align:center; font-size:.68rem; font-weight:800; color:var(--danger); background:var(--danger-tint); border-radius:999px; padding:.1rem .4rem; }
.kpal-chips { display:flex; flex-wrap:wrap; gap:.4rem; padding:0 1rem .5rem; }
.kpal-chip { display:inline-flex; align-items:center; gap:.4rem; min-height:34px; padding:0 .7rem; border-radius:9px; background:var(--tint); color:var(--accent); font-size:.8rem; font-weight:700; text-decoration:none; }
.kpal-chip svg { width:15px; height:15px; }
.kpal-chip.alt { background:var(--panel); border:1px solid var(--line); color:var(--ink); }
.kpal-chip.on, .kpal-chip:hover { outline:2px solid var(--accent2); outline-offset:1px; }
.kpal-vacio { padding:2rem 1.2rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.kpal-vacio-ico { width:46px; height:46px; border-radius:13px; background:var(--cream); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; }
.kpal-vacio-ico svg { width:22px; height:22px; }
.kpal-vacio strong { font-size:.95rem; }
.kpal-vacio p { margin:0; max-width:340px; font-size:.83rem; line-height:1.5; color:var(--muted); }
.kpal-foot { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.6rem 1rem; border-top:1px solid var(--line); font-size:.7rem; color:var(--muted); }
.kpal-foot a { color:var(--accent); font-weight:700; text-decoration:none; }
.kpal-live { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); margin:-1px; }

@media (min-width:768px) {
    .kpal-box { top:64px; left:50%; right:auto; bottom:auto; transform:translateX(-50%); width:620px; max-width:calc(100vw - 2rem);
        max-height:min(70vh, 620px); border-radius:16px; box-shadow:0 30px 80px color-mix(in srgb, var(--ink) 38%, transparent); overflow:hidden; }
}

/* ===== Toast de fijar/desfijar (con Deshacer) ===== */
#kaan-toast { position:fixed; z-index:9996; left:50%; transform:translate(-50%, 120%); bottom:calc(74px + env(safe-area-inset-bottom));
    display:flex; align-items:center; gap:.6rem; background:var(--ink); color:var(--on-accent); border-radius:11px;
    padding:.7rem .9rem; font-size:.82rem; font-weight:700; box-shadow:0 10px 30px color-mix(in srgb, var(--ink) 40%, transparent);
    transition:transform .18s ease, opacity .18s ease; opacity:0; max-width:calc(100vw - 2rem); }
#kaan-toast.on { transform:translate(-50%, 0); opacity:1; }
#kaan-toast svg { width:17px; height:17px; flex:none; stroke:var(--sand); fill:var(--sand); }
#kaan-toast button { background:none; border:0; color:var(--sand); font:inherit; font-weight:800; cursor:pointer; padding:0 .2rem; }
@media (min-width:768px) { #kaan-toast { bottom:22px; } }

/* ===== App de residente · buscador amigable (antes en partials/ra_buscar) ===== */
/* ===== Buscador de la app de residente (pantalla completa en el teléfono, caja centrada en escritorio). */
.rb { position:fixed; inset:0; z-index:9994; background:var(--cream); }
.rb[hidden] { display:none !important; }
body.rb-open { overflow:hidden; }
.rb-box { height:100%; overflow-y:auto; padding:calc(1rem + env(safe-area-inset-top)) 1rem calc(1.5rem + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:1.5rem; max-width:640px; margin:0 auto; }
.rb-bar { display:flex; align-items:center; gap:.6rem; }
.rb-field { flex:1; min-width:0; display:flex; align-items:center; gap:.6rem; height:56px; padding:0 .4rem 0 1rem; border-radius:16px; background:var(--panel); border:2px solid var(--accent); }
.rb-lupa { display:inline-flex; color:var(--accent); flex:none; }
.rb-lupa svg { width:24px; height:24px; }
.rb-field input { flex:1; min-width:0; height:100%; border:0 !important; background:none !important; box-shadow:none !important; outline:0; padding:0 !important;
    font:inherit; font-size:1.06rem; font-weight:600; color:var(--ink); }
.rb-field input::-webkit-search-cancel-button { -webkit-appearance:none; }
.rb-borrar { width:44px; height:44px; border-radius:12px; border:0; background:none; color:var(--muted); display:grid; place-items:center; cursor:pointer; flex:none; }
.rb-borrar svg { width:22px; height:22px; }
.rb-cancelar { min-height:48px; padding:0 .4rem; border:0; background:none; font:inherit; font-size:1rem; font-weight:700; color:var(--accent); cursor:pointer; flex:none; }
.rb-chips { display:flex; flex-wrap:wrap; gap:8px; }
.rb-chip { min-height:48px; padding:0 1rem; border-radius:16px; border:1px solid var(--line); background:var(--panel); font:inherit; font-size:.94rem; font-weight:700; color:var(--ink); cursor:pointer; }
.rb-chip:active { background:color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.rb-hint { margin:1rem 0 0; font-size:.94rem; color:var(--muted); line-height:1.5; }
.rb-n { margin:0 0 .75rem; font-size:.875rem; font-weight:700; color:var(--muted); }
.rb-cuerpo .ra-row .ra-ic { width:44px; height:44px; }
.rb-grp { flex:none; font-size:.75rem; font-weight:700; color:var(--muted); background:var(--cream); border-radius:8px; padding:.2rem .5rem; }
.rb-row mark { background:color-mix(in srgb, var(--sand) 70%, transparent); color:var(--ink); border-radius:3px; padding:0 1px; }
.rb-nada { background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:1.25rem; display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; }
.rb-nada b { font-size:1.06rem; font-weight:800; }
.rb-nada p { margin:0 0 .4rem; font-size:.94rem; color:var(--muted); line-height:1.5; }
.rb a:focus-visible, .rb button:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:2px; }
@media (min-width:768px) {
    .rb { background:color-mix(in srgb, var(--ink) 42%, transparent); }
    .rb-box { height:auto; max-height:min(80vh, 720px); margin:64px auto 0; width:640px; max-width:calc(100vw - 2rem); background:var(--cream); border-radius:20px;
        padding:1.25rem; box-shadow:0 30px 80px color-mix(in srgb, var(--ink) 38%, transparent); }
}

/* ===== Loaders: barra superior, spinner de esquina, botón ocupado, sección ocupada ===== */
#kaan-loader { position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--accent),var(--accent2)); z-index:9999; opacity:0; transition:width .2s ease, opacity .3s ease; box-shadow:0 0 8px rgba(67,160,116,.6); }
#kaan-loader.on { opacity:1; }
.btn.is-loading { position:relative; color:transparent !important; pointer-events:none; opacity:.9; }
.btn.is-loading::after { content:''; position:absolute; top:50%; left:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border:2px solid rgba(255,255,255,.9); border-top-color:transparent; border-radius:50%; animation:kaanspin .6s linear infinite; }
.btn.secondary.is-loading::after { border-color:var(--accent); border-top-color:transparent; }
@keyframes kaanspin { to { transform:rotate(360deg); } }
/* Loader no invasivo para operaciones AJAX: spinner de esquina (con conteo de referencias). */
#kaan-corner { position:fixed; right:14px; bottom:14px; z-index:9998; width:34px; height:34px; border-radius:50%; background:var(--cream,#fff); box-shadow:0 4px 16px rgba(0,0,0,.2); display:none; align-items:center; justify-content:center; }
#kaan-corner.show { display:flex; }
#kaan-corner::after { content:''; width:18px; height:18px; border:2px solid var(--accent2); border-top-color:transparent; border-radius:50%; animation:kaanspin .6s linear infinite; }
/* Overlay de "sección ocupada": tenue + spinner centrado, sin ocultar el contenido de fondo. */
.is-busy { position:relative; min-height:2.5rem; }
.is-busy::after { content:''; position:absolute; inset:0; background:rgba(246,244,237,.55); border-radius:inherit; z-index:5; }
.is-busy::before { content:''; position:absolute; top:50%; left:50%; width:24px; height:24px; margin:-12px 0 0 -12px; border:3px solid var(--accent2); border-top-color:transparent; border-radius:50%; animation:kaanspin .6s linear infinite; z-index:6; }

/* ===== Toast de «Deshacer» (S1 §5) ===== */
.kaan-toast { position:fixed; z-index:9998; left:50%; transform:translateX(-50%);
    bottom:calc(var(--tabbar-h, 0px) + 16px); display:flex; align-items:center; gap:.75rem;
    max-width:min(560px, calc(100vw - 24px)); padding:.7rem .8rem .7rem 1rem; border-radius:14px;
    background:var(--ink); color:var(--on-accent); font-size:.9rem; font-weight:600;
    box-shadow:0 18px 40px -14px color-mix(in srgb, var(--ink) 80%, transparent); }
.kaan-toast .kt-txt { flex:1; min-width:0; }
.kaan-toast form { margin:0; }
.kaan-toast .kt-undo { display:inline-flex; align-items:center; gap:.35rem; min-height:44px; padding:.4rem .8rem;
    border:0; border-radius:10px; background:var(--on-accent); color:var(--ink); font-weight:800; cursor:pointer; }
.kaan-toast .kt-close { border:0; background:transparent; color:var(--on-dark-dim); cursor:pointer;
    min-width:36px; min-height:36px; display:inline-flex; align-items:center; justify-content:center; }
.kaan-toast .ic svg { width:17px; height:17px; }

/* ===== Botón flotante de Ayuda ===== */
/* A la DERECHA: en escritorio el rail ocupa la franja izquierda y el FAB le tapaba el menú. */
#kaan-help { position:fixed; right:14px; bottom:14px; z-index:9997; display:inline-flex; align-items:center; gap:.4rem;
    background:var(--accent); color:var(--on-accent); text-decoration:none; font-weight:800; padding:.5rem .7rem; border-radius:999px;
    box-shadow:0 4px 16px rgba(44,110,82,.35); transition:transform .1s, box-shadow .12s; }
#kaan-help span[aria-hidden] { width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.22);
    display:inline-flex; align-items:center; justify-content:center; font-size:1rem; line-height:1; }
#kaan-help .kh-label { font-size:.82rem; }
#kaan-help:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(44,110,82,.45); }
/* El spinner de carga vive en la misma esquina: cuando hay botón de ayuda, se apila encima. */
body:has(#kaan-help) #kaan-corner { bottom:64px; }
@media (max-width:520px) { #kaan-help .kh-label { display:none; } #kaan-help { padding:.5rem; } }

/* ===== Lightbox global de imágenes ===== */
main img { cursor: zoom-in; }
.img-modal { display:none; position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.85); align-items:center; justify-content:center; padding:1.25rem; }
.img-modal.open { display:flex; }
.img-modal img { max-width:96vw; max-height:92vh; border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,.5); cursor:default; }
.img-modal-close { position:absolute; top:.8rem; right:1rem; width:42px; height:42px; border-radius:50%; border:0; background:rgba(255,255,255,.16); color:#fff; font-size:1.3rem; line-height:1; cursor:pointer; }
.img-modal-close:hover { background:rgba(255,255,255,.28); }

/* ===== Cola de multas sin señal (D.3) ===== */
.mo-badge{position:fixed;left:50%;transform:translateX(-50%);bottom:5.2rem;z-index:60;display:flex;
    align-items:center;gap:.5rem;background:var(--warn);color:var(--on-accent);border-radius:999px;
    padding:.55rem .95rem;font-size:.85rem;font-weight:700;text-decoration:none;
    box-shadow:0 6px 18px color-mix(in srgb, var(--ink) 28%, transparent)}
.mo-badge .mo-n{font-family:'Space Mono',monospace}
.mo-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:7.5rem;z-index:70;background:var(--ink);
    color:var(--cream);border-radius:12px;padding:.7rem 1rem;font-size:.88rem;max-width:90vw;
    box-shadow:0 8px 22px color-mix(in srgb, var(--ink) 35%, transparent);transition:opacity .5s}
.mo-toast.sale{opacity:0}
@media (min-width:768px){ .mo-badge,.mo-toast{bottom:1.5rem} .mo-toast{bottom:4rem} }

/* ===== Instalar la app (hoja iOS) + aviso de migrar a Google Play ===== */
.pwa-sheet{position:fixed;inset:0;z-index:1200;display:flex;align-items:flex-end;justify-content:center}
.pwa-sheet[hidden]{display:none}
.pwa-sheet-backdrop{position:absolute;inset:0;background:rgba(28,38,33,.5)}
.pwa-sheet-card{position:relative;width:100%;max-width:460px;background:var(--cream,#F6F4ED);
    border-radius:20px 20px 0 0;padding:1.4rem 1.25rem 1.6rem;box-shadow:0 -8px 30px rgba(28,38,33,.2);
    animation:pwaUp .22s ease-out}
@media(min-width:768px){.pwa-sheet{align-items:center}.pwa-sheet-card{border-radius:20px}}
@keyframes pwaUp{from{transform:translateY(24px);opacity:.6}to{transform:translateY(0);opacity:1}}
.pwa-sheet-x{position:absolute;top:.6rem;right:.75rem;background:none;border:0;font-size:1.6rem;line-height:1;color:var(--muted,#64748b);cursor:pointer}
.pwa-sheet-badge{width:64px;height:64px;border-radius:16px;background:var(--tint,#E4F0E9);display:flex;align-items:center;justify-content:center;margin-bottom:.75rem}
.pwa-sheet-badge img{width:38px;height:38px;display:block}
.pwa-sheet-card h3{margin:.1rem 0 .35rem;font-size:1.15rem;font-weight:800;color:var(--ink,#1C2621)}
.pwa-sheet-sub{margin:0 0 1rem;color:var(--muted,#64748b);font-size:.92rem;line-height:1.45}
.pwa-sheet-steps{list-style:none;margin:0 0 1.1rem;padding:0;display:flex;flex-direction:column;gap:.7rem}
.pwa-sheet-steps li{display:flex;align-items:flex-start;gap:.6rem;color:var(--ink,#1C2621);font-size:.95rem;line-height:1.4}
.pwa-step-n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--accent,#2C6E52);color:#fff;font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.pwa-share-ico{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 .2rem;border:1.5px solid var(--accent2,#43A074);border-radius:5px;color:var(--accent2,#43A074);font-weight:700}
.pwa-sheet-ok{width:100%}
/* Aviso único: el PWA instalado en Android cuando ya existe la app en Google Play. */
.play-migrar{position:fixed;left:12px;right:12px;bottom:calc(var(--tabbar-h, 0px) + 12px);z-index:1200;
    background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:14px 16px;
    box-shadow:0 12px 32px color-mix(in srgb, var(--ink) 22%, transparent);max-width:520px;margin:0 auto}
.play-migrar p{margin:0 0 10px;font-size:.92rem;line-height:1.45}
.play-migrar .pm-acc{display:flex;gap:8px;flex-wrap:wrap}
/* App de Play debajo de android.min: pantalla completa que no deja seguir (kaan-app.js; lo de abajo queda inert).
   Teléfono: hero de marca arriba + texto + acciones fijas en la zona del pulgar. ≥768px: dos columnas. */
.play-bloqueo{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;background:var(--cream);color:var(--ink);
    overflow:auto;overscroll-behavior:contain}
.play-bloqueo .pb-hero{position:relative;flex:none;padding:calc(44px + env(safe-area-inset-top)) 24px 50px;text-align:center;
    overflow:hidden;color:var(--on-accent);background:radial-gradient(120% 90% at 50% 0%, var(--accent2) 0%, var(--accent) 62%)}
/* Retícula de puntos: eco del isotipo. */
.play-bloqueo .pb-hero::before{content:"";position:absolute;inset:0;opacity:.1;pointer-events:none;
    background-image:radial-gradient(circle at center, var(--cream) 0 3px, transparent 3.5px);background-size:22px 22px;
    -webkit-mask-image:linear-gradient(to bottom, #000, transparent 85%);mask-image:linear-gradient(to bottom, #000, transparent 85%)}
.play-bloqueo .pb-hero::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-1px;height:36px;background:var(--cream);
    border-radius:50% 50% 0 0 / 100% 100% 0 0}
.play-bloqueo .pb-logo{position:relative;z-index:1;display:inline-block}
.play-bloqueo .pb-logo img{display:block;width:88px;height:88px;filter:drop-shadow(0 10px 22px color-mix(in srgb, var(--ink) 30%, transparent))}
.play-bloqueo .pb-badge{position:absolute;right:-10px;bottom:-8px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
    background:var(--sand);color:var(--on-sand);border:3px solid var(--accent);animation:pb-sube 2.4s ease-in-out infinite}
.play-bloqueo .pb-badge svg{width:20px;height:20px}
.play-bloqueo .pb-marca{display:none}
@keyframes pb-sube{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

.play-bloqueo .pb-der{display:flex;flex-direction:column;flex:1 0 auto}
.play-bloqueo .pb-cuerpo{position:relative;flex:1 0 auto;width:100%;max-width:460px;margin:0 auto;padding:4px 24px 0}
.play-bloqueo .pb-eyebrow{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:.74rem;font-weight:700;
    background:var(--warn-tint);color:var(--warn);border:1px solid color-mix(in srgb, var(--warn) 25%, transparent)}
.play-bloqueo .pb-eyebrow svg{width:14px;height:14px}
.play-bloqueo h2{margin:10px 0 6px;font-size:1.45rem;line-height:1.22;font-weight:800;letter-spacing:-.01em}
.play-bloqueo .pb-lead{margin:0 0 14px;color:var(--muted);font-size:.95rem;line-height:1.55}
.play-bloqueo .pb-versiones{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:12px 14px;border-radius:14px;
    background:var(--panel);border:1px solid var(--line)}
.play-bloqueo .pb-v{flex:1;min-width:0}
.play-bloqueo .pb-v small{display:block;font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.play-bloqueo .pb-v .mono{font-size:1rem;font-weight:700}
.play-bloqueo .pb-v.vieja .mono{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb, var(--muted) 60%, transparent)}
.play-bloqueo .pb-v.nueva{text-align:right}
.play-bloqueo .pb-v.nueva .mono{color:var(--accent)}
.play-bloqueo .pb-flecha{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--tint);color:var(--accent)}
.play-bloqueo .pb-flecha svg{width:16px;height:16px}
.play-bloqueo .pb-lista{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:10px}
.play-bloqueo .pb-lista li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.45}
.play-bloqueo .pb-lista .pb-ic{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--tint);color:var(--accent)}
.play-bloqueo .pb-lista .pb-ic svg{width:15px;height:15px}
.play-bloqueo .pb-lista b{display:block}
.play-bloqueo .pb-lista span:not(.pb-ic){color:var(--muted);font-size:.84rem}

/* Acciones: fijas abajo en el teléfono (zona del pulgar), respetando el gesto de inicio. */
.play-bloqueo .pb-acciones{position:sticky;bottom:0;width:100%;max-width:460px;margin:0 auto;
    padding:16px 24px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(to bottom, transparent, var(--cream) 22%)}
.play-bloqueo .btn{display:flex;width:100%;min-height:52px;gap:10px;border-radius:14px;font-family:inherit;font-size:1rem;font-weight:700}
.play-bloqueo .btn > svg{width:20px;height:20px}
.play-bloqueo .btn:not(.secondary){box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent)}
.play-bloqueo .btn.secondary{margin-top:8px;min-height:46px;font-size:.92rem;background:transparent;border:1px solid var(--line)}
.play-bloqueo .btn.secondary > svg{width:17px;height:17px}
.play-bloqueo .btn.secondary.pb-revisando > svg{animation:pb-gira .9s linear infinite}
.play-bloqueo .btn:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
.play-bloqueo .pb-ayuda{margin:12px 0 0;text-align:center;font-size:.78rem;line-height:1.5;color:var(--muted)}
@keyframes pb-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.play-bloqueo .pb-badge,.play-bloqueo .btn.secondary.pb-revisando > svg{animation:none}}

/* Modo noche (caseta / personal de campo): hero oscuro en vez del verde a todo color. */
body[data-modo="noche"] .play-bloqueo .pb-hero{color:var(--ink);
    background:radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 35%, var(--bg)) 0%, var(--bg) 70%)}
body[data-modo="noche"] .play-bloqueo .pb-badge{border-color:var(--bg)}
@media (prefers-color-scheme: dark){
    body.es-campo:not([data-modo="dia"]) .play-bloqueo .pb-hero{color:var(--ink);
        background:radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 35%, var(--bg)) 0%, var(--bg) 70%)}
    body.es-campo:not([data-modo="dia"]) .play-bloqueo .pb-badge{border-color:var(--bg)}
}

/* Tablet / horizontal: marca a la izquierda, contenido a la derecha. */
@media (min-width:768px){
    .play-bloqueo{flex-direction:row}
    .play-bloqueo .pb-hero{flex:0 0 42%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px}
    .play-bloqueo .pb-hero::after{display:none}
    .play-bloqueo .pb-logo img{width:112px;height:112px}
    .play-bloqueo .pb-badge{width:44px;height:44px}
    .play-bloqueo .pb-marca{display:block;position:relative;z-index:1;margin-top:22px;font-weight:800;font-size:1.3rem;letter-spacing:-.01em}
    .play-bloqueo .pb-marca small{display:block;margin-top:4px;font-weight:600;font-size:.85rem;opacity:.85}
    .play-bloqueo .pb-der{flex:1;justify-content:center;overflow:auto;padding:24px 0}
    .play-bloqueo .pb-cuerpo{flex:none;padding-top:0}
    .play-bloqueo .pb-acciones{position:static;background:none}
}
html.play-bloqueada,html.play-bloqueada body{overflow:hidden}

/* ===== Ver contraseña (ojo en input[type=password]) ===== */
/* Botón "ver contraseña" dentro de cualquier input[type=password] (global). */
.pw-wrap { position:relative; display:block; }
.pw-wrap > input { padding-right:2.6rem !important; }
.pw-eye { position:absolute; top:50%; right:.55rem; transform:translateY(-50%); background:none; border:0; cursor:pointer; padding:.2rem; line-height:0; color:var(--muted,#64748b); border-radius:6px; }
.pw-eye:hover { color:var(--ink,#1c2621); background:rgba(0,0,0,.06); }
.pw-eye svg { width:20px; height:20px; display:block; }

/* ===== P5.3 · Transiciones entre pantallas (View Transitions entre documentos) =====
   Chrome 126+ y Safari 18.2+ hacen un fundido corto al navegar; sin soporte no pasa nada. La barra de abajo,
   la superior y el rail llevan nombre propio para que se queden quietas (no parpadean) mientras el contenido
   cambia. Cada nombre debe existir una sola vez por página. Con «reducir movimiento», sin transición. */
@view-transition { navigation: auto; }
/* Selectores atados al markup del layout: `.rail` también es la línea de tiempo de pago_estado y reservas,
   y un nombre repetido cancela la transición entera. */
header.topbar { view-transition-name: kaan-topbar; }
aside.rail { view-transition-name: kaan-rail; }
nav.tabbar { view-transition-name: kaan-tabbar; }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* ===== P4 · Bloques en async: esqueletos y reintento =====
   El esqueleto usa las MISMAS .ra-list/.ra-row que el contenido final (una fila mide lo mismo: 72px), así la
   página no salta al llegar el bloque. Solo tokens. Con «reducir movimiento», sin animación. */
.ra-skel-t, .ra-skel-l { display:block; border-radius:8px;
    background:linear-gradient(90deg, var(--line) 0%, color-mix(in srgb, var(--line) 40%, var(--panel)) 50%, var(--line) 100%);
    background-size:200% 100%; animation:ra-skel 1.2s ease-in-out infinite; }
.ra-skel-t { height:1.35rem; width:38%; margin:0 0 .75rem; }   /* = .ra-h2 */
.ra-skel-l { height:1rem; width:68%; }
.ra-skel-l + .ra-skel-l { height:.8rem; width:44%; margin-top:.5rem; }
@keyframes ra-skel { from { background-position:200% 0; } to { background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce) { .ra-skel-t, .ra-skel-l { animation:none; } }
.ra-reintentar { flex:none; min-height:44px; padding:0 1rem; border-radius:12px; border:1px solid var(--line);
    background:var(--panel); color:var(--accent); font:inherit; font-size:.94rem; font-weight:700; cursor:pointer; }
.ra-reintentar:disabled { color:var(--muted); cursor:default; }

/* ===================== Kit de formularios del residente (rediseño dueños, D0) =====================
   Spec: docs/design/rediseño-app/duenos/impl-vistas-duenos.md §1. Solo tokens. Lo de tamaño aplica
   al teléfono (<768px): ahí el dedo y la vista mandan; en escritorio se queda la densidad de siempre. */
@media (max-width:767px) {
    .field label { font-size:15px; font-weight:700; margin-bottom:6px; }
    .field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select {
        height:52px; padding:0 14px; border-width:1.5px; border-radius:14px; font-weight:600; }
    .field textarea { min-height:104px; padding:12px 14px; border-width:1.5px; border-radius:14px; }
    .field-hint { font-size:14px; line-height:1.4; margin-top:6px; }
    .field-error { font-size:14px; font-weight:700; margin-top:6px; }
    .field-error svg { width:18px; height:18px; }
    .stepper { border-radius:14px; border-width:1.5px; }
    .stepper button { width:52px; min-height:52px; background:var(--tint); color:var(--accent); font-weight:700; }
    .stepper input { font-family:'Space Mono',ui-monospace,monospace; font-size:20px; font-weight:700; height:auto; }
    .gv-more { width:44px; height:44px; flex-basis:44px; border-radius:12px; }
    .gv-more svg { width:22px; height:22px; }
}
.field input:focus, .field select:focus, .field textarea:focus {
    border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); outline:none; }
/* «(opcional)» va DENTRO del label; el placeholder da un ejemplo, nunca la instrucción. */
/* Etiqueta de un GRUPO de controles (chips, segmentado): no es <label> porque no apunta a un input. */
.field > .lbl { display:block; font-size:.82rem; font-weight:600; margin-bottom:.3rem; color:var(--ink); }
@media (max-width:767px) { .field > .lbl { font-size:15px; font-weight:700; margin-bottom:6px; } }
.field .opt, .qa-sec > .lbl .opt { font-weight:500; font-size:.875rem; color:var(--muted); margin-left:4px; }
/* Título de sección dentro de un formulario («Tus datos», «Facturación»). */
.kit-sec-t { margin:1.2rem 0 .7rem; font-size:.8rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.kit-sec-t:first-child { margin-top:0; }
/* Subtítulo que dice el EFECTO del formulario, bajo el h1. */
.kit-lead { margin:.15rem 0 0; font-size:.92rem; color:var(--muted); line-height:1.45; }

/* Segmentado de pista (2–3 opciones cortas): una pista blanca, la opción activa en acento. */
.segmented.track { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:4px; padding:4px;
    border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.segmented.track label { border:0; border-radius:12px; justify-content:center; background:none; font-weight:700;
    color:var(--muted); text-align:center; padding:.4rem .5rem; }
.segmented.track label:has(input:checked) { background:var(--accent); color:var(--on-accent); }
.segmented.track label:has(input:focus-visible) { outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:1px; }

/* Chips que eligen (qa-chips ya existe): estado accesible y foco visible. */
.qa-chip[aria-pressed="true"], .qa-chip[aria-checked="true"] { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:700; }
.qa-chip .muestra { width:16px; height:16px; border-radius:50%; border:1px solid var(--line); margin-right:.4rem; flex:none; }
.qa-chip:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:2px; }
/* Chips con radio/checkbox nativo dentro (se envían sin JS). */
.qa-chip input { position:absolute; opacity:0; width:0 !important; height:0 !important; min-width:0; border:0 !important; }
.qa-chip:has(input) { position:relative; }
.qa-chip:has(input:checked) { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:700; }
.qa-chip:has(input:focus-visible) { outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:2px; }

/* Interruptor con efecto: fila de 64px con título + descripción y un checkbox nativo role="switch".
   <label class="sw-row"><span class="sw-t"><b>…</b><small>…</small></span>
       <input type="checkbox" class="sw" role="switch" name="…" value="1"></label> */
.sw-row { display:flex; align-items:center; gap:.9rem; min-height:64px; padding:.6rem .9rem; margin-bottom:1rem;
    border:1px solid var(--line); border-radius:14px; background:var(--panel); cursor:pointer; }
.sw-row .sw-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:.15rem; }
.sw-row .sw-t b { font-size:.98rem; font-weight:700; color:var(--ink); }
.sw-row .sw-t small { font-size:.86rem; color:var(--muted); line-height:1.4; }
.sw-list .sw-row { margin:0; border-radius:0; border-width:0 0 1px; }
.sw-list { border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:1rem; }
.sw-list .sw-row:last-child { border-bottom:0; }
.sw-row.is-fijo { cursor:default; }
input[type=checkbox].sw { width:50px !important; height:30px !important; min-width:50px; flex:0 0 50px;
    border:0 !important; border-radius:999px !important; background:var(--line) !important; position:relative;
    display:block; transition:background .15s; }
input[type=checkbox].sw::before { content:''; position:absolute; top:3px; left:3px; width:24px; height:24px;
    border-radius:50%; background:var(--panel); clip-path:none; transform:none; transition:transform .15s; }
input[type=checkbox].sw:checked { background:var(--accent) !important; }
input[type=checkbox].sw:checked::before { transform:translateX(20px); }
input[type=checkbox].sw:disabled { opacity:.6; }

/* «Para: Casa 14 · Torre B» (portal/_para_casa): sustituye al select casa_id. */
.para-casa { display:flex; align-items:center; gap:.6rem; min-height:52px; padding:4px 4px 4px 14px; margin-bottom:1rem;
    border-radius:14px; background:var(--tint); font-size:.95rem; font-weight:700; color:var(--ink); }
.para-casa > svg { width:20px; height:20px; color:var(--accent); flex:none; }
.para-casa .k { color:var(--muted); font-weight:600; }
.para-casa .v { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.para-casa button { flex:none; min-height:44px; padding:0 .8rem; border:0; background:none; border-radius:10px;
    font:inherit; font-weight:800; color:var(--accent); cursor:pointer; }
.para-casa button:hover { background:color-mix(in srgb, var(--accent) 10%, transparent); }

/* Foto: tile punteado de 84px con icono de cámara; el input real cubre el tile (clic nativo). */
.foto-tile { position:relative; display:flex; align-items:center; gap:.9rem; padding:12px; margin-bottom:1rem;
    border:1.5px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius:16px; background:var(--panel); cursor:pointer; }
.foto-tile .ft-ic { width:84px; height:84px; flex:0 0 84px; border-radius:14px; background:var(--tint); color:var(--accent);
    display:flex; align-items:center; justify-content:center; }
.foto-tile .ft-ic svg { width:28px; height:28px; }
.foto-tile .ft-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:.15rem; }
.foto-tile .ft-t b { font-size:.98rem; color:var(--accent); }
.foto-tile .ft-t small { font-size:.86rem; color:var(--muted); line-height:1.4; }
.foto-tile input[type=file] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; padding:0; border:0; }
.foto-tile:has(input:focus-visible) { border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.foto-tile .file-preview { position:absolute; top:12px; left:12px; width:84px; height:84px; max-width:none; max-height:none;
    margin:0; border-radius:14px; object-fit:cover; pointer-events:none; }
.foto-tile:has(.file-preview) .ft-ic { visibility:hidden; }
.foto-tile .ft-actual { width:84px; height:84px; flex:0 0 84px; border-radius:14px; object-fit:cover; }

/* Prefijo / sufijo de un campo (+52, $, MXN). */
.kit-affix { display:flex; align-items:stretch; border:1.5px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden; }
.kit-affix:focus-within { border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.kit-affix > span { display:flex; align-items:center; padding:0 12px; background:var(--cream); color:var(--muted); font-weight:700; font-size:.95rem; flex:none; }
.field .kit-affix input:not([type=checkbox]):not([type=radio]) { border:0 !important; box-shadow:none !important; border-radius:0; flex:1; min-width:0; width:auto; }

/* Caja «Al guardar / Tu reserva»: reutiliza .qa-frase (oscura); aria-live en el <p>. */

/* Hoja de confirmación (partials/hoja_confirmar): la destructiva dice su consecuencia ANTES. */
.hc-ic { width:56px; height:56px; border-radius:16px; background:var(--danger-tint); color:var(--danger);
    display:flex; align-items:center; justify-content:center; align-self:flex-start; }
.hc-ic svg { width:26px; height:26px; }
.hc-ic.info { background:var(--tint); color:var(--accent); }
.hc-ic.ok { background:var(--ok-tint); color:var(--ok); }
.hc-campo[hidden] { display:none; }
/* `.btn` y `.field-error` traen display propio: sin esto, [hidden] no los esconde (p. ej. «Cancelar» en un aviso). */
.hc-acc .btn[hidden], .hc-campo .field-error[hidden] { display:none; }
.hc-campo { margin:0; }
.hc-campo .hc-lbl { font-size:.95rem; }
.hc-campo .hc-in { width:100%; min-height:52px; font-size:17px; }
.hc-campo .field-error { font-size:.9rem; }
.gv-sheet .gv-sheet-body .hc-t { font-size:1.2rem; font-weight:800; line-height:1.3; margin:0; }
.hc-c { margin:0; font-size:.98rem; line-height:1.5; color:var(--muted); }
.hc-acc { display:flex; flex-direction:column; gap:.6rem; }
.hc-acc .btn { width:100%; min-height:52px; justify-content:center; font-size:1rem; border-radius:14px; }
@media (min-width:768px) {
    #kaan-confirmar .gv-sheet-body { left:50%; right:auto; bottom:auto; top:50%; transform:translate(-50%, -50%);
        width:min(440px, calc(100% - 2rem)); border-radius:20px; }
    .hc-acc { flex-direction:row-reverse; }
    .hc-acc .btn { width:auto; flex:1; }
}

/* Menú ⋮ en el teléfono: el mismo .gv-menu-pop se vuelve HOJA inferior (con fondo), con filas de 56px. */
@media (max-width:767px) {
    .gv-menu-portal::before { content:''; position:fixed; inset:0; z-index:9990; background:color-mix(in srgb, var(--ink) 42%, transparent); }
    .gv-menu > .gv-menu-pop { position:fixed; left:0; right:0; bottom:0; top:auto; z-index:9991; min-width:0;
        border-radius:22px 22px 0 0; border:0; padding:10px 10px calc(14px + env(safe-area-inset-bottom));
        max-height:80vh; overflow:auto; }
    .gv-menu > .gv-menu-pop::before { content:''; display:block; width:42px; height:4px; border-radius:99px;
        background:var(--line); margin:2px auto 8px; }
    .gv-menu-pop button, .gv-menu-pop a { min-height:56px; padding:0 14px; font-size:1rem; gap:12px; }
    .gv-menu-pop svg { width:22px; height:22px; color:var(--accent); flex:none; }
    .gv-menu-pop .danger svg { color:var(--danger); }
    .gv-menu-pop .gm-t { display:block; padding:4px 14px 8px; font-size:.82rem; font-weight:700; color:var(--muted); }
}
@media (min-width:768px) { .gv-menu-pop .gm-t { display:none; } }
.gv-menu-pop svg { width:18px; height:18px; flex:none; }
body.gv-menu-abierto { overflow:hidden; }
body.gv-menu-abierto #kaan-help { display:none; }

/* Copiar (partials/copiar): botón con texto, 44px; al copiar dice «¡Copiado!» en verde de éxito. */
/* `.dato` global (chip mono de caseta) no aplica dentro de una fila de copiar: ahí es solo la columna. */
.copy-row .dato { display:block; font-family:inherit; font-size:inherit; font-weight:inherit; letter-spacing:normal;
    background:none; color:inherit; padding:0; border-radius:0; }
.copy-btn.con-txt { width:auto; padding:0 .8rem; gap:.35rem; font-size:.88rem; font-weight:800; }
.copy-btn.copiado { width:auto; padding:0 .7rem; background:var(--ok-tint); color:var(--ok); font-size:.82rem; font-weight:800; }

/* Placas y códigos en mayúsculas al teclear, pero el ejemplo del placeholder se lee normal. */
/* Un CTA pegajoso dentro de un form.card: los temas redondeados (partials/tema_css) ponen
   `main .card { overflow:hidden }`, que desactiva position:sticky de sus hijos. */
main form.card:has(.sticky-cta), main .card:has(> form > .sticky-cta) { overflow:visible; }
/* Controles que SON un <label> (chip, tarjeta de radio, interruptor, foto, segmentado) dentro de un .field:
   `.field label` (bloque, 15px/700, margen) no debe aplicarles; cada componente trae su propia forma. */
.field label.qa-chip { display:inline-flex; margin:0; font-size:.85rem; font-weight:600; }
.field label.qa-chip:has(input:checked) { font-weight:700; }
.field label.gv-opt, .field label.sw-row, .field label.foto-tile { display:flex; font-size:inherit; font-weight:inherit; }
.field label.gv-opt, .field label.foto-tile { margin-bottom:.6rem; }
.field label.sw-row { margin-bottom:1rem; }
.field .segmented label { display:inline-flex; margin:0; font-size:.9rem; }
.field .segmented.track label { display:flex; font-weight:700; }
.field .gp-choice label, .field .gp-chips label { display:flex; margin:0; font-size:.88rem; }
.field .gp-chips label { display:inline-flex; }
/* `hidden` siempre gana: `.grid2`, `.field` o `.sw-row` con display propio lo ignoraban, y los
   campos que dependen de un interruptor/chip (data-muestra, data-otro-campo) se quedaban visibles. */
main [hidden] { display:none !important; }
.caps { text-transform:uppercase; }
.caps::placeholder { text-transform:none; }

/* ===== Dueños · F Cuenta (Mi perfil D15, contraseña D30, Mi cuenta, eliminar cuenta, representación) ===== */
/* Mi perfil (partials/perfil_form): avatar de 80px que abre el selector; la vista previa global
   (.file-preview) cae dentro del círculo. */
.cu-perfil { max-width:640px; }
/* El tema del layout pone `main .card { overflow:hidden }`, que vuelve a la tarjeta el contenedor de
   scroll del .sticky-cta y lo deja de pegar al borde de la pantalla (encima de la tab bar). */
main .card.cu-perfil { overflow:visible; }
.cu-cab { display:flex; align-items:center; gap:1rem; margin-bottom:.4rem; }
.cu-av { position:relative; flex:0 0 80px; width:80px; height:80px; border-radius:50%; overflow:hidden; cursor:pointer;
    background:var(--tint); color:var(--accent); display:flex; align-items:center; justify-content:center; border:1px solid var(--line); }
.cu-av img, .cu-av .file-preview { position:absolute; inset:0; width:100%; height:100%; max-width:none; max-height:none;
    margin:0; border-radius:0; object-fit:cover; pointer-events:none; }
.cu-av > svg { width:32px; height:32px; }
.cu-av .cu-ini { font-size:1.6rem; font-weight:800; letter-spacing:.02em; }
.cu-av input[type=file] { position:absolute; inset:0; z-index:2; width:100%; height:100%; opacity:0; cursor:pointer; padding:0; border:0; }
.cu-av:has(input:focus-visible) { box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.cu-cab-t { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:.35rem; }
.cu-cab-t .btn { min-height:44px; cursor:pointer; }
.cu-cab-t small { font-size:.82rem; line-height:1.4; color:var(--muted); }
.cu-pill { display:inline-flex; align-items:center; gap:.2rem; margin-left:.4rem; vertical-align:middle; }
.cu-pill svg { width:12px; height:12px; }
/* Filas de «Seguridad» (solo en portal/perfil; en /cuenta son pestañas). */
.cu-filas { display:block; max-width:640px; margin-bottom:.6rem; background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.cu-fila { display:flex; align-items:center; gap:.8rem; min-height:60px; padding:.55rem 1rem; border-top:1px solid var(--line);
    color:var(--ink); text-decoration:none; font-weight:700; }
.cu-fila:first-child { border-top:0; }
.cu-fila:hover { background:color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.cu-fila-ic { flex:none; width:36px; height:36px; border-radius:10px; background:var(--tint); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; }
.cu-fila-ic svg { width:18px; height:18px; }
.cu-fila-t { flex:1; min-width:0; }
.cu-fila > svg { flex:none; width:18px; height:18px; color:var(--muted); }
/* «Eliminar mi cuenta»: enlace discreto en rojo, nunca botón sólido. */
.cu-baja-w { max-width:640px; margin:.4rem 0 1.5rem; text-align:center; }
/* El tema pinta los enlaces de tarjeta con `main .card a:not(.btn):not(.pill)…`: el rojo lo fija !important. */
.cu-baja { display:inline-flex; align-items:center; min-height:44px; padding:0 .6rem; color:var(--danger) !important; font-weight:700; font-size:.92rem; text-decoration:none; }
.cu-baja:hover { text-decoration:underline; }

/* Mi cuenta (cuenta/index): tarjetas por tema y pestañas client-side. */
.acc-card { max-width:560px; }
.acc-card .card-head { display:flex; align-items:center; gap:.6rem; margin:0 0 .8rem; }
.acc-card .card-head h3 { margin:0; font-size:1rem; }
.acc-card .card-head .ch-ico { flex:none; width:34px; height:34px; border-radius:10px; background:var(--tint); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; }
.acc-card .card-head .ch-ico svg { width:19px; height:19px; }
.acc-card .btn-row > form { margin:0; }
.acc-panel { display:none; }
.acc-panel.active { display:block; }
.acc-list { list-style:none; padding:0; margin:0 0 .9rem; }
.acc-list li { display:flex; align-items:center; gap:.7rem; padding:.6rem 0; border-bottom:1px solid var(--line); }
.acc-list li:last-child { border-bottom:0; }
.acc-list .al-ico { flex:none; width:34px; height:34px; border-radius:10px; background:var(--tint); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; }
.acc-list .al-ico svg { width:18px; height:18px; }
.acc-list .al-body { flex:1; min-width:0; }
.acc-list .al-body small { display:block; margin-top:.1rem; font-size:.8rem; color:var(--muted); }
.acc-list .al-body .pill { margin-left:.3rem; }
.cu-roles { display:flex; flex-wrap:wrap; gap:.3rem; margin:.2rem 0; }
.cu-txt { margin:.2rem 0 .8rem; font-size:.88rem; line-height:1.45; color:var(--muted); }
.cu-txt-pie { margin:.6rem 0 0; font-size:.8rem; }
.cu-estado { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin:.2rem 0 .5rem; font-size:.9rem; }
.cu-estado .muted { font-size:.85rem; }
/* D30 · Cambiar contraseña: reglas en vivo con palomita y «Coinciden». */
.cu-reglas { list-style:none; margin:.6rem 0 0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.cu-reglas li { display:flex; align-items:center; gap:.5rem; font-size:.9rem; font-weight:600; color:var(--muted); }
.cu-regla-b { flex:none; width:20px; height:20px; border-radius:50%; border:1.5px solid color-mix(in srgb, var(--muted) 60%, transparent); color:transparent;
    display:inline-flex; align-items:center; justify-content:center; }
.cu-regla-b svg { width:13px; height:13px; }
.cu-reglas li.ok { color:var(--ok); }
.cu-reglas li.ok .cu-regla-b { background:var(--ok); border-color:var(--ok); color:var(--on-accent); }
.cu-match { min-height:1.3em; margin:.4rem 0 0; font-size:.9rem; font-weight:700; }
.cu-match.si { color:var(--ok); }
.cu-match.no { color:var(--danger); }
.cu-pw .btn.block { margin-top:.4rem; }
.cu-pw .btn.block:disabled { opacity:.5; cursor:not-allowed; }
/* El ojo lo agrega el JS global (kaanEnhancePasswords); aquí solo se agranda a un objetivo táctil de 44px. */
.cu-pw .pw-wrap > input { padding-right:3rem !important; }
.cu-pw .pw-eye { right:2px; width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; border-radius:10px; }
.cu-olvide { margin-top:.8rem; }
.cu-olvide .field-hint { margin-top:0; }
.cu-link { min-height:44px; padding:0 .2rem; border:0; background:none; font:inherit; font-weight:700; color:var(--accent);
    cursor:pointer; text-decoration:underline; text-underline-offset:3px; }

/* Eliminar mi cuenta (cuenta/eliminar): aquí SÍ va el rojo sólido, es la confirmación. */
.del-card { max-width:620px; }
.del-card .card-head { display:flex; align-items:center; gap:.6rem; margin:0 0 .8rem; }
.del-card .card-head h3 { margin:0; font-size:1rem; }
.del-card .ch-ico { flex:none; width:34px; height:34px; border-radius:10px; background:var(--danger-tint); color:var(--danger); display:inline-flex; align-items:center; justify-content:center; }
.del-card .ch-ico svg { width:19px; height:19px; }
.del-card p { font-size:.92rem; }
.check-row.cu-grande { align-items:center; gap:.8rem; min-height:56px; margin:.6rem 0 .3rem; padding:.8rem .9rem;
    border:1.5px solid var(--line); border-radius:14px; background:var(--panel); font-size:.98rem; font-weight:600; }
.check-row.cu-grande input { font-size:20px; margin:0; } /* la casilla global mide 1.2em (!important) → 24px */
.check-row.cu-grande:has(input:checked) { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.del-cta { margin-top:1rem; }

/* Representación (portal/representacion/*). */
.rp-lista { display:grid; gap:.8rem; }
@media (min-width:768px) { .rp-lista { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.card.rp-casa { display:flex; align-items:center; gap:.9rem; min-height:72px; margin:0; color:inherit; text-decoration:none; }
.card.rp-casa:hover { border-color:color-mix(in srgb, var(--accent) 35%, var(--line)); }
.rp-casa-ic { flex:none; width:44px; height:44px; border-radius:12px; background:var(--tint); color:var(--accent); display:flex; align-items:center; justify-content:center; }
.rp-casa-ic svg { width:22px; height:22px; }
.rp-casa-c { flex:1; min-width:0; display:flex; flex-direction:column; gap:.45rem; }
.rp-casa-h { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; }
.rp-casa-h strong { font-size:1.05rem; }
.rp-caps { display:flex; flex-wrap:wrap; gap:.3rem; }
.rp-casa > svg { flex:none; width:18px; height:18px; color:var(--muted); }
.rp-h { margin:0 0 .7rem; font-size:1rem; }
.rp-p0 { margin:0; }
.rp-lead { margin:-.3rem 0 .8rem; }
.rp-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem; margin-bottom:.7rem; }
.rp-head .rp-h { margin:0; }
.rp-saldo.debe { color:var(--danger); }
.rp-saldo.al-dia { color:var(--ok); }
.rp-num { text-align:right; }
.rp-habs { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.rp-habs li { display:flex; align-items:center; gap:.7rem; min-height:56px; padding:.4rem 0; border-top:1px solid var(--line); }
.rp-habs li:first-child { border-top:0; }
.rp-av { flex:none; width:44px; height:44px; border-radius:50%; object-fit:cover; background:var(--tint); color:var(--accent);
    display:inline-flex; align-items:center; justify-content:center; font-weight:800; }
.rp-votos { display:grid; gap:.5rem; }
.rp-cap { display:flex; flex-direction:column; gap:.6rem; }
@media (min-width:768px) {
    .rp-cap { flex-direction:row; align-items:flex-start; }
    .rp-cap .field { width:260px; margin:0; }
    .rp-cap .btn { margin-top:1.45rem; }
}

/* ===== Dueños · Accesos (visitas D6/D16, avisos D17, paquetes D8, SOS D19) — prefijo .ax-* ===== */
/* En estos formularios `hidden` gana siempre (.field > .lbl, .qa-chips, .sw-row y .grid2 fijan display). */
.ax-form [hidden] { display:none !important; }
.ax-chips .qa-chip svg { width:16px; height:16px; margin-right:.35rem; color:var(--muted); }
.ax-chips .qa-chip[aria-pressed="true"] svg { color:inherit; }
.ax-rango { margin-top:.7rem; }
.ax-rango .field, .ax-mas .field { margin-bottom:.6rem; }
.ax-mas { margin-top:.5rem; }
#ax-nom { margin-top:.6rem; }
.ax-link { background:none; border:0; padding:0; min-height:44px; font:inherit; font-size:.88rem; font-weight:700;
    color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }

/* Pase (partials/pase_card) y aviso (portal/_qa_aviso): tarjeta oscura, QR grande sobre blanco. */
.ax-pase { max-width:420px; margin:0 auto; }
.ax-pase-top { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.5rem;
    font-size:.88rem; font-weight:600; color:color-mix(in srgb, var(--tint) 78%, var(--bg)); }
.ax-pase-top .pill { font-size:.8rem; }
.ax-pase .qr { margin-top:.9rem; }
.ax-pase .qr img { width:208px; height:208px; max-width:100%; image-rendering:pixelated; }
.ax-pase-nom { font-weight:800; font-size:1.2rem; margin:.7rem 0 .1rem; overflow-wrap:anywhere; }
.ax-pase-sub { font-size:.88rem; color:color-mix(in srgb, var(--tint) 72%, var(--bg)); }
.ax-pase-share { justify-content:center; margin-top:.9rem; }
.ax-pase-nota { font-size:.78rem; line-height:1.45; margin:.9rem 0 0; color:color-mix(in srgb, var(--tint) 68%, var(--bg)); }
.ax-aviso { text-align:left; }
.ax-aviso .ax-pase-top { justify-content:flex-start; }
.ax-acts { display:flex; flex-direction:column; gap:.6rem; margin:1rem 0; }
.ax-acts form { margin:0; }
.ax-acts .btn svg { width:20px; height:20px; }
.ax-filas { padding:.3rem 1rem; }
.ax-fila { display:flex; align-items:center; gap:.75rem; min-height:52px; padding:.45rem 0; }
.ax-fila + .ax-fila { border-top:1px solid var(--line); }
.ax-fila > svg { width:20px; height:20px; flex:none; color:var(--accent); }
.ax-fila .k { flex:none; font-size:.9rem; color:var(--muted); }
.ax-fila b { flex:1; min-width:0; text-align:right; font-size:.95rem; overflow-wrap:anywhere; }
.ax-enlace .copy-row .val { font-size:.82rem; }
.ax-enlace .dato { display:block; background:none; padding:0; border:0; font:inherit; letter-spacing:normal; }

/* Lista de visitas: la tarjeta entera lleva al pase; el ⋮ queda aparte. */
.ax-row-link { color:inherit; text-decoration:none; }
.ax-row-link .gv-meta .mono { font-size:.78rem; }

/* Aviso: tipo en dos tarjetas grandes (radio nativo, se ve la elegida sin JS). */
.ax-tipos { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.ax-tipos > .ax-tipo { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; min-height:108px;
    padding:14px; border:1.5px solid var(--line); border-radius:16px; background:var(--panel); cursor:pointer; }
.ax-tipos > .ax-tipo input { position:absolute; opacity:0; width:0; height:0; }
.ax-tipos > .ax-tipo .ic { width:40px; height:40px; border-radius:12px; background:var(--tint); color:var(--accent);
    display:flex; align-items:center; justify-content:center; }
.ax-tipos > .ax-tipo .ic svg { width:22px; height:22px; }
.ax-tipos > .ax-tipo .t { display:flex; flex-direction:column; gap:.1rem; }
.ax-tipos > .ax-tipo .t b { font-size:1rem; color:var(--ink); }
.ax-tipos > .ax-tipo .t small { font-size:.84rem; color:var(--muted); line-height:1.3; }
.ax-tipos > .ax-tipo:has(input:checked) { border:2px solid var(--accent); background:var(--tint); padding:13.5px; }
.ax-tipos > .ax-tipo:has(input:checked) .ic { background:var(--accent); color:var(--on-accent); }
.ax-tipos > .ax-tipo:has(input:focus-visible) { outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:2px; }
.ax-horario { margin:.7rem 0 0; font-size:.86rem; }

/* Paquetería: código de entrega con su advertencia. */
.ax-aviso-clave { display:flex; gap:.5rem; align-items:flex-start; margin:0 0 1rem; }
.ax-aviso-clave svg { width:18px; height:18px; flex:none; margin-top:.1rem; }

/* Paquetería (lista): cabecera oscura con el conteo y el folio. */
.ax-pk { text-align:left; margin-bottom:1rem; }
.ax-pk-k { display:block; font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    color:color-mix(in srgb, var(--tint) 60%, var(--bg)); }
.ax-pk-num { display:flex; align-items:baseline; gap:.6rem; margin:.3rem 0 .2rem; }
.ax-pk-num .mono { font-size:2.4rem; font-weight:700; line-height:1; }
.ax-pk-sub { margin:.2rem 0 .9rem; font-size:.85rem; color:color-mix(in srgb, var(--tint) 72%, var(--bg)); }
.ax-pk-vacio .ax-pk-sub { margin-bottom:0; }
.ax-pk-folio { background:color-mix(in srgb, var(--tint) 12%, var(--bg)); border-radius:12px; padding:.6rem .75rem; }
.ax-pk-folio .lbl { color:color-mix(in srgb, var(--tint) 72%, var(--bg)); }
/* `.dato` global (app.css) pinta un chip claro: aquí el dato va sobre la superficie oscura. */
.ax-pk-folio .dato { display:block; background:none; padding:0; border:0; font:inherit; letter-spacing:normal; color:inherit; }
.ax-pk-folio .val.grande { color:var(--on-accent); font-size:1.25rem; }
.ax-pk-vacio { display:flex; align-items:center; gap:.8rem; }
.ax-pk-vacio strong { font-size:1.05rem; }
.ax-pk-vacio .pk-thumb { background:color-mix(in srgb, var(--tint) 18%, var(--bg)); border:0; color:var(--on-accent); }
.ax-pk-t { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.ax-dl { display:flex; gap:.9rem; align-items:flex-start; }
.ax-dl-main { flex:1; min-width:0; }
.ax-dl-t { display:flex; justify-content:space-between; gap:.6rem; align-items:baseline; }
.ax-dl-t .pill { white-space:nowrap; }
.ax-dl-sub { font-size:.85rem; color:var(--muted); margin-top:.15rem; }
.ax-folio { text-align:center; }
.ax-folio-k { margin:0 0 .4rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.ax-folio-v { font-size:2.6rem; font-weight:700; margin:0 0 1rem; word-break:break-all; }

/* SOS (D19): tipo en 2×2 y UN botón de mantener 2 s con barra de progreso. */
.ax-sos-h { color:var(--danger); }
.ax-sos-tipos { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.ax-sos-tipos > .ax-sos-tipo { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45rem;
    min-height:108px; padding:.8rem .5rem; border:1.5px solid var(--line); border-radius:16px; background:var(--panel);
    font-weight:800; font-size:.98rem; text-align:center; color:var(--ink); cursor:pointer; }
.ax-sos-tipos > .ax-sos-tipo input { position:absolute; opacity:0; width:0; height:0; }
.ax-sos-tipos > .ax-sos-tipo svg { width:30px; height:30px; color:var(--danger); }
.ax-sos-tipos > .ax-sos-tipo:has(input:checked) { border:2px solid var(--danger); background:var(--danger-tint); color:var(--danger); }
.ax-sos-tipos > .ax-sos-tipo:has(input:focus-visible) { outline:3px solid color-mix(in srgb, var(--danger) 45%, transparent); outline-offset:2px; }
.ax-sos-ubi { display:flex; align-items:center; gap:.5rem; margin:0 0 .5rem; font-size:.9rem; color:var(--muted); }
.ax-sos-ubi svg { width:20px; height:20px; flex:none; }
.ax-sos-hold { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; width:100%;
    min-height:72px; border:0; border-radius:18px; background:var(--danger); color:var(--on-accent); font:inherit;
    font-size:1.08rem; font-weight:800; cursor:pointer; -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none; touch-action:manipulation; }
.ax-sos-hold .t { position:relative; display:inline-flex; align-items:center; gap:.5rem; }
.ax-sos-hold .t svg { width:24px; height:24px; }
.ax-sos-hold:focus-visible { outline:3px solid color-mix(in srgb, var(--danger) 45%, transparent); outline-offset:3px; }
/* Barra de «mantén presionado»: se llena en 2 s; al soltar antes, se vacía y no se envía nada. */
.ax-sos-hold .sos-fill { position:absolute; inset:0 auto 0 0; width:0; background:color-mix(in srgb, var(--ink) 30%, transparent); }
.ax-sos-hold.holding .sos-fill { width:100%; transition:width 2s linear; }
.ax-sos-hold.enviando { background:color-mix(in srgb, var(--danger) 80%, var(--ink)); }
@media (prefers-reduced-motion: reduce) { .ax-sos-hold.holding .sos-fill { transition:none; width:100%; opacity:.6; } }
.ax-sos-ok { display:flex; gap:.8rem; align-items:flex-start; padding:1rem; margin-bottom:1rem; border-radius:16px;
    background:var(--danger-tint); border:2px solid var(--danger); }
.ax-sos-ok .ic { width:44px; height:44px; flex:none; border-radius:12px; background:var(--danger); color:var(--on-accent);
    display:flex; align-items:center; justify-content:center; }
.ax-sos-ok .ic svg { width:24px; height:24px; }
.ax-sos-ok b { display:block; font-size:1.1rem; color:var(--danger); }
.ax-sos-ok span { display:block; margin-top:.2rem; line-height:1.45; }

@media (min-width:768px) {
    .ax-acts { flex-direction:row; flex-wrap:wrap; }
    .ax-acts > .btn, .ax-acts > form { flex:1; }
    .ax-sos { max-width:640px; }
    .ax-sos-tipos { grid-template-columns:repeat(4, 1fr); }
    /* Pase emitido: la tarjeta a la derecha (fija) y las acciones/datos a la izquierda. */
    .qa-compose.emitido .qa-emitido { grid-column:2; grid-row:1; position:sticky; top:76px; }
    .qa-compose.emitido .qa-main { grid-column:1; grid-row:1; }
    .qa-compose.emitido .ax-acts { margin-top:0; }
}

/* ===== Dueños · B2 Mi casa (portal/mis_propiedades/*) ===== */
/* Tarjetas de radio con título + explicación (uso de la casa, tipo de representante). */
.mp-opts { display:flex; flex-direction:column; gap:.6rem; }
.mp-opts .gv-opt { display:flex; margin:0; background:var(--panel); min-height:64px; align-items:center; font-size:inherit; font-weight:500; }
.mp-renta[hidden] { display:none; }
.mp-opts .gv-opt:has(input:focus-visible) { outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:2px; }
.mp-opt-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:.15rem; }
.mp-opt-t b { font-size:.98rem; font-weight:700; color:var(--ink); }
.mp-opt-t small { font-size:.86rem; color:var(--muted); line-height:1.4; }
/* Aviso con icono (.alert + icono a la izquierda). */
.mp-aviso { display:flex; align-items:flex-start; gap:.65rem; line-height:1.45; }
.mp-aviso > svg { width:20px; height:20px; flex:none; margin-top:1px; }
.mp-aviso a { color:inherit; font-weight:700; }
.field .mp-aviso { margin:.7rem 0 0; }
.mp-hint { margin:.6rem 0 .7rem; }
.kit-sec-t + .mp-hint { margin-top:0; }
/* Invitación pendiente (enlace + botones para mandarla). */
.mp-inv { background:var(--tint); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius:16px;
    padding:1rem; margin-bottom:1rem; display:flex; flex-direction:column; gap:.6rem; }
.mp-inv-t { display:flex; align-items:center; gap:.5rem; margin:0; font-size:1rem; font-weight:800; color:var(--ink); }
.mp-inv-t svg { width:20px; height:20px; color:var(--accent); flex:none; }
.mp-inv-c { margin:0; font-size:.9rem; color:var(--muted); line-height:1.45; }
.mp-inv .copy-row { background:var(--panel); }
.mp-inv-acc { margin:0; }
.mp-inv-acc .btn { min-height:44px; gap:.4rem; }
.mp-inv-acc .btn svg { width:18px; height:18px; flex:none; }
/* «Ana podrá:» — renglones con palomita. */
.mp-podra { list-style:none; margin:0 0 1rem; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.mp-podra li { display:flex; align-items:flex-start; gap:.6rem; font-size:.95rem; line-height:1.4; color:var(--ink); }
.mp-podra svg { width:20px; height:20px; flex:none; color:var(--accent); }
/* Representantes: tarjeta con la fila pegada arriba y el formulario de acceso. */
.mp-rep { margin:0 0 .7rem; padding:0; overflow:hidden; }
.mp-rep > .gv-row { border:0; border-radius:0; margin:0; }
.mp-rep .gp-scope { flex:1; }
.mp-acceso { display:grid; gap:.5rem; }
.mp-acceso .field { margin:0; }
/* Qué ven en la app: una tarjeta por dato con chips-casilla de 44px. */
.mp-vis { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:.9rem 1rem; margin-bottom:.7rem; }
.mp-vis-t b { display:block; font-size:.98rem; font-weight:700; color:var(--ink); }
.mp-vis-t small { display:block; font-size:.86rem; color:var(--muted); line-height:1.4; margin-top:.1rem; }
.mp-vis .qa-chips { margin-top:.6rem; gap:.5rem; }
.mp-vis .qa-chip { gap:.45rem; font-weight:600; }
.mp-bx { width:20px; height:20px; flex:none; border-radius:6px; border:1.5px solid var(--line); background:var(--panel);
    display:flex; align-items:center; justify-content:center; color:transparent; }
.mp-bx svg { width:14px; height:14px; }
.mp-vis .qa-chip:has(input:checked) .mp-bx { border-color:var(--on-accent); background:var(--on-accent); color:var(--accent); }
/* Solicitudes. */
.mp-req-top { display:flex; align-items:center; gap:.5rem; }
.mp-req-top .muted { flex:1; font-size:.8rem; }
.mp-req-t { font-size:.92rem; line-height:1.45; }
.mp-req-bar { display:flex; align-items:center; gap:.6rem; }
.mp-req-bar .muted { font-size:.78rem; font-weight:700; }
.mp-req-m { font-size:.84rem; line-height:1.5; }
/* Ocupantes y cuotas. */
.mp-sec { margin-top:1.4rem; }
.mp-empty { margin-bottom:1rem; }
/* Ficha de la casa (casa.php). */
.mp-top { display:flex; flex-direction:column; gap:.875rem; }
.mp-top .ra-head { justify-content:flex-start; align-items:center; }
.mp-top .ra-head > .mp-top-t { flex:1; }
.mp-top .ra-head > .pill { text-decoration:none; flex:none; }
.mp-toca { margin:0; }
.mp-toca > strong { display:block; margin-bottom:.3rem; }
.mp-toca a { display:block; min-height:32px; color:inherit; }
.ra-alerta.mp-warn { background:var(--warn-tint); color:var(--warn); }
.ra-av.mp-add { background:var(--cream); }
.mp-add-t { color:var(--accent); }
.mp-nota { margin:.75rem 0 0; font-size:.875rem; }
.mp-cap { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; margin-top:12px; }
.mp-cap .ra-t { flex:1; min-width:0; }
.mp-cap label { display:block; margin:0; font-size:inherit; }
.mp-cap small { display:block; color:var(--muted); font-size:.875rem; }
.mp-cap input { width:76px; min-height:48px; text-align:center; }
.mp-fin { margin-top:12px; }

/* ===== Dueños · E2 Comunidad (marketplace, chat, transparencia, anuncios, documentos, asambleas, gobernanza) ===== */
/* D29 · portada del anuncio: el .foto-tile del kit en grande (176px), centrado. */
.foto-tile.kc-cover { flex-direction:column; justify-content:center; text-align:center; min-height:176px; gap:.55rem;
    background:color-mix(in srgb, var(--accent) 4%, var(--panel)); }
.kc-cover .ft-ic { width:56px; height:56px; flex:0 0 56px; border-radius:16px; }
.kc-cover .ft-t { flex:none; align-items:center; }
.kc-cover .ft-actual { width:100%; height:150px; flex:none; border-radius:12px; }
.kc-cover .file-preview { top:8px; left:8px; width:calc(100% - 16px); height:calc(100% - 16px); border-radius:12px; }
.kc-cover:has(.file-preview) .ft-actual { visibility:hidden; }
.kc-cover + .field-error { margin:-.5rem 0 1rem; }
.kc-cover:has(.file-preview) .ft-t { position:relative; z-index:1; padding:.4rem .8rem; border-radius:12px;
    background:color-mix(in srgb, var(--panel) 90%, transparent); }
/* Precio: «$ monto» + segmentado MXN/USD en la misma fila. */
.kc-precio { display:flex; gap:8px; align-items:stretch; }
.kc-precio .kit-affix { flex:1; min-width:0; }
.kc-precio .segmented.track { flex:none; grid-auto-columns:58px; }
.kc-precio .segmented.track label { min-height:42px; padding:0; }
.kc-prefs { max-width:600px; }
/* Documentos: «Abrir ›» al final de la fila. */
.kc-doc-abrir { flex:none; display:inline-flex; align-items:center; gap:.15rem; color:var(--accent); font-weight:700; font-size:.9rem; }
.kc-doc-abrir svg { width:16px; height:16px; }
.ra-row .kc-doc-pill { margin-top:.35rem; display:inline-flex; align-items:center; gap:.25rem; }
/* Asambleas / gobernanza / conservación: títulos de tarjeta y datos sin estilos en línea. */
.as-h { margin:0 0 .7rem; font-size:1rem; font-weight:800; display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; }
.as-m0 { margin:0; }
.as-quorum { margin-bottom:1rem; }
.as-q-head { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem 1rem; flex-wrap:wrap; }
.as-q-head .as-h { margin:0; }
.as-q-live { font-weight:400; font-size:.78rem; }
.as-q-pct { font-size:1.4rem; color:var(--accent); }
.as-q-track { height:11px; background:var(--tint); border-radius:99px; overflow:hidden; margin:.5rem 0; }
.as-q-bar { height:100%; width:0; background:var(--accent2); transition:width .3s; }
.as-q-cnt { margin:.2rem 0 .5rem; font-size:.85rem; }
.as-q-umbrales { display:flex; gap:.5rem; flex-wrap:wrap; }
.as-ol { margin:0 0 .6rem; padding-left:1.2rem; }
.as-ol > li { margin-bottom:.3rem; }
.as-puntos > li { margin-bottom:.7rem; }
.as-pill-sm { font-size:.7rem; }
.as-desc { font-size:.87rem; }
.as-res { font-size:.85rem; margin-top:.25rem; display:flex; gap:.4rem .7rem; flex-wrap:wrap; align-items:center; }
.as-res-pill { text-transform:uppercase; }
.as-curso { font-size:.82rem; margin-top:.2rem; }
.as-texto { margin:.8rem 0 0; line-height:1.5; }
.as-dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:.35rem .9rem; }
.as-dl dt { color:var(--muted); font-size:.85rem; }
.as-dl dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.as-part-res { display:flex; flex-direction:column; align-items:center; gap:.1rem; text-align:center; margin-bottom:1rem; background:var(--tint); border:0; }
.as-part-res > .muted { font-size:.85rem; }
.as-part-res strong { font-size:1.8rem; font-weight:800; color:var(--accent); }
.as-part-sub { font-size:.78rem; }
.as-part-nota { font-size:.78rem; margin-top:.6rem; }
.gb-mesa { display:grid; grid-template-columns:1fr; gap:.8rem; }
@media (min-width:768px) { .gb-mesa { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.gb-miembro { display:flex; align-items:center; gap:.75rem; min-width:0; }
.gb-miembro img.ra-av { object-fit:cover; }
.gb-datos { display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.gb-datos .muted { font-size:.9rem; }
.gb-contacto { display:flex; gap:.2rem .9rem; flex-wrap:wrap; font-size:.85rem; }
.gb-contacto a { display:inline-flex; align-items:center; gap:.25rem; min-height:44px; color:var(--accent); overflow-wrap:anywhere; }
.gb-dd { font-weight:600; }

/* ===== Dueños · C2 Accesos (huéspedes, eventos, autorizaciones, brazaletes) =====
   Prefijo .hv-*. Pase D6 (tarjeta oscura + QR + filas con icono), D7 (tira de días + horario),
   D18 (persona con label visible + cámara de 52px). Solo tokens. */
/* Tarjeta de lista cuyo cuerpo es un enlace al detalle. */
.gv-main.hv-link { color:inherit; text-decoration:none; }
.gv-main.hv-link:hover .gv-name { text-decoration:underline; }
.gv-main.hv-link:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:3px; border-radius:6px; }

/* Persona (huésped principal / acompañante): input + botón de cámara de 52px. */
.hv-pax-in { display:flex; align-items:center; gap:10px; }
.field .hv-pax-in input[type=text] { flex:1; min-width:0; width:auto; }
.hv-pax + .hv-pax { margin-top:.2rem; }
.hv-cam, .field .hv-cam { position:relative; flex:0 0 52px; width:52px; height:52px; margin:0 !important; overflow:hidden; cursor:pointer;
    border:1.5px dashed color-mix(in srgb, var(--accent) 50%, var(--line)); border-radius:14px;
    background:color-mix(in srgb, var(--accent) 4%, var(--panel)); color:var(--accent);
    display:flex; align-items:center; justify-content:center; }
.hv-cam-ic svg { width:22px; height:22px; display:block; }
.hv-cam input[type=file] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; padding:0; border:0; }
.hv-cam:has(input:focus-visible) { border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.hv-cam .file-preview { position:absolute; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0;
    object-fit:cover; border-radius:inherit; pointer-events:none; }
.hv-cam:has(.file-preview) { border-style:solid; border-color:var(--accent); }
.hv-hint { margin:.4rem 0 1rem; }
/* Pastilla «3 noches» (o el error del rango, en rojo). */
.hv-noches { display:inline-flex; align-self:flex-start; align-items:center; gap:6px; margin-top:.6rem; padding:6px 12px;
    border-radius:999px; background:var(--tint); color:var(--accent); font-size:.88rem; font-weight:800; }
.hv-noches svg { width:16px; height:16px; }
.hv-noches.is-error { background:var(--danger-tint); color:var(--danger); }
.hv-estancia { display:flex; flex-direction:column; }
.hv-estancia .qa-rango .lado { border-width:1.5px; border-radius:14px; padding:.6rem .8rem; }
.hv-estancia .qa-rango .lado .k { font-size:.72rem; }
.hv-estancia .qa-rango .lado:focus-within { border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.field .qa-rango .lado input { height:auto !important; padding:.1rem 0; border:0 !important; }

/* Vista previa del huésped (aside de escritorio). */
.hv-prev { max-width:420px; margin:0 auto; }
.hv-prev .pill { font-size:.85rem; }
.hv-prev-nom { font-weight:800; font-size:1.15rem; margin:.5rem 0 .1rem; }
.hv-prev-sub { font-size:.85rem; color:color-mix(in srgb, var(--tint) 72%, var(--bg)); margin-bottom:.9rem; }
.hv-prev-nota { font-size:.78rem; line-height:1.45; margin:.9rem 0 0; text-align:left; color:color-mix(in srgb, var(--tint) 68%, var(--bg)); }

/* ---- Pase D6: tarjeta oscura (el QR se lee al sol) + acciones + filas con icono ---- */
.hv-detalle { display:grid; gap:1rem; }
.hv-col { min-width:0; display:flex; flex-direction:column; }
.hv-pase { background:var(--bg); color:var(--on-accent); border-radius:24px; padding:22px 20px;
    display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.hv-est { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; font-size:.9rem; font-weight:600; }
.hv-est > span:last-child { opacity:.85; }
.hv-est .pill { font-size:.8rem; font-weight:800; padding:.2rem .65rem; }
.hv-qr { width:208px; height:208px; border-radius:16px; background:var(--panel); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hv-qr img { display:block; width:176px; height:176px; image-rendering:pixelated; }
.hv-qr.off img { opacity:.25; }
.hv-qr.hv-foto img { width:100%; height:100%; object-fit:cover; image-rendering:auto; }
.hv-nom { display:flex; flex-direction:column; gap:2px; min-width:0; max-width:100%; }
.hv-nom b { font-size:1.35rem; font-weight:800; overflow-wrap:anywhere; }
.hv-nom span { font-size:.95rem; font-weight:600; opacity:.85; }
.hv-acc { display:flex; flex-direction:column; gap:10px; margin-top:1rem; }
.hv-acc .btn > svg, .hv-pie .btn > svg { width:20px; height:20px; }
.hv-filas { background:var(--panel); border:1px solid var(--line); border-radius:20px; overflow:hidden; margin-bottom:1rem; }
.hv-fila { display:flex; align-items:center; gap:14px; min-height:60px; padding:10px 16px; border-top:1px solid var(--line); }
.hv-fila:first-child { border-top:0; }
.hv-fila > svg { width:22px; height:22px; flex:none; color:var(--accent); }
.hv-fila .k { flex:1; min-width:0; font-size:.95rem; font-weight:600; color:var(--muted); }
.hv-fila .v { font-size:.95rem; font-weight:800; text-align:right; color:var(--ink); min-width:0; overflow-wrap:anywhere; }
.hv-fila.hv-warn { background:var(--warn-tint); }
.hv-fila.hv-warn > svg, .hv-fila.hv-warn .k, .hv-fila.hv-warn .v { color:var(--warn); }
.hv-fila.hv-persona .k { color:var(--ink); font-weight:700; }
.hv-fila .gv-av { flex:0 0 40px; width:40px; height:40px; object-fit:cover; }
.hv-pie { padding:12px 16px 16px; border-top:1px solid var(--line); }
.hv-sec-t { margin-top:.4rem; }
.hv-sec-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin:.4rem 0 .7rem; }
.hv-sec-head .kit-sec-t { margin:0; }
@media (min-width:900px) {
    .hv-detalle { grid-template-columns:380px minmax(0,1fr); gap:1.5rem; align-items:start; }
    .hv-detalle > .hv-col:first-child { position:sticky; top:76px; }
}

/* ---- D7: tira «¿Qué día?» (radios nativos) + horario Desde/Hasta ---- */
.hv-dias { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
.hv-dia, .field .hv-dia { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    min-height:64px; margin:0 !important; border:1.5px solid var(--line); border-radius:14px; background:var(--panel);
    color:var(--ink); cursor:pointer; text-align:center; }
.hv-dia input { position:absolute; opacity:0; width:0 !important; height:0 !important; min-width:0; border:0 !important; }
.hv-dia small { display:block; font-size:.8rem; font-weight:700; color:var(--muted); }
.hv-dia b { font-size:1.05rem; font-weight:800; }
.hv-dia:has(input:checked) { border-color:var(--accent); background:var(--tint); color:var(--accent); }
.hv-dia:has(input:checked) small { color:var(--accent); }
.hv-dia:has(input:focus-visible) { outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:2px; }
.hv-otro { margin-top:.6rem; }
.hv-horas { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.field .hv-horas label { display:flex; flex-direction:column; gap:6px; margin:0; font-size:.85rem; font-weight:700; color:var(--muted); }
.hv-horas input { width:100%; min-width:0; }

/* ---- Invitados del evento (filas) ---- */
.hv-inv-form { display:grid; gap:.2rem; }
.hv-inv-form .btn { margin-top:.4rem; }
.hv-fila.hv-inv .k { display:flex; flex-direction:column; gap:2px; }
.hv-fila.hv-inv .k b { color:var(--ink); font-weight:700; overflow-wrap:anywhere; }
.hv-fila.hv-inv .k small { font-size:.8rem; font-weight:500; }
.hv-fila.hv-inv .v { font-size:.9rem; }
.hv-fila.hv-inv form { margin:0; flex:none; }
.btn.hv-quitar { width:44px; min-height:44px; padding:0; border-radius:12px; }
.btn.hv-quitar svg { width:18px; height:18px; }
.hv-fila.hv-inv-op { flex-wrap:wrap; }

/* ---- Autorizaciones de cajón ---- */
.hv-aut-head { display:flex; gap:.7rem; align-items:center; }
.hv-aut-head > div { display:flex; flex-direction:column; min-width:0; }
.hv-aut-head b { font-size:1rem; overflow-wrap:anywhere; }
.hv-aut-head .muted { font-size:.88rem; }
.hv-aut-txt { margin:.8rem 0; font-size:.95rem; color:var(--muted); line-height:1.45; }
.hv-aut .btn-row .btn { min-height:48px; }
@media (max-width:767px) {
    .hv-aut .btn-row { display:grid; grid-template-columns:1fr 1fr; }
    .hv-aut .btn-row form, .hv-aut .btn-row .btn { width:100%; display:flex; }
}

/* ---- Brazaletes ---- */
.hv-braz-form { margin-top:.4rem; }
.hv-folios { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.hv-folio { display:inline-flex; align-items:center; gap:.2rem; min-height:44px; padding:0 .3rem 0 .85rem; border-radius:999px;
    background:var(--tint); color:var(--accent); font-weight:700; }
.hv-folio form { margin:0; display:inline-flex; }
.hv-folio button { width:36px; height:36px; border:0; border-radius:50%; background:none; color:var(--accent); cursor:pointer;
    display:flex; align-items:center; justify-content:center; padding:0; }
.hv-folio button:hover { background:color-mix(in srgb, var(--danger) 12%, transparent); color:var(--danger); }
.hv-folio button svg { width:16px; height:16px; }

/* ===== Dueños · E1 Comunidad (reportes D12, reservas D13, encuestas D14) — prefijo cm- ===== */
/* Listas y detalle de reportes */
.cm-lista { display:grid; gap:.7rem; }
.cm-sec { margin-top:1.1rem; }
.cm-avance { display:flex; flex-direction:column; gap:.4rem; }
.cm-msg { display:flex; gap:.5rem; align-items:flex-start; background:var(--tint); border-radius:12px; padding:.65rem .75rem;
    margin:0; font-size:.84rem; line-height:1.45; font-weight:600; }
.cm-msg svg { width:18px; height:18px; flex:none; color:var(--accent); margin-top:1px; }
.cm-msg small { display:block; font-size:.74rem; font-weight:700; color:var(--muted); margin-top:.15rem; }
.cm-confirma { display:flex; flex-direction:column; gap:.6rem; background:var(--tint); border-radius:12px; padding:.75rem; margin-top:-.35rem; }
.cm-confirma strong { font-size:.9rem; color:var(--accent); }
.cm-confirma .btn { min-height:44px; }
.cm-estado { margin:.5rem 0 0; }
.cm-pasos { display:flex; align-items:center; gap:.6rem; margin-top:.5rem; font-size:.84rem; font-weight:700; color:var(--muted); }
.cm-nota { margin:.35rem 0 0; font-size:.9rem; color:var(--muted); line-height:1.45; }
.cm-pregunta { background:var(--tint); border-color:var(--accent2); }
.cm-pregunta strong { font-size:1rem; color:var(--accent); }
.cm-pregunta p { margin:.2rem 0 .8rem; font-size:.9rem; color:var(--muted); }
.cm-pregunta .btn-row form { display:inline-flex; }
.cm-texto { white-space:pre-line; margin:0 0 .7rem; line-height:1.5; }
.cm-foto { width:100%; border-radius:12px; display:block; }
.cm-h { display:flex; align-items:center; gap:.5rem; margin:0 0 .5rem; font-size:1.02rem; }
.cm-h svg { width:20px; height:20px; color:var(--accent); flex:none; }

/* Encuestas (D14) */
.cm-enc { display:flex; flex-direction:column; gap:.75rem; }
.cm-enc-meta { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-size:.88rem; font-weight:600; color:var(--muted); }
.cm-preg { margin:0; font-size:1.3rem; font-weight:800; line-height:1.3; }
.cm-ctx { margin:0; font-size:.95rem; line-height:1.5; color:var(--muted); white-space:pre-line; }
.cm-votar { display:flex; flex-direction:column; gap:.6rem; margin:0; }
.cm-votar > .lbl { font-size:.88rem; font-weight:700; color:var(--muted); }
.cm-opts { display:flex; flex-direction:column; gap:.6rem; }
.cm-opt { position:relative; display:flex; align-items:center; gap:12px; min-height:56px; padding:12px 14px; cursor:pointer;
    border:1.5px solid var(--line); border-radius:14px; background:var(--panel); font-weight:700; font-size:1rem; }
.cm-opt input { position:absolute; opacity:0; width:0 !important; height:0 !important; min-width:0; border:0 !important; }
.cm-opt .cm-dot { width:22px; height:22px; flex:0 0 22px; border-radius:50%; border:1.5px solid var(--line); background:var(--panel);
    display:flex; align-items:center; justify-content:center; color:var(--on-accent); }
.cm-opt .cm-dot svg { width:14px; height:14px; visibility:hidden; }
.cm-opt.multi .cm-dot { border-radius:7px; }
.cm-opt:has(input:checked) { border-color:var(--accent); background:var(--tint); }
.cm-opt:not(.multi):has(input:checked) .cm-dot { border:7px solid var(--accent); }
.cm-opt.multi:has(input:checked) .cm-dot { background:var(--accent); border-color:var(--accent); }
.cm-opt.multi:has(input:checked) .cm-dot svg { visibility:visible; }
.cm-opt:has(input:focus-visible) { outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:2px; }
.cm-ok { display:flex; align-items:center; gap:.5rem; margin:0; font-weight:700; }
.cm-ok svg { width:20px; height:20px; flex:none; }
.cm-res-t { margin:0; font-size:.88rem; font-weight:700; color:var(--muted); }
.cm-res-lista { display:flex; flex-direction:column; gap:.7rem; }
.cm-res { display:flex; flex-direction:column; gap:.35rem; padding:.6rem .7rem; border-radius:12px; border:1px solid var(--line); }
.cm-res.mio { border-color:var(--accent); background:var(--tint); }
.cm-res .top { display:flex; justify-content:space-between; gap:.8rem; font-size:.95rem; font-weight:700; }
.cm-bar { height:10px; border-radius:99px; background:color-mix(in srgb, var(--line) 70%, var(--panel)); overflow:hidden; }
.cm-bar i { display:block; height:100%; border-radius:99px; background:var(--accent2); }
.cm-res.mio .cm-bar i { background:var(--accent); }
.cm-mio { display:inline-flex; align-items:center; gap:.3rem; font-size:.8rem; font-weight:800; color:var(--accent); }
.cm-mio svg { width:14px; height:14px; }

/* Reservar (D13) */
.cm-datos { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 1rem; }
.cm-datos > span { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 12px; border-radius:999px;
    background:var(--panel); border:1px solid var(--line); font-size:.88rem; font-weight:700; color:var(--ink); }
.cm-datos > span svg { width:18px; height:18px; color:var(--accent); flex:none; }
.cm-datos > span.warn { background:var(--warn-tint); color:var(--warn); border-color:color-mix(in srgb, var(--warn) 35%, transparent); }
.cm-datos > span.info { background:var(--info-tint); color:var(--info); border-color:color-mix(in srgb, var(--info) 35%, transparent); }
.cm-datos > span.warn svg, .cm-datos > span.info svg { color:currentColor; }
.cm-res-grid { align-items:start; }
.cm-aviso { display:flex; gap:.5rem; align-items:flex-start; }
.cm-aviso svg { width:18px; height:18px; flex:none; margin-top:2px; }
#res-form .qa-dias { margin-bottom:.2rem; }
#res-form .qa-dia { min-height:72px; border-width:1.5px; border-radius:14px; font-size:1.1rem; font-weight:800; }
#res-form .qa-dia .dow { font-size:.75rem; }
.cm-est { font-size:.7rem; font-weight:800; }
.cm-est.libre { color:var(--ok); }
.cm-est.pocos { color:var(--warn); }
.cm-est.lleno { color:var(--danger); }
.cm-est.cerrado { color:var(--muted); }
.qa-dia.sel .cm-est { color:inherit; }
.cm-otra { display:block; margin-top:.4rem; font-size:.85rem !important; font-weight:600 !important; color:var(--muted); }
.cm-horas { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
.cm-horas .qa-hora { min-width:0; min-height:48px; border-width:1.5px; border-radius:12px; }
.cm-horas .qa-hora .cupo { font-size:.62rem; }
.cm-horas .qa-hora.cm-ocupado { background:var(--cream); color:var(--muted); text-decoration:line-through; cursor:not-allowed; }
.cm-horas .qa-hora.cm-rango { background:var(--tint); border-color:var(--accent); color:var(--accent); }
.cm-notas { margin:.5rem 0 0; }
.cm-cal-legend { margin-top:.6rem; }
.cm-cal-legend i { width:11px; height:11px; border-radius:3px; display:inline-block; margin-right:.3rem; vertical-align:-1px; }
.cm-cal-legend i.libre { background:var(--panel); border:1px solid var(--line); }
.cm-cal-legend i.cm-con { background:var(--danger); }
.cm-cal-legend i.cm-pend { background:var(--warn); }
.cm-cal-legend i.cerrado { background:var(--cream); border:1px solid var(--line); }
.cm-det { margin-top:.4rem; }
.cm-foto-area { width:100%; max-height:220px; object-fit:cover; border-radius:12px; margin-bottom:.8rem; display:block; }
.cm-sub { display:flex; align-items:center; gap:.4rem; }
.cm-sub svg { width:16px; height:16px; }
.cm-semana { display:grid; grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:6px; }
.cm-semana > span { display:flex; flex-direction:column; align-items:center; gap:2px; padding:.4rem .3rem; border:1px solid var(--line); border-radius:10px; }
.cm-semana b { font-size:.82rem; color:var(--accent); }
.cm-semana small { font-size:.72rem; color:var(--muted); white-space:nowrap; }
.cm-semana > span.off { opacity:.55; }
.cm-semana > span.off b { color:var(--muted); }
.cm-reglas { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.cm-reglas li { display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; line-height:1.45; }
.cm-reglas svg { width:18px; height:18px; flex:none; color:var(--accent); margin-top:2px; }
/* Detalle de reserva y «Mis reservas» */
.cm-acuse { text-align:center; }
.cm-acuse h2 { margin:0 0 .3rem; font-size:1.1rem; }
.cm-acuse .pay-timeline { text-align:left; max-width:420px; margin:1rem auto 0; }
.cm-filas { list-style:none; margin:0; padding:0; }
.cm-filas li { display:flex; align-items:flex-start; gap:.6rem; padding:.6rem 0; border-bottom:1px solid var(--line); font-size:.92rem; }
.cm-filas li:last-child { border-bottom:0; }
.cm-filas li > svg { width:18px; height:18px; flex:none; color:var(--accent); margin-top:2px; }
.cm-filas li > span { width:84px; flex:none; color:var(--muted); font-weight:600; }
.cm-filas li > b { flex:1; min-width:0; font-weight:700; display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; }
.cm-nota-ic { display:flex; gap:.5rem; align-items:flex-start; font-size:.9rem; line-height:1.45; color:var(--muted); }
.cm-nota-ic svg { width:18px; height:18px; flex:none; margin-top:2px; }
.cm-nota-ic.warn { color:var(--warn); }
.cm-cancelar { margin-top:.8rem; }
.cm-comprobante { margin-top:1.1rem; border-top:1px solid var(--line); padding-top:1rem; }
.cm-qr { display:flex; justify-content:center; margin:.5rem 0; }
.cm-centro { justify-content:center; }
a.cm-fila { color:inherit; text-decoration:none; margin:0; }
a.cm-fila:hover { border-color:var(--accent); }
.cm-fila .gv-main > span:last-child { margin-top:2px; }
.cm-chev { display:flex; color:var(--muted); }
.cm-chev svg { width:18px; height:18px; }
.cm-historial { margin-top:1.2rem; }
.cm-historial .cm-lista { margin-top:.5rem; }

/* ===== Dueños · B1 Mi casa (vivienda) =====
   Vehículos (D1), mascotas (D3), personal (D22), llaveros (D21), cajones (D20) y ocupantes (D23).
   Prefijo .viv-*. Solo tokens. */
/* Tarjeta de lista con bandas (TAG/horario): la fila va sin borde propio dentro de la card. */
.viv-card { padding:0; overflow:hidden; }
.viv-card > .gv-row { border:0; border-radius:0; margin:0; }
.gv-list > .viv-card { margin-bottom:.6rem; }
.viv-card .gv-alert { border-top:1px solid var(--line); }
.viv-thumb { width:74px; height:58px; flex:0 0 74px; border-radius:10px; }
.viv-tit { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.viv-tit strong { font-size:1rem; }
.viv-val { flex:1; min-width:0; }
.viv-nota { font-size:.82rem; line-height:1.45; }
.viv-nowrap { white-space:nowrap; font-size:.75rem; }
.gv-strip .viv-nota { font-size:.8rem; }
.gv-strip .muted.viv-nota.viv-nowrap { font-size:.75rem; }

/* Vacío con motivo y con su acción (aquí vive el único CTA cuando no hay nada). */
.gv-empty.viv-vacio { margin-bottom:.6rem; }
.gv-empty.viv-vacio strong { font-size:.95rem; }
.gv-empty.viv-vacio > .muted { font-size:.84rem; line-height:1.45; }
.gv-empty.viv-vacio .btn { margin-top:.3rem; }

/* Chips que son radios/checkbox nativos DENTRO de .field: `.field label` (bloque, 15px, margen)
   les ganaba al estilo de chip. */
.viv-chips label.qa-chip, .viv-dia label.qa-chip { display:inline-flex; margin:0; font-size:.88rem; gap:.35rem; }
@media (max-width:767px) { .viv-chips label.qa-chip, .viv-dia label.qa-chip { font-size:15px; } }
.viv-chip-sub { font-size:.72rem; font-weight:600; opacity:.8; }

/* Mascota: el tamaño solo aplica a perros (sin esperar al JS). */
.viv-tamano { display:none; }
form:has(input[name="especie"][value="perro"]:checked) .viv-tamano { display:block; }

/* Personal: horario por día (chip del día + entrada + salida). */
.viv-dia { display:grid; grid-template-columns:4.2rem minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:.5rem; margin-bottom:.5rem; }
.viv-dia label.qa-chip { justify-content:center; padding:0 .4rem; }
.field .viv-dia input[type=time] { width:100%; min-width:0; }

/* Llaveros: aviso con icono y costo dentro de la hoja. */
.viv-aviso { display:flex; align-items:flex-start; gap:.55rem; margin:0; font-size:.88rem; line-height:1.45; }
.viv-aviso svg { width:18px; height:18px; flex:none; margin-top:.1rem; }
.gv-strip.viv-costo { padding:10px 0 0; }

/* Ocupantes: formularios en línea (Invitar / Reenviar) y franja de la invitación abierta. */
.viv-inline { margin:0; display:inline-flex; }
.viv-invitar { gap:.3rem; }
.viv-invitar svg, .viv-inv .btn svg { width:16px; height:16px; }
.gv-strip.viv-inv { flex-wrap:wrap; gap:.4rem; }
.viv-inv .btn { gap:.3rem; }
.viv-lleno { margin:1rem 0 0; padding:.8rem 1rem; border-radius:14px; background:var(--warn-tint); color:var(--warn); font-weight:600; }

/* Cajones: buscador de casa con lista de resultados filtrada en el cliente. */
.viv-intro { margin:0 0 1rem; color:var(--muted); }
.viv-busca-in { display:flex; align-items:center; gap:.5rem; padding-left:12px; border:1px solid var(--line); border-radius:9px; background:var(--panel); }
.viv-busca-in:focus-within { border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.viv-busca-in > svg { width:20px; height:20px; color:var(--accent); flex:none; }
.field .viv-busca-in input[type=text] { border:0 !important; box-shadow:none !important; flex:1; min-width:0; padding-left:0; background:transparent; }
.viv-res { margin-top:.4rem; border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden; }
.viv-res [role=option] { display:flex; align-items:center; justify-content:space-between; gap:.6rem; width:100%; min-height:48px;
    padding:0 14px; border:0; border-bottom:1px solid var(--line); background:none; font:inherit; font-weight:700; color:var(--ink); text-align:left; cursor:pointer; }
.viv-res [role=option]:hover, .viv-res [role=option]:focus-visible { background:var(--tint); }
.viv-res [role=option] svg { width:18px; height:18px; color:var(--accent); visibility:hidden; }
.viv-res [role=option][aria-selected="true"] svg { visibility:visible; }
.viv-res .viv-res-vacio { margin:0; padding:12px 14px; }
.viv-rango { margin:.5rem 0 0; }
/* `.grid2` y las opciones (display grid/flex) le ganan a [hidden]. */
.viv-fechas[hidden], .viv-res [hidden], .viv-rango[hidden] { display:none !important; }
.viv-fechas { margin-top:.6rem; }
.viv-fechas .field { margin-bottom:0; }
.kit-sec-t.viv-sec { margin-top:1.4rem; }
@media (max-width:767px) {
    .viv-busca-in { border-width:1.5px; border-radius:14px; }
    .viv-fechas { grid-template-columns:1fr; }
}

/* ===== Dueños · D Pagos (pagar D9, en espera D10, devoluciones D11, adelanto D26, pago automático D27,
   multas D28, tabulador, hub Pagos) — prefijos pg- pe- dd- ad- dm- pm- pt- ===== */
/* D9 · Pagar: resumen, interruptor del saldo a favor, Total y métodos como tarjetas de radio. */
.pg-ln { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:.45rem 0; font-size:.95rem; font-weight:600; }
.pg-ln > span:first-child { min-width:0; color:var(--muted); overflow-wrap:anywhere; }
.pg-ln small { display:block; font-size:.8rem; font-weight:500; }
.pg-ln > .mono { flex:none; color:var(--ink); }
.pg-mas > summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-size:.9rem; font-weight:700; color:var(--accent); }
.sw-row.pg-sw { margin:.4rem 0 0; padding:.5rem 0; min-height:60px; border:0; border-top:1px solid var(--line); border-radius:0; background:none; }
.pg-total { display:flex; justify-content:space-between; align-items:flex-end; gap:.6rem; margin-top:.4rem; padding-top:.7rem; border-top:1px dashed var(--line); }
.pg-total > b { font-size:1rem; font-weight:800; }
.pg-total > span { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.pg-total .antes { font-size:.8rem; font-weight:600; color:var(--muted); text-decoration:line-through; }
.pg-total .n { font-size:1.75rem; font-weight:700; line-height:1; color:var(--ink); }
.pg-metodos[hidden] { display:none; }
.pg-metodos .pay-method { min-height:76px; border:2px solid var(--line); border-radius:16px; padding:.75rem .9rem; }
.pg-metodos .pay-method:has(input:checked) { border:2px solid var(--accent); background:color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.pg-metodos .pay-method:has(input:focus-visible) { outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:2px; }
.pg-metodos .pay-method .t { font-size:1rem; }
.pg-metodos .pay-method .s { font-size:.86rem; line-height:1.4; }
.pg-metodos .pay-method .pill { font-size:.7rem; }
.pg-comprob { margin:.7rem 0 0; }
/* El tile de foto dentro de `.field`: `.field label` (bloque) le ganaba al flex del kit. */
.pg-comprob .foto-tile, #apelar .field .foto-tile { display:flex; margin-bottom:0; font-size:inherit; }
.pg-datos { font-size:.9rem; overflow-wrap:anywhere; }
.pg-nota { display:flex; gap:.5rem; align-items:flex-start; margin:.9rem 0 0; font-size:.88rem; line-height:1.45; color:var(--muted); }
.pg-nota svg { width:18px; height:18px; flex:none; margin-top:2px; color:var(--accent); }
#dd-cta[aria-disabled="true"], #ad-cta[aria-disabled="true"] { opacity:.5; cursor:not-allowed; box-shadow:none; }

/* D10 · Pago en espera / estado: tarjeta oscura con estado + importe; filas para copiar; «Qué sigue». */
.pe-card { display:flex; flex-direction:column; align-items:flex-start; gap:.45rem; margin-bottom:1rem; padding:1.1rem 1.1rem 1.2rem;
    border-radius:20px; background:var(--bg); color:var(--on-accent); }
.pe-pills { display:flex; flex-wrap:wrap; gap:.4rem; }
.pe-monto { font-size:2.1rem; font-weight:700; line-height:1.1; letter-spacing:-.02em; }
.pe-sub { font-size:.92rem; font-weight:600; line-height:1.4; opacity:.88; }
/* `partials/copiar` usa `.dato`, que el global pinta como chip de búsqueda: aquí es solo el bloque etiqueta + valor. */
.pe-datos .copy-row .dato { display:block; padding:0; border:0; border-radius:0; background:none; color:inherit; font:inherit; letter-spacing:normal; }
.pe-datos .copy-row .val { white-space:normal; overflow-wrap:anywhere; }
.pe-datos .copy-row .val.grande { font-size:1.2rem; }
.copy-row .val.pe-txt { font-family:inherit; font-size:1rem; }
.pe-tl .t, .pe-tl .s { display:block; }
.pe-tl .t { font-size:.95rem; }
.pe-tl .s { font-size:.85rem; }
.pay-timeline li.ahora .dot { width:13px; height:13px; background:var(--panel); border:3px solid var(--accent);
    box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.pay-timeline li.ahora .t { color:var(--accent); }
.pay-timeline li .s { line-height:1.4; }
.pe-acc { margin-top:.8rem; }
.pe-domi { display:flex; gap:.8rem; align-items:flex-start; }
.pe-domi h2 { margin:0 0 .25rem; font-size:1rem; }
.pe-domi p { margin:0 0 .7rem; font-size:.9rem; }
.pay-ok p.sub { margin-bottom:0; }

/* D11 · Datos para devoluciones: cuenta guardada enmascarada, contador n/18 + banco detectado. */
.dd-guardada { display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; padding:.8rem .9rem; border-radius:14px; background:var(--tint); }
.dd-ic { width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:12px; background:var(--panel); color:var(--accent); }
.dd-ic svg { width:22px; height:22px; }
.dd-t { display:flex; flex-direction:column; gap:2px; min-width:0; }
.dd-t small { font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.dd-t b { font-size:1rem; overflow-wrap:anywhere; }
.dd-t span { font-size:.88rem; color:var(--muted); }
.dd-meta { display:flex; justify-content:space-between; gap:.6rem; margin-top:6px; font-size:.9rem; font-weight:700; color:var(--muted); }
.dd-meta .mono { flex:none; }
.dd-meta.ok { color:var(--ok); }
.dd-meta.mal { color:var(--danger); }
.dd-lock { display:flex; gap:.5rem; align-items:flex-start; margin:.4rem 0 0; font-size:.86rem; line-height:1.45; color:var(--muted); }
.dd-lock svg { width:18px; height:18px; flex:none; margin-top:2px; color:var(--accent); }
.dd-form input.mono, .dm-form input.mono { font-family:'Space Mono', ui-monospace, monospace; letter-spacing:.02em; }

/* D26 · Pagar por adelantado (bloque plegable del estado de cuenta): meses de 68px con palomita. */
details.card.ad-blk { margin-top:1rem; padding:0; overflow:hidden; }
.ad-sum { display:flex; align-items:center; gap:.8rem; min-height:64px; padding:.8rem 1rem; list-style:none; cursor:pointer; }
.ad-sum::-webkit-details-marker { display:none; }
.ad-st { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ad-st b { font-size:1rem; font-weight:800; }
.ad-st small { font-size:.86rem; color:var(--muted); }
.ad-chev { display:flex; color:var(--muted); transition:transform .2s ease; }
.ad-chev svg { width:20px; height:20px; }
.ad-blk[open] .ad-chev { transform:rotate(180deg); }
.ad-form { padding:0 1rem 1rem; }
.ad-meses { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.ad-mes { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:68px;
    padding:.4rem; border:2px solid var(--line); border-radius:14px; background:var(--panel); text-align:center; cursor:pointer; }
.field .ad-mes { display:flex; margin:0; font-size:inherit; }
.ad-mes input { position:absolute; opacity:0; width:0 !important; height:0 !important; min-width:0; border:0 !important; }
.ad-mes b { font-size:1rem; font-weight:800; color:var(--ink); }
.ad-mes .ad-y { font-size:.72rem; font-weight:700; color:var(--muted); }
.ad-mes small { font-size:.8rem; font-weight:600; color:var(--muted); }
.ad-mes .ck { position:absolute; top:5px; right:5px; width:20px; height:20px; display:none; place-items:center; border-radius:50%;
    background:var(--accent); color:var(--on-accent); }
.ad-mes .ck svg { width:12px; height:12px; }
.ad-mes:has(input:checked) { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.ad-mes:has(input:checked) .ck { display:grid; }
.ad-mes:has(input:focus-visible) { outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:2px; }
@media (min-width:768px) { .ad-meses { grid-template-columns:repeat(6, minmax(0,1fr)); } }
@media (prefers-reduced-motion:reduce) { .ad-chev { transition:none; } }

/* D27 · Pago automático: beneficios, estado por casa y tarjeta con labels visibles. */
.dm-benef { list-style:none; display:flex; flex-direction:column; gap:.5rem; margin:0 0 1rem; padding:0; }
.dm-benef li { display:flex; align-items:center; gap:.6rem; font-size:.95rem; font-weight:600; }
.dm-benef svg { width:20px; height:20px; flex:none; color:var(--ok); }
.dm-casas { margin-bottom:1rem; }
.dm-casa .ra-t small .pill { margin-right:.3rem; }
.dm-form[hidden] { display:none; }
.dm-form .kit-affix > span svg { width:20px; height:20px; color:var(--accent); }
.grid2.dm-exp { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.75rem; margin-bottom:0; }
.dm-exp .field { margin-bottom:.4rem; }

/* D28 · Multa y pedir revisión; lista de multas. */
.pm-card { display:flex; flex-direction:column; gap:.5rem; }
.pm-pills { display:flex; flex-wrap:wrap; gap:.4rem; }
.pm-concepto { margin:0; font-size:1.15rem; font-weight:800; line-height:1.3; }
.pm-monto { font-size:1.9rem; font-weight:700; line-height:1.1; }
.pm-meta { margin:0; font-size:.88rem; color:var(--muted); }
.pm-desglose { margin-top:.3rem; padding:.7rem .9rem; border:1px solid var(--line); border-radius:12px; font-size:.92rem; }
.pm-desglose div { display:flex; justify-content:space-between; gap:1rem; padding:.2rem 0; }
.pm-desglose .tot { margin-top:.3rem; padding-top:.4rem; border-top:1px solid var(--line); font-weight:800; }
.pm-tachado { text-decoration:line-through; }
.pm-acciones { display:flex; flex-direction:column; gap:.6rem; margin-top:.6rem; }
.pm-acciones .field-hint { margin:0; text-align:center; }
.pm-fotos { display:flex; flex-wrap:wrap; gap:.5rem; margin:.4rem 0 .8rem; }
.pm-fotos img { width:120px; height:120px; object-fit:cover; border-radius:10px; border:1px solid var(--line); }
.pm-art { padding:.7rem .9rem; border-radius:10px; background:var(--tint); font-size:.92rem; }
.pm-art p { margin:.3rem 0 0; }
.pm-ap-head { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; margin-bottom:.6rem; }
.pm-ap-head h2 { flex:1; margin:0; font-size:1rem; }
.pm-cita { margin:.4rem 0; }
.pm-vacio { text-align:center; padding:2rem 1rem; }
.pm-vacio .ico-badge { margin:0 auto .8rem; }
.pm-vacio h2 { margin:0 0 .3rem; font-size:1.1rem; }
.pm-vacio p { margin:0; }
.pm-lista { margin-bottom:.8rem; }
.pm-lista .ra-row small .pill { margin-top:4px; }
#apelar .kit-lead { margin:0 0 .4rem; }
#apelar .foto-tile { margin-bottom:0; }
@media (min-width:768px) {
    .pm-acciones { flex-direction:row; flex-wrap:wrap; }
    .pm-acciones .btn.block { flex:1; width:auto; }
    .pm-acciones .field-hint { flex-basis:100%; }
}

/* Tabulador: en el teléfono el importe va debajo de la falta (los rangos no caben al lado). */
.pt-cat { margin:1.2rem 0 .5rem; font-size:.85rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); }
.pt-card > .pt-cat:first-child { margin-top:0; }
.pt-item { display:flex; flex-direction:column; gap:.35rem; padding:.8rem 0; border-bottom:1px solid var(--line); }
.pt-item:last-child { border-bottom:0; }
.pt-desc { min-width:0; }
.pt-item .art { font-size:.85rem; color:var(--muted); }
.pt-item .mto { font-weight:800; color:var(--ink); }
.pt-item .mto small { margin-left:.4rem; font-family:inherit; font-size:.78rem; font-weight:500; color:var(--muted); }
.pt-pie { margin-top:1rem; }
@media (min-width:768px) {
    .pt-item { flex-direction:row; justify-content:space-between; align-items:flex-start; gap:1rem; }
    .pt-item .mto { text-align:right; white-space:nowrap; }
    .pt-item .mto small { display:block; margin-left:0; }
}

/* Hub Pagos: las dos vistas usan la misma tarjeta y los mismos dos botones (arena + secundario). */
.pg-col { display:flex; flex-direction:column; gap:1rem; }
#pg-todas.pg-col { gap:1.5rem; }
.pg-vista[hidden], .pg-mov[hidden] { display:none !important; }
.pill.pg-pill-n { background:var(--cream); color:var(--muted); }
.pg-col .ra-cuota .top > .pill { flex:none; }
.pg-col .ra-cuota .pill.ok, .pg-col .ra-cuota .pill.pg-pill-n { background:color-mix(in srgb, var(--on-accent) 18%, transparent); color:var(--on-accent); }
.ra-casa-link.pg-cambiar { justify-content:center; width:100%; min-height:44px; }
.ra-list.pg-monedero { display:flex; align-items:center; gap:.75rem; padding:.875rem 1rem; background:var(--tint); border-color:transparent; }
.pg-mon-ic { display:inline-flex; color:var(--accent); }
.pg-mon-ic svg { width:24px; height:24px; }
.pg-monedero .ra-t { flex:1; font-size:.94rem; }
.pg-monedero b { color:var(--accent); }
.pg-monedero small { display:block; color:var(--muted); }
.pg-opts { display:flex; flex-direction:column; gap:10px; }
.pg-opts .ra-opt { text-decoration:none; }
#res-form .stepper { display:flex; width:100%; }
#res-form .stepper input { flex:1; min-width:0; width:auto; text-align:center; }
/* Dentro de .field el label del kit es block/15px: la hora vuelve a ser botón centrado. */
.field .cm-horas .qa-hora { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
    margin:0; padding:.2rem .2rem; font-size:.92rem; font-weight:700; }
.field .cm-horas .qa-hora .cupo { font-size:.62rem; line-height:1.1; }
#res-submit:disabled, .cm-cta:disabled { opacity:.55; cursor:not-allowed; }
.cm-acuse .pay-timeline .txt { display:flex; flex-direction:column; gap:2px; }
/* `.pay-timeline .rail` hereda el `.rail` del menú lateral (fixed, 264px, fondo oscuro): se neutraliza aquí. */
.cm-acuse .pay-timeline .rail { position:static; z-index:auto; width:auto; padding:0; gap:0; background:none;
    transform:none; transition:none; overflow:visible; align-self:stretch; }

/* ===== Residente · consistencia de textos ===== */
/* Alta de personal: en el teléfono la tarjeta de foto ya abre la cámara; la cámara en vivo (webcam)
   solo se ofrece en escritorio, para no mostrar dos «Tomar foto». */
.mp-cam-desk { display:none; }
.mp-cam-desk .cam-widget { margin-top:-.5rem !important; margin-bottom:1rem; }
@media (min-width:768px) and (hover:hover) and (pointer:fine) { .mp-cam-desk { display:block; } }

/* ===== Dueños · Folio del pase (D6) + estado de cuenta / Mis casas sin estilos en línea — prefijos pf- / ec2- / mpi- ===== */
/* Código corto del pase, dentro de la tarjeta oscura (.ax-pase / .hv-pase): plan B si el QR no lee. */
.pf-folio { display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:.75rem; }
.hv-pase .pf-folio { margin-top:0; }
.pf-folio .pf-k { font-size:.8rem; font-weight:600; color:color-mix(in srgb, var(--tint) 72%, var(--bg)); }
.pf-folio .pf-cod { font-size:1.6rem; font-weight:700; letter-spacing:.12em; line-height:1.2; color:var(--on-accent); }

/* Estado de cuenta (portal/estado_cuenta.php) */
.ec2-ayuda { font-size:.85rem; margin:-.4rem 0 .9rem; }
.card.ec2-intento { display:flex; align-items:center; gap:.7rem; margin-bottom:1rem; border:1px solid var(--accent2); color:inherit; text-decoration:none; }
.ec2-intento .ec2-ic { color:var(--accent); }
.ec2-intento .ec2-t { flex:1; min-width:0; }
.ec2-intento .ec2-sub { display:block; font-size:.8rem; }
.card.ec2-monedero { margin-bottom:1rem; border:1px solid var(--accent2); background:var(--tint); }
.ec2-monedero p { margin:0; font-size:.95rem; }
.ec2-monedero strong.mono { color:var(--accent); }
.ec2-monedero .muted { font-size:.85rem; }
.ec-saldo .acciones .btn.ec2-f3 { flex:3; }
.ec2-prog { font-size:.82rem; margin:0 0 .3rem; }
table.grid.ec2-grid { margin-top:.6rem; }
table.grid td.ec2-sel { text-align:center; }
table.grid td.ec2-vence { font-size:.85rem; }
.ec2-total { margin-left:.35rem; }
/* La barra de selección arranca oculta; el JS de la vista la muestra con style.display. */
#pay-bar.ec2-off { display:none; }

/* Mis casas (portal/mis_propiedades/index.php) */
.ra-head.mpi-head { justify-content:flex-start; }
.mpi-lista { display:flex; flex-direction:column; gap:12px; }
.ra-list.mpi-casa { display:flex; flex-direction:column; gap:.75rem; padding:1rem; color:var(--ink); text-decoration:none; }
.mpi-top { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.mpi-top .pill { flex:none; }
.mpi-tit { min-width:0; }
.mpi-tit b { display:block; font-size:1.125rem; font-weight:800; }
.mpi-tit .mpi-uso { display:block; font-size:.875rem; font-weight:500; color:var(--muted); margin-top:2px; }
.mpi-pie { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.mpi-ir { margin-left:auto; display:inline-flex; align-items:center; gap:2px; font-size:.94rem; font-weight:700; color:var(--accent); }
.mpi-falta { margin:0; font-size:.94rem; color:var(--muted); text-align:center; line-height:1.5; }
.mpi-falta a { color:var(--accent); font-weight:700; }

/* ===== Dueños · pendientes (reportar algo: varias fotos) ===== */
/* Miniaturas de 84 px con «Quitar» de 32 px y, debajo, el .foto-tile del kit como «Agregar». */
.rf-grid { display:flex; flex-wrap:wrap; gap:.6rem; margin:.15rem 0 .7rem; padding-top:6px; }
.rf-foto { position:relative; width:84px; height:84px; flex:0 0 84px; }
.rf-foto img { display:block; width:100%; height:100%; object-fit:cover; border-radius:14px; border:1px solid var(--line); }
.rf-quitar { position:absolute; top:-6px; right:-6px; width:32px; height:32px; padding:0; border-radius:50%; cursor:pointer;
    display:grid; place-items:center; border:2px solid var(--panel); background:var(--ink); color:var(--panel); }
.rf-quitar svg { width:16px; height:16px; }
.rf-quitar:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:2px; }

/* ===================== Caseta (guardia) — rediseño (docs/design/rediseño-app/caseta/impl-caseta.md) =====================
   Prefijo .cs-*. Base (fase A): modo noche, bloque de resultado, contacto, firma y tamaños táctiles.
   Cada pantalla agrega su bloque abajo con su sub-prefijo (.cs-turno-*, .cs-dir-*, .cs-sos-*…). */
:root { --accent-base: var(--accent); --cam: #0B0F0D; }   /* --cam: superficie de video (excepción documentada) */

/* Modo noche — tokens SOLO de la caseta (§1.1). Definir tokens es la excepción legítima al «cero hex». */
body.es-caseta[data-modo="noche"] {
    --cream:#111915; --bg:#0B110E; --panel:#1A2420; --ink:#E8EFEA; --muted:#A9B6AE; --line:#2E3B34;
    --accent: color-mix(in srgb, var(--accent-base) 55%, #fff);
    --accent2: color-mix(in srgb, var(--accent-base) 45%, #fff);
    --tint: color-mix(in srgb, var(--accent-base) 32%, #1A2420);
    --on-accent:#0F1712;
    --danger:#FF8E78; --danger-tint:#3B201B; --warn:#F2C46D; --warn-tint:#352A12; --ok:#86D9A6; --ok-tint:#173526;
    --info:#A5B4FC; --info-tint:#1E2240; --on-sand:#2A1E05; --on-dark-dim:#A9B6AE;
    color-scheme: dark; background:var(--cream) !important; color:var(--ink);
}
/* Los temas de firma (vidrio, clay…) pintan superficies claras con !important: de noche mandan los tokens. */
body.es-caseta[data-modo="noche"]::before { display:none !important; }
body.es-caseta[data-modo="noche"] main .card, body.es-caseta[data-modo="noche"] .tile,
body.es-caseta[data-modo="noche"] table.grid, body.es-caseta[data-modo="noche"] .segmented,
body.es-caseta[data-modo="noche"] .alert, body.es-caseta[data-modo="noche"] .btn.secondary {
    background:var(--panel) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    border-color:var(--line) !important; box-shadow:none !important; color:var(--ink); }
body.es-caseta[data-modo="noche"] .alert.warn { background:var(--warn-tint) !important; color:var(--warn); }
body.es-caseta[data-modo="noche"] .alert.error { background:var(--danger-tint) !important; color:var(--danger); }
body.es-caseta[data-modo="noche"] .alert.success { background:var(--ok-tint) !important; color:var(--ok); }
body.es-caseta[data-modo="noche"] main input, body.es-caseta[data-modo="noche"] main select,
body.es-caseta[data-modo="noche"] main textarea { background:var(--panel) !important; color:var(--ink); border-color:var(--line); }
body.es-caseta[data-modo="noche"] header.topbar { background:var(--bg) !important; color:var(--ink); border-color:var(--line); }
body.es-caseta[data-modo="noche"] .tabbar, body.es-caseta[data-modo="noche"] .caseta-barra { background:var(--panel); border-color:var(--line); }
/* Especificidad (0,0,1) con :where(): colorea enlaces sueltos de noche sin pelearse con los componentes. */
:where(body.es-caseta[data-modo="noche"]) a:where(:not(.btn)) { color:var(--accent); }
body.es-caseta[data-modo="noche"] .muted { color:var(--muted); }

/* Botón de luna (encabezado del Turno). */
.cs-modo { width:52px; height:52px; flex:none; border-radius:14px; border:1px solid var(--line); background:var(--panel);
    color:var(--ink); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.cs-modo svg { width:24px; height:24px; }
.cs-modo[aria-pressed="true"] { background:var(--tint); color:var(--accent); border-color:var(--accent); }

/* Tamaños táctiles (§1): primario de pantalla 64px, secundarias 52–56px, nunca < 48px. */
body.es-caseta .cs-cta .btn, body.es-caseta .btn.cs-xl { min-height:64px; font-size:1.08rem; font-weight:800; border-radius:16px; }
body.es-caseta .cs-cta { position:sticky; bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index:20;
    margin:1rem -1rem 0; padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--cream) 94%, transparent); border-top:1px solid var(--line); }
body.es-caseta .cs-cta .btn { width:100%; justify-content:center; }
body.es-caseta .cs-cta .hint { display:block; text-align:center; margin:.4rem 0 0; font-size:.8rem; font-weight:600; color:var(--muted); }
body.es-caseta .mono.cs-dato { font-size:22px; font-weight:700; letter-spacing:.04em; }
body.es-caseta .cs-dato mark { background:var(--tint); color:var(--accent); border-radius:4px; padding:0 2px; }

/* Bloque de resultado (partials/cs_resultado): se lee de lejos, nunca solo color. */
.cs-res { display:flex; align-items:center; gap:14px; min-height:96px; padding:14px 16px; border-radius:20px;
    border:2px solid currentColor; background:var(--panel); color:var(--muted); }
.cs-res.ok { background:var(--ok-tint); color:var(--ok); }
.cs-res.bad { background:var(--danger-tint); color:var(--danger); }
.cs-res.warn { background:var(--warn-tint); color:var(--warn); }
.cs-res-ic { width:60px; height:60px; flex:none; display:flex; align-items:center; justify-content:center; }
.cs-res-ic svg { width:52px; height:52px; }
.cs-res-t { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cs-res-t b { font-size:26px; font-weight:800; line-height:1.15; letter-spacing:-.01em; }
.cs-res-t span { font-size:15px; font-weight:600; color:var(--ink); }
.cs-res.chico { min-height:0; padding:8px 12px; border-width:1.5px; border-radius:14px; gap:10px; }
.cs-res.chico .cs-res-ic { width:28px; height:28px; } .cs-res.chico .cs-res-ic svg { width:24px; height:24px; }
.cs-res.chico .cs-res-t b { font-size:16px; }
.cs-res.chico .cs-res-t span { font-size:13px; }

/* Contacto (partials/cs_contacto): 64px; 52px en `chico`. */
.cs-contacto { display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); gap:.5rem; }
.cs-contacto .btn { min-height:64px; flex-direction:column; justify-content:center; gap:.25rem; font-weight:700; border-radius:16px; }
.cs-contacto .btn svg { width:24px; height:24px; color:var(--accent); }
.cs-contacto.chico .btn { min-height:52px; flex-direction:row; }

/* Firma (partials/cs_firma). */
.cs-firma-lienzo { position:relative; height:170px; border:1.5px dashed var(--line); border-radius:16px; background:var(--panel); touch-action:none; }
.cs-firma-lienzo canvas { position:absolute; inset:0; width:100%; height:100%; cursor:crosshair; }
.cs-firma-base { position:absolute; left:20px; right:20px; bottom:42px; border-bottom:1.5px solid var(--line); pointer-events:none; }
.cs-firma-ph { position:absolute; left:0; right:0; bottom:16px; text-align:center; font-size:14px; color:var(--muted); pointer-events:none; }
.cs-firma.con-trazo .cs-firma-ph { visibility:hidden; }
.cs-firma-pie { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.5rem; flex-wrap:wrap; }
.cs-firma-pie .btn { min-height:48px; }

/* ===== Caseta · K3 Registrar llegada (C7) + espera de la visita sin pase + reasignar ===== */
.cs-reg-head { display:flex; align-items:center; gap:12px; margin:0 0 1rem; }
.cs-reg-head h1 { margin:0; font-size:1.375rem; font-weight:800; line-height:1.2; }
.cs-reg { display:flex; flex-direction:column; gap:1.25rem; }
.cs-reg .field { margin:0; }
.cs-reg .lbl, .cs-reg .field > label { display:block; font-size:1rem; font-weight:800; margin-bottom:.5rem; color:var(--ink); }
.cs-reg .opt { font-size:.875rem; font-weight:600; color:var(--muted); margin-left:4px; }
.cs-reg [hidden], .cs-reg-hoja [hidden] { display:none !important; }
.cs-reg input[type=text] { min-height:56px; font-size:1.0625rem; font-weight:700; border-radius:16px; }
.cs-reg input.mono { font-family:'Space Mono', ui-monospace, monospace; letter-spacing:.04em; text-transform:uppercase; }
/* ¿Quién llegó? — 4 tarjetas (radios). */
.cs-reg-tipos { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.cs-reg-tipo { position:relative; display:flex; align-items:center; gap:10px; min-height:68px; padding:10px 12px; border-radius:18px;
    border:2px solid var(--line); background:var(--panel); color:var(--ink); font-size:1rem; font-weight:800; line-height:1.2; cursor:pointer; }
.cs-reg-tipo input { position:absolute; opacity:0; width:0 !important; height:0 !important; min-height:0 !important; }
.cs-reg-tipo-ic { width:42px; height:42px; flex:none; border-radius:12px; background:var(--tint); color:var(--accent); display:grid; place-items:center; }
.cs-reg-tipo-ic svg { width:22px; height:22px; }
.cs-reg-tipo:has(input:checked) { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.cs-reg-tipo:has(input:focus-visible) { outline:3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:2px; }
/* ¿A qué casa? — dato en --tint con «Cambiar» (abre la hoja con buscador). */
.cs-reg-casa { display:flex; align-items:center; gap:12px; min-height:60px; padding:6px 6px 6px 16px; border-radius:16px;
    background:var(--tint); border:2px solid var(--accent); color:var(--ink); }
.cs-reg-casa > svg { width:22px; height:22px; color:var(--accent); flex:none; }
.cs-reg-casa .v { flex:1; min-width:0; font-size:1.125rem; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-reg-casa.vacia { background:var(--panel); border-style:dashed; border-color:color-mix(in srgb, var(--accent) 50%, var(--line)); }
.cs-reg-casa.vacia .v { color:var(--muted); font-weight:700; }
.cs-reg-casa button { flex:none; min-height:48px; padding:0 16px; border-radius:12px; border:0; background:var(--panel); color:var(--accent);
    font:inherit; font-size:.95rem; font-weight:800; cursor:pointer; }
.cs-reg-casa.vacia button { background:var(--accent); color:var(--on-accent); }
.field.error .cs-reg-casa { border-color:var(--danger); }
.cs-reg .field-hint { margin-top:.4rem; }
/* Chips de caseta: 48px, borde 2px. */
.cs-reg .qa-chips { gap:8px; margin-top:0; }
.cs-reg .qa-chip { min-height:48px; padding:0 16px; border-width:2px; font-size:.95rem; font-weight:800; }
.cs-reg-aviso { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:14px; background:var(--tint); color:var(--ink);
    font-size:.95rem; font-weight:700; line-height:1.45; }
.cs-reg-aviso svg { width:20px; height:20px; flex:none; color:var(--accent); margin-top:2px; }
.cs-reg .foto-tile { margin:0; }
.cs-reg .qa-avanzado { margin:0; }
.cs-reg-nota { margin:-.25rem 0 1rem; font-size:.95rem; color:var(--muted); line-height:1.45; }
/* Hoja de casas: buscador + lista filtrable. */
.cs-reg-busca { position:relative; }
.cs-reg-busca svg { position:absolute; left:16px; top:50%; transform:translateY(-50%); width:22px; height:22px; color:var(--muted); pointer-events:none; }
.cs-reg-busca input { width:100%; min-height:56px; padding-left:48px; font-size:1.0625rem; font-weight:700; border-radius:16px; }
.cs-reg-lista { display:flex; flex-direction:column; gap:10px; }
.cs-reg-lista .ra-opt + .ra-opt { margin-top:0; }
.cs-reg-lista .ra-opt { min-height:64px; }
.cs-reg-sin { margin:0; text-align:center; padding:1rem 0; }
/* Esperando a la casa (pendientes de autorización, arriba del formulario). */
.cs-reg-pend { margin:0 0 1.25rem; display:flex; flex-direction:column; gap:8px; }
.cs-reg-pend .kit-sec-t { margin:0 0 .2rem; }
.cs-reg-pend-item, .cs-reg-alta { display:flex; align-items:center; gap:12px; min-height:64px; padding:10px 14px; border-radius:16px;
    background:var(--warn-tint); border:1.5px solid var(--warn); color:var(--ink); text-decoration:none; }
.cs-reg-pend-ic { width:40px; height:40px; flex:none; border-radius:12px; background:var(--panel); color:var(--warn); display:grid; place-items:center; }
.cs-reg-pend-ic svg { width:22px; height:22px; }
.cs-reg-pend-t, .cs-reg-alta-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cs-reg-pend-t b, .cs-reg-alta-t b { font-size:1rem; font-weight:800; overflow-wrap:anywhere; }
.cs-reg-pend-t small, .cs-reg-alta-t small { font-size:.875rem; font-weight:600; color:var(--muted); }
.cs-reg-pend-item > svg:last-child, .cs-reg-alta > svg:last-child { width:20px; height:20px; flex:none; color:var(--muted); }
.cs-reg-alta { background:var(--panel); border-color:var(--line); margin:0 0 1.2rem; }
body.es-caseta a.cs-reg-pend-item, body.es-caseta a.cs-reg-alta { color:var(--ink); }   /* de noche los <a> van en --accent */
/* Pantalla de espera del guardia. */
.cs-esp { display:flex; flex-direction:column; gap:1rem; }
.cs-esp .kit-sec-t { margin:.25rem 0 0; }
.cs-esp-quien { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:18px; background:var(--panel); border:1px solid var(--line); }
.cs-esp-ic { width:52px; height:52px; flex:none; border-radius:14px; background:var(--tint); color:var(--accent); display:grid; place-items:center; }
.cs-esp-ic svg { width:26px; height:26px; }
.cs-esp-quien > div { display:flex; flex-direction:column; gap:3px; min-width:0; }
.cs-esp-quien b { font-size:1.25rem; font-weight:800; line-height:1.2; overflow-wrap:anywhere; }
.cs-esp-quien span { font-size:.95rem; font-weight:600; color:var(--muted); }
.cs-esp-quien .cs-dato { color:var(--ink); }
.cs-rea-quien { margin:0 0 .75rem; }
.cs-esp-reloj { display:flex; align-items:center; gap:14px; min-height:96px; padding:14px 16px; border-radius:20px;
    border:2px solid var(--accent); background:var(--tint); color:var(--ink); }
.cs-esp-reloj-ic { width:48px; height:48px; flex:none; display:grid; place-items:center; color:var(--accent); }
.cs-esp-reloj-ic svg { width:40px; height:40px; }
.cs-esp-reloj-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cs-esp-reloj-t b { font-size:1.2rem; font-weight:800; line-height:1.15; }
.cs-esp-reloj-t span { font-size:.9rem; font-weight:600; }
.cs-esp-cuenta { font-size:1.75rem; font-weight:700; letter-spacing:.02em; flex:none; }
.cs-esp-reloj.vencio { border-color:var(--warn); background:var(--warn-tint); }
.cs-esp-reloj.vencio .cs-esp-reloj-ic, .cs-esp-reloj.vencio .cs-esp-cuenta { color:var(--warn); }
.cs-esp-barra { height:6px; border-radius:3px; background:var(--line); overflow:hidden; margin-top:-.5rem; }
.cs-esp-barra span { display:block; height:100%; width:0; background:var(--accent); transition:width 1s linear; }
.cs-esp-nota { margin:0; font-size:.9rem; }
.cs-esp-nopasa .btn { width:100%; min-height:56px; justify-content:center; }
/* De noche `.btn` pinta texto --on-accent (oscuro): el danger-soft necesita su rojo claro. */
body.es-caseta[data-modo="noche"] .cs-esp-nopasa .btn.danger-soft { color:var(--danger); }
@media (prefers-reduced-motion: reduce) { .cs-esp-barra span { transition:none; } }
/* Residente: aceptar / rechazar la visita sin pase. */
.av-wrap { display:flex; flex-direction:column; gap:1rem; max-width:560px; }
.av-wrap .qa-frase { margin:0; }
.av-wrap .ax-filas { margin:0; }
.av-acts { display:flex; flex-direction:column; gap:.6rem; }
.av-acts form { margin:0; }
.av-btn { min-height:60px; font-size:1.05rem; }
.av-nota { margin:-.4rem 0 0; text-align:center; }
@media (min-width:768px) {
    .cs-reg-tipos { grid-template-columns:repeat(4, minmax(0,1fr)); }
    .cs-reg, .cs-esp, .cs-reg-pend { max-width:760px; }
}

/* ===== Caseta · K4 paquetería, entrega con firma, huésped, evento, brazaletes, reservas =====
   impl-caseta.md C9, C10, C12, C13 + vistas de consulta. Sub-prefijos: .cs-lst-* (lista de tarjetas que
   comparten paquetería, huéspedes, eventos y reservas), .cs-pk-* (paquetería), .cs-ent-* (entregar),
   .cs-hu-* (huésped), .cs-ev-* (evento), .cs-brz-* (brazaletes), .cs-k4-* (cabecera con «atrás»).
   Los enlaces se fijan con `body.es-caseta …` para ganarle al color de enlace del modo noche. */

/* Cabecera con «atrás» (52px) — entregar, huésped, evento, brazaletes. */
body.es-caseta .cs-k4-atras { width:52px; height:52px; flex:none; border-radius:16px; border:1px solid var(--line);
    background:var(--panel); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.cs-k4-atras svg { width:24px; height:24px; }
.cs-ent-cab, .cs-hu-cab, .cs-ev-cab, .cs-brz-cab { display:flex; align-items:center; gap:12px; margin:0 0 1rem; }
.cs-ent-cab > div, .cs-ev-cab > div, .cs-brz-cab > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cs-ent-cab h1, .cs-hu-cab h1, .cs-ev-cab h1, .cs-brz-cab h1 { margin:0; font-size:22px; font-weight:800; line-height:1.2; overflow-wrap:anywhere; }
.cs-ent-cab > div > span, .cs-ev-cab > div > span, .cs-brz-cab > div > span { font-size:15px; font-weight:700; color:var(--muted); overflow-wrap:anywhere; }
.cs-k4-sec { margin:.4rem 0 0; font-size:13px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }

/* Lista de tarjetas: una acción principal (56px) + ⋮ (56px). */
.cs-lst { display:flex; flex-direction:column; gap:14px; }
.cs-lst > .alert, .cs-lst > .kit-lead { margin:0; }
.cs-lst-h1 { margin:0; font-size:24px; font-weight:800; }
.cs-lst-h1 + .kit-lead { margin-top:-8px; }
.cs-lst-filtro { display:grid; gap:10px; padding:12px; margin:0; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.cs-lst-filtro .field { margin:0; }
.cs-lst-filtro .btn { min-height:52px; justify-content:center; }
.cs-lst-nota { margin:0; font-size:14px; font-weight:600; color:var(--muted); }
.cs-lst-lista { display:flex; flex-direction:column; gap:10px; }
.cs-lst-card { display:flex; flex-direction:column; gap:12px; padding:14px; border-radius:20px; background:var(--panel); border:1px solid var(--line); min-width:0; }
.cs-lst-card.late { border:2px solid var(--warn); }
.cs-lst-top { display:flex; gap:12px; align-items:flex-start; min-width:0; }
.cs-lst-th { width:56px; height:56px; flex:none; border-radius:14px; background:var(--tint); color:var(--accent);
    display:grid; place-items:center; object-fit:cover; font-size:22px; font-weight:800; }
img.cs-lst-th { border:1px solid var(--line); cursor:zoom-in; }
.cs-lst-th svg { width:26px; height:26px; }
.cs-lst-meta { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.cs-lst-meta > b { font-size:19px; font-weight:800; line-height:1.2; overflow-wrap:anywhere; }
.cs-lst-meta small { font-size:14px; font-weight:600; color:var(--muted); line-height:1.35; overflow-wrap:anywhere; }
.cs-lst-edad { display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:800; color:var(--muted); }
.cs-lst-edad.late { color:var(--warn); }
.cs-lst-edad .ic svg { width:15px; height:15px; }
.cs-lst-acts { display:flex; gap:8px; align-items:center; }
.cs-lst-acts > form { flex:1; display:flex; margin:0; }
.cs-lst-acts .gv-menu { margin-left:auto; }
body.es-caseta .cs-lst-btn, body.es-caseta .cs-lst-acts > form .btn { flex:1; min-height:56px; justify-content:center; font-size:17px; font-weight:800; border-radius:16px; }
body.es-caseta .cs-lst-btn.cs-lst-btn2 { min-height:52px; font-size:16px; }
.cs-lst-acts .gv-more { width:56px; height:56px; flex:0 0 56px; border-radius:16px; border:1.5px solid var(--line); background:var(--panel); color:var(--ink); }
.cs-lst-acts .gv-more svg { width:24px; height:24px; }
.cs-lst-vacio { display:flex; flex-direction:column; align-items:center; gap:8px; padding:24px 16px; text-align:center;
    border:1.5px dashed var(--line); border-radius:20px; background:var(--panel); }
.cs-lst-vacio b { font-size:16px; }
.cs-lst-vacio > span:not(.cs-lst-th) { font-size:14px; color:var(--muted); line-height:1.45; }
body.es-caseta .cs-lst-add { display:flex; align-items:center; justify-content:center; gap:10px; min-height:56px; border-radius:16px;
    border:2px dashed color-mix(in srgb, var(--accent) 50%, var(--line)); background:color-mix(in srgb, var(--accent) 5%, var(--panel));
    color:var(--accent); font-size:17px; font-weight:800; text-decoration:none; }
.cs-lst-add svg { width:22px; height:22px; }
.cs-hus-ini { text-transform:uppercase; }

/* C9 · Paquetería: 3 cifras, segmentado de 48px, filtros plegados. */
.cs-pk-kpis { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
body.es-caseta .cs-pk-kpi { display:flex; flex-direction:column; gap:2px; padding:10px 12px; min-width:0; border-radius:16px;
    background:var(--panel); border:1px solid var(--line); color:var(--ink); text-decoration:none; }
.cs-pk-kpi b { font-size:24px; line-height:1.1; overflow-wrap:anywhere; }
.cs-pk-kpi span { font-size:12px; font-weight:800; color:var(--muted); }
body.es-caseta .cs-pk-kpi.warn { border:2px solid var(--warn); background:var(--warn-tint); }
.cs-pk-kpi.warn b, .cs-pk-kpi.warn span { color:var(--warn); }
.cs-pk-seg { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:4px; padding:4px; margin:0;
    border-radius:16px; background:var(--panel); border:1px solid var(--line); }
body.es-caseta .cs-pk-seg a { min-height:48px; display:flex; align-items:center; justify-content:center; gap:6px; padding:0 6px; border-radius:12px;
    font-size:15px; font-weight:800; line-height:1.15; text-align:center; color:var(--muted); text-decoration:none; }
body.es-caseta .cs-pk-seg a.on { background:var(--accent); color:var(--on-accent); }
.cs-pk-seg a:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:1px; }
.cs-pk-n { min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:var(--tint); color:var(--accent); font-size:12px; display:inline-grid; place-items:center; }
.cs-pk-seg a.on .cs-pk-n { background:color-mix(in srgb, var(--on-accent) 22%, transparent); color:var(--on-accent); }
.cs-pk-filtros { border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.cs-pk-filtros > summary, .cs-ent-mas > summary { list-style:none; min-height:52px; display:flex; align-items:center; gap:8px; padding:0 14px;
    font-size:15px; font-weight:800; color:var(--ink); cursor:pointer; }
.cs-pk-filtros > summary::-webkit-details-marker, .cs-ent-mas > summary::-webkit-details-marker { display:none; }
.cs-pk-filtros > summary svg, .cs-ent-mas > summary svg { width:20px; height:20px; }
.cs-pk-chev, .cs-ent-chev { margin-left:auto; display:inline-flex; transition:transform .15s; }
.cs-pk-filtros[open] .cs-pk-chev, .cs-ent-mas[open] .cs-ent-chev { transform:rotate(180deg); }
.cs-pk-filtros-f { display:grid; gap:10px; padding:0 14px 14px; margin:0; }
.cs-pk-filtros-f .field { margin:0; }
.cs-pk-filtros-f .btn { min-height:52px; justify-content:center; }
.cs-pk-fechas { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.cs-pk-aviso { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.cs-pk-aviso > span { flex:1 1 14rem; }
.cs-pk-aviso form { margin:0; }
.cs-pk-aviso .btn { min-height:52px; }
.cs-lst-meta small.cs-pk-ins { color:var(--ink); }
.cs-pk-firma { display:inline-flex; align-items:center; gap:4px; }
.cs-pk-clave { text-align:center; }
.cs-pk-clave-t { margin:0; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.cs-pk-clave-v { margin:.2rem 0; font-size:2.6rem; font-weight:700; word-break:break-all; }

/* C10 · Entregar paquete (página y hoja). */
.cs-ent { display:flex; flex-direction:column; gap:18px; margin:0; }
.cs-ent .field, .cs-ent .sw-row, .cs-ent .foto-tile { margin:0; }
.cs-ent-quien { display:flex; flex-wrap:wrap; gap:8px; }
.cs-ent-quien .qa-chip { min-height:52px; padding:0 18px; display:inline-flex; align-items:center; font-size:16px; font-weight:700; }
.cs-ent-mas { border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.cs-ent-mas > summary { color:var(--accent); }
.cs-ent-mas > .field { padding:0 14px 14px; }
.cs-ent-tit { display:flex; flex-direction:column; gap:2px; padding-right:56px; }
.cs-ent-tit h2 { margin:0; font-size:22px; font-weight:800; }
.cs-ent-tit span { font-size:15px; font-weight:700; color:var(--muted); }
.cs-ent-pagina, .cs-ent-cab { max-width:640px; }
.cs-ent-hoja .gv-sheet-body { padding-top:14px; }
.cs-ent-cerrar { position:absolute; top:10px; right:10px; width:48px; height:48px; border-radius:14px; border:1px solid var(--line);
    background:var(--panel); color:var(--ink); display:grid; place-items:center; cursor:pointer; z-index:2; }
.cs-ent-cerrar svg { width:22px; height:22px; }
body.es-caseta .gv-sheet .cs-ent-cta { bottom:0; margin:0 -16px calc(-18px - env(safe-area-inset-bottom));
    padding:12px 16px calc(14px + env(safe-area-inset-bottom)); background:var(--panel); }
@media (min-width:768px) {
    .cs-ent-hoja .gv-sheet-body { width:min(600px, calc(100vw - 2rem)); }
    body.es-caseta .gv-sheet .cs-ent-cta { margin:0 -1.5rem -1.3rem; padding:.9rem 1.5rem 1.2rem; border-radius:0 0 18px 18px; }
}

/* C12 · Huésped en caseta. */
.cs-hu, .cs-ev, .cs-brz { display:flex; flex-direction:column; gap:16px; max-width:720px; }
.cs-hu > .cs-hu-cab, .cs-ev > .cs-ev-cab, .cs-brz > .cs-brz-cab, .cs-brz > .alert, .cs-brz > .kit-lead, .cs-brz > .field,
.cs-hu > .hv-filas, .cs-ev > .field { margin:0; }
.cs-hu-id { display:flex; gap:14px; align-items:center; }
.cs-hu-foto { width:76px; height:76px; flex:none; border-radius:20px; background:var(--tint); color:var(--accent);
    display:grid; place-items:center; font-size:24px; font-weight:800; object-fit:cover; }
img.cs-hu-foto { cursor:zoom-in; border:1px solid var(--line); }
.cs-hu-nom { display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
.cs-hu-nom b { font-size:21px; font-weight:800; line-height:1.2; overflow-wrap:anywhere; }
.cs-hu-nom > span:not(.pill) { font-size:15px; font-weight:700; color:var(--muted); }
.cs-hu-cajas { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.cs-hu-cajas > div { display:flex; flex-direction:column; gap:2px; padding:12px; min-width:0; border-radius:16px; background:var(--panel); border:1px solid var(--line); }
.cs-hu-cajas span { font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.cs-hu-cajas b { font-size:16px; }
.cs-hu-form { display:flex; flex-direction:column; gap:16px; margin:0; }
.cs-hu-form section .cs-k4-sec { margin:0 0 10px; }
.cs-hu-reqs { border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--panel); }
.cs-hu-req { position:relative; display:flex; align-items:center; gap:14px; min-height:60px; padding:8px 14px; margin:0;
    border-top:1px solid var(--line); font-size:16px; font-weight:700; color:var(--ink); cursor:pointer; }
.cs-hu-req:first-child { border-top:0; }
.cs-hu-req input[type=checkbox] { position:absolute; opacity:0; width:1px !important; height:1px !important; min-width:0; margin:0; pointer-events:none; }
.cs-hu-bx { width:30px; height:30px; flex:none; border-radius:9px; border:2.5px solid var(--muted); display:grid; place-items:center; color:transparent; }
.cs-hu-bx svg { width:20px; height:20px; }
.cs-hu-req:has(input:checked) .cs-hu-bx { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.cs-hu-req:has(input:focus-visible) { outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:-3px; }
.cs-hu-pax { display:flex; align-items:center; gap:10px; min-height:64px; padding:6px 6px 6px 16px; border-radius:16px; border:1.5px solid var(--line); background:var(--panel); }
.cs-hu-pax label { flex:1; margin:0; font-size:16px; font-weight:800; }
.cs-hu-pax .stepper, #cs-ev-nolist .stepper { border-radius:14px; }
.cs-hu-pax .stepper button, #cs-ev-nolist .stepper button { width:52px; min-height:52px; display:grid; place-items:center; background:var(--tint); color:var(--accent); }
.cs-hu-pax .stepper button svg, #cs-ev-nolist .stepper button svg { width:22px; height:22px; }
.cs-hu-pax .stepper input { width:56px; font-family:'Space Mono',ui-monospace,monospace; font-size:24px; font-weight:700; }
.cs-hu-salida { display:flex; flex-direction:column; gap:6px; margin:0; }
.cs-hu-salida .btn { min-height:56px; justify-content:center; }
.cs-hu-cta { display:flex; flex-direction:column; gap:10px; }
body.es-caseta .cs-cta .btn.cs-hu-braz { min-height:56px; font-size:1rem; }
body.es-caseta .cs-hu-cta .btn:disabled, body.es-caseta .cs-brz .cs-cta .btn:disabled {
    background:color-mix(in srgb, var(--muted) 28%, var(--panel)); color:var(--muted); border-color:transparent; opacity:1; cursor:not-allowed; }

/* C13 · Evento: llegadas. */
.cs-ev-prog { display:flex; flex-direction:column; gap:8px; padding:14px 16px; border-radius:18px; background:var(--panel); border:1px solid var(--line); }
.cs-ev-prog > div:first-child { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.cs-ev-prog > div:first-child span { font-size:15px; font-weight:800; }
.cs-ev-prog b { font-size:22px; }
.cs-ev-barra { height:12px; border-radius:999px; background:var(--tint); overflow:hidden; }
.cs-ev-barra i { display:block; height:100%; border-radius:inherit; background:var(--accent); }
.cs-ev-busca-in { position:relative; }
.cs-ev-busca-in svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--muted); pointer-events:none; }
.field .cs-ev-busca-in input { padding-left:44px; min-height:56px; }
.cs-ev-lista { border:1px solid var(--line); border-radius:18px; background:var(--panel); overflow:hidden; }
.cs-ev-fila { display:flex; align-items:center; gap:12px; min-height:76px; padding:10px 12px 10px 16px; border-top:1px solid var(--line); scroll-margin-top:120px; }
.cs-ev-fila:first-child { border-top:0; }
.cs-ev-fila:target { background:var(--tint); }
.cs-ev-nom { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cs-ev-nom b { font-size:17px; font-weight:800; overflow-wrap:anywhere; }
.cs-ev-nom small { font-size:14px; font-weight:600; color:var(--muted); }
.cs-ev-fila form { flex:none; margin:0; }
body.es-caseta .cs-ev-llego { min-height:56px; min-width:116px; justify-content:center; border-radius:16px; font-size:16px; font-weight:800; }
.cs-ev-fila .pill { display:inline-flex; align-items:center; gap:4px; }
.cs-ev-fila .pill svg { width:14px; height:14px; }
.cs-ev-nadie { margin:0; padding:16px; }
body.es-caseta .cs-ev-otro { min-height:56px; justify-content:center; border-radius:16px; font-size:16px; font-weight:800; }
.cs-ev-nolist-p { margin:0; font-size:15px; line-height:1.45; }

/* Brazaletes (modo caseta). */
.cs-brz-dados { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--panel); }
.cs-brz-dado { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px; padding:8px 8px 8px 16px; border-top:1px solid var(--line); }
.cs-brz-dado:first-child { border-top:0; }
.cs-brz-dado .mono { font-size:20px; font-weight:700; letter-spacing:.04em; }
.cs-brz-dado form { margin:0; }
.cs-brz-dado .btn { min-height:48px; }
body.es-caseta .cs-brz-dado .btn.danger-soft { color:var(--danger); }
.cs-brz-chips { display:flex; flex-wrap:wrap; gap:8px; max-height:320px; overflow:auto; padding:2px; }
.cs-brz-chip { position:relative; display:inline-flex; align-items:center; min-height:52px; padding:0 16px; border-radius:14px;
    border:1.5px solid var(--line); background:var(--panel); color:var(--ink); font-size:18px; font-weight:700; cursor:pointer; user-select:none; }
.cs-brz-chip input[type=checkbox] { position:absolute; opacity:0; width:1px !important; height:1px !important; min-width:0; margin:0; pointer-events:none; }
.cs-brz-chip:has(input:checked) { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.cs-brz-chip:has(input:disabled) { opacity:.45; cursor:not-allowed; }
.cs-brz-chip:has(input:focus-visible) { outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:2px; }
.cs-brz-pago { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.cs-brz-pago > span { flex:1 1 14rem; }
.cs-brz-pago form { margin:0; }
.cs-brz-pago .btn { min-height:52px; }
.cs-brz-nada { margin:0; }
.cs-brz-casetas { grid-auto-flow:row; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); }
#brz-form { display:flex; flex-direction:column; gap:12px; margin:0; }
#brz-form .field { margin:0; }

@media (min-width:768px) {
    .cs-lst-filtro { grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; align-items:end; }
    .cs-lst-filtro:not(:has(input[type=date])) { grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; }
    .cs-pk-filtros-f { grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto; align-items:end; }
    .cs-pk-filtros-f:has(.cs-pk-fechas) { grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; }
}
@media (min-width:1024px) {
    /* Tablet/escritorio: dos columnas de tarjetas (se comparan de un vistazo). */
    .cs-lst-lista { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start; }
    .cs-lst-lista > .pager, .cs-lst-lista > nav { grid-column:1 / -1; }
}

/* ===== Caseta · navegación y turno (K1: barra §2.1, menú C1, Turno C0, tablet C3) =====
   Nota de especificidad: de noche, `body.es-caseta[data-modo="noche"] a` (0,2,2) pinta TODO enlace en
   --accent. Los enlaces que deben conservar su color (tiles, barra, menú, columna lateral) llevan un
   selector de (0,3,x): contenedor + clase + `[href]`/`[class]`. */

/* §2.1 Barra inferior — 88 px: fila de 60 + respiro que crece hasta la safe area. `--tabbar-h` separa
   del fondo los CTA fijos (.cs-cta, .sticky-cta, .gv-cta) y el toast de deshacer. */
body.tiene-barra-caseta { --tabbar-h:88px; }
.cs-bar { position:fixed; z-index:36; left:0; right:0; bottom:0; display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr)) minmax(0, 1.5fr); gap:4px;
    background:var(--panel); border-top:1px solid var(--line); padding:8px 8px max(20px, env(safe-area-inset-bottom)); }
.cs-bar .cs-bar-item[href], .cs-bar .cs-bar-sos[class] { position:relative; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:4px; min-height:60px; min-width:0; border-radius:14px; text-decoration:none; border:0;
    background:transparent; cursor:pointer; font-family:inherit; color:var(--muted); font-size:12px; font-weight:700; padding:0 2px; }
.cs-bar svg { width:24px; height:24px; flex:none; }
.cs-bar-lbl { max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-bar .cs-bar-item.active[href] { color:var(--accent); background:var(--tint); font-weight:800; }
.cs-bar-badge { position:absolute; top:2px; left:calc(50% + 6px); min-width:20px; height:20px; padding:0 5px; box-sizing:border-box;
    border-radius:10px; background:var(--danger); color:var(--on-accent); font-size:11px; font-weight:700;
    display:inline-flex; align-items:center; justify-content:center; }
/* El SOS no compite por altura: compite por ancho. */
.cs-bar .cs-bar-sos[class] { flex-direction:row; gap:6px; background:var(--danger); color:var(--on-accent); font-size:15px; font-weight:800; letter-spacing:.02em; }
.cs-bar .cs-bar-sos svg { width:22px; height:22px; }
.cs-bar-item:focus-visible, .cs-bar-sos:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset:2px; }
.cs-bar-sos.viva, .cs-turno-lado-sos.viva { animation:cs-bar-pulso 1.4s ease-out infinite; }
@keyframes cs-bar-pulso { 0%,100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--danger) 55%, transparent); }
                          70%     { box-shadow:0 0 0 12px color-mix(in srgb, var(--danger) 0%, transparent); } }
@media (prefers-reduced-motion:reduce) {
    .cs-bar-sos.viva, .cs-turno-lado-sos.viva { animation:none; outline:3px solid color-mix(in srgb, var(--danger) 55%, transparent); outline-offset:2px; }
}
/* Hoja del SOS (mantener 2 s para disparar). */
.cs-bar-tipos { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.cs-bar-tipo { min-height:56px; display:flex; align-items:center; justify-content:center; gap:.4rem; border-radius:12px;
    border:2px solid transparent; background:var(--danger-tint); color:var(--danger); font-family:inherit;
    font-size:.9rem; font-weight:800; cursor:pointer; padding:.4rem .5rem; text-align:center; }
.cs-bar-tipo svg { width:19px; height:19px; flex:0 0 19px; }
.cs-bar-tipo.sel { border-color:var(--danger); background:color-mix(in srgb, var(--danger) 16%, var(--panel)); }
.cs-bar-tipo:focus-visible, .cs-bar-fire:focus-visible, .cs-bar-activas:focus-visible {
    outline:3px solid color-mix(in srgb, var(--danger) 55%, transparent); outline-offset:2px; }
.gv-sheet .cs-bar-activas[href] { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:48px;
    border-radius:12px; background:var(--tint); color:var(--accent); font-weight:800; font-size:.9rem; text-decoration:none; }
.gv-sheet .cs-bar-activas[hidden] { display:none; }
.cs-bar-activas svg { width:18px; height:18px; }
.cs-bar-fire { position:relative; overflow:hidden; min-height:60px; border:0; border-radius:13px; background:var(--danger);
    color:var(--on-accent); font-family:inherit; font-size:1rem; font-weight:800; cursor:pointer;
    touch-action:none; -webkit-user-select:none; user-select:none; }
.cs-bar-fill { position:absolute; inset:0 auto 0 0; width:0; background:color-mix(in srgb, var(--ink) 28%, transparent); transition:width .05s linear; }
.cs-bar-fire-txt { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; }
.cs-bar-fire svg { width:20px; height:20px; }
.cs-bar-nota { margin:0; font-size:.79rem; font-weight:600; color:var(--muted); line-height:1.5; }
/* Escritorio: la barra no existe (no hay tab bar); navega la reja o la columna de la tablet. */
@media (min-width:768px) { .cs-bar { display:none; } body.tiene-barra-caseta { --tabbar-h:0px; } }
html.kaan-embed .cs-bar { display:none !important; }
@media print { .cs-bar { display:none !important; } }

/* Teléfono, fuera del Turno: «Turno» (regresar) y «Menú» (C1). */
.cs-nav-fila { display:flex; justify-content:space-between; gap:8px; margin:0 0 12px; }
.cs-nav-fila .cs-nav-btn[class] { display:inline-flex; align-items:center; gap:8px; min-height:52px; padding:0 14px;
    border-radius:16px; background:var(--panel); border:1px solid var(--line); color:var(--ink); font:inherit;
    font-size:15px; font-weight:800; text-decoration:none; cursor:pointer; }
.cs-nav-btn svg { width:22px; height:22px; color:var(--accent); }
@media (min-width:768px) { .cs-nav-fila { display:none; } }

/* Escritorio: reja táctil con todas las pestañas (operativas al frente, a doble ancho). */
.cs-reja { display:none; }
@media (min-width:768px) {
    .cs-reja { display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:.4rem; margin:0 0 1.25rem;
        padding:0 0 .7rem; border-bottom:1px solid var(--line); }
    .cs-reja .cs-reja-tab[href], .cs-reja .cs-reja-turno[href] { position:relative; display:flex; flex-direction:column; align-items:center;
        justify-content:center; gap:.25rem; padding:.5rem .35rem; border-radius:12px; text-decoration:none; text-align:center;
        background:var(--tint); color:var(--ink); border:1px solid transparent; min-height:62px; transition:transform .08s; }
    .cs-reja .cs-reja-tab[href]:hover, .cs-reja .cs-reja-turno[href]:hover { border-color:var(--accent); }
    .cs-reja .cs-reja-tab[href]:active { transform:scale(.97); }
    .cs-reja .cs-reja-tab.active[href], .cs-reja .cs-reja-turno.active[href] { background:var(--accent); color:var(--on-accent); }
    .cs-reja-ico { display:inline-flex; line-height:1; }
    .cs-reja-ico svg { width:24px; height:24px; }
    .cs-reja-lbl { font-size:.74rem; font-weight:700; line-height:1.15; }
    /* El regreso al tablero: es el «dónde estoy parado», no una pestaña más. */
    .cs-reja .cs-reja-turno[href] { background:transparent; border:1px dashed color-mix(in srgb, var(--accent) 45%, transparent); color:var(--accent); }
    .cs-reja .cs-reja-turno.active[href] { border-style:solid; }
    .cs-reja-badge { position:absolute; top:4px; right:6px; min-width:20px; height:20px; padding:0 5px; box-sizing:border-box;
        border-radius:10px; background:var(--accent); color:var(--on-accent); font-size:.68rem; font-weight:700;
        display:inline-flex; align-items:center; justify-content:center; }
    .cs-reja-badge.warn { background:var(--warn); }
    .cs-reja-tab.active .cs-reja-badge { background:var(--on-accent); color:var(--accent); }
    /* Consulta (Historial, Alertas SOS): otro permiso, no es operación de puerta. */
    .cs-reja .cs-reja-tab.consulta[href] { background:transparent; border:1px dashed var(--line); color:var(--muted); }
    .cs-reja .cs-reja-tab.consulta.active[href] { background:var(--accent); color:var(--on-accent); border-style:solid; }
}
@media (min-width:900px) {
    .cs-reja .cs-reja-tab.destacado[href] { grid-column:span 2; flex-direction:row; gap:.5rem; min-height:66px; }
    .cs-reja-tab.destacado .cs-reja-ico svg { width:27px; height:27px; }
    .cs-reja-tab.destacado .cs-reja-lbl { font-size:.92rem; }
}

/* C1 · Menú de la caseta: pantalla completa en el teléfono (tiles de 72 px, icono de 44 px). */
.cs-menu { border:0; padding:0; margin:0; width:100%; height:100%; max-width:none; max-height:none;
    background:var(--cream); color:var(--ink); }
.cs-menu[open] { position:fixed; inset:0; z-index:70; display:block; }
.cs-menu::backdrop { background:color-mix(in srgb, var(--ink) 42%, transparent); }
.cs-menu-body { box-sizing:border-box; height:100%; overflow-y:auto; padding:18px 16px calc(24px + env(safe-area-inset-bottom));
    display:flex; flex-direction:column; gap:20px; }
.cs-menu-head { display:flex; align-items:center; gap:12px; }
.cs-menu-head h2 { margin:0; font-size:24px; font-weight:800; color:var(--ink); }
.cs-menu-volver { width:52px; height:52px; flex:none; border-radius:16px; border:1px solid var(--line); background:var(--panel);
    color:var(--ink); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.cs-menu-volver svg { width:24px; height:24px; }
.cs-menu-g { margin:0 0 10px; font-size:13px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }
.cs-menu-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.cs-menu-grid .cs-menu-t[href] { position:relative; display:flex; align-items:center; gap:12px; min-height:72px; padding:12px;
    border-radius:18px; background:var(--panel); border:1px solid var(--line); color:var(--ink); text-decoration:none;
    font-size:15px; font-weight:800; line-height:1.25; box-sizing:border-box; }
.cs-menu-grid .cs-menu-t.active[href] { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.cs-menu-grid .cs-menu-t[href]:active, .cs-menu-volver:active { filter:brightness(.95); }
.cs-menu-ic { width:44px; height:44px; flex:none; border-radius:14px; background:var(--tint); color:var(--accent); display:grid; place-items:center; }
.cs-menu-ic svg { width:24px; height:24px; }
.cs-menu-t.alerta .cs-menu-ic { background:var(--danger-tint); color:var(--danger); }
.cs-menu-grid .cs-menu-t[href] { gap:10px; padding:12px 10px; }
.cs-menu-l { min-width:0; overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto; }
/* El badge va en la esquina del icono (no del tile): con etiquetas de dos líneas no tapa el texto. */
.cs-menu-bd { position:absolute; top:4px; left:40px; border:2px solid var(--panel); min-width:22px; height:22px; padding:0 6px; box-sizing:border-box;
    border-radius:11px; background:var(--accent); color:var(--on-accent); font-size:12px; font-weight:700; display:grid; place-items:center; }
.cs-menu-bd.warn { background:var(--warn); }
@media (min-width:768px) {
    .cs-menu[open] { inset:0; margin:auto; width:min(760px, calc(100vw - 2rem)); height:fit-content; max-height:88vh; border-radius:20px; overflow:auto; }
    .cs-menu-body { height:auto; padding:22px 24px 26px; }
    .cs-menu-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

/* C0 · Turno. */
.cs-turno-lado { display:none; }
.cs-turno-main { display:flex; flex-direction:column; gap:18px; min-width:0; }
.cs-turno-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cs-turno-id { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cs-turno-id h1 { margin:0; font-size:24px; font-weight:800; line-height:1.2; color:var(--ink); overflow-wrap:anywhere; }
.cs-turno-caseta { display:inline-flex; align-items:center; gap:6px; min-height:48px; padding:0; border:0; background:transparent;
    color:var(--ink); font:inherit; cursor:pointer; text-align:left; }
.cs-turno-caseta svg { width:22px; height:22px; flex:none; color:var(--accent); }
.cs-turno-quien { font-size:14px; font-weight:700; color:var(--muted); }
.cs-turno-acc { display:flex; gap:8px; flex:none; }
.cs-turno-menu { display:inline-flex; align-items:center; gap:8px; height:52px; padding:0 14px; border-radius:16px; background:var(--panel);
    border:1px solid var(--line); color:var(--ink); font:inherit; font-size:15px; font-weight:800; cursor:pointer; }
.cs-turno-menu svg { width:22px; height:22px; }
.cs-turno-menu:active, .cs-modo:active { filter:brightness(.95); }
.cs-turno-multi { margin:-10px 0 0; font-size:.85rem; color:var(--muted); }
.cs-turno-busca { display:flex; align-items:center; gap:16px; }
.cs-turno-busca-campo { flex:1; min-width:0; }
.cs-turno-busca .cs-turno-busca-campo > * { margin-bottom:0; }
.cs-turno-hora { display:none; font-size:30px; font-weight:700; color:var(--ink); }
.cs-turno-tiles { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.cs-turno-tiles .cs-turno-tile[href] { display:flex; flex-direction:column; justify-content:space-between; gap:8px; min-height:112px;
    padding:14px; border-radius:20px; background:var(--panel); border:1px solid var(--line); color:var(--ink);
    text-decoration:none; box-sizing:border-box; }
.cs-turno-tiles .cs-turno-tile.warn[href] { border:2px solid var(--warn); background:var(--warn-tint); }
.cs-turno-tiles .cs-turno-tile[href]:active { filter:brightness(.95); }
.cs-turno-tile-l { font-size:15px; font-weight:800; }
.cs-turno-tile-n { font-size:34px; font-weight:700; line-height:1; }
.cs-turno-tile-s { font-size:13px; font-weight:700; color:var(--muted); }
.cs-turno-tile.warn .cs-turno-tile-s { color:var(--warn); }
.cs-turno-h { margin:0 0 10px; font-size:13px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }
.cs-turno-dentro, .cs-turno-llegan { display:none; }
.cs-turno-notas { display:flex; flex-direction:column; gap:10px; }
.cs-turno-notas .cs-turno-h { margin:0; }
.cs-turno-nota { padding:14px 16px; border-radius:18px; background:var(--tint); display:flex; flex-direction:column; gap:6px; }
.cs-turno-nota-a { font-size:13px; font-weight:800; color:var(--accent); }
.cs-turno-nota p { margin:0; font-size:16px; font-weight:600; line-height:1.5; color:var(--ink); overflow-wrap:anywhere; }
.cs-turno-vacio { margin:0; padding:14px 16px; font-size:15px; color:var(--muted); }
.cs-turno-notas .cs-turno-vacio { padding:0; }
.cs-turno-card { background:var(--panel); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.cs-turno-card-h { margin:0; padding:14px 16px; font-size:13px; font-weight:800; color:var(--muted); text-transform:uppercase;
    letter-spacing:.07em; border-bottom:1px solid var(--line); }
.cs-turno-fila { display:flex; align-items:center; gap:12px; min-height:60px; padding:10px 14px; border-top:1px solid var(--line); box-sizing:border-box; }
.cs-turno-card > .cs-turno-fila:first-child, .cs-turno-card-h + .cs-turno-fila, .cs-turno-card-h + .cs-turno-vacio + .cs-turno-fila { border-top:0; }
.cs-turno-fila.venc { box-shadow:inset 4px 0 0 var(--warn); }
.cs-turno-fila-ic { display:inline-flex; color:var(--accent); flex:none; }
.cs-turno-fila-ic svg { width:22px; height:22px; }
.cs-turno-fila-t { flex:1; min-width:0; }
.cs-turno-fila-t b { display:block; font-size:15px; font-weight:800; overflow-wrap:anywhere; }
.cs-turno-fila-t small { display:block; margin-top:2px; font-size:14px; color:var(--muted); }
.cs-turno-fila form { margin:0; flex:none; }
.cs-turno-pl { display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-size:13px; font-weight:800; white-space:nowrap; flex:none; }
.cs-turno-pl.warn { background:var(--warn-tint); color:var(--warn); }
.cs-turno-pl.ok { background:var(--ok-tint); color:var(--ok); }
.cs-turno-fila .cs-turno-salio { min-height:52px; padding:0 16px; font-weight:800; border-radius:14px; border:1.5px solid var(--line); }
.cs-turno-cierre .cs-turno-sec { border:1.5px solid var(--line); }
.cs-turno-card .cs-turno-mas[href] { display:flex; align-items:center; min-height:52px; padding:0 16px; border-top:1px solid var(--line);
    color:var(--accent); font-weight:800; text-decoration:none; }
.cs-turno-cierre { margin:0; }
.cs-turno-cierre .cs-turno-sec { width:100%; justify-content:center; min-height:56px; font-size:16px; font-weight:800; border-radius:16px; }
.cs-turno-hoja-p { margin:0; font-size:15px; color:var(--muted); line-height:1.5; }
.cs-turno-opt { display:flex; align-items:center; gap:12px; min-height:56px; padding:0 16px; border-radius:16px; border:1.5px solid var(--line);
    background:var(--panel); color:var(--ink); font:inherit; font-size:16px; font-weight:800; cursor:pointer; text-align:left; }
.cs-turno-opt span { flex:1; }
.cs-turno-opt svg { width:22px; height:22px; color:var(--accent); flex:none; }
.cs-turno-opt.sel { border-color:var(--accent); background:var(--tint); }
@media (min-width:768px) {
    .cs-turno-tiles { grid-template-columns:repeat(4, minmax(0, 1fr)); }
    .cs-turno-cierre .cs-turno-sec { width:auto; padding:0 22px; }
}

/* C3 · Tablet (≥1024 px horizontal): columna lateral CLARA de 272 px — no un 2.º riel oscuro; el riel del
   layout sigue siendo el único. La reja de escritorio cede su lugar a esta columna en el Turno. */
.cs-turno-lado-id { display:flex; align-items:flex-start; gap:8px; padding:0 6px; }
.cs-turno-lado-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cs-turno-lado-txt b { font-size:20px; font-weight:800; color:var(--ink); overflow-wrap:anywhere; }
.cs-turno-lado-txt span { font-size:14px; font-weight:700; color:var(--muted); }
.cs-turno-lado-txt .cs-turno-lado-modo { font-size:13px; color:var(--accent); }
.cs-turno-lado-nav { display:flex; flex-direction:column; gap:4px; }
.cs-turno-lado .cs-turno-lado-nav > a[href], .cs-turno-lado .cs-turno-lado-nav > button[type] { position:relative; display:flex; align-items:center;
    gap:12px; width:100%; min-height:52px; padding:6px 14px; box-sizing:border-box; border:0; border-radius:14px; background:transparent;
    color:var(--ink); font:inherit; font-size:16px; font-weight:700; line-height:1.2; text-decoration:none; text-align:left; cursor:pointer; }
.cs-turno-lado .cs-turno-lado-nav > a.active[href] { background:var(--tint); color:var(--accent); font-weight:800; }
.cs-turno-lado .cs-turno-lado-nav > a[href]:hover, .cs-turno-lado .cs-turno-lado-nav > button[type]:hover { background:color-mix(in srgb, var(--tint) 60%, transparent); }
.cs-turno-lado-nav svg { width:22px; height:22px; flex:none; color:var(--accent); }
.cs-turno-lado-n { margin-left:auto; min-width:26px; height:26px; padding:0 8px; box-sizing:border-box; border-radius:13px; background:var(--cream);
    color:var(--ink); font-size:13px; font-weight:700; display:grid; place-items:center; flex:none; }
.cs-turno-lado-n.warn { background:var(--warn-tint); color:var(--warn); }
.cs-turno-lado .cs-turno-lado-sos[href] { margin-top:auto; flex:none; display:flex; align-items:center; justify-content:center; gap:10px;
    min-height:64px; border-radius:18px; background:var(--danger); color:var(--on-accent); font-size:18px; font-weight:800; text-decoration:none; }
.cs-turno-lado-sos svg { width:24px; height:24px; }
@media (min-width:1024px) and (orientation:landscape) {
    main:has(.cs-turno) { max-width:1240px; }
    .cs-reja.en-turno { display:none; }
    .cs-turno { display:grid; grid-template-columns:272px minmax(0, 1fr); gap:24px; align-items:start; }
    .cs-turno-lado { display:flex; flex-direction:column; gap:14px; position:sticky; top:72px; box-sizing:border-box;
        max-height:calc(100dvh - 88px); padding:18px 14px; overflow-y:auto;
        background:var(--panel); border:1px solid var(--line); border-radius:20px; }
    .cs-turno-lado .cs-turno-lado-sos[href] { margin-top:4px; }
    /* El encabezado lo dice la columna lateral; se conserva para el lector de pantalla (h1). */
    .cs-turno-head { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
    .cs-turno-multi { display:none; }
    .cs-turno-hora { display:inline; }
    .cs-turno-tiles { gap:14px; }
    .cs-turno-tiles .cs-turno-tile[href] { padding:16px; }
    .cs-turno-tile-n { font-size:38px; }
    .cs-turno-cols { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:18px; align-items:start; }
    .cs-turno-dentro, .cs-turno-llegan { display:block; }
    .cs-turno-der { display:flex; flex-direction:column; gap:18px; }
    .cs-turno-dentro .cs-turno-fila, .cs-turno-llegan .cs-turno-fila { min-height:68px; padding:10px 12px 10px 16px; }
    .cs-turno-dentro .cs-turno-fila-t b, .cs-turno-llegan .cs-turno-fila-t b { font-size:16px; }
}

/* ===== Caseta · Personal, Directorio, SOS, Asistencia (C11 · C14 · C15 · C16) ===== */
/* Píldora de estado de la caseta: nunca solo color, el texto dice el estado. */
.cs-pl { display:inline-flex; align-items:center; flex:none; align-self:flex-start; padding:4px 10px; border-radius:999px;
    font-size:12px; font-weight:800; line-height:1.3; white-space:nowrap; background:var(--cream); color:var(--muted); border:1px solid var(--line); }
.cs-pl.ok { background:var(--ok-tint); color:var(--ok); border-color:transparent; }
.cs-pl.warn { background:var(--warn-tint); color:var(--warn); border-color:transparent; }
.cs-pl.bad { background:var(--danger-tint); color:var(--danger); border-color:transparent; }

/* C11 Personal de servicio + C16 lista de asistencia: encabezado, buscador y tarjeta de persona. */
.cs-per-head { display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; margin:.25rem 0 .85rem; }
.cs-per-head h1 { margin:0; font-size:24px; font-weight:800; letter-spacing:-.01em; }
.cs-per-n { font-size:14px; font-weight:700; color:var(--muted); white-space:nowrap; }
.cs-per-busca { display:flex; flex-direction:column; gap:.6rem; margin:0 0 1rem; }
.cs-per-campo { display:flex; align-items:center; gap:10px; min-height:56px; padding:0 4px 0 14px; border-radius:16px;
    background:var(--panel); border:2px solid var(--line); margin:0; }
.cs-per-campo:focus-within { border-color:var(--accent); }
.cs-per-campo > .ic { display:flex; color:var(--muted); }
.cs-per-campo > .ic svg { width:22px; height:22px; }
.cs-per-campo input { flex:1; min-width:0; min-height:50px; padding:0; border:0 !important; background:none !important; box-shadow:none !important;
    font:inherit; font-size:17px; font-weight:600; color:var(--ink); }
.cs-per-campo input:focus { outline:none; }
.cs-per-campo input::placeholder { color:var(--muted); font-weight:600; }
.cs-per-ir { width:48px; height:48px; flex:none; border:0; border-radius:12px; background:var(--tint); color:var(--accent);
    display:flex; align-items:center; justify-content:center; cursor:pointer; }
.cs-per-ir svg { width:22px; height:22px; }
.cs-per-chip { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; min-height:48px; padding:0 14px; border-radius:999px;
    background:var(--tint); color:var(--accent); font-size:15px; font-weight:800; text-decoration:none; }
.cs-per-chip svg { width:18px; height:18px; }
.cs-per-sub { margin:0 0 .6rem; font-size:13px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }
.cs-per-lista { display:flex; flex-direction:column; gap:12px; }
.cs-per-card { display:flex; flex-direction:column; gap:12px; padding:14px; border-radius:20px; background:var(--panel); border:1px solid var(--line); }
.cs-per-card.warn { border:2px solid var(--warn); padding:13px; }
.cs-per-card form { margin:0; }
.cs-per-top { display:flex; align-items:center; gap:12px; }
.cs-per-av { width:56px; height:56px; flex:none; border-radius:16px; object-fit:cover; background:var(--tint); color:var(--accent);
    display:grid; place-items:center; font-size:19px; font-weight:800; }
.cs-per-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cs-per-txt b { font-size:17px; font-weight:800; line-height:1.25; overflow-wrap:anywhere; }
.cs-per-txt small { font-size:14px; font-weight:600; color:var(--muted); line-height:1.35; }
.cs-per-txt .cs-pl, .cs-asis-emp-t .cs-pl { margin-top:4px; }
body.es-caseta .cs-per-acc { width:100%; min-height:56px; gap:10px; border-radius:16px; font-size:17px; font-weight:800; }
.cs-per-acc svg { width:22px; height:22px; }
body.es-caseta .cs-per-acc.secondary { border:2px solid var(--line); }
.cs-per-vacio { display:flex; flex-direction:column; gap:4px; padding:18px 16px; border-radius:18px; background:var(--panel); border:1px dashed var(--line); }
.cs-per-vacio b { font-size:17px; font-weight:800; }
.cs-per-vacio span { font-size:15px; color:var(--muted); line-height:1.45; }
@media (min-width:768px) {
    .cs-per-lista { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); }
    .cs-per-busca { flex-direction:row; flex-wrap:wrap; align-items:center; }
    .cs-per-campo { flex:1 1 360px; }
}

/* C16 lista: filtro de área en chips (enlaces). */
.cs-asis-chips { display:flex; gap:.45rem; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.cs-asis-chips::-webkit-scrollbar { display:none; }
.cs-asis-chip { flex:none; display:inline-flex; align-items:center; min-height:48px; padding:0 16px; border-radius:999px; border:1.5px solid var(--line);
    background:var(--panel); color:var(--ink); font-size:15px; font-weight:700; text-decoration:none; white-space:nowrap; }
.cs-asis-chip.on { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
@media (min-width:768px) { .cs-asis-chips { flex-wrap:wrap; overflow:visible; flex-basis:100%; } }

/* C16 registrar: tarjeta del empleado, visor de cámara (--cam) con guía de rostro, confirmación en línea. */
.cs-asis-head { display:flex; align-items:center; gap:12px; margin:.25rem 0 1rem; }
.cs-asis-head h1 { margin:0; font-size:22px; font-weight:800; }
.cs-asis-volver { width:52px; height:52px; flex:none; border-radius:16px; background:var(--panel); border:1px solid var(--line);
    display:grid; place-items:center; color:var(--ink); text-decoration:none; }
.cs-asis-volver svg { width:22px; height:22px; }
.cs-asis-emp { max-width:560px; display:flex; align-items:center; gap:14px; padding:14px; border-radius:20px; background:var(--panel); border:1px solid var(--line); margin-bottom:16px; }
.cs-asis-av { width:64px; height:64px; flex:none; border-radius:18px; object-fit:cover; background:var(--tint); color:var(--accent);
    display:grid; place-items:center; font-size:22px; font-weight:800; }
.cs-asis-emp-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.cs-asis-emp-t b { font-size:19px; font-weight:800; overflow-wrap:anywhere; }
.cs-asis-emp-t small { font-size:14px; font-weight:700; color:var(--muted); }
.cs-asis-form { position:relative; display:flex; flex-direction:column; gap:12px; margin:0; max-width:560px; }
.cs-asis-form > input.sr-only { left:0; top:0; }
.cs-asis-cam { position:relative; height:240px; border-radius:22px; background:var(--cam); overflow:hidden; margin:0; }
.cs-asis-cam .cam-video, .cs-asis-cam .cam-preview { display:none; position:absolute; inset:0; width:100%; height:100%; max-width:none;
    object-fit:cover; border:0; border-radius:0; margin:0; background:var(--cam); }
.cs-asis-cara { position:absolute; left:50%; top:50%; width:150px; height:180px; transform:translate(-50%, -50%); border-radius:50%;
    border:3px dashed color-mix(in srgb, var(--on-dark-dim) 80%, transparent); pointer-events:none; }
.cs-asis-cam:has(.cam-preview[style*="block"]) .cs-asis-cara { display:none; }
.cs-asis-abrir { position:absolute; inset:0; width:100%; border:0; background:transparent; color:var(--on-dark-dim); cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; font:inherit; font-size:16px; font-weight:800; }
.cs-asis-abrir svg { width:30px; height:30px; }
.cs-asis-abrir-2 { display:none; }
/* Cámara abierta: el botón de abrir cede el visor; con foto tomada queda como «Repetir foto» en la esquina. */
.cs-asis-cam:has(.cam-video[style*="block"]) .cs-asis-abrir { display:none; }
.cs-asis-cam:has(.cam-preview[style*="block"]) .cs-asis-abrir { inset:auto 12px 12px auto; width:auto; min-height:48px; padding:0 14px; flex-direction:row;
    border-radius:14px; background:color-mix(in srgb, var(--cam) 70%, transparent); font-size:15px; }
.cs-asis-cam:has(.cam-preview[style*="block"]) .cs-asis-abrir svg { width:20px; height:20px; }
.cs-asis-cam:has(.cam-preview[style*="block"]) .cs-asis-abrir-1 { display:none; }
.cs-asis-cam:has(.cam-preview[style*="block"]) .cs-asis-abrir-2 { display:inline; }
.cs-asis-acc { display:none; }
.cs-asis-shot { position:absolute; right:14px; top:14px; width:52px; height:52px; border-radius:50%; cursor:pointer;
    border:3px solid var(--on-dark-dim); background:color-mix(in srgb, var(--on-dark-dim) 30%, transparent); }
.cs-asis-cerrar { position:absolute; left:14px; top:14px; width:48px; height:48px; border-radius:14px; border:0; cursor:pointer;
    background:color-mix(in srgb, var(--cam) 70%, transparent); color:var(--on-dark-dim); display:grid; place-items:center; }
.cs-asis-cerrar svg { width:22px; height:22px; }
.cs-asis-leyenda { position:absolute; left:0; right:0; bottom:14px; text-align:center; color:var(--on-dark-dim); font-size:15px; font-weight:700; pointer-events:none; }
.cs-asis-cam:has(.cam-preview[style*="block"]) .cs-asis-leyenda { display:none; }
.cs-asis-galeria { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 4px; color:var(--accent);
    font-size:15px; font-weight:700; cursor:pointer; }
.cs-asis-galeria svg { width:20px; height:20px; }
.cs-asis-err { margin:0; padding:12px 14px; border-radius:14px; background:var(--danger-tint); color:var(--danger); font-size:15px; font-weight:700; }
.cs-asis-ok { display:flex; align-items:center; gap:10px; margin:0 0 16px; padding:12px 14px; border-radius:14px; background:var(--ok-tint); color:var(--ok); font-size:16px; font-weight:800; }
.cs-asis-ok svg { width:24px; height:24px; flex:none; }

/* C14 Directorio — «¿Abro o no?». */
.cs-dir-head { display:flex; align-items:center; gap:12px; margin:.25rem 0 .85rem; }
.cs-dir-head h1 { flex:1; min-width:0; margin:0; font-size:22px; font-weight:800; }
.cs-dir-punto { display:inline-flex; align-items:center; gap:6px; min-height:48px; max-width:55%; padding:0 12px; border-radius:12px; border:0;
    background:var(--tint); color:var(--accent); font:inherit; font-size:14px; font-weight:800; cursor:pointer; }
.cs-dir-punto span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-dir-punto svg { width:18px; height:18px; flex:none; }
.cs-dir-nota { display:flex; align-items:center; gap:6px; margin:0 0 .85rem; font-size:14px; font-weight:600; color:var(--muted); }
.cs-dir-nota svg { width:18px; height:18px; flex:none; }
.cs-dir-pie { margin:0 0 1rem; font-size:14px; font-weight:600; color:var(--muted); line-height:1.5; }
.cs-dir-busca { display:flex; flex-direction:column; gap:12px; margin:0 0 16px; }
.cs-dir-seg { border-radius:16px; }
.cs-dir-seg label { min-height:48px; font-size:15px; font-weight:800; }
.cs-dir-campo { display:flex; align-items:center; gap:10px; min-height:60px; padding:0 4px 0 16px; border-radius:18px; background:var(--panel);
    border:2px solid var(--accent); margin:0; }
.cs-dir-campo > .ic { display:flex; color:var(--muted); }
.cs-dir-campo > .ic svg { width:22px; height:22px; }
.cs-dir-campo input { flex:1; min-width:0; min-height:54px; padding:0; border:0 !important; background:none !important; box-shadow:none !important;
    font-size:22px; font-weight:700; letter-spacing:.06em; color:var(--ink); text-transform:uppercase; }
.cs-dir-campo input::placeholder { text-transform:none; letter-spacing:0; font-size:17px; font-family:inherit; color:var(--muted); }
.cs-dir-campo input:focus { outline:none; }
.cs-dir-ir { width:52px; height:52px; flex:none; border:0; border-radius:14px; background:var(--accent); color:var(--on-accent);
    display:flex; align-items:center; justify-content:center; cursor:pointer; }
.cs-dir-ir svg { width:22px; height:22px; }
.cs-dir-lista { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 14px; border-radius:14px;
    border:1.5px solid var(--line); background:var(--panel); color:var(--ink); font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.cs-dir-lista svg { width:18px; height:18px; color:var(--accent); }
.cs-dir-ver { display:flex; flex-direction:column; gap:10px; margin:0 0 18px; }
.cs-dir-ver-placa { align-self:flex-start; padding:4px 12px; border-radius:10px; background:var(--panel); border:1px solid var(--line); }
body.es-caseta .cs-dir-ver-acc { min-height:56px; border-radius:16px; font-size:16px; font-weight:800; gap:10px; }
.cs-dir-ver-acc svg { width:22px; height:22px; }
.cs-dir-sec { margin:0 0 18px; }
.cs-dir-sec h2 { margin:0 0 10px; font-size:13px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }
.cs-dir-box { background:var(--panel); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.cs-dir-row { display:flex; align-items:center; gap:12px; min-height:68px; margin:0; padding:10px 12px 10px 14px; border-top:1px solid var(--line); }
.cs-dir-row:first-child { border-top:0; }
.cs-dir-row.este { background:var(--tint); }
.cs-dir-row.baja .cs-dir-txt { opacity:.7; }
.cs-dir-persona { flex-direction:column; align-items:stretch; gap:10px; }
.cs-dir-quien { display:flex; align-items:center; gap:12px; }
.cs-dir-av { width:48px; height:48px; flex:none; border-radius:14px; object-fit:cover; background:var(--tint); color:var(--accent);
    display:grid; place-items:center; font-size:17px; font-weight:800; }
.cs-dir-av svg { width:22px; height:22px; }
.cs-dir-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cs-dir-txt b { font-size:16px; font-weight:800; overflow-wrap:anywhere; }
.cs-dir-txt b.mono { font-size:18px; letter-spacing:.04em; }
.cs-dir-txt small { font-size:14px; font-weight:600; color:var(--muted); line-height:1.35; }
.cs-dir-match { color:var(--ink); text-decoration:none; }
.cs-dir-match:hover { background:color-mix(in srgb, var(--tint) 60%, transparent); }
.cs-dir-chev { display:flex; color:var(--muted); }
.cs-dir-chev svg { width:20px; height:20px; }
.cs-dir-llaveros { display:flex; flex-wrap:wrap; gap:8px; padding:12px; }
.cs-dir-llavero { display:flex; flex-direction:column; padding:6px 12px; border-radius:12px; background:var(--cream); border:1px solid var(--line); }
.cs-dir-llavero.baja { opacity:.65; }
.cs-dir-llavero small { font-size:12px; color:var(--muted); font-weight:600; }
.cs-dir-recientes { display:flex; flex-wrap:wrap; gap:8px; }
.cs-dir-reciente { display:inline-flex; align-items:center; min-height:48px; padding:0 16px; border-radius:999px; background:var(--tint); color:var(--accent);
    font-weight:800; font-size:15px; text-decoration:none; }
.cs-dir-reciente.no, .cs-dir-reciente.nada { background:var(--danger-tint); color:var(--danger); }
.cs-dir-reciente.sintag, .cs-dir-reciente.novisto, .cs-dir-reciente.novigente { background:var(--warn-tint); color:var(--warn); }
.cs-dir-vacio { display:flex; flex-direction:column; gap:4px; margin:0 0 18px; padding:16px; border-radius:18px; background:var(--panel); border:1px dashed var(--line); }
.cs-dir-vacio b { font-size:17px; font-weight:800; }
.cs-dir-vacio span { font-size:15px; color:var(--muted); }
.cs-dir-hoja-p { margin:0; font-size:15px; }
.cs-dir-opciones { display:flex; flex-direction:column; gap:8px; }
.cs-dir-opt { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:56px; padding:0 16px; border-radius:14px;
    border:1.5px solid var(--line); background:var(--panel); color:var(--ink); font-size:16px; font-weight:700; text-decoration:none; }
.cs-dir-opt.on { border:2px solid var(--accent); background:var(--tint); color:var(--accent); }
.cs-dir-opt svg { width:22px; height:22px; }
#cs-dir-casas .btn, #cs-dir-puntos .btn { min-height:56px; }
#cs-dir-casas select { min-height:56px; font-size:17px; }
.cs-dir-cols { display:grid; gap:0 16px; }
@media (min-width:900px) { .cs-dir-cols { grid-template-columns:1.15fr 1fr; align-items:start; } }
@media (min-width:768px) {
    .cs-dir-busca { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; }
    .cs-dir-busca .cs-dir-seg { grid-column:1 / -1; max-width:420px; }
    .cs-dir-busca .cs-dir-lista { align-self:center; min-height:60px; }
}

/* C15 SOS activa — banda roja arriba, casa en grande, rejilla 2×2 de 84 px y UNA acción de contraste máximo. */
.cs-sos-lista { display:flex; flex-direction:column; gap:24px; }
.cs-sos { display:flex; flex-direction:column; border-radius:22px; overflow:hidden; border:2px solid var(--danger); background:var(--cream); }
.cs-sos-band { display:flex; flex-direction:column; gap:6px; padding:18px 16px; background:var(--danger); color:var(--on-accent); }
.cs-sos-band b { display:flex; align-items:center; gap:10px; font-size:26px; font-weight:800; letter-spacing:-.01em; line-height:1.15; }
.cs-sos-band b svg { width:28px; height:28px; flex:none; }
.cs-sos-hace { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:700; }
.cs-sos-hace svg { width:20px; height:20px; flex:none; }
.cs-sos-cuerpo { display:flex; flex-direction:column; gap:14px; padding:16px; }
.cs-sos-info { display:flex; flex-direction:column; gap:4px; padding:16px; border-radius:20px; background:var(--panel); border:2px solid var(--danger); }
.cs-sos-info b { font-size:22px; font-weight:800; }
.cs-sos-info > span { font-size:16px; font-weight:600; color:var(--muted); overflow-wrap:anywhere; }
.cs-sos-msg { margin:0; padding:14px 16px; border-radius:16px; background:var(--danger-tint); color:var(--ink); font-size:17px; font-weight:700; line-height:1.45; }
.cs-sos-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.cs-sos-grid form { margin:0; display:flex; }
.cs-sos-act { flex:1; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:84px; padding:8px;
    border-radius:18px; border:2px solid var(--line); background:var(--panel); color:var(--ink); font:inherit; font-size:16px; font-weight:800;
    text-align:center; text-decoration:none; cursor:pointer; }
.cs-sos-act svg { width:26px; height:26px; color:var(--accent); }
.cs-sos-act:active, .cs-sos-voy-btn:active { filter:brightness(.92); }
.cs-sos-voy { display:flex; flex-direction:column; gap:8px; margin:0; }
.cs-sos-voy-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:64px; border-radius:18px; border:0;
    background:var(--ink); color:var(--cream); font:inherit; font-size:19px; font-weight:800; cursor:pointer; }
.cs-sos-voy-btn svg { width:26px; height:26px; }
.cs-sos-hint { font-size:14px; font-weight:600; color:var(--muted); text-align:center; }
.cs-sos-va { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px; background:var(--ok-tint); color:var(--ok); font-size:16px; font-weight:800; }
.cs-sos-va svg { width:24px; height:24px; flex:none; }
.cs-sos-cierre { display:flex; flex-direction:column; gap:10px; margin:0; }
.cs-sos-cierre label { font-size:16px; font-weight:800; }
.cs-sos-cierre label span { font-size:14px; font-weight:600; color:var(--muted); }
.cs-sos-cierre textarea { width:100%; min-height:64px; padding:14px 16px; border-radius:16px; border:1.5px solid var(--line); background:var(--panel);
    font:inherit; font-size:17px; font-weight:600; color:var(--ink); resize:vertical; }
.cs-sos-cierre textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
body.es-caseta .cs-sos-cerrar { min-height:64px; border-radius:18px; font-size:19px; font-weight:800; gap:10px; }
.cs-sos-cerrar svg { width:24px; height:24px; }
.cs-sos-calma { display:flex; flex-direction:column; gap:14px; margin:.25rem 0 0; }
.cs-sos-calma h1 { margin:0; font-size:24px; font-weight:800; }
.cs-sos-hist { margin:24px 0 0; }
.cs-sos-hist h2 { margin:0 0 10px; font-size:13px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }
.cs-sos-hist-box { background:var(--panel); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.cs-sos-hist-row { display:flex; align-items:center; gap:12px; min-height:64px; padding:10px 14px; border-top:1px solid var(--line); }
.cs-sos-hist-row:first-child { border-top:0; }
.cs-sos-hist-ic { width:40px; height:40px; flex:none; border-radius:12px; background:var(--danger-tint); color:var(--danger); display:grid; place-items:center; }
.cs-sos-hist-ic svg { width:20px; height:20px; }
.cs-sos-hist-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cs-sos-hist-txt b { font-size:16px; font-weight:800; }
.cs-sos-hist-txt small { font-size:14px; font-weight:600; color:var(--muted); overflow-wrap:anywhere; }
@media (min-width:768px) {
    .cs-sos-cuerpo { padding:20px; }
    .cs-sos-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); }
    .cs-sos-lista, .cs-sos-calma, .cs-sos-hist { max-width:880px; }
}

/* El modo noche pinta todo <a> en --accent: los enlaces-botón de este bloque conservan su color. */
body.es-caseta a.cs-asis-chip, body.es-caseta a.cs-dir-match, body.es-caseta a.cs-dir-opt, body.es-caseta a.cs-sos-act,
body.es-caseta a.cs-asis-volver { color:var(--ink); }
body.es-caseta a.cs-asis-chip.on { color:var(--on-accent); }
body.es-caseta a.cs-dir-opt.on, body.es-caseta a.cs-dir-reciente, body.es-caseta a.cs-per-chip { color:var(--accent); }
body.es-caseta a.cs-dir-reciente.no, body.es-caseta a.cs-dir-reciente.nada { color:var(--danger); }
body.es-caseta a.cs-dir-reciente.sintag, body.es-caseta a.cs-dir-reciente.novisto, body.es-caseta a.cs-dir-reciente.novigente { color:var(--warn); }

/* Vigía de SOS (partials/sos_watch): botón persistente + banda intrusiva en toda la caseta. */
.cs-sos-fab { position:fixed; z-index:70; left:14px; bottom:calc(var(--tabbar-h, 0px) + 14px);
    display:inline-flex; align-items:center; gap:.4rem; padding:.7rem .95rem; border-radius:999px;
    background:var(--danger); color:var(--on-accent); font-weight:800; font-size:.9rem; text-decoration:none;
    box-shadow:0 10px 26px -8px color-mix(in srgb, var(--danger) 70%, transparent); min-height:48px; }
body.es-caseta[data-modo="noche"] a.cs-sos-fab { color:var(--on-accent); }
.cs-sos-fab .ic svg { width:20px; height:20px; }
.cs-sos-fab-badge { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px;
    padding:0 6px; border-radius:999px; background:var(--on-accent); color:var(--danger); font-size:.75rem; font-weight:800; }
.cs-sos-fab.calma { background:color-mix(in srgb, var(--danger) 14%, var(--panel)); box-shadow:0 6px 16px -10px color-mix(in srgb, var(--cam) 60%, transparent); }
.cs-sos-fab.calma, body.es-caseta[data-modo="noche"] a.cs-sos-fab.calma { color:var(--danger); }
@media (min-width:768px) { .cs-sos-fab { left:88px; bottom:18px; } }
/* Con la barra operativa (S2) el SOS ya vive abajo: en móvil el FAB sería un segundo botón rojo. */
@media (max-width:767px) { body.tiene-barra-caseta .cs-sos-fab { display:none; } }
/* Turno en tablet/escritorio: la columna lateral (.cs-turno-lado, K1) ya trae su SOS fijo de 64px. */
@media (min-width:1024px) { body:has(.cs-turno-lado) .cs-sos-fab { display:none; } }
.cs-sos-aviso { position:fixed; inset:0 0 auto 0; z-index:120; background:var(--danger); color:var(--on-accent);
    box-shadow:0 22px 50px -18px color-mix(in srgb, var(--cam) 75%, transparent); animation:csSosIn .18s ease-out; }
.cs-sos-aviso[hidden] { display:none; }
@keyframes csSosIn { from { transform:translateY(-14px); opacity:0; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce) { .cs-sos-aviso { animation:none; } }
.cs-sos-aviso-in { max-width:1100px; margin:0 auto; padding:1rem 1rem 1.1rem; }
.cs-sos-aviso-al + .cs-sos-aviso-al { margin-top:.9rem; padding-top:.9rem; border-top:1px solid color-mix(in srgb, var(--on-accent) 35%, transparent); }
.cs-sos-aviso-head { display:flex; align-items:center; gap:.6rem; }
.cs-sos-aviso-head .ic svg { width:28px; height:28px; }
.cs-sos-aviso-tipo { font-size:21px; font-weight:800; line-height:1.15; }
.cs-sos-aviso-quien { margin-top:.25rem; font-size:1rem; font-weight:700; }
.cs-sos-aviso-msg { margin-top:.3rem; font-size:.95rem; opacity:.95; }
.cs-sos-aviso-hora { margin-top:.2rem; font-size:.85rem; opacity:.9; }
.cs-sos-aviso-acc { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.85rem; }
.cs-sos-aviso-acc a, .cs-sos-aviso-acc button { flex:1 1 auto; min-width:130px; min-height:56px; display:inline-flex;
    align-items:center; justify-content:center; gap:.45rem; border-radius:12px; border:0; cursor:pointer;
    font:inherit; font-weight:800; font-size:.95rem; text-decoration:none; padding:.5rem .9rem;
    background:var(--on-accent); color:var(--danger); }
body.es-caseta[data-modo="noche"] .cs-sos-aviso-acc a { color:var(--danger); }
.cs-sos-aviso-acc .cs-sos-sec, body.es-caseta[data-modo="noche"] .cs-sos-aviso-acc a.cs-sos-sec { background:transparent; color:var(--on-accent); border:2px solid var(--on-accent); }
.cs-sos-aviso-acc .ic svg { width:19px; height:19px; }

/* Residente (portal/sos): «Pedro va en camino» cuando la caseta toma su alerta. */
.ax-sos-va { display:flex; gap:.8rem; align-items:flex-start; padding:1rem; margin-bottom:.75rem; border-radius:16px; background:var(--ok-tint); color:var(--ok); }
.ax-sos-va .ic { width:44px; height:44px; flex:none; border-radius:12px; background:var(--ok); color:var(--ok-tint); display:grid; place-items:center; }
.ax-sos-va .ic svg { width:24px; height:24px; }
.ax-sos-va b { display:block; font-size:1.1rem; }
.ax-sos-va div > span { display:block; margin-top:.2rem; line-height:1.45; color:var(--ink); }
/* Sin SOS (no activo en el condominio): los cuatro verbos ocupan todo el ancho. */
.cs-bar:not(:has(.cs-bar-sos)) { grid-template-columns:repeat(4, minmax(0, 1fr)); }

/* ===== Caseta · Entradas (K2: escáner C4, resultado C5, registrar entrada C6, buscador C2, dentro ahora C8, historial) =====
   Sub-prefijos: .cs-ib (botón de icono 52px), .cs-esc-*, .cs-ver-*, .cs-acc, .cs-chk-*, .cs-busca-*, .cs-sal-*, .acc-* (historial). */
.cs-ib { width:52px; height:52px; flex:none; border-radius:16px; background:var(--panel); border:1px solid var(--line);
    color:var(--ink); display:inline-grid; place-items:center; text-decoration:none; cursor:pointer; padding:0; font:inherit; }
.cs-ib svg { width:24px; height:24px; }
body.es-caseta a.cs-ib { color:var(--ink); }
.cs-ib:active { filter:brightness(.93); }

/* C4 · Escáner: visor de cámara (--cam) a lo ancho + hoja fija con el folio a mano y los últimos escaneos. */
.cs-esc { --cs-sobre-cam:var(--on-accent); --cs-marco:color-mix(in srgb, var(--accent) 45%, var(--tint)); margin:-1rem -1rem 0; }
body.es-caseta[data-modo="noche"] .cs-esc { --cs-sobre-cam:var(--ink); --cs-marco:var(--accent); }
.cs-esc-visor { position:relative; height:min(50vh, 440px); min-height:320px; background:var(--cam); overflow:hidden; color:var(--cs-sobre-cam); }
.cs-esc-stage { position:absolute; inset:0; }
.cs-esc-stage video, .cs-esc-stage #reader video { width:100% !important; height:100% !important; object-fit:cover; display:block; }
.cs-esc-stage #reader { width:100%; height:100%; border:0 !important; }
.cs-esc-stage [hidden] { display:none !important; }
.cs-esc-top { position:absolute; top:16px; left:16px; right:16px; z-index:2; display:flex; align-items:center; gap:10px; }
.cs-esc-top h1 { flex:1; min-width:0; margin:0; font-size:19px; font-weight:800; color:inherit; }
.cs-esc-ib, body.es-caseta a.cs-esc-ib { border:0; background:color-mix(in srgb, var(--cs-sobre-cam) 16%, transparent); color:var(--cs-sobre-cam); }
.cs-esc-ib[aria-pressed="true"] { background:var(--cs-sobre-cam); color:var(--cam); }
.cs-esc-ib[hidden] { display:none; }
.cs-esc-marco { position:absolute; left:50%; top:52%; width:236px; height:236px; transform:translate(-50%, -50%); z-index:1; pointer-events:none; }
.cs-esc-marco i { position:absolute; width:44px; height:44px; border:0 solid var(--cs-marco); }
.cs-esc-marco i:nth-child(1) { top:0; left:0; border-top-width:5px; border-left-width:5px; border-top-left-radius:18px; }
.cs-esc-marco i:nth-child(2) { top:0; right:0; border-top-width:5px; border-right-width:5px; border-top-right-radius:18px; }
.cs-esc-marco i:nth-child(3) { bottom:0; left:0; border-bottom-width:5px; border-left-width:5px; border-bottom-left-radius:18px; }
.cs-esc-marco i:nth-child(4) { bottom:0; right:0; border-bottom-width:5px; border-right-width:5px; border-bottom-right-radius:18px; }
.cs-esc-estado { position:absolute; left:16px; right:16px; bottom:40px; z-index:2; margin:0; text-align:center; font-size:16px; font-weight:700; color:var(--cs-sobre-cam); }
.cs-esc-hoja { position:relative; z-index:3; margin-top:-24px; padding:18px 16px 8px; border-radius:24px 24px 0 0; background:var(--cream);
    display:flex; flex-direction:column; gap:16px; }
.cs-esc-hoja .alert { margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.cs-esc-folio label { display:block; margin:0 0 8px; font-size:15px; font-weight:800; color:var(--ink); }
.cs-esc-man { display:flex; align-items:center; gap:8px; height:60px; padding:0 6px 0 14px; border-radius:16px; background:var(--panel); border:2px solid var(--line); }
.cs-esc-man:focus-within { border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
body.es-caseta .cs-esc-man input { flex:1; min-width:0; height:100%; min-height:0; padding:0; border:0; background:none !important; box-shadow:none;
    font-size:20px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
body.es-caseta .cs-esc-man input::placeholder { color:var(--muted); opacity:.7; }
body.es-caseta .cs-esc-man input:focus { outline:none; box-shadow:none; }
body.es-caseta .cs-esc-man .btn { min-height:48px; padding:0 16px; border-radius:12px; font-size:16px; font-weight:800; }
.cs-esc-ult h2 { margin:0 0 4px; font-size:13px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.cs-esc-fila { display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 0; border-top:1px solid var(--line); }
.cs-esc-ult h2 + .cs-esc-fila { border-top:0; }
.cs-esc-fila > span:first-child { flex:1; min-width:0; }
.cs-esc-fila b { display:block; font-size:15px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-esc-fila small { display:block; font-size:13px; color:var(--muted); }
.cs-esc-fila .pill { flex:none; }
@media (min-width:768px) {
    .cs-esc { max-width:560px; margin:0 auto; }
    .cs-esc-visor { border-radius:24px; }
    .cs-esc-hoja { border-radius:24px; margin-top:-24px; }
}

/* C5 · Resultado del pase (guardia). */
.cs-ver { display:flex; flex-direction:column; gap:16px; max-width:560px; margin:0 auto; }
.cs-ver-top { display:flex; align-items:center; gap:12px; }
.cs-ver-folio { flex:1; min-width:0; font-size:16px; font-weight:700; color:var(--muted); }
.cs-ver .cs-res-t b { font-size:28px; }
.cs-ver .cs-res-t span { font-size:16px; font-weight:700; }
.cs-ver-quien { display:flex; align-items:center; gap:14px; }
.cs-ver-ini { width:64px; height:64px; flex:none; border-radius:18px; background:var(--tint); color:var(--accent); display:grid; place-items:center; font-size:22px; font-weight:800; }
.cs-ver-nom { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cs-ver-nom b { font-size:22px; font-weight:800; line-height:1.2; overflow-wrap:anywhere; }
.cs-ver-nom span { font-size:15px; font-weight:700; color:var(--muted); }
.cs-ver-filas { background:var(--panel); border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.cs-ver-fila { display:flex; align-items:center; gap:14px; min-height:56px; padding:8px 16px; border-top:1px solid var(--line); }
.cs-ver-fila:first-child { border-top:0; }
.cs-ver-fila > svg { width:22px; height:22px; flex:none; color:var(--accent); }
.cs-ver-fila > span { flex:1; font-size:15px; font-weight:600; color:var(--muted); }
.cs-ver-fila > b { font-size:16px; font-weight:800; text-align:right; overflow-wrap:anywhere; }
.cs-ver-fila > b.mono { font-size:18px; letter-spacing:.04em; }
.cs-ver-fila > b.cs-ver-no { color:var(--muted); font-weight:700; }
.cs-ver-acc { display:flex; flex-direction:column; gap:10px; }
.cs-ver-otro, body.es-caseta a.cs-ver-otro { min-height:48px; display:flex; align-items:center; justify-content:center; gap:8px; font-size:16px; font-weight:800; color:var(--accent); text-decoration:none; }
.cs-ver-otro svg { width:22px; height:22px; }
/* Acciones por estado (partials/caseta_actions). */
.cs-acc { display:flex; flex-direction:column; gap:10px; }
.cs-acc form { margin:0; }
.cs-acc .btn { width:100%; }
.cs-acc .btn svg, .cs-ver-acc > .btn svg { width:22px; height:22px; }
.cs-acc-nota { margin:0; font-size:14px; line-height:1.45; color:var(--muted); }

/* C6 · Registrar entrada. */
.cs-chk-head { display:flex; align-items:center; gap:12px; margin:0 0 1rem; }
.cs-chk-head h1 { margin:0; font-size:22px; font-weight:800; }
.cs-chk-head p { margin:2px 0 0; font-size:15px; font-weight:700; color:var(--muted); overflow-wrap:anywhere; }
.cs-chk { display:flex; flex-direction:column; gap:18px; max-width:640px; }
.cs-chk .sw-row, .cs-chk .field, .cs-chk .foto-tile, .cs-chk .alert { margin-bottom:0; }
.cs-chk .field { display:flex; flex-direction:column; gap:8px; }
.cs-chk .field > label, .cs-chk .lbl { font-size:16px; font-weight:800; margin:0; }
.cs-chk .alert { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; }
.cs-chk-pax { display:flex; align-items:center; gap:10px; min-height:64px; padding:6px; border-radius:16px; border:1.5px solid var(--line); background:var(--panel); }
.cs-chk-pax label { flex:1; padding-left:10px; font-size:16px; font-weight:800; }
.cs-chk-pax .stepper { border:0; background:none; align-items:center; gap:6px; overflow:visible; }
.cs-chk-pax .stepper button { width:52px; height:52px; min-height:52px; border-radius:14px; background:var(--tint); color:var(--accent); display:grid; place-items:center; }
.cs-chk-pax .stepper button svg { width:22px; height:22px; }
body.es-caseta .cs-chk-pax .stepper input { width:52px; min-height:0; padding:0; border:0; background:none !important; text-align:center; font-size:26px; font-weight:700; box-shadow:none; }
.cs-chk-par { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
body.es-caseta .cs-chk-mono { height:56px; border-radius:16px; font-size:20px; letter-spacing:.06em; text-transform:uppercase; }
.cs-chk-cajones { display:flex; flex-wrap:wrap; gap:8px; }
.cs-chk .cs-chk-cajon { margin:0; font-size:inherit; font-weight:inherit; }
.cs-chk-cajon, .cs-chk .cs-chk-cajon { position:relative; display:inline-flex; flex-direction:column; align-items:flex-start; justify-content:center; min-height:56px; padding:6px 14px;
    border-radius:16px; border:2px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer; }
.cs-chk-cajon input { position:absolute; opacity:0; width:0 !important; height:0 !important; min-width:0; border:0 !important; }
.cs-chk-cajon b { font-size:16px; }
.cs-chk-cajon small { font-size:12px; font-weight:700; color:var(--muted); }
.cs-chk-cajon:has(input:checked) { border-color:var(--accent); background:var(--tint); }
.cs-chk-cajon:has(input:checked) small { color:var(--accent); }
.cs-chk-cajon:has(input:focus-visible) { outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:2px; }
.cs-chk-cajacc { display:flex; flex-wrap:wrap; gap:.5rem; width:100%; margin-top:.4rem; }
.cs-chk-cajacc .btn svg { width:20px; height:20px; }
.cs-chk-camvivo { align-self:flex-start; }
.cs-chk-cam { display:flex; flex-direction:column; gap:.5rem; }
.cs-chk-cam video { width:100%; max-width:360px; border-radius:12px; background:var(--cam); }
.cs-chk .cs-contacto .btn { min-height:64px; }
#cs-chk-vivo { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; }
#cs-chk-vivo[hidden] { display:none; }
#cs-chk-vivo span { flex:1; min-width:180px; font-weight:700; }
body.es-caseta .cs-chk .cs-cta .btn svg { width:24px; height:24px; }

/* C2 · Buscador único: disparador con forma de campo + diálogo a pantalla completa. */
.cs-busca-disparo { display:flex; align-items:center; gap:10px; width:100%; min-height:60px; margin:0 0 .9rem; padding:0 16px;
    border-radius:18px; border:2px solid var(--line); background:var(--panel); color:var(--muted); font:inherit; font-size:16px; font-weight:600;
    text-align:left; cursor:text; }
.cs-busca-disparo:hover, .cs-busca-disparo:focus-visible { border-color:var(--accent); outline:none; }
.cs-busca-disparo svg { width:24px; height:24px; flex:none; color:var(--accent); }
.cs-busca-disparo span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
dialog.cs-busca { position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0;
    background:var(--cream); color:var(--ink); overflow:auto; }
dialog.cs-busca::backdrop { background:color-mix(in srgb, var(--ink) 45%, transparent); }
.cs-busca-in { max-width:760px; margin:0 auto; padding:18px 16px calc(24px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:14px; }
.cs-busca-top { display:flex; align-items:center; gap:8px; }
.cs-busca-campo { flex:1; min-width:0; display:flex; align-items:center; gap:10px; height:60px; padding:0 6px 0 16px; border-radius:18px;
    background:var(--panel); border:2px solid var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.cs-busca-campo > svg { width:24px; height:24px; flex:none; color:var(--accent); }
body .cs-busca-campo input { flex:1; min-width:0; height:100%; min-height:0; padding:0; border:0; border-radius:0; background:none !important;
    font-size:20px; font-weight:700; letter-spacing:.04em; color:var(--ink); box-shadow:none; }
body .cs-busca-campo input:focus { outline:none; box-shadow:none; }
body .cs-busca-campo input::-webkit-search-cancel-button { display:none; }
.cs-busca-borrar { width:48px; height:48px; flex:none; border:0; background:none; color:var(--muted); display:grid; place-items:center; border-radius:12px; cursor:pointer; }
.cs-busca-borrar[hidden] { display:none; }
.cs-busca-borrar svg { width:22px; height:22px; }
.cs-busca-cerrar { min-height:52px; padding:0 6px; border:0; background:none; font:inherit; font-size:16px; font-weight:800; color:var(--accent); cursor:pointer; }
.cs-busca-n { margin:0; font-size:14px; font-weight:700; line-height:1.45; color:var(--muted); }
.cs-busca-lista { display:flex; flex-direction:column; gap:12px; }
.cs-busca-res { display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:20px; background:var(--panel); border:1px solid var(--line); }
.cs-busca-cab { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cs-busca-tipo { display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; background:var(--cream); font-size:12px; font-weight:800;
    color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.cs-busca-res .cs-res.chico { display:inline-flex; padding:4px 12px 4px 8px; gap:6px; border-radius:999px; }
.cs-busca-res .cs-res.chico[hidden] { display:none; }
.cs-busca-res .cs-res.chico .cs-res-ic { width:20px; height:20px; } .cs-busca-res .cs-res.chico .cs-res-ic svg { width:18px; height:18px; }
.cs-busca-res .cs-res.chico .cs-res-t b { font-size:14px; }
.cs-busca-dato { align-self:flex-start; max-width:100%; padding:4px 10px; border-radius:10px; background:var(--cream); font-size:20px; font-weight:700; letter-spacing:.04em; overflow-wrap:anywhere; }
.cs-busca-dato[hidden] { display:none; }
.cs-busca-res mark { background:color-mix(in srgb, var(--accent) 30%, transparent); color:inherit; border-radius:4px; }
.cs-busca-titulo { font-size:18px; font-weight:800; overflow-wrap:anywhere; }
.cs-busca-ctx { font-size:15px; color:var(--muted); }
.cs-busca-ctx:empty { display:none; }
.cs-busca-acc { display:flex; flex-direction:column; gap:4px; }
.cs-busca-acc form { margin:0; }
.cs-busca-btn { width:100%; min-height:56px; border-radius:16px; font-size:17px; font-weight:800; }
.cs-busca-btn.secondary { border:2px solid var(--line); }
.cs-busca-btn .ic svg { width:20px; height:20px; }
.cs-busca-mas, body.es-caseta a.cs-busca-mas { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:16px; font-weight:800; color:var(--accent); text-decoration:none; }
.cs-busca-mas .ic svg { width:20px; height:20px; }

/* C8 · Dentro ahora / Salidas. */
.cs-sal-head { display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; margin:0 0 .8rem; }
.cs-sal-head h1 { margin:0; font-size:24px; font-weight:800; }
.cs-sal-head .mono { font-size:15px; font-weight:700; color:var(--muted); }
.cs-sal-chips { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 -1rem 1rem; padding:0 1rem 2px; }
.cs-sal-chips::-webkit-scrollbar { display:none; }
.cs-sal-chip, body.es-caseta a.cs-sal-chip { flex:none; display:inline-flex; align-items:center; gap:6px; min-height:48px; padding:0 16px; border-radius:999px;
    border:2px solid var(--line); background:var(--panel); font-size:15px; font-weight:800; color:var(--ink); text-decoration:none; }
.cs-sal-chip .mono { font-size:13px; }
.cs-sal-chip.alerta .mono { color:var(--warn); }
.cs-sal-chip[aria-current], body.es-caseta a.cs-sal-chip[aria-current] { border-color:var(--accent); background:var(--tint); color:var(--accent); }
.cs-sal-lista { display:flex; flex-direction:column; gap:12px; }
.cs-sal-card { display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:20px; background:var(--panel); border:1px solid var(--line); }
.cs-sal-card[hidden] { display:none; }
.cs-sal-card.vencido { border:2px solid var(--warn); }
.cs-sal-top { display:flex; align-items:flex-start; gap:10px; }
.cs-sal-ico { width:44px; height:44px; flex:none; border-radius:12px; background:var(--tint); color:var(--accent); display:grid; place-items:center; }
.cs-sal-ico svg { width:22px; height:22px; }
.cs-sal-t { flex:1; min-width:0; }
.cs-sal-t b { display:block; font-size:17px; font-weight:800; overflow-wrap:anywhere; }
.cs-sal-t small { display:block; margin-top:2px; font-size:14px; font-weight:600; color:var(--muted); }
.cs-sal-t .mono { color:var(--ink); font-weight:700; }
.cs-sal-top .pill { flex:none; }
.cs-sal-card form { margin:0; }
.cs-sal-salio { width:100%; min-height:56px; border-radius:16px; font-size:17px; font-weight:800; border:2px solid var(--line); background:var(--panel); color:var(--ink); }
.cs-sal-salio svg { width:22px; height:22px; }
.cs-sal-vacio[hidden] { display:none; }
.cs-sal-vacio p { margin:0; }
@media (min-width:1024px) {
    .cs-sal-lista { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:start; }
    .cs-sal-lista > .cs-sal-vacio { grid-column:1 / -1; }
}

/* Historial de accesos (accesos/index + accesos/detail): sin estilos en línea ni emoji. */
.acc-h2 { margin:0 0 .6rem; font-size:1.05rem; }
.acc-p { margin:.25rem 0; }
.acc-dato { margin:.15rem 0 0; font-size:.85rem; }
.acc-dato .pill { margin-left:.3rem; }
.acc-fotos { display:flex; gap:.6rem; flex-wrap:wrap; margin:.5rem 0 0; }
.acc-foto { margin:0; text-align:center; }
.acc-foto img { max-height:90px; border-radius:8px; border:1px solid var(--line); }
.acc-foto figcaption { font-size:.75rem; margin-top:.2rem; color:var(--muted); display:inline-flex; align-items:center; gap:.25rem; }
.acc-bitacora { margin:0; padding-left:1.1rem; font-size:.9rem; }
.acc-bitacora li { margin-bottom:.4rem; }
.acc-paq { margin-left:auto; display:inline-flex; align-items:center; gap:.3rem; }
.acc-vig { font-size:.85rem; }
.acc-rango { font-size:.8rem; margin:-.5rem 0 1rem; }
.cs-contacto + .acc-p, .acc-p + .cs-contacto { margin-top:.4rem; }
/* Modo noche: el enlace genérico de la caseta (`a` en acento) borraba el texto de la pestaña activa, y la
   tarjeta móvil de `table.grid` es blanca fija: tokens de noche para las dos (historial y cualquier tabla de caseta). */
body.es-caseta[data-modo="noche"] .tabs a.active { color:var(--on-accent); }
@media (max-width:767px) {
    body.es-caseta[data-modo="noche"] table.grid tr { background:var(--panel); border-color:var(--line); }
}

/* Servicios generales: acceso a «Dentro ahora» + bitácora del día como lista (la parte de K2 de caseta/servicios). */
.cs-srv-dentro, body.es-caseta a.cs-srv-dentro { display:flex; align-items:center; gap:12px; min-height:72px; margin:0 0 1.2rem; padding:12px 14px;
    border-radius:20px; background:var(--panel); border:1px solid var(--line); color:var(--ink); text-decoration:none; }
.cs-srv-dentro > svg { width:22px; height:22px; flex:none; color:var(--muted); }
.cs-srv-dentro-t { flex:1; min-width:0; }
.cs-srv-dentro-t b { display:block; font-size:17px; font-weight:800; }
.cs-srv-dentro-t small { display:block; font-size:14px; color:var(--muted); }
.cs-srv-filtro { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 .8rem; }
.cs-srv-filtro input[type=date] { flex:0 1 180px; }
.cs-srv-filtro input[type=search] { flex:1 1 180px; min-width:0; }
.cs-srv-bit { list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:20px; background:var(--panel); overflow:hidden; }
.cs-srv-bit li { display:flex; align-items:center; gap:12px; min-height:64px; padding:10px 14px; border-top:1px solid var(--line); }
.cs-srv-bit li:first-child { border-top:0; }
.cs-srv-bit-t { flex:1; min-width:0; }
.cs-srv-bit-t b { display:block; font-size:16px; font-weight:800; overflow-wrap:anywhere; }
.cs-srv-bit-t small { display:block; font-size:14px; color:var(--muted); }
.cs-srv-bit-h { flex:none; font-size:14px; font-weight:700; color:var(--muted); }
.cs-srv-bit .pill { flex:none; }
/* K3 · De noche --ink es claro: el velo de la hoja se oscurece con --cam (si no, aclara la pantalla). */
body.es-caseta[data-modo="noche"] .cs-reg-hoja .ra-sheet-scrim { background:color-mix(in srgb, var(--cam) 70%, transparent); }
.cs-ev .field input[type=search] { width:100%; min-height:56px; }
/* K4 · De noche --ink es claro: el velo de las hojas de K4 se oscurece con --cam. */
body.es-caseta[data-modo="noche"] .cs-ent-hoja::backdrop, body.es-caseta[data-modo="noche"] #pkClave::backdrop,
body.es-caseta[data-modo="noche"] #cs-ev-nolist::backdrop { background:color-mix(in srgb, var(--cam) 70%, transparent); }
/* K4 · los type=search no toman el 100% de su .field por defecto. */
.cs-lst-filtro input[type=search], .cs-pk-filtros-f input[type=search], #brz-form input[type=search] { width:100%; }
/* K4 · en la hoja, el título del formulario respira antes del primer campo. */
.cs-ent-tit { margin-bottom:14px; }
/* K4 · ⋮ arriba a la derecha cuando la tarjeta no tiene acción principal (paquete entregado). */
.cs-lst-top > .gv-menu { flex:none; margin-left:auto; }
.cs-lst-top > .gv-menu .gv-more { width:52px; height:52px; flex-basis:52px; border-radius:14px; border:1.5px solid var(--line); background:var(--panel); color:var(--ink); }
.cs-esp-reloj.vencio + .cs-esp-barra span { background:var(--warn); }   /* K3 · espera vencida */

/* El botón flotante de ayuda tapaba acciones de la caseta en el teléfono (Buscar del escáner, CTA fijos):
   ahí la ayuda queda en el Menú; en escritorio sigue flotando. */
@media (max-width:767px) { body.es-caseta #kaan-help { display:none; } }

/* Hoja de confirmación: `.hc-ic` tiene display propio y el diálogo vive fuera de main (main [hidden] no lo alcanza). */
.hc-ic[hidden] { display:none; }
/* Velos de hojas de noche: --ink es CLARO de noche y aclaraba la pantalla en vez de oscurecerla. */
body.es-caseta[data-modo="noche"] .gv-sheet::backdrop { background:color-mix(in srgb, var(--cam, #0B0F0D) 72%, transparent); }
body.es-caseta[data-modo="noche"] .ra-sheet-scrim,
body.es-caseta[data-modo="noche"] .gv-menu-portal::before { background:color-mix(in srgb, var(--cam) 72%, transparent); }
/* De noche el hover de danger-soft mezclaba con blanco. */
body.es-caseta[data-modo="noche"] .btn.danger-soft:hover { background:color-mix(in srgb, var(--danger) 18%, var(--panel)); }

/* Ayuda dentro del Menú de la caseta (en el teléfono no hay botón flotante «?»). */
.cs-menu-ayuda { display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:56px; margin-top:.5rem;
    border:1px solid var(--line); border-radius:16px; background:var(--panel); color:var(--accent); font-weight:700; text-decoration:none; }
.cs-menu-ayuda svg { width:22px; height:22px; }

/* ===== Portal · visita en caseta (visita sin pase esperando respuesta) ===== */
.ra-visitas { display:flex; flex-direction:column; gap:.5rem; }
.ra-alerta.ra-visita { min-height:64px; background:var(--warn-tint); color:var(--ink);
    border:1.5px solid color-mix(in srgb, var(--warn) 45%, transparent); }
.ra-visita .ra-visita-ic { display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:12px;
    background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn); }
.ra-visita .ra-t b { display:block; font-weight:800; overflow-wrap:anywhere; }
.ra-visita .ra-t small { display:block; color:var(--warn); font-weight:700; font-size:.84rem; }
.ra-visita .ra-visita-btn { flex:none; display:inline-flex; align-items:center; min-height:44px; padding:0 .9rem; border-radius:12px;
    background:var(--accent); color:var(--on-accent); font-weight:800; font-size:.9rem; }

/* ===== Caseta · deshacer entrada: el toast de «Deshacer» se veía ===== */
/* El toast de «Deshacer» del layout (.kaan-toast) comparte id con el del palette (#kaan-toast, que nace
   oculto —opacity 0, fuera de pantalla— y se muestra con .on). El id ganaba y el de Deshacer quedaba
   invisible (aunque clicable). Este lo muestra tal cual lo pinta su bloque. */
#kaan-toast.kaan-toast { opacity:1; transform:translateX(-50%); bottom:calc(var(--tabbar-h, 0px) + 16px); }
/* …y sin heredar del #kaan-toast del palette el ancho angosto (left:50% lo encogía a media pantalla),
   los botones color arena sin fondo ni los iconos rellenos. */
#kaan-toast.kaan-toast { width:max-content; max-width:min(560px, calc(100vw - 24px)); font-size:.9rem; font-weight:600;
    padding:.7rem .8rem .7rem 1rem; border-radius:14px; }
#kaan-toast.kaan-toast svg { stroke:currentColor; fill:none; }
#kaan-toast.kaan-toast .kt-undo { background:var(--on-accent); color:var(--ink); padding:.4rem .8rem; border-radius:10px; }
#kaan-toast.kaan-toast .kt-close { color:color-mix(in srgb, var(--on-accent) 70%, transparent); padding:0; }
/* En la caseta (de pie, una mano): nada < 48 px. */
body.es-caseta #kaan-toast.kaan-toast .kt-undo { min-height:52px; padding:.4rem 1rem; }
body.es-caseta #kaan-toast.kaan-toast .kt-close { min-width:48px; min-height:48px; }

/* ===== Caseta · Turno en tablet: cambiar de caseta desde la columna lateral (N) ===== */
/* En ≥1024 px horizontal el encabezado del Turno se oculta y con él el selector «¿En qué caseta estás?». */
.cs-turno-lado-caseta { display:flex; align-items:center; gap:6px; width:100%; min-height:48px; margin:0; padding:0; border:0;
    background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.cs-turno-lado-caseta b { flex:0 1 auto; min-width:0; }
.cs-turno-lado-caseta svg { width:20px; height:20px; flex:none; color:var(--accent); }
.cs-turno-lado-caseta:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:2px; border-radius:10px; }
/* De noche `.btn.secondary` toma el fondo del panel y, dentro de una hoja (también panel), quedaba como texto
   suelto («Cancelar», «Cerrar»): se le devuelve el contorno para que se lea como botón. */
body.es-caseta[data-modo="noche"] dialog .btn.secondary { border:1.5px solid var(--line) !important; color:var(--ink); }
/* «Registrar» del pie del Directorio salía con el azul por omisión del navegador de día. */
.cs-dir-pie a { color:var(--accent); font-weight:700; }

/* Hoja «Rechazar reserva» (amenidades/_hoja_rechazo): opciones de reembolso apiladas. */
.rech-opts { display:flex; flex-direction:column; gap:.5rem; }
.rech-opts .gv-opt { margin:0; }

/* ===================== Personal de campo — rediseño (docs/design/rediseño-app/personal/impl-personal.md) =====================
   Prefijo .pe-*. Al sol, con guantes, una mano: principal 64 px, secundarias 56–60, chips 52, nunca < 48;
   texto ≥ 15 px. `body.es-campo` lo pone el layout para quien hace el trabajo (tareas.propias sin admin.access);
   `body.es-operativo` lo comparten caseta y campo (mismas medidas táctiles, una sola regla). */
/* (La caseta conserva sus propias medidas, ya probadas en `body.es-caseta`; estas son las del personal.) */
body.es-campo .btn { min-height:56px; font-size:1rem; padding:.6rem 1.1rem; border-radius:14px; }
body.es-campo .btn.small { min-height:48px; font-size:.92rem; }
body.es-campo .pill { font-size:.82rem; padding:.2rem .6rem; }
body.es-campo main input:not([type=checkbox]):not([type=radio]):not([type=file]),
body.es-campo main select, body.es-campo main textarea { font-size:17px; }
body.es-campo .tabbar .tab { font-size:.8rem; }

/* Modo noche del personal: los MISMOS tokens que la caseta (§1.1). No es automático por horario (casi todo el
   trabajo es de día): lo pide el teléfono en modo oscuro o la persona en «Más › Letra y colores». */
body.es-campo[data-modo="noche"] {
    --cream:#111915; --bg:#0B110E; --panel:#1A2420; --ink:#E8EFEA; --muted:#A9B6AE; --line:#2E3B34;
    --accent: color-mix(in srgb, var(--accent-base) 55%, #fff);
    --accent2: color-mix(in srgb, var(--accent-base) 45%, #fff);
    --tint: color-mix(in srgb, var(--accent-base) 32%, #1A2420);
    --on-accent:#0F1712;
    --danger:#FF8E78; --danger-tint:#3B201B; --warn:#F2C46D; --warn-tint:#352A12; --ok:#86D9A6; --ok-tint:#173526;
    --info:#A5B4FC; --info-tint:#1E2240; --on-sand:#2A1E05; --on-dark-dim:#A9B6AE;
    color-scheme: dark; background:var(--cream) !important; color:var(--ink);
}
@media (prefers-color-scheme: dark) {
    body.es-campo:not([data-modo="dia"]) {
        --cream:#111915; --bg:#0B110E; --panel:#1A2420; --ink:#E8EFEA; --muted:#A9B6AE; --line:#2E3B34;
        --accent: color-mix(in srgb, var(--accent-base) 55%, #fff);
        --accent2: color-mix(in srgb, var(--accent-base) 45%, #fff);
        --tint: color-mix(in srgb, var(--accent-base) 32%, #1A2420);
        --on-accent:#0F1712;
        --danger:#FF8E78; --danger-tint:#3B201B; --warn:#F2C46D; --warn-tint:#352A12; --ok:#86D9A6; --ok-tint:#173526;
        --info:#A5B4FC; --info-tint:#1E2240; --on-sand:#2A1E05; --on-dark-dim:#A9B6AE;
        color-scheme: dark; background:var(--cream) !important; color:var(--ink);
    }
}
:is(body.es-campo[data-modo="noche"]) :is(main .card, .alert, .btn.secondary, main input, main select, main textarea) {
    background:var(--panel) !important; border-color:var(--line) !important; color:var(--ink); box-shadow:none !important; }
:is(body.es-campo[data-modo="noche"]) header.topbar, :is(body.es-campo[data-modo="noche"]) .tabbar {
    background:var(--panel) !important; color:var(--ink); border-color:var(--line); }

/* ---- Página y encabezados ---- */
.pe-page { max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:18px; }
.pe-h2 { margin:0 0 10px; font-size:13px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }
.pe-hola { display:flex; align-items:center; gap:12px; }
.pe-hola .av { width:52px; height:52px; border-radius:16px; background:var(--tint); color:var(--accent); display:grid;
    place-items:center; font-size:18px; font-weight:800; flex-shrink:0; }
.pe-hola h1 { margin:0; font-size:24px; font-weight:800; }
.pe-hola .sub { font-size:15px; font-weight:700; color:var(--muted); }
.pe-sync { width:52px; height:52px; border-radius:16px; border:1px solid var(--line); background:var(--panel); color:var(--muted);
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; text-decoration:none; }
.pe-sync.pend { color:var(--warn); border-color:color-mix(in srgb, var(--warn) 45%, var(--line)); background:var(--warn-tint); }
.pe-sync svg { width:22px; height:22px; }
.pe-sync .n { position:absolute; top:-6px; right:-6px; min-width:22px; height:22px; padding:0 6px; border-radius:11px;
    background:var(--warn); color:var(--on-accent); font-size:12px; font-weight:800; display:grid; place-items:center; }

/* ---- Notas (franjas) ---- */
.pe-note { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:14px; font-size:15px; font-weight:700;
    line-height:1.45; text-decoration:none; }
.pe-note svg { width:22px; height:22px; flex:none; }
.pe-note.info { background:var(--tint); color:var(--ink); } .pe-note.info svg { color:var(--accent); }
.pe-note.warn { background:var(--warn-tint); color:var(--warn); }
.pe-note.bad { background:var(--danger-tint); color:var(--danger); }
.pe-note.ok { background:var(--ok-tint); color:var(--ok); }
.pe-pie { margin:0; font-size:14px; font-weight:600; color:var(--muted); line-height:1.45; display:flex; gap:8px; }
.pe-pie svg { width:18px; height:18px; flex:none; }

/* ---- Progreso del día ---- */
.pe-prog { display:flex; flex-direction:column; gap:10px; padding:14px 16px; border-radius:18px; background:var(--panel); border:1px solid var(--line); }
.pe-prog b { font-size:18px; }
.pe-segs { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:4px; }
.pe-segs i { height:8px; border-radius:4px; background:color-mix(in srgb, var(--line) 80%, var(--cream)); }
.pe-segs i.ok { background:var(--ok); } .pe-segs i.cur { background:var(--accent); } .pe-segs i.bad { background:var(--danger); }
.pe-prog .turno { font-size:14px; font-weight:700; color:var(--muted); display:flex; align-items:center; gap:6px; }
.pe-prog .turno svg { width:18px; height:18px; }

/* ---- Lo siguiente (tarjeta destacada) ---- */
.pe-next { display:flex; flex-direction:column; gap:12px; padding:16px; border-radius:20px; background:var(--panel); border:2px solid var(--accent); }
.pe-next .cab { display:flex; align-items:flex-start; gap:12px; }
.pe-next .tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.pe-next .ty { font-size:13px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.pe-next .tt { font-size:20px; font-weight:800; line-height:1.25; }
.pe-next .dd { font-size:15px; font-weight:600; color:var(--muted); }
.pe-next form { margin:0; }

/* ---- Filas de lista (toda la fila es el enlace) ---- */
.pe-box { background:var(--panel); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.pe-it { display:flex; align-items:flex-start; gap:12px; min-height:80px; padding:12px 14px; border-top:1px solid var(--line);
    text-decoration:none; color:var(--ink); box-sizing:border-box; width:100%; background:none; border-left:0; border-right:0;
    border-bottom:0; font:inherit; text-align:left; cursor:pointer; }
.pe-box > :first-child, .pe-box > form:first-child .pe-it { border-top:0; }
.pe-box > form { margin:0; }
.pe-it:active, .pe-it:hover { background:color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.pe-it.mudo { cursor:default; color:var(--muted); min-height:64px; }
.pe-it.mudo:hover, .pe-it.mudo:active { background:none; }
.pe-it .tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.pe-it .ln1 { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pe-it .ty { font-size:13px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.pe-it b { font-size:17px; font-weight:800; line-height:1.25; color:var(--ink); }
.pe-it small { font-size:15px; font-weight:600; color:var(--muted); line-height:1.35; }
.pe-it .chev { color:var(--muted); align-self:center; }
.pe-it .chev svg { width:20px; height:20px; }
.pe-tic { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; flex-shrink:0; background:var(--tint); color:var(--accent); }
.pe-tic svg { width:24px; height:24px; }
.pe-tic.ok { background:var(--ok-tint); color:var(--ok); }
.pe-tic.bad { background:var(--danger-tint); color:var(--danger); }
.pe-tic.mudo { background:var(--cream); color:var(--muted); }

/* ---- Botones grandes del modo campo ---- */
.pe-bp { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:64px; border-radius:18px; border:0;
    background:var(--accent); color:var(--on-accent); font:inherit; font-size:19px; font-weight:800; cursor:pointer; text-decoration:none;
    box-sizing:border-box; padding:0 16px; }
.pe-bp:hover { color:var(--on-accent); filter:brightness(.97); }
.pe-bp svg { width:22px; height:22px; }
.pe-bp.danger { background:var(--danger); }
.pe-bp:disabled, .pe-bp[aria-disabled="true"] { background:color-mix(in srgb, var(--muted) 30%, var(--panel)); color:var(--muted); cursor:not-allowed; filter:none; }
.pe-bs { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:60px; border-radius:18px;
    border:1.5px solid var(--line); background:var(--panel); color:var(--ink); font:inherit; font-size:17px; font-weight:800;
    cursor:pointer; text-decoration:none; box-sizing:border-box; padding:0 14px; }
.pe-bs:hover { color:var(--ink); background:color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.pe-bs svg { width:22px; height:22px; }
.pe-bs.danger { color:var(--danger); border-color:color-mix(in srgb, var(--danger) 35%, var(--line)); }
.pe-ib { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:52px; height:52px; padding:0 14px;
    border-radius:16px; background:var(--panel); border:1px solid var(--line); color:var(--ink); font:inherit; font-size:15px;
    font-weight:800; text-decoration:none; box-sizing:border-box; cursor:pointer; flex-shrink:0; }
.pe-ib svg { width:22px; height:22px; }
.pe-bp:focus-visible, .pe-bs:focus-visible, .pe-ib:focus-visible, .pe-it:focus-visible, .pe-opt:focus-within {
    outline:3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset:2px; }

/* ---- Pie fijo de pantalla (CTA + qué falta) ---- */
.pe-foot { position:sticky; bottom:calc(var(--tabbar-h, 0px) + env(safe-area-inset-bottom)); z-index:20; margin:8px -1rem 0;
    padding:12px 1rem calc(14px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--cream) 96%, transparent);
    border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.pe-foot .falta { font-size:14px; font-weight:700; color:var(--muted); text-align:center; min-height:20px; }
.pe-foot .falta.bad { color:var(--danger); }
.pe-foot .dos { display:grid; grid-template-columns:1fr 2fr; gap:10px; }
.pe-foot .dos.par { grid-template-columns:1fr 1.6fr; }

/* ---- Rondín: encabezado, pasos y las tres respuestas ---- */
.pe-rhead { display:flex; align-items:center; gap:12px; }
.pe-rhead .tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pe-rhead .tx b { font-size:16px; line-height:1.25; }
.pe-rhead .tx span { font-size:14px; font-weight:700; color:var(--muted); }
.pe-rhead .paso { font-size:18px; font-weight:700; }
.pe-steps { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:4px; }
.pe-steps i { height:8px; border-radius:4px; background:color-mix(in srgb, var(--line) 80%, var(--cream)); }
.pe-steps i.ok { background:var(--ok); } .pe-steps i.problema { background:var(--danger); } .pe-steps i.na { background:var(--muted); }
.pe-steps i.cur { background:var(--accent); }
.pe-pills { display:flex; gap:8px; flex-wrap:wrap; }
.pe-q { margin:0; font-size:24px; font-weight:800; line-height:1.25; }
.pe-opts { display:flex; flex-direction:column; gap:10px; border:0; padding:0; margin:0; }
.pe-opt { position:relative; display:flex; align-items:center; gap:14px; width:100%; min-height:72px; padding:10px 16px; border-radius:18px;
    border:2px solid var(--line); background:var(--panel); font-size:18px; font-weight:800; color:var(--ink); cursor:pointer; box-sizing:border-box; margin:0; }
.pe-opt input { position:absolute; opacity:0; width:1px; height:1px; }
.pe-opt .dot { width:44px; height:44px; border-radius:22px; display:grid; place-items:center; flex-shrink:0; background:var(--cream); color:var(--muted); }
.pe-opt .dot svg { width:24px; height:24px; }
.pe-opt.ok:has(input:checked) { border-color:var(--ok); background:var(--ok-tint); color:var(--ok); }
.pe-opt.ok:has(input:checked) .dot { background:var(--ok); color:var(--on-accent); }
.pe-opt.problema:has(input:checked) { border-color:var(--danger); background:var(--danger-tint); color:var(--danger); }
.pe-opt.problema:has(input:checked) .dot { background:var(--danger); color:var(--on-accent); }
.pe-opt.na:has(input:checked) { border-color:var(--muted); background:var(--cream); }
.pe-opt.na:has(input:checked) .dot { background:var(--muted); color:var(--on-accent); }
.pe-fld { display:flex; flex-direction:column; gap:8px; }
.pe-fld > .lbl, .pe-fld > label.lbl { font-size:16px; font-weight:800; margin:0; }
.pe-fld .lbl small { font-size:14px; font-weight:600; color:var(--muted); }
.pe-fld .hint { font-size:14px; font-weight:600; line-height:1.45; color:var(--muted); display:flex; gap:6px; align-items:center; }
.pe-fld .hint svg { width:16px; height:16px; flex:none; }
.pe-fld .err { font-size:14px; font-weight:700; color:var(--danger); }
.pe-fld textarea, .pe-fld input[type=text], .pe-fld input[type=number] { width:100%; min-height:56px; padding:12px 16px; border-radius:16px;
    border:1.5px solid var(--line); background:var(--panel); font:inherit; font-size:17px; font-weight:600; color:var(--ink); box-sizing:border-box; }
.pe-fld textarea { min-height:96px; line-height:1.45; resize:vertical; }

/* ---- Fotos que se suman (partials/campo/_campo_fotos + js/kaan-fotos.js) ---- */
.pe-shots { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.pe-shot { position:relative; aspect-ratio:1; border-radius:14px; overflow:hidden; background:var(--cam); }
.pe-shot img { width:100%; height:100%; object-fit:cover; display:block; }
.pe-shot .x { position:absolute; top:4px; right:4px; width:44px; height:44px; border-radius:22px; border:0; cursor:pointer;
    background:color-mix(in srgb, var(--cam) 70%, transparent); color:var(--cream); display:grid; place-items:center; }
.pe-shot .x svg { width:20px; height:20px; }
.pe-shot .t { position:absolute; left:6px; bottom:6px; padding:2px 6px; border-radius:6px; font-size:12px; font-weight:700;
    background:color-mix(in srgb, var(--cam) 70%, transparent); color:var(--cream); }
.pe-addshot { position:relative; aspect-ratio:1; border-radius:14px; border:2px dashed color-mix(in srgb, var(--accent) 55%, var(--line));
    background:color-mix(in srgb, var(--accent) 5%, var(--panel)); color:var(--accent); font-size:14px; font-weight:800; display:flex;
    flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; box-sizing:border-box; margin:0; text-align:center; }
.pe-addshot svg { width:26px; height:26px; }
.pe-addshot input[type=file] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; padding:0; border:0; }
.pe-addshot:has(input:focus-visible) { outline:3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset:2px; }
.pe-fotos[data-requerida="1"] .pe-addshot { border-color:var(--accent); }

/* ---- Interruptor de fila (sobre el kit .sw-row) a 68 px ---- */
body.es-campo .sw-row { min-height:68px; border-radius:16px; }
body.es-campo .sw-row .sw-t b { font-size:16px; font-weight:800; }
body.es-campo .sw-row .sw-t small { font-size:14px; }

/* ---- Segmentado y chips a 52 px ---- */
.pe-seg { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:4px; padding:4px; border-radius:16px;
    background:color-mix(in srgb, var(--line) 60%, var(--cream)); border:0; margin:0; }
.pe-seg label { position:relative; min-height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    font-size:15px; font-weight:800; color:var(--muted); cursor:pointer; text-align:center; line-height:1.15; padding:4px 6px; margin:0; }
.pe-seg input { position:absolute; opacity:0; width:1px; height:1px; }
.pe-seg label:has(input:checked) { background:var(--panel); color:var(--ink); box-shadow:0 1px 3px color-mix(in srgb, var(--ink) 18%, transparent); }
.pe-seg label:has(input:focus-visible) { outline:3px solid color-mix(in srgb, var(--accent) 60%, transparent); }
/* El mismo segmentado con enlaces (la opción es una URL: «Lo mío / Mi equipo»). */
.pe-seg a { min-height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:15px;
    font-weight:800; color:var(--muted); text-decoration:none; text-align:center; padding:4px 6px; }
.pe-seg a.on { background:var(--panel); color:var(--ink); box-shadow:0 1px 3px color-mix(in srgb, var(--ink) 18%, transparent); }
.pe-seg a:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.pe-chips { display:flex; flex-wrap:wrap; gap:8px; }
.pe-chip { position:relative; display:inline-flex; align-items:center; gap:8px; min-height:52px; padding:0 16px; border-radius:999px;
    border:2px solid var(--line); background:var(--panel); font-size:16px; font-weight:800; color:var(--ink); cursor:pointer; margin:0; }
.pe-chip input { position:absolute; opacity:0; width:1px; height:1px; }
.pe-chip:has(input:checked), .pe-chip[aria-pressed="true"] { border-color:var(--accent); background:var(--tint); color:var(--accent); }
.pe-chip:has(input:focus-visible) { outline:3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset:2px; }

/* ---- Contador grande (partials/campo/_stepper) ---- */
.pe-stepper { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px;
    border:0; border-radius:0; overflow:visible; background:none; }   /* anula el .stepper del kit (solo comparte su JS) */
.pe-stepper button { width:56px; height:56px; border-radius:16px; border:0; background:var(--tint); color:var(--accent);
    display:grid; place-items:center; cursor:pointer; }
.pe-stepper button svg { width:24px; height:24px; }
.pe-stepper input { height:56px; text-align:center; font-family:'Space Mono', ui-monospace, monospace; font-size:22px; font-weight:700;
    border:1.5px solid var(--line); border-radius:16px; background:var(--panel); color:var(--ink); width:100%; box-sizing:border-box; padding:0 4px; }
.pe-stepper.xl button { width:72px; height:72px; border-radius:18px; }
.pe-stepper.xl input { height:72px; font-size:32px; }

/* ---- Cierre: cifras y filas ---- */
.pe-cifras { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.pe-cifra { padding:12px 14px; border-radius:16px; background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column; gap:2px; }
.pe-cifra b { font-size:24px; font-weight:800; }
.pe-cifra span { font-size:14px; font-weight:700; color:var(--muted); }
.pe-cifra.bad b { color:var(--danger); }
.pe-mat { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding:12px; border-radius:16px; border:1px solid var(--line); background:var(--panel); }

/* ---- Bitácora: tarjeta de parámetro, barra de rangos y freno ---- */
.pe-param { display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:18px; background:var(--panel); border:1px solid var(--line); }
.pe-param .cab { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pe-param .cab b { font-size:17px; }
.pe-param .rng-t { font-size:14px; font-weight:600; color:var(--muted); }
.pe-rng { position:relative; height:12px; border-radius:6px; overflow:hidden; display:flex; }
.pe-rng i { height:100%; }
.pe-rng .crit { background:color-mix(in srgb, var(--danger) 55%, var(--panel)); }
.pe-rng .ale { background:color-mix(in srgb, var(--warn) 45%, var(--panel)); }
.pe-rng .rec { background:color-mix(in srgb, var(--ok) 55%, var(--panel)); }
.pe-rng .mk { position:absolute; top:0; width:4px; height:100%; border-radius:2px; background:var(--ink); transform:translateX(-50%); box-shadow:0 0 0 2px var(--panel); }
.pe-freno { display:flex; flex-direction:column; gap:10px; padding:14px 16px; border-radius:18px; background:var(--danger-tint);
    color:var(--danger); border:2px solid var(--danger); }
.pe-freno b { font-size:18px; }
.pe-freno ol { margin:0; padding-left:1.2rem; font-weight:700; line-height:1.5; color:var(--ink); }
.pe-estado { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:800; justify-content:center; }
.pe-estado i { width:12px; height:12px; border-radius:6px; background:var(--muted); }
.pe-estado.apta i { background:var(--ok); } .pe-estado.precaucion i { background:var(--warn); } .pe-estado.no_apta i { background:var(--danger); }
.pe-estado.apta { color:var(--ok); } .pe-estado.precaucion { color:var(--warn); } .pe-estado.no_apta { color:var(--danger); }

/* ---- Hilo de una tarea ---- */
.pe-hilo { display:flex; flex-direction:column; gap:10px; }
.pe-msg { padding:12px 14px; border-radius:16px; background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column; gap:4px; }
.pe-msg.mio { background:var(--tint); border-color:transparent; }
.pe-msg .de { font-size:13px; font-weight:800; color:var(--muted); }
.pe-msg p { margin:0; font-size:16px; line-height:1.45; }
.pe-fotoreporte { width:100%; max-height:260px; object-fit:cover; border-radius:16px; display:block; }

/* ---- Equipo del líder ---- */
.pe-persona { display:flex; align-items:center; gap:12px; padding:12px 14px; border-top:1px solid var(--line); }
.pe-persona:first-child { border-top:0; }
.pe-persona .ini { width:44px; height:44px; border-radius:14px; background:var(--tint); color:var(--accent); display:grid; place-items:center; font-weight:800; flex:none; }
.pe-persona .tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.pe-persona .tx b { font-size:16px; }
.pe-persona .tx small { font-size:14px; color:var(--muted); font-weight:600; }

@media (prefers-reduced-motion:reduce) { .pe-it, .pe-bp, .pe-bs, .pe-opt { transition:none !important; } }

/* ===================== Rutinas (administración) — docs/design/rediseño-app/rutinas/impl-rutinas.md =====================
   Prefijo .ru-*. Se monta sobre .pe-* (filas, pills, pie) y agrega cifras que filtran, avatar del responsable y el
   calendario de 4 semanas. Mobile-first; en escritorio la lista se queda en una columna cómoda (R11 la reparte). */
.ru-kpis { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
@media (min-width:768px) { .ru-kpis { grid-template-columns:repeat(4, minmax(0,1fr)); } }
.ru-kpi { display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:16px; background:var(--panel);
    border:1px solid var(--line); text-decoration:none; color:var(--ink); min-height:76px; box-sizing:border-box; }
.ru-kpi:hover { color:var(--ink); border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); }
.ru-kpi .n { font-size:26px; font-weight:800; line-height:1.1; }
.ru-kpi .n small { font-size:15px; font-weight:700; color:var(--muted); }
.ru-kpi .l { font-size:14px; font-weight:700; color:var(--muted); }
.ru-kpi.bad .n { color:var(--danger); } .ru-kpi.warn .n { color:var(--warn); }
.ru-kpi.on { border:2px solid var(--accent); }
.ru-av { width:48px; height:48px; border-radius:24px; display:grid; place-items:center; flex-shrink:0; font-weight:800; font-size:15px;
    background:var(--tint); color:var(--accent); border:2px solid transparent; text-decoration:none; }
.ru-av.proveedor { background:var(--panel); border:2px dashed color-mix(in srgb, var(--muted) 60%, var(--line)); color:var(--muted); }
.ru-av.abierta { background:var(--info-tint); color:var(--info); }
.ru-av.sin { background:var(--cream); color:var(--muted); border:2px dashed var(--line); }
button.ru-av { cursor:pointer; font:inherit; font-weight:800; }
.ru-fila { display:flex; align-items:center; gap:12px; padding:12px 14px; border-top:1px solid var(--line); }
.ru-fila:first-child { border-top:0; }
.ru-fila .pe-it { border:0; padding:0; min-height:0; flex:1; }
.ru-fila .pe-it:hover { background:none; }
.ru-fact { display:flex; align-items:center; gap:12px; padding:12px 14px; border-top:1px solid var(--line); }
.ru-fact:first-child { border-top:0; }
.ru-fact .tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; font-size:16px; font-weight:700; }
.ru-fact .tx small { font-size:14px; font-weight:600; color:var(--muted); }
.ru-fact svg { width:22px; height:22px; color:var(--accent); flex:none; }
.ru-cal { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; }
.ru-cal .h { text-align:center; font-size:13px; font-weight:800; color:var(--muted); }
.ru-cal .d { aspect-ratio:1; border-radius:10px; display:grid; place-items:center; font-size:14px; font-weight:700; color:var(--muted);
    background:color-mix(in srgb, var(--line) 35%, var(--panel)); }
.ru-cal .d.hecha { background:var(--ok); color:var(--on-accent); }
.ru-cal .d.hallazgo { background:var(--warn); color:var(--on-accent); }
.ru-cal .d.nohizo { background:var(--danger); color:var(--on-accent); }
.ru-cal .d.curso { background:var(--warn-tint); color:var(--warn); border:2px solid var(--warn); }
.ru-cal .d.toca { background:var(--panel); border:2px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); color:var(--accent); }
.ru-cal .d.hoy { outline:3px solid var(--ink); outline-offset:1px; }
.ru-leg { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; font-weight:700; color:var(--muted); }
.ru-leg i { display:inline-block; width:12px; height:12px; border-radius:4px; margin-right:6px; vertical-align:-1px; }
.ru-leg .hecha { background:var(--ok); } .ru-leg .hallazgo { background:var(--warn); } .ru-leg .nohizo { background:var(--danger); }
.ru-leg .toca { border:2px dashed var(--accent); }
.ru-ban { display:flex; flex-direction:column; gap:8px; padding:14px 16px; border-radius:18px; background:var(--danger-tint); color:var(--danger); }
.ru-ban b { font-size:17px; } .ru-ban span { color:var(--ink); font-weight:600; }
.ru-ban .btn-row { margin:0; }

/* ── Asistente de rutinas (R1–R5 de rutinas/impl-rutinas.md): crear y editar en un solo flujo ─────────── */
.ru-wz { max-width:640px; }
.ru-wz-head { display:flex; align-items:center; gap:12px; }
.ru-wz-head .tx { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ru-wz-head .tx b { font-size:16px; line-height:1.25; }
.ru-wz-head .tx span { font-size:14px; font-weight:700; color:var(--muted); }
.ru-wz .wz-steps { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:4px; margin:0; padding:0; overflow:visible; }
.ru-wz .wz-step { height:8px; padding:0; border-radius:4px; border:0; background:color-mix(in srgb, var(--line) 80%, var(--cream)); }
.ru-wz .wz-step.hecho { background:var(--accent2); }
.ru-wz .wz-step.on { background:var(--accent); }
.ru-wz .wz-panel { display:flex; flex-direction:column; gap:16px; margin:0; }
.ru-wz:not(.js) [data-atras], .ru-wz:not(.js) [data-siguiente], .ru-wz:not(.js) .wz-steps { display:none; }
.ru-wz:not(.js) .wz-panel + .wz-panel { border-top:1px solid var(--line); padding-top:18px; }
.ru-wz .ru-sub { margin:0; font-size:15px; font-weight:600; line-height:1.45; color:var(--muted); }
.ru-wz .err { font-size:14px; font-weight:700; color:var(--danger); }
.ru-h { margin:4px 0 0; font-size:13px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }
.ru-buscar { width:100%; min-height:56px; padding:0 16px; border-radius:16px; border:1.5px solid var(--line); background:var(--panel);
    font:inherit; font-size:17px; font-weight:700; color:var(--ink); box-sizing:border-box; }
.ru-modelos { display:flex; flex-direction:column; gap:8px; }
.ru-modelo { position:relative; display:flex; align-items:center; gap:14px; min-height:72px; padding:10px 14px; border-radius:16px;
    border:2px solid var(--line); background:var(--panel); cursor:pointer; list-style:none; }
.ru-modelo input { position:absolute; opacity:0; width:1px; height:1px; }
.ru-modelo:has(input:checked) { border-color:var(--accent); background:var(--tint); }
.ru-modelo:has(input:focus-visible) { outline:3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset:2px; }
.ru-modelo .ic { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:none; background:var(--tint); color:var(--accent); }
.ru-modelo .ic svg { width:22px; height:22px; }
.ru-modelo .tx { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ru-modelo b { font-size:16px; font-weight:800; line-height:1.25; }
.ru-modelo small { font-size:14px; font-weight:600; color:var(--muted); line-height:1.35; }
.ru-modelo[hidden] { display:none; }
.ru-copiar > summary::-webkit-details-marker { display:none; }
.ru-copiar[open] > summary { border-color:var(--accent); }
.ru-copiar > .ru-modelos { margin:8px 0 0 16px; }
.ru-puntos { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.ru-punto { display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:16px; border:1px solid var(--line); background:var(--panel); }
.ru-punto .n { width:32px; height:32px; border-radius:16px; display:grid; place-items:center; flex:none; background:var(--cream);
    font-weight:800; color:var(--muted); margin-top:12px; }
.ru-punto .cuerpo { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
.ru-punto input[type=text] { width:100%; min-height:56px; padding:0 14px; border-radius:14px; border:1.5px solid var(--line);
    background:var(--panel); font:inherit; font-size:16px; font-weight:700; color:var(--ink); box-sizing:border-box; }
.ru-punto .tg { display:flex; flex-wrap:wrap; gap:8px 18px; }
.ru-punto .tg label { display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:15px; font-weight:700; cursor:pointer; }
.ru-punto .mov { display:flex; flex-direction:column; gap:4px; flex:none; }
.ru-punto .mov button { width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:var(--panel);
    color:var(--ink); display:grid; place-items:center; cursor:pointer; }
.ru-punto .mov button:disabled { opacity:.35; cursor:default; }
.ru-punto .mov button svg { width:20px; height:20px; }
.ru-punto .mov .up svg { transform:rotate(180deg); }
.ru-punto .mov .quita { color:var(--danger); }
.ru-op { position:relative; align-items:center; min-height:72px; }
.ru-op input { position:absolute; opacity:0; width:1px; height:1px; }
.ru-op .chev { visibility:hidden; color:var(--accent); }
.ru-op:has(input:checked) { background:var(--tint); }
.ru-op:has(input:checked) .chev { visibility:visible; }
.ru-op:has(input:focus-visible) { outline:3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset:-3px; }
.ru-op[hidden], .ru-todos[hidden] { display:none; }
.ru-todos { min-height:56px; align-items:center; color:var(--accent); }
.ru-todos b { color:var(--accent) !important; font-size:15px !important; }
.ru-dias { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; }
.ru-dia { position:relative; }
.ru-dia input { position:absolute; opacity:0; width:1px; height:1px; }
.ru-dia span { display:grid; place-items:center; height:52px; border-radius:14px; border:2px solid var(--line); background:var(--panel);
    font-size:17px; font-weight:800; color:var(--ink); cursor:pointer; }
.ru-dia input:checked + span { border-color:var(--accent); background:var(--accent); color:var(--on-accent); }
.ru-dia input:focus-visible + span { outline:3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset:2px; }
.ru-horas { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ru-horas input { min-height:52px; font-size:17px; }
.ru-mas > summary { cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:800; color:var(--accent); }
.ru-asi { display:flex; flex-direction:column; gap:8px; }
.ru-fechas { list-style:none; margin:0; padding:0; }
.ru-fechas li { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:52px; padding:8px 14px; border-top:1px solid var(--line); font-size:16px; }
.ru-fechas li:first-child { border-top:0; }
.ru-fechas li span { color:var(--muted); font-weight:700; }
.ru-fechas li small { margin-left:auto; font-size:13px; font-weight:800; color:var(--muted); }
.ru-fechas li.primera { background:var(--tint); }
.ru-fechas li.primera small { color:var(--accent); }
.ru-rev .pe-it { align-items:center; min-height:72px; cursor:default; }
.ru-rev .pe-it:hover { background:none; }
.ru-link { border:0; background:none; padding:0 4px; min-height:44px; font:inherit; font-size:15px; font-weight:800; color:var(--accent); cursor:pointer; }
.ru-primera { display:flex; flex-direction:column; gap:4px; padding:16px; border-radius:18px; background:var(--tint); }
.ru-primera .k { font-size:13px; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.07em; }
.ru-primera b { font-size:20px; line-height:1.25; }
.ru-primera span:last-child { font-size:15px; font-weight:600; color:var(--ink); }
.ru-wz-foot .dos { grid-template-columns:1fr 2fr; }
.ru-wz-foot [data-siguiente][aria-disabled="true"] { background:color-mix(in srgb, var(--muted) 30%, var(--panel)); color:var(--muted); }
.ru-wz [hidden] { display:none !important; }
.ru-wz:not(.js) .ru-wz-foot .dos { grid-template-columns:1fr; }
.ru-fechas.cargando { opacity:.5; }
/* R13 · franja «no ha entrado» + casillas de la hoja de cubrir */
.ru-falta { align-items:center; flex-wrap:wrap; }
.ru-falta > span { flex:1; min-width:12rem; }
.ru-chk .chev { visibility:visible; color:var(--line); }
.ru-chk:has(input:checked) .chev { color:var(--accent); }
/* R8 · un registro: nota y fotos de cada punto */
.ru-pt .tx { gap:5px; }
.ru-nota { font-size:15px; font-weight:600; color:var(--ink); line-height:1.4; }
.ru-fotos { display:grid; grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:8px; margin-top:4px; }
.ru-fotos figure { margin:0; }
.ru-fotos img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; border:1px solid var(--line); display:block; cursor:zoom-in; }
.ru-fotos figcaption { font-size:12px; color:var(--muted); text-align:center; margin-top:2px; }
.ru-rep { font-size:14px; font-weight:800; color:var(--accent); }
@media print { .ru-wz-foot, [data-imprimir], form[data-confirmar] { display:none !important; } }
/* R9 · Agenda */
.ru-ag-filtros { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
.ru-ag-filtros select { width:100%; min-width:0; min-height:52px; font-size:16px; }
.ru-semana { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ru-semana b { font-size:17px; }
.ru-dias7 { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; }
.ru-dias7 a { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 0 6px; border-radius:14px; text-decoration:none;
    color:var(--ink); border:2px solid transparent; }
.ru-dias7 a small { font-size:12px; font-weight:800; color:var(--muted); }
.ru-dias7 a b { font-size:18px; }
.ru-dias7 a i { width:6px; height:6px; border-radius:3px; background:var(--accent2); }
.ru-dias7 a i.bad { background:var(--danger); }
.ru-dias7 a i.nada { background:transparent; }
.ru-dias7 a.hoy { border-color:var(--line); }
.ru-dias7 a.on { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.ru-dias7 a.on small { color:var(--on-accent); }
.ru-ag-dia { display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.ru-ag-dia b { font-size:18px; }
.ru-ag-it { align-items:center; }
.ru-ag-it .hora { min-width:52px; font-size:14px; font-weight:700; color:var(--muted); }
.ru-ag-it .tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ru-ag-it .tx a { color:var(--ink); text-decoration:none; }
.ru-ag-it .tx small { font-size:14px; color:var(--muted); font-weight:600; }
/* R11 · Rutinas en escritorio: tres columnas arriba de la lista (en teléfono no se pinta) */
.ru-pagina { max-width:860px; }
.ru-desk, .ru-solo-desk { display:none !important; }
@media (min-width:1100px) {
    .ru-pagina { max-width:1240px; }
    .ru-solo-desk { display:inline-flex !important; }
    .ru-desk { display:grid !important; grid-template-columns:1.2fr 1fr 1fr; gap:18px; align-items:start; }
}
.ru-col { display:flex; flex-direction:column; gap:8px; min-width:0; }
.ru-col .pe-h2 { margin:0; }
.ru-at { display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-top:1px solid var(--line); }
.ru-at:first-child { border-top:0; }
.ru-at b { font-size:15px; }
.ru-at small { font-size:14px; color:var(--muted); font-weight:600; }
.ru-at .acc { display:flex; gap:14px; }
.ru-at .ru-link { min-height:32px; padding:0; }
.ru-ar { display:flex; align-items:center; gap:12px; padding:10px 14px; border-top:1px solid var(--line); text-decoration:none; color:var(--ink); }
.ru-ar:first-child { border-top:0; }
.ru-ar:hover { background:color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.ru-ar .tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ru-ar small { font-size:13px; color:var(--muted); font-weight:600; }
.ru-ar .bar { height:6px; border-radius:3px; background:color-mix(in srgb, var(--line) 80%, var(--cream)); overflow:hidden; }
.ru-ar .bar i { display:block; height:100%; background:var(--ok); }
.ru-ar .bar i.bad { background:var(--danger); }
.ru-ar .pct { font-weight:700; }
.ru-hoy { display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid var(--line); font-size:14px; }
.ru-hoy:first-child { border-top:0; }
.ru-hoy .mono { min-width:46px; color:var(--muted); font-weight:700; }
.ru-hoy .tx { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ru-col .pe-h2 a { font-size:14px; text-transform:none; letter-spacing:0; min-height:0; }

/* ===== Chat · rediseño (docs/design/rediseño-app/chat/impl-chat.md) — familia .ch-* =====
   Una idea por renglón; metadatos solo cuando cambian; nada tapa «Enviar». Mismo marcado en la página
   completa y en el emergente (layouts/chat_embebido). Textos de mensaje 16px, metadatos 12–13px. */

/* Avatares: Administración en --accent (edificio), Caseta en --ink (escudo), grupo en --warn-tint, persona en --tint. */
.ch-av { flex:none; width:44px; height:44px; border-radius:50%; display:inline-grid; place-items:center; overflow:hidden;
    background:var(--tint); color:var(--accent); font-size:15px; font-weight:800; line-height:1; }
.ch-av svg { width:22px; height:22px; }
.ch-av img { width:100%; height:100%; object-fit:cover; display:block; }
.ch-av.adm { background:var(--accent); color:var(--on-accent); }
.ch-av.cas { background:var(--ink); color:var(--cream); }
.ch-av.gru { background:var(--warn-tint); color:var(--warn); }
.ch-av.doc { background:var(--cream); color:var(--muted); border:1px solid var(--line); }
.ch-av.sm { width:36px; height:36px; font-size:13px; }
.ch-av.sm svg { width:18px; height:18px; }

/* Encabezado (hilo, nuevo, privacidad, multimedia y el del emergente). */
.ch-hd { display:flex; align-items:center; gap:10px; min-height:64px; padding:8px 10px; background:var(--panel);
    border-bottom:1px solid var(--line); box-sizing:border-box; }
.ch-hb { flex:none; width:44px; height:44px; border-radius:12px; border:0; background:transparent; color:var(--ink);
    display:inline-grid; place-items:center; cursor:pointer; text-decoration:none; padding:0; }
.ch-hb svg { width:24px; height:24px; }
.ch-hb:hover { background:var(--cream); color:var(--ink); }
.ch-hb:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:1px; }
.ch-ht { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ch-ht b { font-size:17px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-sub { font-size:13px; font-weight:600; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-sub.on { color:var(--ok); }
.ch-sub-btn { border:0; background:none; padding:0; font:inherit; font-size:13px; text-align:left; cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px; min-height:24px; }
.ch-silenciada { flex:none; color:var(--muted); }

/* Botón con texto del encabezado de la bandeja («Nuevo»). */
.ch-btn { display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 16px; border-radius:16px; background:var(--panel);
    border:1px solid var(--line); color:var(--ink); font-weight:800; font-size:15px; text-decoration:none; }
.ch-btn svg { width:20px; height:20px; }
.ch-btn:hover { border-color:var(--accent); color:var(--accent); }

/* ---- Bandeja (H0) ---- */
.ch-bandeja { max-width:760px; }
.ch-bhead { display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.ch-bhead h1 { flex:1; margin:0; }
.ch-srch { display:flex; align-items:center; gap:10px; min-height:48px; margin:0 0 10px; padding:0 6px 0 14px; border-radius:14px;
    background:var(--panel); border:1px solid var(--line); color:var(--muted); }
.ch-srch:focus-within { border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
/* El campo vive DENTRO de la caja: sin su propio borde, fondo ni anillo (los estilos globales de input —y los de
   algunos temas— le ganaban y se veía un input dentro de otro). Sin la «×» nativa: la caja trae la suya. */
.ch-srch input, .ch-srch input[type=search], .ch-srch input[type=search]:focus {
    flex:1; min-width:0; width:auto; min-height:0; margin:0; border:0 !important; border-radius:0; outline:0;
    box-shadow:none !important; background:transparent !important; font:inherit; font-size:16px; padding:10px 0; color:var(--ink); }
.ch-srch input[type=search]::-webkit-search-cancel-button, .ch-srch input[type=search]::-webkit-search-decoration { -webkit-appearance:none; appearance:none; display:none; }
.ch-srch .ic svg, .ch-srch > svg { width:20px; height:20px; }
.ch-srch-x { width:44px; height:44px; display:inline-grid; place-items:center; color:var(--muted); border-radius:12px; }
.ch-srch-x svg { width:18px; height:18px; }
.ch-atajos { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin:0 0 12px; }
.ch-atajo { display:flex; align-items:center; gap:10px; min-height:60px; padding:8px 12px; border-radius:16px; background:var(--panel);
    border:1px solid var(--line); font-size:15px; font-weight:800; color:var(--ink); text-decoration:none; }
.ch-atajo:hover { border-color:var(--accent); color:var(--ink); }
.ch-fil { display:flex; gap:8px; margin:0 0 12px; overflow-x:auto; }
.ch-chip { display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:999px; border:2px solid var(--line);
    background:var(--panel); color:var(--ink); font-weight:800; font-size:15px; text-decoration:none; white-space:nowrap; }
.ch-chip.on { border-color:var(--accent); background:var(--tint); color:var(--accent); }
.ch-lista { background:var(--panel); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.ch-grupo { margin:0; padding:14px 16px 6px; font-size:13px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.06em;
    background:var(--cream); border-bottom:1px solid var(--line); }
.ch-fila { display:flex; align-items:center; gap:12px; width:100%; min-height:76px; padding:10px 16px; box-sizing:border-box;
    border:0; border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent); background:transparent;
    color:var(--ink); text-decoration:none; font:inherit; text-align:left; cursor:pointer; }
.ch-fila:last-child { border-bottom:0; }
.ch-fila:hover, .ch-fila:focus-visible { background:color-mix(in srgb, var(--tint) 55%, transparent); color:var(--ink); }
.ch-fila:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:-3px; }
.ch-fila.exp { cursor:default; opacity:.7; }
.ch-fila-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ch-l1 { display:flex; align-items:baseline; gap:8px; }
.ch-l1 b { flex:1; min-width:0; font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-l1 time { flex:none; font-size:13px; font-weight:600; color:var(--muted); }
.ch-l2 { display:flex; align-items:center; gap:8px; }
.ch-prev { flex:1; min-width:0; font-size:15px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-prev-ic svg { width:16px; height:16px; vertical-align:-3px; margin-right:3px; }
.ch-fila.nu .ch-l1 b { font-weight:800; }
.ch-fila.nu .ch-l1 time { color:var(--accent); font-weight:800; }
.ch-fila.nu .ch-prev { color:var(--ink); font-weight:600; }
.ch-cnt { flex:none; min-width:22px; height:22px; padding:0 7px; border-radius:11px; background:var(--accent); color:var(--on-accent);
    font-size:12px; font-weight:800; display:inline-grid; place-items:center; box-sizing:border-box; }
.ch-fila-dl { flex:none; color:var(--muted); }
.ch-fila-dl svg { width:20px; height:20px; }
.ch-vacio { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:36px 16px; color:var(--muted); font-size:15px; }
.ch-vacio b { color:var(--ink); font-size:17px; }
.ch-vacio-ic { width:56px; height:56px; border-radius:50%; background:var(--tint); color:var(--accent); display:grid; place-items:center; margin-bottom:6px; }
.ch-vacio-ic svg { width:26px; height:26px; }
.ch-mas { display:flex; align-items:center; justify-content:center; min-height:48px; margin-top:10px; font-weight:700; }
.ch-pie-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:12px; color:var(--muted); font-weight:700; text-decoration:none; }
.ch-pie-link:hover { color:var(--accent); }
.ch-pie-link svg { width:18px; height:18px; }

/* ---- Conversación (H1) ---- */
.ch-hilo { display:flex; flex-direction:column; background:var(--cream); min-height:0; }
.ch-cuerpo { position:relative; flex:1; min-height:0; display:flex; flex-direction:column; }
.ch-feed { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:3px; padding:12px 12px 16px; }
.ch-feed-vacio { margin:auto; color:var(--muted); font-size:15px; }
.ch-antes { align-self:center; min-height:44px; padding:0 16px; margin:4px 0 8px; border-radius:999px; border:1px solid var(--line);
    background:var(--panel); color:var(--ink); font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.ch-dia { align-self:center; margin:10px 0 6px; padding:4px 12px; border-radius:999px; background:color-mix(in srgb, var(--line) 55%, var(--cream));
    font-size:13px; font-weight:700; color:var(--muted); }
.ch-m { max-width:80%; padding:9px 12px 7px; border-radius:18px; font-size:16px; line-height:1.4; overflow-wrap:anywhere; box-sizing:border-box;
    display:flex; flex-direction:column; }
.ch-m.otro { align-self:flex-start; background:var(--panel); border:1px solid var(--line); color:var(--ink); }
.ch-m.yo { align-self:flex-end; background:var(--accent); color:var(--on-accent); }
.ch-m.otro.ult { border-bottom-left-radius:6px; }
.ch-m.yo.ult { border-bottom-right-radius:6px; }
.ch-m.ult { margin-bottom:8px; }
.ch-m:not(.ult) .ch-pie { display:none; }
.ch-au { display:block; font-size:13px; font-weight:800; color:var(--accent); margin-bottom:2px; }
.ch-m:not(.pri) .ch-au { display:none; }
.ch-txt a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.ch-pie { display:flex; justify-content:flex-end; align-items:center; gap:4px; margin-top:2px; font-size:12px; font-weight:600; opacity:.8; }
.ch-m.yo .ch-pie { color:var(--on-accent); }
.ch-m.err { background:var(--danger-tint); color:var(--ink); border:1.5px solid var(--danger); }
.ch-m.err .ch-pie { opacity:1; }
.ch-err-t { color:var(--danger); font-weight:800; }
.ch-reint { align-self:flex-end; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 12px; border:0; background:none;
    font:inherit; font-size:14px; font-weight:800; color:var(--danger); cursor:pointer; }
/* Recibos: enviando (reloj) · enviado (palomita) · leído (doble palomita). Máscaras de línea; el texto va en .sr-only. */
.ch-rec { display:inline-flex; }
.ch-rec::after { content:''; display:inline-block; width:16px; height:16px; background:currentColor;
    -webkit-mask:var(--ch-ic) center / contain no-repeat; mask:var(--ch-ic) center / contain no-repeat; }
.ch-rec.enviando::after { --ch-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.ch-rec.enviado::after { --ch-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.ch-rec.entregado::after { width:21px; --ch-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12.5l4.5 4.5L17 7.5'/%3E%3Cpath d='M13 16l1 1L23.5 7.5'/%3E%3C/svg%3E"); }
/* Leído: dos palomitas en --chat-leido y a opacidad plena (enviado/entregado van tenues, como la hora). */
.ch-rec.enviado, .ch-rec.entregado { opacity:.7; }
.ch-rec.leido { color:var(--chat-leido); }
.ch-m.yo .ch-pie:has(.ch-rec.leido) { opacity:1; }
.ch-m.yo .ch-pie:has(.ch-rec.leido) time { opacity:.8; }
.ch-rec.leido::after { width:21px; --ch-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12.5l4.5 4.5L17 7.5'/%3E%3Cpath d='M13 16l1 1L23.5 7.5'/%3E%3C/svg%3E"); }
/* Adjuntos dentro de la burbuja: foto ampliable, archivo como chip con nombre y peso. */
.ch-foto { display:block; padding:0; margin:-2px -4px 6px; border:0; background:none; border-radius:12px; overflow:hidden; cursor:zoom-in; max-width:calc(100% + 8px); }
.ch-foto img { display:block; width:240px; max-width:100%; max-height:260px; object-fit:cover; border-radius:12px; }
.ch-arch { display:flex; align-items:center; gap:10px; min-height:48px; margin:0 -4px 6px; padding:6px 10px; border-radius:12px;
    background:color-mix(in srgb, var(--ink) 6%, transparent); color:inherit; text-decoration:none; }
.ch-m.yo .ch-arch { background:color-mix(in srgb, var(--on-accent) 18%, transparent); }
.ch-arch-t { flex:1; min-width:0; display:flex; flex-direction:column; }
.ch-arch-t b { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-arch-t small { font-size:12px; opacity:.85; }
.ch-arch.exp { opacity:.7; font-style:italic; }
.ch-arch svg { width:20px; height:20px; }
.ch-typ { align-self:flex-start; display:inline-flex; gap:4px; padding:12px 14px; border-radius:18px; background:var(--panel); border:1px solid var(--line); }
.ch-typ[hidden] { display:none; }
.ch-typ i { width:7px; height:7px; border-radius:4px; background:var(--muted); opacity:.6; animation:chpunto 1s infinite ease-in-out; }
.ch-typ i:nth-child(2) { animation-delay:.15s; }
.ch-typ i:nth-child(3) { animation-delay:.3s; }
@keyframes chpunto { 0%, 60%, 100% { opacity:.3; transform:translateY(0); } 30% { opacity:1; transform:translateY(-3px); } }
.ch-nuevos { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:6px;
    min-height:44px; padding:0 16px; border-radius:999px; border:0; background:var(--ink); color:var(--cream); font:inherit; font-size:14px;
    font-weight:800; box-shadow:0 6px 16px color-mix(in srgb, var(--ink) 30%, transparent); cursor:pointer; z-index:2; }
.ch-nuevos[hidden] { display:none; }
.ch-nuevos svg { width:18px; height:18px; }
/* Barra de escribir. */
.ch-cmp { flex:none; display:flex; flex-direction:column; gap:8px; padding:8px 10px calc(10px + var(--ch-safe-b, env(safe-area-inset-bottom, 0px)));
    background:var(--panel); border-top:1px solid var(--line); }
.ch-cmp-row { display:flex; align-items:flex-end; gap:8px; }
.ch-clip { cursor:pointer; color:var(--muted); }
.ch-clip svg { width:22px; height:22px; }
.ch-clip:has(input:focus-visible) { outline:3px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.ch-ta { flex:1; min-width:0; min-height:44px; max-height:calc(1.35em * 5 + 24px); padding:11px 16px; border-radius:22px; border:1.5px solid var(--line);
    background:var(--cream); font:inherit; font-size:16px; line-height:1.35; color:var(--ink); resize:none; box-sizing:border-box; }
.ch-ta:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.ch-ta::placeholder { color:var(--muted); }
.ch-send { flex:none; width:48px; height:48px; border-radius:24px; border:0; background:var(--accent); color:var(--on-accent); display:grid; place-items:center; cursor:pointer; }
.ch-send svg { width:22px; height:22px; }
.ch-send:disabled { background:color-mix(in srgb, var(--muted) 22%, var(--panel)); color:var(--muted); cursor:default; }
.ch-adj { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ch-adj[hidden] { display:none; }
.ch-adj-lista { flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:6px; }
.ch-adj-it { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:4px 10px 4px 4px; border-radius:10px; background:var(--tint); font-size:13px; font-weight:600; }
.ch-adj-it img { width:36px; height:36px; object-fit:cover; border-radius:8px; }
.ch-adj-it span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-adj-x { display:inline-flex; align-items:center; gap:4px; min-height:44px; padding:0 12px; border:0; border-radius:12px; background:transparent;
    color:var(--danger); font:inherit; font-size:14px; font-weight:800; cursor:pointer; }
.ch-adj-x svg { width:16px; height:16px; }
.ch-adj-nota { flex-basis:100%; margin:0; font-size:13px; color:var(--muted); }
.ch-adj-nota svg { width:14px; height:14px; vertical-align:-2px; }
.ch-bloq { flex:none; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; padding:14px 16px calc(14px + var(--ch-safe-b, env(safe-area-inset-bottom, 0px)));
    background:var(--panel); border-top:1px solid var(--line); font-size:15px; font-weight:700; color:var(--muted); text-align:center; }
.ch-link { min-height:44px; padding:0 8px; border:0; background:none; font:inherit; font-weight:800; color:var(--accent); text-decoration:underline; cursor:pointer; }

/* Hilo en página completa. Teléfono: a pantalla completa (sin topbar ni barra inferior), del alto VISIBLE
   (el teclado lo achica; chat.js actualiza --ch-vvh). Escritorio: tarjeta del alto de la ventana. */
@media (max-width:767px) {
    .ch-hilo.full { position:fixed; left:0; right:0; top:var(--ch-vvt, 0px); height:var(--ch-vvh, 100dvh); z-index:45; }
    body:has(.ch-hilo.full) .tabbar, body:has(.ch-hilo.full) .notif-banner { display:none !important; }
}
@media (min-width:768px) {
    .ch-hilo.full { height:calc(100dvh - 120px); min-height:440px; max-width:860px; border:1px solid var(--line); border-radius:18px; overflow:hidden; }
    .ch-pagina { max-width:760px; }
    .ch-pagina > .ch-hd { border:1px solid var(--line); border-radius:18px; margin-bottom:12px; }
}
@media (max-width:767px) {
    .ch-pagina > .ch-hd { margin:-1rem -1rem 12px; }
}

/* Hoja (⋮ de la conversación, personas del grupo). Teléfono: desde abajo; escritorio: centrada. */
dialog.ch-hoja { padding:0; border:0; margin:auto auto 0; width:100%; max-width:480px; border-radius:24px 24px 0 0; background:var(--panel);
    color:var(--ink); box-shadow:0 -8px 30px color-mix(in srgb, var(--ink) 25%, transparent); }
dialog.ch-hoja::backdrop { background:color-mix(in srgb, var(--ink) 45%, transparent); }
@media (min-width:768px) { dialog.ch-hoja { margin:auto; border-radius:20px; } }
.ch-hoja-in { display:flex; flex-direction:column; padding:10px 12px calc(16px + env(safe-area-inset-bottom, 0px)); }
.ch-hoja-in[hidden] { display:none; }
.ch-grab { align-self:center; width:44px; height:5px; border-radius:3px; background:var(--line); margin:4px 0 8px; flex:none; }
.ch-hoja-t { margin:4px 6px 10px; font-size:17px; font-weight:800; }
.ch-hoja-p { margin:0 6px 14px; font-size:15px; line-height:1.45; color:var(--muted); }
.ch-hoja form { margin:0; }
.ch-op { display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:8px 10px; border:0; border-radius:12px; background:none;
    font:inherit; font-size:16px; font-weight:700; color:var(--ink); text-align:left; text-decoration:none; cursor:pointer; box-sizing:border-box; }
.ch-op:hover { background:var(--cream); color:var(--ink); }
.ch-op svg { width:22px; height:22px; flex:none; color:var(--muted); }
.ch-op span { display:flex; flex-direction:column; }
.ch-op small { font-size:13px; font-weight:600; color:var(--muted); }
.ch-op.danger, .ch-op.danger svg { color:var(--danger); }
.ch-op-cerrar { justify-content:center; color:var(--muted); margin-top:4px; }
.ch-op-grupo { padding:6px 10px 10px; }
.ch-op-lbl { display:flex; align-items:center; gap:12px; font-size:16px; font-weight:700; margin-bottom:8px; }
.ch-op-lbl svg { width:22px; height:22px; color:var(--muted); }
.ch-cta { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:56px; border-radius:16px; border:0; background:var(--accent);
    color:var(--on-accent); font:inherit; font-size:17px; font-weight:800; cursor:pointer; text-decoration:none; box-sizing:border-box; margin-top:8px; }
.ch-cta svg { width:20px; height:20px; }
.ch-cta.sec { background:var(--panel); color:var(--ink); border:1.5px solid var(--line); }
.ch-cta.danger { background:var(--danger); }
.ch-cta:disabled { background:color-mix(in srgb, var(--muted) 25%, var(--panel)); color:var(--muted); cursor:default; }
.ch-personas { list-style:none; margin:0 0 6px; padding:0; }
.ch-personas li { display:flex; align-items:center; gap:10px; min-height:48px; padding:4px 6px; font-size:16px; font-weight:600; }

/* Segmentado (silenciar, no molestar, fotos/archivos). */
.ch-seg { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:4px; padding:4px; border-radius:16px;
    background:color-mix(in srgb, var(--line) 60%, var(--cream)); }
.ch-seg > a, .ch-seg > button, .ch-seg > label > span { display:flex; align-items:center; justify-content:center; min-height:48px; padding:4px 6px; border:0;
    border-radius:12px; background:transparent; font:inherit; font-size:15px; font-weight:800; color:var(--muted); text-decoration:none;
    text-align:center; cursor:pointer; line-height:1.15; box-sizing:border-box; }
.ch-seg > label { display:block; margin:0; }
.ch-seg > a.on, .ch-seg > label > input:checked + span { background:var(--panel); color:var(--ink); box-shadow:0 1px 3px color-mix(in srgb, var(--ink) 18%, transparent); }
.ch-seg > button:hover, .ch-seg > a:hover { color:var(--ink); }
.ch-seg > label > input:focus-visible + span { outline:3px solid color-mix(in srgb, var(--accent) 55%, transparent); }

/* Nuevo mensaje, privacidad, multimedia. */
.ch-h2 { margin:18px 4px 8px; font-size:13px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }
.ch-hint { font-size:14px; font-weight:600; line-height:1.45; color:var(--muted); }
.ch-hint svg { width:16px; height:16px; vertical-align:-3px; }
.ch-pad { margin:10px 4px; }
.ch-srch-in { margin:0 0 10px; }
.ch-fila[hidden] { display:none; }
.ch-pick { position:relative; }
.ch-tick { flex:none; width:26px; height:26px; border-radius:50%; border:2px solid var(--line); color:transparent; display:grid; place-items:center; }
.ch-tick svg { width:15px; height:15px; }
.ch-pick:has(.ch-pick-in:checked) { background:var(--tint); }
.ch-pick:has(.ch-pick-in:checked) .ch-tick { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.ch-pick:has(.ch-pick-in:focus-visible) { outline:3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:-3px; }
.ch-foot { margin-top:14px; }
.ch-foot .ch-hint { text-align:center; margin:6px 0 0; }
.ch-foot .ch-hint[hidden] { display:none; }
.ch-nuevo .field { margin-top:14px; }
.ch-sec { margin-bottom:8px; }
.ch-link-row { margin-top:12px; text-decoration:none; color:var(--ink); }
.ch-link-row .ic svg { width:20px; height:20px; color:var(--muted); }
.ch-guardado { margin-top:14px; }
.ch-gal { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
.ch-gal .ch-foto { margin:0; max-width:none; aspect-ratio:1; border-radius:10px; }
.ch-gal .ch-foto img { width:100%; height:100%; max-height:none; border-radius:10px; }
.ch-media .ch-seg { margin:4px 0 6px; }

/* ---- Dentro del emergente (layouts/chat_embebido) ---- */
html.ch-embed, html.ch-embed body { margin:0; height:100%; background:var(--cream); }
html.ch-embed body { overflow-x:hidden; }
.ch-embebido-main { min-height:100%; }
html.ch-embed .ch-bandeja, html.ch-embed .ch-nuevo, html.ch-embed .ch-prefs, html.ch-embed .ch-media, html.ch-embed .ch-casetas { padding:12px 12px 24px; max-width:none; }
html.ch-embed .ch-hilo { height:100vh; height:100dvh; }
html.ch-embed .ch-feed { padding-top:8px; }
.ch-flash { margin:0; padding:10px 14px; font-size:14px; font-weight:700; }
.ch-flash.ok { background:var(--ok-tint); color:var(--ok); }
.ch-flash.error { background:var(--danger-tint); color:var(--danger); }
html.ch-embed body:has(.ch-hilo) .ch-flash { position:fixed; left:12px; right:12px; top:8px; z-index:5; border-radius:12px; animation:chflash 4s forwards; }
@keyframes chflash { 0%, 80% { opacity:1; } 100% { opacity:0; visibility:hidden; } }

/* ---- Emergente en el padre (layouts/app) ---- */
.bell.on { background:color-mix(in srgb, currentColor 16%, transparent); border-radius:12px; }
/* Ícono de mensajes: 44px de área táctil y un badge legible (≥18px, 11px de texto). */
#chat-bell { min-width:44px; min-height:44px; justify-content:center; border-radius:12px; }
#chat-bell .badge { top:2px; right:0; min-width:18px; height:18px; padding:0 5px; font-size:11px; line-height:18px; text-align:center; box-sizing:border-box; }
.ch-pop[hidden] { display:none; }
.ch-pop-fondo { position:fixed; inset:0; z-index:9998; background:color-mix(in srgb, var(--ink) 45%, transparent); }
.ch-pop-panel { position:fixed; z-index:9999; display:flex; flex-direction:column; overflow:hidden; background:var(--cream);
    box-shadow:0 24px 60px color-mix(in srgb, var(--ink) 32%, transparent); outline:none; }
.ch-pop-panel iframe { flex:1; width:100%; border:0; background:var(--cream); display:block; }
.ch-pop-hd { flex:none; gap:4px; min-height:60px; padding:6px 6px 6px 8px; }
.ch-pop-hd .ch-ht { margin-left:4px; }
.ch-pop-av[hidden] { display:none; }
.ch-pop-av { flex:none; display:inline-flex; }
.ch-pop-hd [hidden] { display:none !important; }
.ch-pop-carga { position:absolute; left:0; right:0; bottom:0; top:60px; z-index:2; display:none; background:var(--cream); overflow:hidden; }
.ch-pop-carga.on { display:block; }
.ch-sk-hilo, .ch-pop-carga.es-hilo .ch-sk-lista { display:none; }
.ch-pop-carga.es-hilo .ch-sk-hilo { display:flex; }
.ch-sk-lista { padding:8px 0; }
.ch-sk-fila { display:flex; align-items:center; gap:12px; padding:14px 16px; }
.ch-sk-fila > span { flex:1; display:flex; flex-direction:column; gap:8px; }
.ch-sk-hilo { flex-direction:column; gap:10px; padding:20px 14px; }
.ch-sk i { display:block; background:linear-gradient(90deg, var(--line) 25%, color-mix(in srgb, var(--line) 40%, var(--panel)) 37%, var(--line) 63%);
    background-size:400% 100%; animation:chbrillo 1.3s ease-in-out infinite; }
.ch-sk-av { flex:none; width:44px; height:44px; border-radius:50%; }
.ch-sk-l1 { height:12px; width:55%; border-radius:6px; }
.ch-sk-l2 { height:10px; width:80%; border-radius:6px; }
.ch-sk-b { height:40px; width:62%; border-radius:18px; }
.ch-sk-b.yo { align-self:flex-end; width:52%; }
.ch-sk-b.corto { width:30%; }
.ch-sk-b.largo { height:64px; width:70%; }
@keyframes chbrillo { 0% { background-position:100% 0; } 100% { background-position:0 0; } }
@media (prefers-reduced-motion:reduce) { .ch-sk i, .ch-typ i { animation:none; } }
.ch-pop-grab { display:none; }
/* Teléfono: hoja modal al alto visible menos 40px, con agarradera y la página bloqueada detrás. */
@media (max-width:767px) {
    .ch-pop-panel { left:0; right:0; top:calc(var(--ch-vvt, 0px) + 40px); height:calc(var(--ch-vvh, 100dvh) - 40px); border-radius:24px 24px 0 0; transition:transform .15s ease; }
    .ch-pop-grab { display:block; margin:8px auto 0; touch-action:none; }
    .ch-pop-hd { touch-action:pan-x; }
    .ch-pop-carga { top:73px; }
    body.ch-pop-modal { overflow:hidden; }
}
/* Escritorio: panel NO modal bajo el ícono, sin fondo oscuro: la página se sigue usando. */
@media (min-width:768px) {
    .ch-pop-fondo { display:none; }
    .ch-pop-panel { top:62px; right:14px; width:400px; height:min(640px, calc(100vh - 80px)); border-radius:18px; border:1px solid var(--line); }
}
body.ch-pop-abierto #kaan-help { display:none; }
/* Punto de mensajes sin leer en la pestaña Comunidad del residente (impl-chat §4). */
.tabbar.ra-tabbar .tab .tdot { position:absolute; top:5px; left:calc(50% + 10px); width:10px; height:10px; border-radius:50%;
    background:var(--accent); box-shadow:0 0 0 2px var(--panel); }
.tabbar.ra-tabbar .tab .tdot[hidden] { display:none; }
/* «Nuevo» con texto en el encabezado del emergente (un lápiz solo no se entendía) y salida desde los vacíos. */
.ch-pop-nuevo { flex:none; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border-radius:999px;
    background:var(--accent); color:var(--on-accent); font-weight:800; font-size:15px; text-decoration:none; }
.ch-pop-nuevo:hover { color:var(--on-accent); filter:brightness(.95); }
.ch-pop-nuevo svg { width:18px; height:18px; }
.ch-vacio-cta { width:auto; padding:0 20px; margin-top:12px; max-width:100%; }
.ch-vacio-cta svg { flex:none; }