/* La Escalera — estilo aprobado en la maqueta v1 (13/11/2026): editorial, fondo blanco,
   petróleo + ámbar, verde sube / rojo baja. Sin emojis, brillos ni tarjetas. */
:root{
  --marca:#0b3d4a; --acento:#e0a526;
  --tinta:#15191c; --tinta-2:#4a5358; --gris:#8a9399; --linea:#e4e7e9; --fondo:#fff; --suave:#f4f6f7;
  --sube:#1f7a4d; --baja:#b3261e;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--fondo);color:var(--tinta);font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:15px;line-height:1.5;padding-bottom:calc(64px + env(safe-area-inset-bottom))}
a{color:inherit}
.num{font-variant-numeric:tabular-nums}

/* cabecera */
.mast{background:var(--marca);color:#fff;padding:calc(10px + env(safe-area-inset-top)) 16px 12px}
.mast-in{max-width:620px;margin:0 auto;display:flex;align-items:center;gap:10px}
.mast a{text-decoration:none;display:flex;align-items:center;gap:10px}
.mast .n{font-family:"IBM Plex Sans Condensed";font-weight:700;font-size:17px;letter-spacing:.04em;text-transform:uppercase}
.mast .s{font-size:11.5px;color:#b9cfd5}
.mast .der{margin-left:auto;text-align:right;font-size:11px;color:#b9cfd5;line-height:1.3}
.mast .der b{display:block;color:#fff;font-family:"IBM Plex Sans Condensed";font-size:15px}
.mast .der a{color:#fff;font-size:12px;border:1px solid #5d8590;padding:3px 8px;border-radius:4px}

main{max-width:620px;margin:0 auto;padding:18px 16px 28px}
.eti{font-family:"IBM Plex Sans Condensed";font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
h1,h2.t{font-family:"IBM Plex Sans Condensed";font-size:24px;font-weight:700;line-height:1.15;margin-top:3px}
h3{font-family:"IBM Plex Sans Condensed";font-size:17px;font-weight:700;margin:18px 0 6px}
.sub{color:var(--tinta-2);font-size:13.5px;margin-top:2px}
.regla{height:1px;background:var(--linea);margin:14px 0}
.regla.gruesa{height:2px;background:var(--tinta);margin-top:22px}
p.nota,.nota{font-size:12.5px;color:var(--tinta-2);margin-top:6px}

/* avisos */
.flash{max-width:620px;margin:12px auto 0;padding:9px 12px;font-size:14px;border-left:3px solid var(--sube);background:#eef6f1}
.flash.error{border-color:var(--baja);background:#fbeeed}

/* jugadores */
.av{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:12px;flex:none;object-fit:cover}
.av.g{width:72px;height:72px;font-size:22px}
.jug{display:flex;align-items:center;gap:10px;padding:7px 0}
.jug .nm{font-weight:500}
.jug .rk{margin-left:auto;color:var(--gris);font-size:12.5px}
.tu{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--marca);border:1px solid var(--marca);padding:0 5px;margin-left:6px;vertical-align:2px}
.sub-pl{color:var(--gris);font-style:italic}

/* sets */
.set{display:grid;grid-template-columns:18px 1fr 26px 1fr;align-items:center;gap:6px;padding:8px 0;border-top:1px solid var(--linea);font-size:14px}
.set:first-of-type{border-top:0}
.set .o{color:var(--gris);font-size:12px}
.set .vs{color:var(--gris);font-size:11.5px;text-align:center}
.set .der{text-align:right}

/* botones y formularios */
.btn,button.btn{display:block;width:100%;text-align:center;background:var(--marca);color:#fff;font:600 15px "IBM Plex Sans",sans-serif;padding:12px;border:0;border-radius:6px;margin-top:12px;text-decoration:none;cursor:pointer}
.btn2,button.btn2{display:block;width:100%;text-align:center;background:#fff;border:1px solid var(--tinta);color:var(--tinta);font:500 14px "IBM Plex Sans",sans-serif;padding:10px;border-radius:6px;margin-top:8px;text-decoration:none;cursor:pointer}
.btn-p{display:inline-block;background:var(--marca);color:#fff;border:0;border-radius:4px;padding:6px 10px;font:600 13px "IBM Plex Sans",sans-serif;cursor:pointer;text-decoration:none}
.btn-p.claro{background:#fff;color:var(--tinta);border:1px solid var(--tinta)}
.btn-p.rojo{background:var(--baja)}
form.linea{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
label{display:block;font-size:13px;color:var(--tinta-2);margin-top:12px}
input[type=text],input[type=password],input[type=date],input[type=time],input[type=number],select{font:15px "IBM Plex Sans",sans-serif;padding:9px 10px;border:1px solid #c9cfd3;border-radius:6px;width:100%;background:#fff;color:var(--tinta)}
form.linea input,form.linea select{width:auto;flex:1;min-width:110px;padding:7px 8px;font-size:14px}
input[type=number]{width:44px;padding:8px 2px;text-align:center}
details{margin-top:10px}
summary{cursor:pointer;font-size:14px;color:var(--marca);font-weight:500}

.plazo{display:flex;gap:10px;align-items:baseline;margin-top:14px;padding-left:10px;border-left:3px solid var(--acento);font-size:14px}
.plazo b{font-weight:600}
.kp{display:grid;grid-template-columns:repeat(3,1fr);margin-top:6px}
.kp div{padding:6px 0}
.kp div+div{border-left:1px solid var(--linea);padding-left:12px}
.kp dd{font-family:"IBM Plex Sans Condensed";font-size:24px;font-weight:700}
.kp dt{font-size:11.5px;color:var(--gris)}
.up{color:var(--sube)} .down{color:var(--baja)}

/* semana y tablas */
.seg{display:flex;border:1px solid var(--linea);border-radius:6px;overflow:hidden;margin-top:10px}
.seg a{flex:1;text-align:center;padding:7px 0;font-size:13px;color:var(--tinta-2);text-decoration:none}
.seg a.on{background:var(--tinta);color:#fff}
.grupo{margin-top:18px}
.gh{display:flex;align-items:baseline;gap:8px;border-bottom:2px solid var(--tinta);padding-bottom:4px;flex-wrap:wrap}
.gl{font-family:"IBM Plex Sans Condensed";font-size:19px;font-weight:700}
.gm{font-size:12px;color:var(--gris)}
.est{margin-left:auto;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.est.aprobado{color:var(--sube)} .est.anotado{color:var(--acento)} .est.programado{color:var(--gris)}
table{width:100%;border-collapse:collapse}
td,th{padding:7px 0;border-bottom:1px solid var(--linea);font-size:14px;text-align:left;vertical-align:middle}
th{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
td.r,th.r{text-align:right}
td.p{width:24px;color:var(--gris)}
.fl{display:inline-block;width:14px;text-align:center}
.pen{font-size:11px;color:var(--baja);margin-left:6px}
.corte td{border-bottom:0;padding:10px 0 4px}
.corte span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--marca);border-top:2px solid var(--marca);display:block;padding-top:4px;font-weight:600}
tr.yo td{background:#f2f7f8}
.spark{display:inline-block;vertical-align:middle}
.sets-res{font-size:12.5px;color:var(--tinta-2);margin-top:6px}
.sets-res div{display:flex;justify-content:space-between;padding:2px 0}

/* reglamento dentro de la app */
.reglamento nav.indice{margin:16px 0 4px;border-top:2px solid var(--tinta);padding-top:10px;columns:2;column-gap:20px;font-size:13.5px}
.reglamento nav.indice a{display:block;text-decoration:none;padding:3px 0;break-inside:avoid}
.reglamento nav.indice a span{color:var(--gris);display:inline-block;width:24px}
.reglamento section{margin-top:28px}
.reglamento h2{display:flex;align-items:baseline;gap:10px;font-family:"IBM Plex Sans Condensed";font-size:20px;font-weight:700;border-bottom:2px solid var(--tinta);padding-bottom:5px;margin-bottom:10px}
.reglamento h2 .sn{font-size:13px;color:var(--marca)}
.reglamento h1{font-size:26px}
.reglamento .deck{color:var(--tinta-2);margin-top:8px}
.reglamento ul{padding-left:18px}
.reglamento li{margin-top:5px}
.reglamento li::marker{color:var(--gris)}
.reglamento p+p,.reglamento p+ul,.reglamento ul+p,.reglamento p+table,.reglamento .ej{margin-top:9px}
.reglamento .ej{border-left:3px solid var(--acento);padding:4px 0 4px 12px;color:var(--tinta-2);font-size:14px}
.reglamento .baja{color:var(--baja);font-weight:600}
.reglamento .sube{color:var(--sube);font-weight:600}
.reglamento strong{font-weight:600}

/* barra inferior */
.tabs{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--linea);padding:6px 4px calc(8px + env(safe-area-inset-bottom));display:flex;justify-content:center;z-index:5}
.tabs-in{display:flex;width:100%;max-width:620px}
.tabs a{flex:1;text-align:center;font-size:12px;color:var(--gris);padding:8px 0 2px;position:relative;text-decoration:none}
.tabs a.on{color:var(--marca);font-weight:600}
.tabs a.on::before{content:"";position:absolute;top:-7px;left:25%;right:25%;height:2px;background:var(--marca)}
@media (max-width:420px){.reglamento nav.indice{columns:1}}
.wa{display:inline-block;margin-left:8px;font-size:12px;font-weight:600;color:#fff;background:#1f7a4d;border-radius:4px;padding:3px 8px;text-decoration:none}