@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap');

:root{
  --ink:#16233F; --soft:#5B6478; --paper:#E8E9EC; --card:#FFF; --line:#CFD4DC;
  --azul:#2B4B82; --azul-2:#DDE4F0; --warn:#9A6B14; --full:#8A3B3B;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Archivo',ui-sans-serif,system-ui,-apple-system,sans-serif;
  color:var(--ink); background:var(--paper); min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--azul);outline-offset:2px;}

.wrap{max-width:680px;margin:0 auto;padding:0 18px 96px;}

.top{display:flex;align-items:center;justify-content:space-between;padding:22px 0 16px;gap:12px;}
.brand{display:flex;align-items:center;gap:10px;min-width:0;}
.mark{font-size:18px;font-weight:700;letter-spacing:-.03em;line-height:1;}
.mark span{display:block;font-size:11px;font-weight:500;color:var(--soft);margin-top:3px;}
.salir{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 13px;font-size:13px;color:var(--soft);white-space:nowrap;}

.hero{background:var(--ink);color:#fff;border-radius:18px;padding:20px;margin-bottom:16px;}
.hero .lbl{font-size:12px;color:#9AA8C4;margin:0 0 10px;}
.hero .big{font-size:38px;font-weight:700;letter-spacing:-.04em;line-height:1;}
.hero .sub{font-size:14px;color:#C3CCDF;margin:8px 0 0;line-height:1.45;}
.hero .none{font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.35;margin:0;}

.tabs{display:flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px;margin-bottom:18px;}
.tabs button{flex:1;border:0;background:none;border-radius:999px;padding:9px;font-size:14px;font-weight:500;color:var(--soft);}
.tabs button[data-on="true"]{background:var(--ink);color:#fff;}

.stats{display:flex;gap:9px;margin-bottom:18px;}
.stat{flex:1;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px;}
.stat b{display:block;font-size:25px;font-weight:700;letter-spacing:-.03em;line-height:1;}
.stat span{font-size:12px;color:var(--soft);display:block;margin-top:5px;line-height:1.3;}

.week{display:flex;gap:7px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none;}
.week::-webkit-scrollbar{display:none;}
.day{flex:0 0 auto;width:52px;border:1px solid var(--line);background:var(--card);border-radius:13px;padding:9px 0;text-align:center;color:inherit;}
.day b{display:block;font-size:18px;font-weight:600;letter-spacing:-.02em;}
.day i{display:block;font-style:normal;font-size:11px;color:var(--soft);margin-bottom:3px;}
.day[data-on="true"]{background:var(--ink);border-color:var(--ink);color:#fff;}
.day[data-on="true"] i{color:#9AA8C4;}
.day u{display:block;height:3px;width:3px;border-radius:50%;background:var(--azul);margin:5px auto 0;text-decoration:none;}
.day[data-on="true"] u{background:#9AA8C4;}
.day u[data-mia="true"]{width:5px;height:5px;}

.dayline{display:flex;align-items:baseline;justify-content:space-between;margin:6px 0 12px;gap:12px;}
.dayline h2{font-size:15px;font-weight:600;margin:0;letter-spacing:-.01em;}
.dayline p{margin:0;font-size:13px;color:var(--soft);white-space:nowrap;}

.card{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:14px;margin-bottom:9px;}
.card[data-mia="true"]{border-color:var(--azul);box-shadow:inset 3px 0 0 var(--azul);}
.card[data-off="true"]{opacity:.6;}
.row{display:flex;gap:13px;align-items:flex-start;}
.hora{flex:0 0 54px;}
.hora b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.1;}
.hora i{font-style:normal;font-size:11px;color:var(--soft);}
.info{flex:1;min-width:0;}
.info h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.02em;}
.info p{margin:3px 0 0;font-size:13px;color:var(--soft);}
.fecha{font-size:12px;color:var(--soft);margin:0 0 3px;}

.dots{display:flex;gap:3px;margin-top:9px;flex-wrap:wrap;align-items:center;}
.dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--line);}
.dot[data-f="true"]{background:var(--azul);border-color:var(--azul);}
.dot[data-f="mia"]{background:var(--ink);border-color:var(--ink);}
.plazas{font-size:12px;color:var(--soft);margin-left:6px;}
.plazas[data-s="pocas"]{color:var(--warn);font-weight:500;}
.plazas[data-s="llena"]{color:var(--full);font-weight:500;}

.acts{display:flex;gap:8px;margin-top:12px;}
.btn{flex:1;border:0;border-radius:11px;padding:11px;font-size:14px;font-weight:600;background:var(--azul);color:#fff;}
.btn[data-v="ghost"]{background:transparent;border:1px solid var(--line);color:var(--ink);font-weight:500;}
.btn[data-v="wait"]{background:var(--azul-2);color:var(--azul);}
.btn[data-v="danger"]{background:transparent;border:1px solid var(--line);color:var(--full);font-weight:500;}
.btn:disabled{background:var(--paper);color:var(--soft);cursor:default;border:1px solid var(--line);}

.tag{display:inline-block;font-size:11px;font-weight:600;color:var(--azul);background:var(--azul-2);border-radius:6px;padding:3px 7px;margin-top:9px;}
.tag[data-v="wait"]{color:var(--warn);background:#F4EBD8;}
.tag[data-v="off"]{color:var(--full);background:#F3E3E3;}

.roster{margin-top:12px;border-top:1px solid var(--line);padding-top:11px;}
.per{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:14px;gap:10px;}
.per em{font-style:normal;color:var(--soft);font-size:12px;}
.per button{border:0;background:none;color:var(--full);font-size:12px;font-weight:500;padding:4px;}

.vacio{font-size:13px;color:var(--soft);padding:6px 0;margin:0;line-height:1.55;}
.link{border:0;background:none;color:var(--azul);font-size:13px;font-weight:600;padding:8px 0;}
.panel{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:15px;margin-bottom:14px;}
.panel h3{margin:0 0 12px;font-size:15px;font-weight:600;letter-spacing:-.01em;}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.f{display:flex;flex-direction:column;gap:5px;}
.f label{font-size:12px;color:var(--soft);}
.f input,.f select{border:1px solid var(--line);border-radius:10px;padding:10px;font-size:14px;font-family:inherit;background:var(--card);color:var(--ink);width:100%;}
.full{grid-column:1 / -1;}
.err{color:var(--full);font-size:13px;margin:10px 0 0;}
.aviso{background:#F7EEEE;border:1px solid #E3CDCD;color:var(--full);border-radius:12px;padding:12px;font-size:13px;line-height:1.5;}

.linea{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);}
.linea:last-of-type{border-bottom:0;}
.linea b{font-size:15px;font-weight:600;letter-spacing:-.01em;}
.linea em{font-style:normal;font-size:12px;color:var(--soft);display:block;margin-top:2px;}
.linea button{border:0;background:none;color:var(--full);font-size:13px;font-weight:500;padding:6px;white-space:nowrap;}
.anadir{display:flex;gap:8px;margin-top:12px;}
.anadir input{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:14px;font-family:inherit;background:var(--card);color:var(--ink);min-width:0;}
.anadir button{border:0;border-radius:10px;padding:0 16px;font-size:14px;font-weight:600;background:var(--azul);color:#fff;}

.alu{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:14px;margin-bottom:9px;}
.alu[data-off="true"]{opacity:.6;}
.alu .cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.alu h4{margin:0;font-size:16px;font-weight:600;letter-spacing:-.02em;}
.alu .usr{font-size:13px;color:var(--soft);margin:3px 0 0;}
.alu .cnt{font-size:12px;color:var(--soft);white-space:nowrap;}

.login{max-width:380px;margin:0 auto;padding:64px 18px;}
.login .marca{margin-bottom:14px;}
.login h1{font-size:28px;font-weight:700;letter-spacing:-.04em;margin:0 0 6px;line-height:1.1;}
.login p.int{color:var(--soft);font-size:14px;margin:0 0 24px;line-height:1.5;}
.login .f{margin-bottom:10px;}
.pista{font-size:12px;color:var(--soft);margin-top:16px;line-height:1.6;text-align:center;}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:12px 18px;border-radius:999px;font-size:14px;font-weight:500;z-index:50;
  box-shadow:0 6px 24px rgba(22,35,63,.30);animation:sube .22s ease-out;max-width:90vw;text-align:center;}
@keyframes sube{from{opacity:0;transform:translate(-50%,10px);}to{opacity:1;transform:translate(-50%,0);}}
@media (prefers-reduced-motion:reduce){.toast{animation:none;}}

.instalar{display:flex;align-items:center;gap:10px;background:var(--azul-2);border-radius:12px;
  padding:12px 14px;margin-top:16px;}
.instalar p{margin:0;flex:1;font-size:13px;color:var(--azul);line-height:1.45;}
.instalar > button{border:0;background:none;color:var(--azul);font-size:20px;line-height:1;padding:0 4px;}
.instalar .instalarBtn{border:0;background:var(--azul);color:#fff;border-radius:9px;
  padding:9px 14px;font-size:13px;font-weight:600;}

.cargando{padding:60px 0;text-align:center;color:var(--soft);font-size:14px;}