:root{font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;color:#17253a;background:#f4f7fb}*{box-sizing:border-box}body{margin:0}header{background:#fff;border-bottom:1px solid #dfe6ee;padding:18px max(20px,calc((100vw - 1100px)/2));display:flex;justify-content:space-between;gap:20px;align-items:center}.brand{display:flex;align-items:center;gap:12px}.brand small{display:block;color:#68798d;margin-top:3px}.mark{background:#1263a5;color:#fff;border-radius:12px;padding:12px;font-weight:800}.demo{font-size:11px;background:#fff3d5;color:#855500;padding:9px;border-radius:99px;font-weight:700}main{max-width:1100px;margin:auto;padding:26px 18px 70px}.hero{background:linear-gradient(120deg,#083d77,#1263a5);color:#fff;padding:32px;border-radius:18px}.hero h1{margin:0 0 8px;font-size:clamp(25px,4vw,38px)}.hero p{margin:0;opacity:.92;max-width:750px;line-height:1.5}nav{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}button,.btn{cursor:pointer;border:1px solid #c9d5df;background:#fff;color:#163d68;padding:11px 16px;border-radius:10px;font-weight:650;text-decoration:none;font-size:14px}button:hover,.btn:hover{background:#eaf3fb}nav .active,.primary{background:#075a9e;color:#fff;border-color:#075a9e}nav .active:hover,.primary:hover{background:#064779}.panel{background:#fff;border:1px solid #e2e9f0;border-radius:16px;padding:26px;min-height:260px;box-shadow:0 8px 25px #17253a08}.panel h2{margin-top:0}form{display:grid;gap:15px;max-width:520px}label{display:grid;gap:6px;font-size:14px;font-weight:650}input{padding:12px;border:1px solid #bdcbd8;border-radius:9px;font-size:15px;width:100%}input:focus{outline:2px solid #8cbbe5}.check{display:flex;align-items:flex-start;gap:10px;font-weight:400;line-height:1.5}.check input{width:auto;margin-top:4px}.info{background:#eaf3fb;border-radius:12px;padding:16px;margin:12px 0}.actions{display:flex;gap:9px;flex-wrap:wrap;margin:15px 0}#qrImg{max-width:250px;width:100%}#qrUrl{word-break:break-all;font-size:12px}#notice:not(:empty){background:#fff4d8;border:1px solid #f2d18a;padding:12px;border-radius:10px;margin:12px 0}.columns{display:grid;grid-template-columns:1fr 1fr;gap:24px}.rankrow{padding:12px;border-bottom:1px solid #e4e9ee;display:flex;justify-content:space-between;gap:10px}.rankrow small{display:block;color:#64748b}.scroll{overflow:auto}table{border-collapse:collapse;width:100%;font-size:13px}td,th{padding:10px;border-bottom:1px solid #e1e8ef;text-align:left;white-space:nowrap}select{padding:8px;border-radius:7px;border:1px solid #bac9d8}footer{text-align:center;color:#67758a;font-size:12px;padding:24px;line-height:1.6}@media(max-width:650px){header{flex-direction:column;align-items:flex-start}.columns{grid-template-columns:1fr}.panel{padding:18px}.demo{font-size:10px}}

.mark{background:#075a9e}.hero{background:linear-gradient(120deg,#083d77,#1263a5)}

.alliance-art{display:block;width:100%;max-height:285px;object-fit:contain;background:white;border-radius:12px;margin-bottom:22px}.filters{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:16px 0;padding:14px;background:#eef5fc;border-radius:12px}.filters label{min-width:165px}.filters input{padding:9px}.chart{border:1px solid #e2e9f0;border-radius:12px;padding:14px;margin-bottom:20px;min-height:60px}.barrow{display:grid;grid-template-columns:minmax(80px,140px) 1fr 32px;gap:9px;align-items:center;margin:11px 0;font-size:12px}.barlabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bartrack{height:15px;background:#e9f1fa;border-radius:7px;overflow:hidden}.barfill{height:100%;background:linear-gradient(90deg,#075a9e,#3d96d8);border-radius:7px}.barrow b{text-align:right}@media(max-width:650px){.alliance-art{max-height:180px}.barrow{grid-template-columns:95px 1fr 26px}}

/* V1.2.1: arte a ancho completo sin bandas blancas laterales */
.hero .alliance-art{width:100%;height:auto;max-height:none;object-fit:cover;object-position:center;aspect-ratio:1672/941;background:transparent;border-radius:12px;display:block}
@media(max-width:650px){.hero .alliance-art{max-height:none;aspect-ratio:1672/941}}

/* V1.3: Executive dashboard */
.dashboard{margin:26px 0;padding:20px;background:#f4f8fe;border:1px solid #dbe7f5;border-radius:16px}.dashboard h3{margin:0 0 6px}.muted{color:#667b90;font-size:13px}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0}.kpi{background:#fff;border:1px solid #dbe7f5;border-radius:13px;padding:17px}.kpi span{display:block;color:#5c7087;font-size:12px}.kpi strong{display:block;font-size:29px;color:#075a9e;margin-top:7px}.dashboard-charts{display:grid;grid-template-columns:1fr 1fr;gap:14px}.dashboard-card{background:#fff;border:1px solid #dbe7f5;border-radius:13px;padding:15px;min-width:0}.dashboard-card h4{margin:0 0 12px;color:#183c60}.dashboard-card .chart{border:0;padding:0;margin:0;max-height:430px;overflow:auto}.dashboard-card.wide{grid-column:1/-1}.dashboard .barrow{grid-template-columns:minmax(80px,140px) 1fr 38px}@media(max-width:750px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-charts{grid-template-columns:1fr}.dashboard-card.wide{grid-column:auto}}

/* V1.7: cashier management */
.staff-management{margin:26px 0;padding:20px;background:#f7faff;border:1px solid #dbe7f5;border-radius:16px}.staff-form{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:15px 0 22px}.staff-form button{justify-self:start}.staff-form select{width:100%;padding:12px;font-size:15px}.staff-actions{display:flex;gap:8px}.staff-actions button{white-space:nowrap;padding:8px 11px}.staff-status{font-weight:700}.staff-status.active{color:#176d46}.staff-status.inactive{color:#a23b36}@media(max-width:650px){.staff-form{grid-template-columns:1fr}}

.staff-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:18px 0}.staff-filters label{flex:1 1 220px}.staff-filters input,.staff-filters select{width:100%}.staff-filters #staffCount{flex-basis:100%}

/* Panel administrativo: aproximadamente diez registros visibles, resto con desplazamiento. */
.ranking-scroll{max-height:660px;overflow-y:auto;overscroll-behavior:contain;border:1px solid #dbe7f5;border-radius:12px;background:#fff;scrollbar-gutter:stable;}
.ranking-scroll .rankrow{min-height:66px;align-items:center;}
.staff-table-scroll{max-height:565px;overflow:auto;overscroll-behavior:contain;border:1px solid #dbe7f5;border-radius:12px;background:#fff;scrollbar-gutter:stable;}
.staff-table-scroll table{margin:0;}
.staff-table-scroll thead th{position:sticky;top:0;z-index:2;background:#eaf3fb;box-shadow:0 1px 0 #dbe7f5;}
.ranking-scroll:focus-visible,.staff-table-scroll:focus-visible{outline:2px solid #075a9e;outline-offset:2px;}