/* ET505 S03 · QR en todas las pantallas. Solo afecta a las dos clases. */
.attendance-deck{max-width:1520px}
.attendance-deck .slide{padding:28px 28px 116px}
.attendance-deck .slide.active{display:grid;grid-template-columns:minmax(0,1fr) 294px;align-items:start;gap:28px;animation:none}
.slide-body{min-width:0}
.attendance-card{position:sticky;top:18px;align-self:start;width:100%;min-width:0;padding:15px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--purple);border-radius:20px;box-shadow:var(--shadow);text-align:center;z-index:5}
.attendance-card.practice{border-top-color:var(--teal)}
.attendance-card .attendance-heading{margin-bottom:9px}
.attendance-card .attendance-heading h3{font-size:1.05rem;line-height:1.3;margin:0;letter-spacing:0}
.attendance-card .attendance-heading span{display:block;color:var(--muted);font-size:.72rem;line-height:1.4;margin-top:3px}
.attendance-visual{display:flex;justify-content:center;align-items:center;background:white;min-width:0}
.attendance-visual img{display:block;width:261px;max-width:100%;height:auto;image-rendering:pixelated}
.attendance-card.practice .attendance-visual img{image-rendering:auto}
.attendance-card .attendance-details p{font-size:.77rem;line-height:1.45;margin:8px 0 0}
.attendance-card .attendance-details .attendance-date{font-weight:800}
.attendance-card .attendance-details .attendance-rule{color:var(--muted)}
.attendance-card .attendance-details .attendance-note{font-size:.70rem;color:var(--muted);margin-top:7px}
.attendance-actions{display:flex;justify-content:center;align-items:stretch;gap:6px;margin-top:10px;flex-wrap:wrap}
.attendance-actions .btn{font-size:.76rem;padding:7px 9px;min-height:35px;border-radius:9px}
.attendance-card.practice .attendance-actions .btn{flex:1}
.attendance-dialog{max-width:1320px;width:calc(100% - 36px)}
.attendance-dialog-layout{display:grid;grid-template-columns:minmax(0,1fr) 274px;gap:24px;align-items:start}
.attendance-dialog-body{min-width:0}
.attendance-dialog .attendance-card{top:0;padding:12px}
.attendance-dialog .attendance-visual img{width:232px}
@media screen and (min-width:961px) and (max-width:1200px){
 .attendance-deck .slide.active{grid-template-columns:minmax(0,1fr) 248px;gap:20px}
 .attendance-deck .slide{padding-left:24px;padding-right:24px}
 .attendance-card{padding:12px}
 .attendance-visual img{width:216px}
}
@media screen and (min-width:961px) and (max-height:740px){
 .attendance-card{padding:11px;top:10px}
 .attendance-visual img,.attendance-dialog .attendance-visual img{width:210px}
 .attendance-card .attendance-details p{margin-top:5px}
 .attendance-actions{margin-top:7px}
}
@media screen and (min-width:961px) and (max-height:600px){
 .attendance-visual img,.attendance-dialog .attendance-visual img{width:156px}
 .attendance-card .attendance-details .attendance-note{display:none}
}
@media screen and (max-width:960px){
 .attendance-deck .slide.active{display:flex;flex-direction:column;gap:22px}
 .attendance-deck .slide{padding:18px 20px 128px}
 .attendance-deck .slide>.slide-body{width:100%}
 .attendance-card{order:-1;position:sticky;top:0;align-self:stretch;display:grid;grid-template-columns:132px minmax(0,1fr);grid-template-rows:auto 1fr;gap:0 14px;text-align:left;padding:12px;border-radius:15px;z-index:20}
 .attendance-card .attendance-heading{grid-column:2;grid-row:1;margin-bottom:0}
 .attendance-card .attendance-visual{grid-column:1;grid-row:1 / 3;align-self:center}
 .attendance-visual img{width:132px}
 .attendance-card .attendance-details{grid-column:2;grid-row:2}
 .attendance-card .attendance-details p{font-size:.73rem;margin-top:5px}
 .attendance-card .attendance-details .attendance-note{display:none}
 .attendance-card .attendance-heading h3{font-size:.95rem}
 .attendance-card .attendance-heading span{font-size:.68rem}
 .attendance-actions{justify-content:flex-start;margin-top:7px}
 .attendance-actions .btn{font-size:.72rem;padding:7px 8px;min-height:34px;flex-grow:0}
 .attendance-card.practice .attendance-actions .btn{flex:0 1 auto}
 .attendance-dialog-layout{display:flex;flex-direction:column;gap:18px}
 .attendance-dialog-body{width:100%}
 .attendance-dialog .attendance-card{width:100%;padding:10px;top:0}
 .attendance-dialog .attendance-visual img{width:132px}
}
@media screen and (max-width:500px){
 .attendance-deck .slide{padding:12px 14px 142px}
 .attendance-card{grid-template-columns:114px minmax(0,1fr);gap:0 10px;padding:10px}
 .attendance-visual img,.attendance-dialog .attendance-visual img{width:114px}
 .attendance-card .attendance-details .attendance-rule{font-size:.68rem}
 .attendance-actions{gap:5px}
 .attendance-actions .btn{font-size:.68rem;padding:6px 7px;min-height:33px}
}
@media screen and (max-width:360px){
 .attendance-card{grid-template-columns:96px minmax(0,1fr);gap:0 8px;padding:8px}
 .attendance-visual img,.attendance-dialog .attendance-visual img{width:96px}
 .attendance-card .attendance-heading h3{font-size:.86rem}
 .attendance-card .attendance-details p{font-size:.67rem}
 .attendance-actions .btn{font-size:.62rem;padding:6px}
}
@media print{
 .attendance-deck .slide{display:grid!important;grid-template-columns:minmax(0,1fr) 42mm;gap:6mm;padding:6mm;break-after:page}
 .attendance-card{position:static!important;display:block!important;width:auto;padding:3mm;box-shadow:none;border:1px solid #aaa;border-top:3px solid #333;break-inside:avoid;order:initial}
 .attendance-card .attendance-heading h3{font-size:9pt}
 .attendance-card .attendance-heading span,.attendance-card .attendance-details p{font-size:7pt}
 .attendance-visual img{width:34mm!important;height:auto}
 .attendance-actions{display:none!important}
 .attendance-dialog{display:none!important}
}