/* ==========================================================================
   Panel de avisos DCE · sistema "Vigencia editorial"
   --------------------------------------------------------------------------
   Periódico mural, no dashboard: la jerarquía la llevan la tipografía y las
   reglas finas. El naranja queda reservado para lo que está vigente (fecha
   del aviso, cumpleaños de hoy, estado pendiente) y para la acción (QR).
   Sin cajas decorativas, sin sombras, sin degradados.
   Todo número sale del bloque de tokens: 1 · TOKENS.
   ========================================================================== */

/* 1 · TOKENS -------------------------------------------------------------- */
:root{
  /* color: naranja, tinta, gris, papel */
  --ink:#171717;          /* tinta principal */
  --muted:#686868;        /* texto secundario */
  --faint:#707070;        /* micro-caps y metadatos */
  --line:#dedede;         /* hairline */
  --hair:#ececec;         /* hairline de fila */
  --soft:#f2f2f0;         /* superficie de datos */
  --paper:#f6f6f5;        /* fondo de página */
  --white:#fff;
  --orange:#ff5900;       /* acento de marca: reglas, iconos, "ahora" */
  --orange-ink:#ff5900;   /* naranja anterior (el de paleta original) */
  --orange-wash:#fff4ec;  /* fondo cálido de celebración */

  /* radios: lenguaje impreso, casi recto */
  --r-card:4px;
  --r-1:3px;
  --r-2:6px;

  /* escala tipográfica fluida (min(vw,vh): TV grande y laptop con la misma regla) */
  --t-clock:clamp(18px,min(1.7vw,3.6vh),38px);
  --t-clock-sub:clamp(10px,min(.85vw,1.8vh),15px);
  --t-cardtitle:clamp(13px,min(1vw,2vh),18px);
  --t-cardsub:clamp(10px,min(.8vw,1.6vh),13px);
  --t-micro:clamp(9px,min(.7vw,1.4vh),12px);
  --t-kicker:clamp(9px,min(.75vw,1.5vh),13px);
  --t-headline:clamp(22px,min(2.4vw,4.8vh),56px);
  --t-body:clamp(12px,min(1vw,2vh),18px);
  --t-band:clamp(17px,min(1.45vw,2.9vh),32px);
  --t-meta:clamp(11px,min(.9vw,1.8vh),14px);
  --t-name:clamp(12px,min(.9vw,1.8vh),18px);
  --t-sub:clamp(10px,min(.7vw,1.5vh),14px);
  --t-day:clamp(16px,min(1.4vw,2.7vh),30px);
  --t-weekday:clamp(8px,min(.6vw,1.25vh),11px);
  --t-evt:clamp(12px,min(.95vw,1.9vh),18px);
  --t-evt-sub:clamp(10px,min(.75vw,1.6vh),14px);
  --t-chip:clamp(9px,min(.7vw,1.4vh),13px);
  --t-status:clamp(9px,min(.68vw,1.4vh),12px);
  --t-qrtitle:clamp(14px,min(1.25vw,2.4vh),22px);
  --t-qrbody:clamp(10px,min(.78vw,1.6vh),12px);
  --t-id:clamp(12px,min(.95vw,1.9vh),18px);
  --t-sigla:clamp(10px,min(.75vw,1.5vh),12px);

  /* movimiento */
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur:.22s;
  /* fundido cruzado del aviso (una sola entrada orquestada) */
  --x-dur:.3s;     /* duración del cruce: opacidades complementarias */
  --x-shift:6px;   /* desplazamiento vertical del fundido */
}

/* 2 · BASE --------------------------------------------------------------- */
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{background:var(--paper);color:var(--ink);font-family:Montserrat,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* 3 · ESTRUCTURA --------------------------------------------------------- */
.screen{height:100vh;height:100svh;display:grid;grid-template-rows:clamp(78px,10vh,105px) minmax(0,1fr)}

/* Cabecera = cabecera de periódico: logotipo, regla, reloj */
.header{padding:0 clamp(18px,0.9vw,34px);border-bottom:1px solid var(--line);background:var(--white);display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,2vw,34px)}
.logo-window{width:clamp(360px,39vw,620px);height:clamp(55px,7vh,76px);display:flex;align-items:center;overflow:visible;flex:0 0 auto}
.logo-window img{display:block;width:auto;height:100%;max-width:100%;object-fit:contain;object-position:left center}
.header-accent{position:relative;flex:1;min-width:36px;height:2px;align-self:center;background:var(--line)}
.header-accent:before{content:"";position:absolute;left:0;top:0;width:clamp(36px,3.4vw,72px);height:2px;background:var(--orange)}
.time{text-align:right;width:clamp(150px,16vw,340px)}
.time strong,.time span{display:block}
.time strong{font-size:var(--t-clock);font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.time span{margin-top:clamp(4px,.7vh,8px);color:var(--faint);font-size:var(--t-clock-sub);font-weight:700;letter-spacing:.14em;text-transform:uppercase}

.content{min-height:0;padding:clamp(8px,0.9vw,20px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(380px,1.05fr) minmax(260px,.62fr);gap:clamp(8px,0.9vw,20px)}
.card{min-width:0;min-height:0;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white);overflow:hidden}

/* 4 · CABECERAS DE TARJETA (una sola regla para las cinco tarjetas) ------ */
.card-head{padding:clamp(18px,2.6vh,26px) clamp(16px,1.5vw,24px);border-bottom:1px solid var(--line);display:flex;align-items:stretch;justify-content:space-between;gap:clamp(10px,.9vw,16px);min-height:clamp(72px,10vh,116px)}
.card .head-row{flex:1;min-width:0;align-self:stretch;display:flex;align-items:center;gap:clamp(9px,.85vw,14px)}
.card .head-icon{flex:0 0 auto;align-self:stretch;aspect-ratio:1/1;min-width:16px;color:var(--white);font-size:clamp(14px,min(1.6vw,3.2vh),30px);line-height:1;display:grid;place-items:center;background:var(--orange);border-radius:var(--r-1)}
.card .head-text{flex:1;min-width:0;display:flex;flex-direction:column;text-align:left}
.card .head-text h1,.card .head-text h2{flex:1;min-width:0;margin:0;color:var(--ink);font-size:var(--t-cardtitle);font-weight:800;letter-spacing:.005em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .head-sub{margin:3px 0 0;color:var(--muted);font-size:var(--t-cardsub);font-weight:500;letter-spacing:0;text-transform:none}
.tag{flex:0 0 auto;align-self:center;padding:0;border:0;background:none;color:var(--faint);font-size:var(--t-micro);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums;white-space:nowrap}

/* 5 · AVISO + BANDA DE VIGENCIA ------------------------------------------ */
.announcement{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) clamp(46px,6vh,60px)}
.announcement-body{position:relative;padding:clamp(20px,3vh,38px) clamp(22px,2.4vw,40px);overflow:hidden;display:grid;align-items:stretch}
.announcement-body:after{content:"∑  λ  π";position:absolute;top:clamp(2px,.5vh,10px);right:-10px;color:#f0f0ef;font-size:clamp(56px,6vw,110px);font-weight:800;line-height:1;letter-spacing:-.08em;z-index:0}
.announcement-copy{position:relative;z-index:1;min-width:0;display:flex;flex-direction:column;justify-content:center;grid-area:1/1}
.announcement-copy.ghost{grid-area:1/1;z-index:0;pointer-events:none}
.category{display:inline-flex;align-items:center;gap:clamp(8px,.7vw,12px);font-size:var(--t-kicker);font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.category:before{content:"";width:clamp(16px,1.2vw,24px);height:2px;background:var(--orange)}
.announcement-copy h2{margin:clamp(10px,1.6vh,18px) 0 0;font-size:var(--t-headline);font-weight:800;line-height:1.05;letter-spacing:-.045em}
.announcement-copy>p{max-width:46ch;margin:clamp(8px,1.2vh,14px) 0 0;color:var(--muted);font-size:var(--t-body);line-height:1.5}

/* Vigencia: regla naranja + rango en dos renglones, anclada al pie del aviso */
.meta{margin-top:clamp(20px,3.2vh,40px);padding-top:clamp(14px,2.2vh,26px);display:grid;grid-template-columns:minmax(0,1fr);gap:0;font-weight:800}
.meta>span{display:flex;align-items:baseline;gap:.6ch;width:auto;background:none;border:0;border-radius:0;padding:0}
.meta>span:first-child,.meta>span[data-date-part]{border-left:3px solid var(--orange);padding:clamp(2px,.5vh,6px) 0 clamp(2px,.5vh,6px) clamp(10px,.9vw,16px)}
.meta>span[data-date-part] i{display:none}
.meta>span>i{font-size:.95em}
.meta>span:first-child b,.meta>span[data-date-part] b,#announcementDate{font-size:var(--t-band);line-height:1.16;font-weight:900;color:var(--orange-ink);letter-spacing:-.022em}
.meta>span:not([data-date-part]):not(:first-child){margin-top:clamp(8px,1.2vh,14px);padding-top:clamp(8px,1.2vh,14px);border-top:1px solid var(--line);gap:clamp(7px,.7vw,11px);font-size:var(--t-meta)}
.meta>span:not([data-date-part]):not(:first-child) i{color:var(--faint)}
.meta>span:not([data-date-part]):not(:first-child) b{font-weight:600;color:var(--muted)}
.announcement-panel{display:none}
/* Fundido cruzado: salida y entrada comparten duración y curva, así las
   opacidades se complementan (suman 1) y la sección nunca se atenúa ni queda
   en blanco: se acaba el parpadeo. Solo opacidad + un desplazamiento corto. */
@keyframes announcement-out{
  from{opacity:1;transform:translate3d(0,0,0)}
  to{opacity:0;transform:translate3d(0,calc(var(--x-shift) * -1),0)}
}
@keyframes announcement-in{
  from{opacity:0;transform:translate3d(0,var(--x-shift),0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
.announcement-copy.announcement-out{animation:announcement-out var(--x-dur) var(--ease) both}
.announcement-copy.announcement-in{animation:announcement-in var(--x-dur) var(--ease) both}
@media (prefers-reduced-motion:reduce){
  .announcement-copy.announcement-out,.announcement-copy.announcement-in{animation:none!important;opacity:1!important;transform:none!important}
}

.announcement-foot{padding:0 clamp(20px,2vw,34px);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.dots{display:flex;gap:8px}
.dots button{width:9px;height:9px;border-radius:999px;background:var(--line);transition:width var(--dur) var(--ease),background var(--dur) var(--ease)}
.dots button:hover{background:var(--muted)}
.dots button.selected{width:40px;background:var(--ink)}
.arrows{display:flex;gap:clamp(8px,.7vw,12px)}
.arrows button{display:flex;align-items:center;justify-content:center;width:clamp(38px,3vw,64px);height:clamp(38px,3vw,64px);border:0;border-radius:var(--r-1);background:var(--orange);color:var(--white);font-size:clamp(14px,1.1vw,20px);line-height:1;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.arrows button:hover{background:var(--ink);color:var(--white);transform:scale(1.04)}
.arrows button:active{transform:scale(.96);background:var(--muted)}

/* 6 · CUMPLEAÑOS --------------------------------------------------------- */
.community-column{min-width:0;min-height:0;display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(8px,0.9vw,20px)}
.birthdays{display:grid;grid-template-rows:auto minmax(0,1fr)}
.birthday-list{min-height:0;padding:clamp(10px,1.4vh,18px) clamp(16px,1.5vw,24px);display:grid;align-content:stretch;gap:clamp(8px,1.4vh,18px)}
.person{min-height:0;border-top:1px solid var(--hair);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(10px,1vw,16px)}
.person:first-child{border-top:0}
.avatar{position:relative;width:clamp(44px,min(4.5vw,8vh),92px);height:clamp(44px,min(4.5vw,8vh),92px);border-radius:var(--r-2);background:var(--ink);color:var(--white);display:grid;place-content:center;overflow:hidden;font-size:clamp(16px,min(1.3vw,2.4vh),30px);font-weight:900}
.avatar i{font-size:clamp(16px,min(1.3vw,2.4vh),30px)}
.avatar img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.person-info{min-width:0}
.person-info strong,.person-info span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person-info strong{font-size:var(--t-name);font-weight:700;letter-spacing:-.01em}
.person-info span{margin-top:clamp(3px,.5vh,5px);color:var(--muted);font-size:var(--t-sub)}

/* Cumpleaños de hoy: lo único que se enciende en la columna */
.birthdays.celebrating{border-color:var(--orange)}
.birthdays.celebrating .tag{color:var(--orange-ink)}
.person.today-birthday{margin:0;padding:clamp(12px,1.7vh,24px) clamp(14px,1.4vw,22px);border:1px solid var(--orange);border-radius:var(--r-2);background:var(--orange-wash)}
.person.today-birthday .avatar{border:2px solid var(--orange)}
.person.today-birthday .person-info strong{font-weight:800;white-space:normal}
.person.today-birthday .person-info span{white-space:normal}

/* 7 · EVENTOS ------------------------------------------------------------ */
.events{display:grid;grid-template-rows:auto minmax(0,1fr)}
.event-list{min-height:0;padding:clamp(6px,1vh,10px) clamp(14px,1.3vw,21px);display:grid;grid-auto-rows:minmax(0,1fr)}
.event-item{min-height:0;border-top:1px solid var(--hair);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(9px,min(.8vw,1.6vh),14px)}
.event-item:first-child{border-top:0}
.event-info{min-width:0}
.event-info strong,.event-info span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.event-info strong{font-size:var(--t-evt);font-weight:700;letter-spacing:-.01em}
.event-info span{margin-top:clamp(3px,.5vh,5px);color:var(--muted);font-size:var(--t-evt-sub)}
.event-countdown{padding:clamp(5px,.7vh,8px) clamp(7px,.6vw,10px);border:1px solid var(--line);border-radius:var(--r-1);background:var(--white);color:var(--muted);font-size:var(--t-chip);font-weight:800;letter-spacing:.04em;white-space:nowrap}
.event-countdown.is-today{border-color:var(--orange);color:var(--orange-ink)}

/* 8 · FECHAS (un solo componente para cumpleaños y eventos) -------------- */
.birthday-date,.event-date{min-width:clamp(46px,3.4vw,64px);padding:clamp(6px,.9vh,10px) clamp(8px,.7vw,12px);border:1px solid var(--line);border-radius:var(--r-1);background:var(--soft);display:grid;place-items:center;gap:2px;color:var(--ink)}
.birthday-date strong,.birthday-date span,.event-date strong,.event-date span{display:block;text-align:center;line-height:1}
.birthday-date strong,.event-date strong{font-size:var(--t-day);font-weight:900;line-height:.92;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.birthday-date span,.event-date span{font-size:var(--t-weekday);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
/* "Hoy" = blanco, borde naranja, tinta naranja */
.person.today-birthday .birthday-date{background:var(--white);border-color:var(--orange)}
.person.today-birthday .birthday-date strong{color:var(--orange-ink)}
.person.today-birthday .birthday-date span{color:var(--orange-ink);opacity:.9}

/* 9 · QR (la acción: único bloque de color pleno) ------------------------ */
.qr-card{min-width:0;padding:clamp(12px,1.6vh,20px);border:0;background:var(--orange-ink);color:var(--white);display:grid;grid-template-rows:auto auto auto;justify-content:center;align-content:center;justify-items:center;gap:clamp(8px,1vh,14px);text-align:center}
.qr-card h2{margin:0;font-size:var(--t-qrtitle);font-weight:800;letter-spacing:.005em}
.qr-card p{margin:clamp(4px,.7vh,8px) auto 0;max-width:34ch;color:var(--white);font-size:var(--t-qrbody);line-height:1.35;opacity:.92}
.qr-link{justify-self:center;align-self:center;display:block;max-width:100%;padding:clamp(7px,.8vw,16px);border-radius:var(--r-2);background:var(--white);transition:transform var(--dur) var(--ease)}
.qr-link:hover{transform:scale(1.015)}
.qr-link img,.qr-link svg{display:block;width:min(19vw,27vh,410px);height:min(19vw,27vh,410px);max-width:100%}
.qr-link svg{display:none}

/* 10 · REGISTROS + estados ---------------------------------------------- */
.side-column{min-width:0;min-height:0;display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(8px,0.9vw,20px)}
.lastregistros{display:grid;grid-template-rows:auto minmax(0,1fr)}
.lastregistros-list{min-height:0;padding:clamp(10px,1.4vh,18px) clamp(14px,1.3vw,21px);display:grid;align-content:stretch}
.lastreg-item{min-height:0;border-top:1px solid var(--hair);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(8px,.8vw,12px);padding:clamp(6px,.9vh,10px) 0}
.lastreg-item:first-child{border-top:0}
.lastreg-id{font-size:var(--t-id);font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lastreg-sigla{color:var(--faint);font-size:var(--t-sigla);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
/* Atendida se retira; los casos que piden atención se marcan con borde naranja */
.st-badge{display:inline-flex;align-items:center;gap:.55ch;padding:clamp(3px,.5vh,5px) clamp(6px,.55vw,9px);border:1px solid transparent;border-radius:var(--r-1);font-size:var(--t-status);font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.st-atendida{background:#e6f4ea;color:#1f7a54}
.st-en_espera{background:#fff0cc;color:#9a6800}
.st-no_completada{background:#fde8e8;color:#b4232a}

/* 11 · AVISOS DEL SISTEMA Y VACÍOS -------------------------------------- */
/* Toast: no altera la rejilla (antes empujaba las tarjetas a otra fila) */
.conn-status{position:fixed;left:50%;bottom:clamp(10px,2vh,20px);transform:translateX(-50%);z-index:80;max-width:min(90vw,720px);padding:clamp(7px,1vh,11px) clamp(12px,1.1vw,18px) clamp(7px,1vh,11px) clamp(14px,1.3vw,20px);border-left:3px solid var(--orange);border-radius:var(--r-1);background:var(--ink);color:var(--white);font-size:clamp(11px,.85vw,14px);font-weight:600;text-align:center}
.conn-status[hidden]{display:none}
.empty,.event-empty,.lastreg-empty{display:grid;place-items:center;padding:clamp(12px,2vh,20px);color:var(--muted);font-size:clamp(12px,.9vw,14px);line-height:1.4;text-align:center}

/* 12 · ESQUELETOS DE CARGA ---------------------------------------------- */
.skel{background:#e9e8e4;border-radius:var(--r-1);animation:skel-pulse 1.7s ease-in-out infinite}
@keyframes skel-pulse{0%,100%{opacity:1}50%{opacity:.55}}
.skel-announce{height:100%;padding:clamp(20px,3vh,38px) clamp(22px,2.4vw,40px);display:flex;flex-direction:column;justify-content:center}
.skel-announce .skel-cat{width:38%;height:clamp(10px,.9vw,16px)}
.skel-announce .skel-title{width:88%;height:var(--t-headline);margin-top:clamp(10px,1.6vh,18px)}
.skel-announce .skel-title2{width:62%;height:var(--t-headline);margin-top:clamp(6px,.8vh,10px)}
.skel-announce .skel-desc{width:76%;height:var(--t-body);margin-top:clamp(8px,1.2vh,14px)}
.skel-announce .skel-desc2{width:52%;height:var(--t-body);margin-top:clamp(6px,.8vh,10px)}
.skel-announce .skel-band{width:44%;height:var(--t-band);margin-top:clamp(20px,3.2vh,40px)}
.skel-birthdays{height:100%;padding:clamp(14px,2vh,24px) clamp(16px,1.5vw,24px);display:flex;flex-direction:column;justify-content:space-around}
.skel-person{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(10px,1vw,16px)}
.skel-avatar{width:clamp(39px,3.1vw,54px);height:clamp(39px,3.1vw,54px);border-radius:var(--r-2)}
.skel-lines{display:flex;flex-direction:column;gap:9px}
.skel-l1{width:70%;height:13px}
.skel-l2{width:46%;height:11px}
.skel-events{height:100%;padding:clamp(6px,1vh,10px) clamp(14px,1.3vw,21px);display:flex;flex-direction:column;justify-content:space-around}
.skel-event{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:11px}
.skel-datebox{width:clamp(46px,3.4vw,64px);height:clamp(36px,4.6vh,50px);border-radius:var(--r-1)}

/* 13 · RESPONSIVE -------------------------------------------------------- */
@media(max-width:1750px){
  .avatar{width:clamp(38px,min(3.3vw,6vh),52px);height:clamp(38px,min(3.3vw,6vh),52px);font-size:clamp(13px,min(1vw,1.9vh),20px)}
  .avatar i{font-size:clamp(13px,min(1vw,1.9vh),20px)}
  .card-head{padding:clamp(15px,2vh,22px) clamp(14px,1.4vw,20px);min-height:clamp(60px,8vh,88px)}
  .card .head-row{gap:clamp(8px,.7vw,11px)}
  .card .head-icon{flex:0 0 auto;align-self:stretch;aspect-ratio:1/1;min-width:14px;font-size:clamp(12px,min(1.3vw,2.6vh),24px);background:var(--orange);color:var(--white);border-radius:var(--r-1)}
  .announcement-body{padding:clamp(16px,2.4vh,26px) clamp(20px,2.2vw,32px)}
  .meta{padding-top:clamp(11px,1.7vh,18px)}
  .announcement-foot{padding:0 clamp(16px,1.6vw,24px)}
  .arrows button{width:clamp(30px,2.4vw,44px);height:clamp(30px,2.4vw,44px);font-size:15px}
  .dots button{width:7px;height:7px}
  .dots button.selected{width:30px}
  .birthday-list{padding:clamp(8px,1.1vh,14px) clamp(13px,1.2vw,18px)}
  .event-list{padding:0 clamp(13px,1.2vw,18px)}
  .lastregistros-list{padding:clamp(8px,1.1vh,14px) clamp(12px,1.1vw,16px)}
  .person{gap:clamp(8px,.8vw,12px)}
  .birthday-date,.event-date{min-width:clamp(44px,3.2vw,56px);padding:clamp(5px,.8vh,9px) clamp(7px,.6vw,10px)}
  .event-item{gap:clamp(9px,min(.8vw,1.6vh),14px)}
  .qr-card{padding:clamp(9px,1.2vh,14px);gap:clamp(6px,.8vh,10px)}
  .qr-link{padding:clamp(6px,.7vw,12px)}
  .qr-link img,.qr-link svg{width:min(14vw,20vh,250px);height:min(14vw,20vh,250px)}
  .lastreg-item{gap:clamp(6px,.6vw,9px);padding:clamp(5px,.7vh,8px) 0}
}

@media(max-width:1050px){
  .content{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1.15fr) minmax(0,.85fr)}
  .announcement-body{grid-template-columns:1fr}
  /* QR y registros comparten la segunda fila en vez de dejar un hueco */
  .side-column{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}
  .community-column{grid-template-rows:minmax(0,1.08fr) minmax(0,.92fr)}
  .person.today-birthday{padding:clamp(5px,0.9vh,10px) clamp(10px,1vw,16px)}
  .event-list{padding:0 10px}
  .event-date{padding:2px 4px}
  .event-item{gap:6px}
  .event-date strong{font-size:12px}
  .event-date span{font-size:7px;letter-spacing:.06em}
  .qr-card{padding:12px 18px}
  .qr-link img,.qr-link svg{width:min(16vw,21vh,230px);height:min(16vw,21vh,230px)}
}

@media(max-width:720px){
  .screen{grid-template-rows:64px minmax(0,1fr)}
  .header{padding:0 12px;gap:14px}
  .logo-window{width:clamp(120px,34vw,200px);height:clamp(30px,7.5vw,42px)}
  .header-accent{min-width:20px}
  .time{width:auto}
  .time strong{font-size:clamp(17px,4.6vw,26px)}
  .time span{display:none}
  .content{padding:clamp(6px,0.7vw,12px);grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,.95fr) minmax(0,.85fr);gap:clamp(6px,0.7vw,12px)}
  .announcement{grid-column:1/-1;grid-template-rows:auto minmax(0,1fr) clamp(36px,5.5vh,44px)}
  .card-head{padding:clamp(12px,2.4vh,18px) 14px;min-height:clamp(48px,6.5vh,62px)}
  .card .head-row{gap:9px}
  .card .head-icon{flex:0 0 auto;align-self:stretch;aspect-ratio:1/1;min-width:12px;font-size:clamp(10px,3.2vw,18px);background:var(--orange);color:var(--white);border-radius:var(--r-1)}
  .card .head-text h1,.card .head-text h2{font-size:clamp(11px,3.1vw,15px)}
  .card .head-sub{display:none}
  .tag{font-size:clamp(8px,2.3vw,11px);letter-spacing:.1em}
  .announcement-body{padding:12px}
  .announcement-body:after{font-size:clamp(30px,9vw,48px);right:-10px;top:0;opacity:.6}
  .category{font-size:clamp(8px,2.4vw,10.5px);gap:6px}
  .category:before{width:12px;height:2px}
  .announcement-copy h2{margin:7px 0 0;font-size:clamp(16px,5vw,24px)}
  .announcement-copy>p{margin-top:5px;font-size:clamp(10px,2.8vw,12.5px)}
  .meta{padding-top:8px}
  .meta>span:first-child,.meta>span[data-date-part]{border-left-width:2px;padding:1px 0 1px 8px}
  .meta>span:first-child b,.meta>span[data-date-part] b,#announcementDate{font-size:clamp(11px,3.3vw,14px);line-height:1.2}
  .meta>span:not([data-date-part]):not(:first-child){margin-top:6px;padding-top:6px;font-size:clamp(8px,2.5vw,11px)}
  .announcement-foot{padding:0 12px}
  .arrows button{width:clamp(26px,7vw,34px);height:clamp(26px,7vw,34px);font-size:14px}
  .dots button{width:7px;height:7px}
  .dots button.selected{width:26px}
  .community-column,.side-column{grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(6px,0.7vw,12px)}
  .side-column{grid-template-columns:minmax(0,1fr);grid-column:auto}
  .card{grid-template-columns:minmax(0,1fr)}
  .birthday-list,.event-list{padding:0 10px;gap:6px}
  .event-list{padding:0 8px;gap:4px}
  .birthday-list{grid-template-columns:minmax(0,1fr);overflow-x:hidden;min-width:0;padding:clamp(4px,0.6vh,8px) 6px}
  .birthdays.celebrating .birthday-list{gap:clamp(4px,0.8vh,6px)}
  .person{gap:8px}
  .avatar{width:clamp(26px,7vw,36px);height:clamp(26px,7vw,36px);border-radius:var(--r-1);font-size:clamp(10px,2.7vw,14px)}
  .person-info strong{font-size:clamp(9.5px,2.7vw,12px);word-break:break-word;hyphens:auto}
  .person-info span{margin-top:2px;font-size:clamp(8px,2.2vw,10px)}
  .person.today-birthday{padding:2px 3px;gap:3px}
  .person.today-birthday .avatar{width:clamp(20px,5.5vw,26px);height:clamp(20px,5.5vw,26px)}
  .birthday-date,.event-date{min-width:0;padding:2px 6px;gap:1px;max-width:100%}
  .birthday-date strong,.event-date strong{font-size:clamp(10px,2.7vw,12px)}
  .birthday-date span,.event-date span{font-size:clamp(6.5px,1.8vw,8px);letter-spacing:.06em}
  .event-item{gap:8px}
  .event-info strong{font-size:clamp(9px,2.5vw,11.5px)}
  .event-info span{margin-top:2px;font-size:clamp(8px,2.2vw,10px)}
  .event-countdown{padding:2px 5px;font-size:clamp(7.5px,2vw,9.5px)}
  .empty,.event-empty,.lastreg-empty{font-size:clamp(8px,2.3vw,10.5px)}
  .qr-card{padding:10px;gap:6px}
  .qr-card h2{font-size:clamp(11px,3.2vw,14px)}
  .qr-card p{display:none}
  .qr-link img,.qr-link svg{width:min(32vw,19vh,170px);height:min(32vw,19vh,170px)}
  .lastreg-item{gap:6px;padding:3px 0}
  .lastreg-id{font-size:clamp(10px,2.8vw,13px)}
  .lastreg-sigla{font-size:clamp(8px,2.2vw,10px)}
  .st-badge{padding:2px 5px;font-size:clamp(6.5px,1.9vw,8px)}
  .skel-announce{padding:12px}
  .skel-announce .skel-title,.skel-announce .skel-title2{height:clamp(16px,4.6vw,22px)}
  .skel-announce .skel-desc,.skel-announce .skel-desc2{height:10px}
  .skel-announce .skel-band{height:clamp(11px,3.3vw,14px)}
  .skel-birthdays,.skel-events{padding:10px}
  .skel-avatar{width:clamp(26px,7vw,34px);height:clamp(26px,7vw,34px)}
  .skel-l1{height:10px}
  .skel-l2{height:9px}
  .skel-datebox{width:clamp(34px,9vw,44px);height:clamp(28px,7.4vw,36px)}
}

/* 14 · MOVIMIENTO -------------------------------------------------------- */
/* Efecto de cumpleaños (JS): confeti en la paleta, nunca amarillo ni arcoíris */
.birthday-screen-effect{position:fixed;z-index:9999;inset:0;overflow:hidden;pointer-events:none}
.screen-confetti,.screen-sparkle{position:absolute;display:block}
.screen-confetti{top:-8vh;width:10px;height:18px;border-radius:2px;background:var(--c,var(--orange));left:var(--left);animation:screen-confetti-fall var(--duration) linear var(--delay) forwards}
.screen-sparkle{left:var(--left);top:var(--top);color:var(--c,var(--orange));font-size:var(--size);animation:screen-sparkle 1.2s ease-in-out var(--delay) infinite alternate}
@keyframes screen-confetti-fall{0%{transform:translateY(-10vh) rotate(0);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateY(118vh) rotate(var(--turn));opacity:0}}
@keyframes screen-sparkle{0%{transform:scale(.25) rotate(-20deg);opacity:.05}100%{transform:scale(1.35) rotate(20deg);opacity:1}}
@media(prefers-reduced-motion:reduce){
  .skel{animation:none}
  .screen-confetti,.screen-sparkle{animation:none;display:none}
  .dots button,.arrows button,.qr-link{transition:none}
}