:root{
  --navy:#10218a; --navy-2:#0b175f; --navy-soft:#e8ebf8;
  --gold:#ffcc00; --gold-soft:#fff6cc; --brown:#8c5f21;
  --bg:#f3f4f8; --card:#fff; --ink:#141629; --muted:#6b6f85; --line:#e4e6ef;
  --ok:#14804a; --ok-soft:#e3f5ea; --bad:#c2352b; --bad-soft:#fbe7e5; --warn:#a86a00; --warn-soft:#fff2d6;
  --r:16px; --shadow:0 1px 2px rgba(16,33,138,.06),0 4px 16px rgba(16,33,138,.06);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.45 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);-webkit-tap-highlight-color:transparent}
a{color:var(--navy);text-decoration:none}
h1,h2,.hello{font-family:Archivo,Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:-.01em;margin:0}
h1{font-size:26px;font-weight:800;margin:6px 0 14px}
h2{font-size:17px;font-weight:700}
h2.sub{font-size:15px;margin:18px 0 8px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.card h2.sub{margin-top:0}
.muted{color:var(--muted)} .small{font-size:13px} .center{text-align:center} .thin{font-weight:500;font-size:14px}
.lead{margin:-6px 0 16px}
.ic{flex:none;vertical-align:middle}

/* layout */
.wrap{max-width:560px;margin:0 auto;padding:calc(64px + var(--safe-t) + 8px) 16px calc(84px + var(--safe-b))}
body.bare .wrap{padding:24px 16px 40px}
.top{position:fixed;inset:0 0 auto;z-index:20;height:calc(60px + var(--safe-t));padding:var(--safe-t) 12px 0 14px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--gold)}
.brand{display:flex;align-items:center;gap:10px;color:#fff}
.brand img{height:38px;width:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.brand span{display:flex;flex-direction:column;line-height:1.1}
.brand b{font-family:Archivo,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:900;font-size:19px;letter-spacing:.02em}
.brand small{font-size:11px;opacity:.75;letter-spacing:.06em;text-transform:uppercase}
.iconbtn{border:0;background:transparent;color:inherit;width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.top .iconbtn:active{background:rgba(255,255,255,.12)}
.iconbtn.sm{width:34px;height:34px;color:var(--muted)}
.iconbtn.sm:hover{background:var(--bg)}

.tabs{position:fixed;inset:auto 0 0;z-index:20;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:6px 4px calc(6px + var(--safe-b))}
.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:600;color:var(--muted);padding:4px 0;border-radius:12px}
.tabs a.on{color:var(--navy)}
.tabs a.on .ic{background:var(--gold);border-radius:999px;padding:3px 14px;width:52px;height:30px;color:var(--navy)}

.drawer{position:fixed;inset:0;z-index:30;background:rgba(10,14,40,.4);opacity:0;pointer-events:none;transition:opacity .2s}
.drawer-in{position:absolute;right:0;top:0;bottom:0;width:min(300px,84vw);background:#fff;padding:calc(16px + var(--safe-t)) 10px 20px;transform:translateX(100%);transition:transform .22s;overflow:auto}
.menu-open .drawer{opacity:1;pointer-events:auto}
.menu-open .drawer-in{transform:none}
.drawer a{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;color:var(--ink);font-weight:500}
.drawer a:active,.drawer a.on{background:var(--navy-soft);color:var(--navy)}
.drawer-user{display:flex;gap:12px;align-items:center;padding:8px 12px 16px;border-bottom:1px solid var(--line);margin-bottom:6px}
.drawer-user div{display:flex;flex-direction:column}.drawer-user small{color:var(--muted)}
.drawer-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:12px 12px 4px}

/* cards */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;margin-bottom:12px;display:block;color:inherit}
.card.empty{text-align:center;color:var(--muted);padding:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.grid2 .card{margin:0}
.mini{display:flex;flex-direction:column;gap:2px;min-height:96px}
.mini small{color:var(--muted);font-weight:600;font-size:12px;display:flex;gap:5px;align-items:center;margin-bottom:4px}
.mini b{font-family:Archivo,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:20px;font-weight:800}
.mini .muted{font-size:13px}
.neg{color:var(--bad)}
.sec-head{display:flex;justify-content:space-between;align-items:center;margin:22px 0 10px}
.sec-head h2{display:flex;gap:6px;align-items:center}
.sec-head a{font-size:14px;font-weight:600}
.hello{font-size:28px;font-weight:900;margin:4px 0 14px}

.flash{border-radius:12px;padding:12px 14px;margin-bottom:12px;font-weight:500;background:var(--ok-soft);color:var(--ok);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.flash.err{background:var(--bad-soft);color:var(--bad)}

/* to-do */
.todo{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.todo-item{display:flex;gap:10px;align-items:center;background:var(--gold-soft);border:1px solid #f5dd73;color:#5b4300;padding:12px 14px;border-radius:14px;font-weight:600;font-size:14px}
.todo-item span{flex:1}.todo-item b{font-size:20px;opacity:.6}

/* hero partido */
.match-hero{background:linear-gradient(135deg,var(--navy) 0%,#1b31b5 100%);color:#fff;position:relative;overflow:hidden;padding:18px}
.match-hero::before{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;border:22px solid rgba(255,204,0,.18)}
.match-hero.away{background:linear-gradient(135deg,#2a2f4f 0%,#41476e 100%)}
.mh-top{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:13px;opacity:.95}
.match-hero .tag{background:var(--gold);color:var(--navy)}
.mh-vs{margin:14px 0 12px}.mh-vs small{opacity:.75;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.mh-vs b{display:block;font-family:Archivo,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:900;font-size:24px;line-height:1.15}
.mh-vs i{font-style:normal;color:var(--gold);font-size:16px;padding:0 4px}
.mh-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;opacity:.95}
.mh-meta span{display:flex;gap:5px;align-items:center}
.mh-note{margin:12px 0 0;background:rgba(255,255,255,.12);border-radius:10px;padding:8px 10px;font-size:13px}

.tag{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:999px}
.tag.home{background:var(--gold);color:var(--navy)}
.tag.away{background:var(--navy-soft);color:var(--navy)}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--bg);color:var(--muted);vertical-align:middle}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.club{background:var(--navy-soft);color:var(--navy)}

/* avisos */
.aviso p{margin:6px 0 8px;white-space:normal}
.aviso-h{display:flex;gap:8px;align-items:center;color:var(--navy)}
.aviso-h b{color:var(--ink);flex:1}
.aviso.pinned{border-left:4px solid var(--gold)}
.aviso-f{display:flex;justify-content:space-between;align-items:center;gap:8px}

/* segmentos */
.seg{display:flex;background:#e6e8f1;border-radius:12px;padding:4px;margin-bottom:14px}
.seg a{flex:1;text-align:center;padding:8px 4px;border-radius:9px;font-weight:600;font-size:14px;color:var(--muted)}
.seg a.on{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* agenda */
.match,.training{display:flex;gap:12px;align-items:center}
.match.cancelled{opacity:.6}
.date-badge,.wd{flex:none;width:52px;height:56px;border-radius:12px;background:var(--navy-soft);color:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.date-badge b{font-family:Archivo,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:22px;font-weight:900}
.date-badge small{font-size:12px;font-weight:700;text-transform:uppercase;margin-top:2px}
.wd{font-family:Archivo,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:900;font-size:16px;text-transform:uppercase;background:var(--gold);color:var(--navy)}
.match-body{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.match-t{display:flex;gap:6px}
.score{font-family:Archivo,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:900;font-size:19px;padding:6px 10px;border-radius:10px;background:var(--bg)}
.score.ok{background:var(--ok-soft);color:var(--ok)}.score.bad{background:var(--bad-soft);color:var(--bad)}
.table-card{padding:6px 4px;overflow-x:auto}
.standings{width:100%;border-collapse:collapse;font-size:14px}
.standings th{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:8px 6px;text-align:center}
.standings td{padding:10px 6px;text-align:center;border-top:1px solid var(--line)}
.standings .l{text-align:left}
.standings tr.us td{background:var(--gold-soft);font-weight:700}
.standings tr.us td:first-child{border-radius:10px 0 0 10px;box-shadow:inset 4px 0 0 var(--gold)}
.standings tr.us td:last-child{border-radius:0 10px 10px 0}
.st-edit{display:flex;flex-direction:column;gap:6px}
.st-h,.st-r{display:grid;grid-template-columns:22px 1fr repeat(5,40px);gap:4px;align-items:center}
.st-h span{font-size:11px;color:var(--muted);text-align:center}
.st-r input{padding:8px 4px;font-size:14px;text-align:center}
.st-r input[name$="[club]"]{text-align:left;padding-left:8px}

/* formularios */
.form{display:flex;flex-direction:column;gap:12px}
label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:13px;color:#3a3e57}
input,select,textarea{font:inherit;font-size:16px;border:1.5px solid var(--line);border-radius:12px;padding:11px 12px;background:#fff;color:var(--ink);width:100%;font-weight:400}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-soft)}
input[type=radio],input[type=checkbox]{width:20px;height:20px;accent-color:var(--navy);flex:none}
label.check,.radio-row label{flex-direction:row;align-items:center;gap:8px;font-weight:500;font-size:15px}
.radio-row{display:flex;gap:18px;flex-wrap:wrap}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-card summary{cursor:pointer;font-weight:700;display:flex;gap:8px;align-items:center;color:var(--navy);list-style:none}
.form-card summary::-webkit-details-marker{display:none}
.form-card[open] summary{margin-bottom:14px}
.form-card>form+form{margin-top:8px}
label.file{flex-direction:row;align-items:center;gap:10px;border:1.5px dashed #c6cbe0;border-radius:12px;padding:14px;color:var(--navy);position:relative}
label.file input{position:absolute;inset:0;opacity:0}
label.file.has span{color:var(--ok)}

.btn{font:inherit;font-weight:700;font-size:15px;border:0;border-radius:12px;padding:12px 16px;background:var(--navy-soft);color:var(--navy);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-align:center}
.btn.primary{background:var(--navy);color:#fff}
.btn.primary:active{background:var(--navy-2)}
.btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.btn.danger,.link.danger{color:var(--bad)}
.btn.block{width:100%}
.btn.sm{padding:8px 12px;font-size:13px;border-radius:10px}
.btn.round{width:46px;height:46px;border-radius:50%;padding:0;flex:none}
.link{background:none;border:0;padding:4px 6px;font:inherit;font-size:13px;font-weight:600;color:var(--navy);cursor:pointer}
form.inline{display:inline}

/* auth */
.auth{max-width:400px;margin:0 auto;padding-top:10px}
.auth-logo{width:100%;max-width:300px;display:block;margin:10px auto 18px}
.auth h1{text-align:center;margin-bottom:4px}
.auth>p.muted{text-align:center;margin:0 0 18px}

/* bote */
.bank{background:linear-gradient(140deg,var(--navy),#1d34c4);color:#fff;text-align:center;padding:22px 16px 18px;position:relative;overflow:hidden}
.bank::after{content:"";position:absolute;left:-30px;bottom:-60px;width:180px;height:120px;border-radius:50%;background:rgba(255,204,0,.14)}
.bank>small{opacity:.8;font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:12px}
.bank-amount{font-family:Archivo,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:900;font-size:42px;line-height:1.1;margin:4px 0 14px;color:var(--gold)}
.bank-amount.neg{color:#ffb3ad}
.bank-row{display:flex;gap:10px;position:relative;z-index:1}
.bank-row div{flex:1;background:rgba(255,255,255,.1);border-radius:12px;padding:8px;display:flex;flex-direction:column}
.bank-row small{opacity:.75;font-size:12px}.bank-row b{font-size:16px}
.bank-foot{display:block;margin-top:10px;opacity:.7;font-size:12px}
.bizum{display:flex;align-items:center;gap:12px;justify-content:space-between;border:1.5px solid #f5dd73;background:var(--gold-soft)}
.bizum div{display:flex;flex-direction:column}.bizum small{color:#6b5300}
.pot-h{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.pot-h>div{display:flex;flex-direction:column}
.pot-sum{text-align:right}.pot-sum b{font-family:Archivo,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:18px}
.bar{height:8px;background:var(--bg);border-radius:99px;margin:12px 0;display:flex;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok)}
.bar i.soft{background:#f2c94c}
.status{display:flex;gap:8px;align-items:center;border-radius:12px;padding:10px 12px;font-size:14px;font-weight:600}
.status span{flex:1}
.status.ok{background:var(--ok-soft);color:var(--ok)}
.status.wait{background:var(--warn-soft);color:var(--warn)}
.pot-list{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.pot-list summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--navy);margin-bottom:6px}
.pot-list>form:first-of-type{margin-bottom:6px}
.fam-row{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.fam-row span:first-child{flex:1}
.list{padding:4px 14px}
.exp{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.exp:last-child{border:0}
.thumb{width:48px;height:48px;border-radius:10px;background:var(--navy-soft);color:var(--navy);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.none{background:var(--bg);color:#b3b7c9}
.exp-b{flex:1;display:flex;flex-direction:column;min-width:0}
.exp-b small{font-size:12px}
.exp-a{color:var(--bad);font-variant-numeric:tabular-nums;white-space:nowrap}

/* turnos */
.shift.mine{box-shadow:inset 0 0 0 2px var(--gold),var(--shadow)}
.slots{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.slot{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:999px;background:var(--navy-soft);color:var(--navy);font-weight:600;font-size:13px}
.slot.me{background:var(--gold);color:var(--navy)}
.slot.asking{background:var(--warn-soft);color:var(--warn)}
.slot.empty{background:transparent;border:1.5px dashed #c6cbe0;color:var(--muted);font-weight:500}
.slot .x{border:0;background:none;color:inherit;font-size:16px;line-height:1;padding:0 0 0 4px;cursor:pointer;opacity:.6}
.shift-actions{display:flex;flex-direction:column;gap:6px}
.ask summary{list-style:none;cursor:pointer}
.ask summary::-webkit-details-marker{display:none}
.ask[open]{display:flex;flex-direction:column;gap:8px}
.admin-add{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.admin-add select{padding:8px;font-size:14px}
.swap{border-left:4px solid var(--warn)}
.swap p{margin:0 0 6px}
.quote{color:var(--muted);font-style:italic}
.swap-actions{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.swap-trade{display:flex;flex-direction:column;gap:6px;background:var(--bg);padding:10px;border-radius:12px}
.swap-trade select{font-size:14px;padding:8px}

/* chat */
.chat{display:flex;flex-direction:column;gap:8px;padding-bottom:70px}
.bubble{max-width:84%;background:#fff;border-radius:16px 16px 16px 4px;padding:9px 12px;box-shadow:var(--shadow);align-self:flex-start}
.bubble.me{align-self:flex-end;background:var(--navy);color:#fff;border-radius:16px 16px 4px 16px}
.bubble.me .muted,.bubble.me .link{color:rgba(255,255,255,.7)}
.bubble b{font-size:13px;color:var(--navy)}
.bubble p{margin:2px 0}
.bubble>small{font-size:11px}
.composer{position:fixed;left:0;right:0;bottom:calc(62px + var(--safe-b));z-index:15;display:flex;gap:8px;padding:8px 12px;background:var(--bg);max-width:560px;margin:0 auto}
.composer textarea{resize:none;border-radius:22px;padding:11px 16px;max-height:120px}

/* familias */
.fam{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.fam:last-child{border:0}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--navy);color:var(--gold);font-family:Archivo,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:900;display:flex;align-items:center;justify-content:center;flex:none;font-size:15px}
.fam-b{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.fam-b .pill{margin-right:4px}
.fam-menu{position:relative}
.fam-menu summary{list-style:none}
.fam-menu summary::-webkit-details-marker{display:none}
.fam-pop{position:absolute;right:0;top:38px;z-index:5;width:250px;background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:12px;display:flex;flex-direction:column;gap:8px}
.fam-pop .form{gap:6px}
.invite{text-align:center}
.invite small{color:var(--muted);font-weight:600}
.invite .code{font-family:Archivo,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:900;font-size:34px;letter-spacing:.18em;color:var(--navy);margin:4px 0 12px}
.invite-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:6px}
.steps ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}

@media (min-width:600px){ .tabs{max-width:560px;margin:0 auto;border-radius:18px 18px 0 0;border:1px solid var(--line)} }