/* Actas Inteligentes · estilo «categoría»: tipografía con serifa en los títulos, tonos sobrios y detalles en oro.
   Dos paletas: html[data-estilo="verde"] (verde inglés) y html[data-estilo="marino"] (azul marino). Misma estructura. */
@font-face{font-family:"Inter";src:url("fonts/inter.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-4.woff2") format("woff2");font-weight:200 900;font-display:swap}
html[data-estilo="verde"]:not(#_){--bg:#f5f3ee;--card:#fffdf9;--tx:#1c2420;--mut:#5b645e;--line:#e2ddd2;--pri:#1f4d3a;--priD:#163a2b;--tint:#e9efe9;--warn:#a8321f;--warnbg:#fbece8;--onpri:#fff;--gold:#8a6630;--goldL:#d7b77c;--hd1:#12291f;--hd2:#1f4d3a;color-scheme:light}
html[data-estilo="marino"]:not(#_){--bg:#f4f3ef;--card:#fffefb;--tx:#1a2130;--mut:#5a6272;--line:#e0dcd2;--pri:#1d3557;--priD:#142640;--tint:#e9edf4;--warn:#a8321f;--warnbg:#fbece8;--onpri:#fff;--gold:#8a6630;--goldL:#d7b77c;--hd1:#101c30;--hd2:#1d3557;color-scheme:light}

html[data-estilo] body{font-family:"Inter",system-ui,"Segoe UI",Roboto,Arial,sans-serif;font-feature-settings:"cv11","ss01";letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
html[data-estilo] :is(h1,h2,h3,.view-title h2){font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:600;letter-spacing:-.01em}
html[data-estilo] h2{font-size:1.3rem}
html[data-estilo] h3{font-size:1.14rem}
html[data-estilo] h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--gold);font-weight:700}

/* Cabecera */
html[data-estilo] header.top{background:linear-gradient(160deg,var(--hd1) 0%,var(--hd2) 100%);border-bottom:3px solid var(--goldL);padding:26px 16px 24px}
html[data-estilo] header.top .school{color:var(--goldL);opacity:1;letter-spacing:.16em;font-weight:700;font-size:.72rem}
html[data-estilo] header.top h1{font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:2rem;letter-spacing:-.015em;margin-bottom:8px}
html[data-estilo] header.top .wrap>p:not(.school){opacity:.82}
html[data-estilo] .intro>summary{background:transparent;color:#fff;border:1px solid color-mix(in srgb,var(--goldL) 70%,transparent);font-weight:600}
html[data-estilo] .intro>summary::before{color:var(--goldL)}
html[data-estilo] header.top button,html[data-estilo] header.top select{border-color:color-mix(in srgb,#fff 25%,transparent)}
html[data-estilo] header.top button{background:transparent;color:#fff;border:1px solid var(--goldL)}
html[data-estilo] header.top button:hover{background:color-mix(in srgb,var(--goldL) 18%,transparent)}
html[data-estilo] header.top select{background:color-mix(in srgb,#fff 10%,transparent);color:#fff}
html[data-estilo] header.top select option{color:#1a1a1a;background:#fff}
html[data-estilo] header.top label,html[data-estilo] header.top small{color:color-mix(in srgb,#fff 78%,transparent)}

/* Tarjetas */
html[data-estilo] .panel{border-radius:16px;border-color:var(--line);padding:18px 20px;box-shadow:0 1px 2px rgba(20,24,20,.04),0 10px 30px -18px rgba(20,24,20,.18)}
html[data-estilo] .card-heading{border-bottom-color:var(--line)}
html[data-estilo] .card-heading>span{background:transparent;border-color:color-mix(in srgb,var(--gold) 45%,transparent);color:var(--gold);font-weight:600;letter-spacing:.02em}
html[data-estilo] :is(h2 span,.step>b,.steps li b i,.steps-nav i){background:transparent;color:var(--gold);border:1.5px solid var(--gold);font-family:"Source Serif 4",Georgia,serif;font-weight:700}

/* Campos */
html[data-estilo] label{font-weight:600;letter-spacing:.01em}
html[data-estilo] :is(input,select,textarea){background:var(--card);border-color:var(--line);border-radius:10px}
html[data-estilo] :is(input,select,textarea):hover{border-color:color-mix(in srgb,var(--pri) 35%,var(--line))}
html[data-estilo] :is(input,select,textarea):focus{outline:3px solid color-mix(in srgb,var(--pri) 18%,transparent);border-color:var(--pri)}

/* Botones */
html[data-estilo] :is(button,.upload){border-radius:10px;font-weight:600;border-width:1px;letter-spacing:.005em}
html[data-estilo] button.primary,html[data-estilo] #record{box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 6px 16px -8px color-mix(in srgb,var(--pri) 70%,transparent)}
html[data-estilo] #record{font-weight:700;letter-spacing:.01em}
html[data-estilo] #clock{font-family:"Inter",system-ui,sans-serif;font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:.02em}

/* Pestañas */
html[data-estilo] .steps-nav{background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
html[data-estilo] .steps-nav button{border-width:1px;background:transparent;font-weight:600}
html[data-estilo] .steps-nav button.primary{background:var(--pri);border-color:var(--pri)}
html[data-estilo] .steps-nav button.primary i{background:transparent;color:var(--goldL);border-color:var(--goldL)}

/* Resúmenes y tablas */
html[data-estilo] th{background:var(--tint);text-transform:uppercase;letter-spacing:.06em;font-size:.7rem;color:var(--mut)}
html[data-estilo] #census-summary{background:var(--tint);border-left:3px solid var(--gold);font-weight:600}
html[data-estilo] .result{border-left:3px solid var(--gold)}
html[data-estilo] details>summary{font-weight:600}

/* Reloj con cifras de ancho fijo */
html[data-estilo] .dock .rec,html[data-estilo] #dock-clock{font-family:"Inter",system-ui,sans-serif;font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.02em}
html[data-estilo] .seg-owner-detail h4{font-family:"Source Serif 4",Georgia,serif;font-size:1.2rem;text-transform:none;letter-spacing:0;color:var(--tx)}
html[data-estilo] header.top .modo-switch{border-color:color-mix(in srgb,var(--goldL) 60%,transparent)}
html[data-estilo] header.top .modo-switch span{color:var(--goldL)}
html[data-estilo] header.top .modo-switch button{border:0}
html[data-estilo] header.top .modo-switch button[aria-pressed="true"]{background:var(--goldL);color:var(--hd1)}

/* Móvil: cabecera compacta para que las pestañas se vean sin desplazarse */
@media (max-width:620px){html[data-estilo] header.top{padding:14px 16px 12px}html[data-estilo] header.top .school,header.top .tagline,header.top #community-count,header.top .modo-hint{display:none}html[data-estilo] header.top h1{font-size:1.45rem;margin-bottom:6px}header.top .community-switch label{font-size:.8rem;margin-bottom:2px}header.top .modo-switch{margin-top:8px}header.top details.intro{margin-top:8px}header.top details.intro>summary{padding:8px 12px;font-size:.92rem}}

/* Listas largas de vecinos: el navegador solo dibuja las filas que se ven */
#attendance .owner-row,#votes .owner-row{content-visibility:auto;contain-intrinsic-size:auto 56px}
/* Bloques fuera de la pantalla: se preparan cuando se acercan al hacer scroll (pestañas más rápidas) */
.view .panel{content-visibility:auto;contain-intrinsic-size:auto 420px}
@media print{.view .panel{content-visibility:visible}}
/* Avisos siempre a la vista: flotan encima de la barra de grabación (antes quedaban al final de la página) */
#notice{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(80px + env(safe-area-inset-bottom,0px));width:min(640px,calc(100% - 32px));margin:0;z-index:45;max-height:38vh;overflow:auto;box-shadow:0 10px 30px rgba(10,30,20,.22);cursor:pointer;padding-right:40px}
#notice::after{content:"×";position:absolute;top:6px;right:12px;font-size:1.3rem;line-height:1;color:var(--mut);font-weight:400}
@media print{#notice{display:none!important}}
html[data-estilo] header.top .perfil-switch{border-color:var(--goldL)}
html[data-estilo] header.top .perfil-switch span{color:var(--goldL)}
html[data-estilo] header.top .perfil-switch button[aria-pressed="true"]{background:var(--goldL);color:var(--hd1)}
html[data-estilo] header.top .perfil-switch button{border:0}
@media (max-width:480px){header.top .perfil-switch span{display:none}}