/* Estilos generales — La Porra del Mundial 2026 */
:root{
  --bg:#0a1f3d;
  --bg-2:#102b54;
  --card:#13325f;
  --card-hi:#19407a;
  --accent:#ffc200;        /* dorado FIFA */
  --accent-2:#ff5b3c;      /* rojo cálido */
  --green:#3ed598;
  --text:#f4f6fb;
  --muted:#a8b7d1;
  --border:#1d4486;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:14px;
  --max:980px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(160deg,var(--bg),var(--bg-2));color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.45;min-height:100vh;-webkit-text-size-adjust:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

header.top{
  background:rgba(0,0,0,.25);
  border-bottom:1px solid var(--border);
  padding:14px 20px;
  position:sticky;top:0;z-index:10;backdrop-filter:blur(6px);
}
header.top .row{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
header.top h1{margin:0;font-size:1.05rem;letter-spacing:.5px;font-weight:700;display:flex;align-items:center;gap:8px}
header.top h1 .ball{font-size:1.25rem}
header.top nav{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
header.top nav a{
  color:var(--text);
  padding:8px 12px;border-radius:8px;font-size:.92rem;font-weight:500;
}
header.top nav a.active{background:var(--card-hi);color:var(--accent)}
header.top nav a:hover{background:var(--card)}
header.top .user{font-size:.9rem;color:var(--muted)}

main{max-width:var(--max);margin:0 auto;padding:22px 20px 80px}
h2{margin:0 0 6px;font-size:1.4rem}
h3{margin:18px 0 8px;font-size:1.05rem;color:var(--accent)}
p.lead{color:var(--muted);margin-top:0;margin-bottom:20px}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:18px}
.card h2{font-size:1.15rem;margin-bottom:14px}

button,.btn{
  appearance:none;border:0;background:var(--accent);color:#1a1a1a;
  font-weight:700;padding:10px 16px;border-radius:10px;cursor:pointer;font-size:.95rem;
  transition:transform .05s ease, background .15s ease;
}
button:hover,.btn:hover{background:#ffd23a}
button:active,.btn:active{transform:scale(.98)}
button.ghost{background:transparent;border:1px solid var(--border);color:var(--text);font-weight:500}
button.ghost:hover{background:var(--card-hi)}
button.danger{background:var(--accent-2);color:#fff}
button:disabled{opacity:.5;cursor:not-allowed}

input,select,textarea{
  background:var(--bg-2);color:var(--text);border:1px solid var(--border);
  border-radius:8px;padding:8px 10px;font-size:.95rem;font-family:inherit;width:100%;
}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}
label{font-size:.85rem;color:var(--muted);display:block;margin-bottom:4px}

.field{margin-bottom:12px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* Login */
.auth-wrap{max-width:380px;margin:60px auto;padding:0 16px}
.auth-wrap .card{padding:26px}
.auth-tabs{display:flex;gap:6px;margin-bottom:16px}
.auth-tabs button{flex:1;background:var(--bg-2);color:var(--muted);font-weight:600;padding:10px;border-radius:10px}
.auth-tabs button.active{background:var(--accent);color:#1a1a1a}
.auth-wrap .hero{text-align:center;margin-bottom:18px}
.auth-wrap .hero .ball{font-size:2.6rem}
.auth-wrap .hero h1{margin:6px 0 0;font-size:1.4rem}
.auth-wrap .hero p{color:var(--muted);margin:4px 0 0;font-size:.9rem}

/* Partidos */
.day-block{margin-top:18px}
.day-block .day-title{display:flex;justify-content:space-between;align-items:baseline;color:var(--muted);font-size:.9rem;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:6px;padding:0 6px}
.match{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;margin-bottom:10px;display:grid;
  grid-template-columns:1fr auto auto auto 1fr;gap:8px;align-items:center;
}
.match .team{display:flex;gap:8px;align-items:center;font-weight:600;min-width:0}
.match .team.right{justify-content:flex-end}
.match .team span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flag{width:27px;height:20px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.2);vertical-align:middle;flex:0 0 auto}
.flag-empty{display:inline-block;background:var(--bg-2)}
.match .score{width:54px}
.match .score input{text-align:center;font-weight:700;font-size:1.05rem;padding:6px 4px}
.match .vs{color:var(--muted);font-weight:700;padding:0 6px}
.match .meta{font-size:.75rem;color:var(--muted);grid-column:1 / -1;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:6px;border-top:1px dashed var(--border);padding-top:6px}
.match .meta .tag{background:var(--bg-2);border:1px solid var(--border);padding:2px 7px;border-radius:999px;font-size:.7rem}
.match .meta .points{color:var(--green);font-weight:700}
.match.locked .score input{background:#2a3656;color:#90a1c4}
.match.locked{opacity:.85}
.match.result-row{grid-template-columns:1fr auto auto auto 1fr}
.match .real{color:var(--accent);font-weight:700;font-size:.95rem}

/* Ranking */
.ranking{width:100%;border-collapse:collapse}
.ranking th,.ranking td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left}
.ranking th{color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:1px}
.ranking td.pts{font-weight:700;text-align:right}
.ranking tr:first-child td:first-child::before{content:"🥇 "}
.ranking tr:nth-child(2) td:first-child::before{content:"🥈 "}
.ranking tr:nth-child(3) td:first-child::before{content:"🥉 "}

/* Bonus */
.bonus-cat{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.bonus-cat:last-child{border-bottom:0}
.bonus-cat label.title{color:var(--text);font-weight:700;font-size:1rem;margin-bottom:6px}
.bonus-cat .hint{color:var(--muted);font-size:.82rem;margin-bottom:6px}
.bonus-cat .resultado{color:var(--accent);font-weight:700;font-size:.9rem;margin-top:6px}

.banner{padding:10px 14px;background:var(--bg-2);border:1px solid var(--border);border-radius:10px;color:var(--muted);font-size:.9rem;margin-bottom:14px}
.banner.warn{border-color:var(--accent-2);color:#ffe0d8}
.banner.ok{border-color:var(--green);color:#d8ffec}

.empty{color:var(--muted);text-align:center;padding:30px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#000;color:#fff;padding:10px 16px;border-radius:8px;z-index:1000;font-size:.9rem;opacity:0;transition:opacity .3s}
.toast.show{opacity:.95}

/* ============================================================
   RESPONSIVE — móvil
   ============================================================ */

/* Tablet pequeña y móvil grande (<=760px) */
@media (max-width:760px){
  main{padding:16px 12px 80px}
  header.top{padding:10px 12px}
  header.top .row{gap:8px}
  header.top h1{font-size:.95rem;flex:1 1 auto}
  header.top nav{order:3;flex-basis:100%;margin-left:0;justify-content:flex-start;gap:4px}
  header.top nav a{padding:8px 10px;font-size:.85rem;flex:1 1 auto;text-align:center;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  header.top .user{order:2;font-size:.8rem;margin-left:auto}
  #logout-btn{order:2}
  .card{padding:14px}

  /* Filtros de partidos */
  .filter-btn{flex:1 1 calc(50% - 6px);min-height:42px;font-size:.85rem;padding:8px 6px}

  /* Match en móvil: 5 columnas igual que desktop, pero compacto
     [equipo local] [goles] [-] [goles] [equipo visitante]
     y meta abajo ocupando todas */
  .match{
    grid-template-columns:minmax(0,1fr) auto auto auto minmax(0,1fr);
    gap:4px;
    padding:12px 8px;
    align-items:center;
  }
  .match .team{font-size:.95rem;gap:6px;min-width:0}
  .match .team.left{justify-content:flex-end}
  .match .team.right{justify-content:flex-start}
  .match .team span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem}

  /* Inputs de goles MÁS grandes y táctiles */
  .match .score{width:auto}
  .match .score input{
    width:50px;height:50px;
    font-size:1.3rem;font-weight:700;
    padding:0;border-radius:10px;text-align:center;
    -moz-appearance:textfield;
  }
  .match .score input::-webkit-outer-spin-button,
  .match .score input::-webkit-inner-spin-button{
    -webkit-appearance:none;margin:0;
  }
  .match .vs{padding:0 2px;font-size:.95rem}

  .match .meta{font-size:.7rem;gap:6px}
  .match .meta button{padding:8px 14px;font-size:.85rem;min-height:38px}

  /* Banderas un poco más pequeñas */
  .flag{width:22px;height:16px;flex-shrink:0}

  /* Inputs en general: 16px para evitar zoom iOS */
  input,select,textarea{font-size:16px;padding:10px 12px;min-height:44px}

  /* Auth y forms grandes */
  .auth-wrap{margin:24px auto;padding:0 12px}
  .auth-wrap .card{padding:20px}
  button{min-height:44px}

  /* Ranking */
  .ranking{font-size:.9rem}
  .ranking th,.ranking td{padding:8px 8px}

  /* Admin: eliminatoria inputs de texto a ancho completo */
  #admin-elim .match{grid-template-columns:1fr;grid-template-areas:"local" "sc" "visitante" "meta"}
  #admin-elim .match .team.left,#admin-elim .match .team.right{justify-content:flex-start}
  #admin-elim .match .score{width:100%}
  #admin-elim .match .score input{width:100%;height:auto;font-size:1rem;text-align:left;padding:10px 12px}
  #admin-elim .match .vs{display:none}
}

/* Móvil estrecho (<=380px): apretamos números y tipografía */
@media (max-width:380px){
  main{padding:14px 10px 80px}
  .match{padding:10px 8px}
  .match .team.left,.match .team.right{font-size:.9rem}
  .match .score input{width:48px;height:48px;font-size:1.2rem}
  .flag{width:22px;height:16px}
  header.top h1{font-size:.9rem}
  header.top h1 .ball{font-size:1.1rem}
  .filter-btn{font-size:.8rem}
}