/*  PODRIDÓMETRO – estilos  (v1.5.2 – 2025‑05‑11) */
/* ---------- variables ---------- */
:root{
  --bg:#f4f6f8; --fg:#0d1f2d; --accent:#2218d6;
  --card:#ffffff; --border:#d0d7de;
}
[data-theme="dark"]{
  --bg:#0d1f2d; --fg:#e5e5e5; --card:#152535; --border:#243647;
}

/* ---------- resets ---------- */
*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,Roboto,Helvetica,Arial,sans-serif}
button,input,select{font:inherit}
a{text-decoration:none}

/* ---------- layout ---------- */
body{background:var(--bg);color:var(--fg);display:flex;flex-direction:column;min-height:100vh}
header,footer{padding:.75rem 1rem;border:1px solid var(--border)}
header{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
header h1{
  font-size:1.25rem;
  font-weight:700;
  margin-right:auto;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  line-height:1;
}
nav{display:flex;flex-wrap:wrap;gap:.5rem}

main{flex:1;padding:1rem;max-width:900px;margin-inline:auto;width:100%}
footer a{color:var(--fg)}
/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:.75rem;padding:1rem;margin-bottom:1.25rem;box-shadow:0 2px 4px rgb(0 0 0/.05)}
.card h2{margin-bottom:.75rem}
.card ol{margin-left:20px}

/* ---------- forms ---------- */
.form-row{display:grid;gap:.75rem;margin-bottom:.75rem}
input[type="text"],input[type="number"]{padding:.55rem .6rem;border:1px solid var(--border);border-radius:.45rem;width:100%}

/* inputs de nombres → grid auto-fill  min 140 px */
#namesArea{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}

/* ---------- buttons ---------- */
button,nav a{
  appearance:none;border:none;background:var(--accent);color:#fff;
  padding:.55rem 1.1rem;border-radius:.6rem;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  transition:filter .15s;
  margin-top:20px;
}
button:hover,nav a:hover{filter:brightness(1.1)}
#darkModeToggle{background:none;border:1px solid var(--accent);color:var(--accent);padding:.45rem .75rem;border-radius:.6rem}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:.94rem}
th,td{border:1px solid var(--border);padding:.45rem .55rem;text-align:center}
th{background:var(--card)}
.success{background:#c9f4d2}.fail{background:#ffe0e0}

/* contenedor para hacer scroll lateral en móvil */
.table-wrap{overflow-x:auto}

/* ----------  MEDIA QUERIES  ---------- */

/* 1) ≤600 px ⇒ botones se apilan y tabla scrolleable */
@media (max-width:600px){
  nav{width:100%;justify-content:flex-start}
  nav button,nav a{flex:1 1 auto}
  table{min-width:600px}          /* evita romper columnas */
}

/* 2) ≤420 px ⇒ botones full width y paddings menores */
@media (max-width:420px){
  nav button,nav a{width:100%}
  header,footer{padding:.6rem}
  .card{padding:.9rem}
  button,nav a{padding:.55rem .8rem}
}
/* --- menú hamburguesa --- */
#menuToggle{
  appearance:none;background:none;border:none;color:var(--accent);
  font-size:1.5rem;line-height:1;padding:.25rem .5rem;border-radius:.4rem;
  display:none;                     /* oculto desktop */
}
@media (max-width:600px){
  #menuToggle{display:block}
  header nav{
    position:fixed;left:50%;                 /* céntralo */
    transform:translateX(-50%);top:calc(3.5rem);      /* debajo del header */
    background:var(--card);border:1px solid var(--border);border-radius:.6rem;
    padding:.75rem;flex-direction:column;gap:.75rem;
    box-shadow:0 6px 16px rgb(0 0 0/.15);display:none;
    max-width: 90%;
    margin: 0px;
  }
  header nav.is-open{display:flex}
}
.table-wrap{overflow-x:auto}

/* ---- vista móvil: tarjetas de jugador ---- */
.cards-wrap{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.player-card{
  border:1px solid var(--border);
  border-radius:.6rem;
  padding:.75rem .9rem;
  background:var(--card);
  box-shadow:0 1px 3px rgb(0 0 0 / .07);
}

.player-card h3{
  margin-bottom:.45rem;
  font-size:1rem;
  font-weight:600;
}

.player-card label{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  margin-bottom:.4rem;
}

.player-card input{
  width:100%;
}

/* ----------- reglas: estilo bonito ----------- */
.card.rules{
  max-width:720px;           /* no se ensancha demasiado en desktop   */
  margin-inline:auto;        /* centrada                              */
  line-height:1.55;
}

.card.rules h2{
  font-size:1.35rem;
  margin-bottom:.9rem;
  text-align:center;
}

.card.rules h3{
  font-size:1.05rem;
  margin:1.1rem 0 .5rem;
  color:var(--accent);
}

.card.rules p{
  margin:.4rem 0;
}

.card.rules ul,
.card.rules ol{
  margin:.4rem 0 .8rem 1.4rem;   /* indenta listas y equilibra espacio */
}

.card.rules li{
  margin:.25rem 0;
}

.card.rules ul li::marker{
  color:var(--accent);           /* viñetas del color principal        */
}

.card.rules ol{
  counter-reset:num;
}

.card.rules ol li{
  counter-increment:num;
}

.card.rules ol li::marker{
  content:counter(num) ". ";
  font-weight:600;
  color:var(--accent);
}

@media (max-width:600px){
  .card.rules{
    padding:1.1rem .9rem;
  }
  .card.rules h2{font-size:1.2rem}
}

.hidden{display:none}


[data-theme="dark"] .success,
[data-theme="dark"] .fail{
  color:#0d1f2d;         /* texto casi negro */
}

:root      { --logo:url('icons/Logo_Pod_N.png'); }
[data-theme="dark"] { --logo:url('icons/Logo_Pod_B.png'); }

header h1::before{
  content:'';
  background:var(--logo) no-repeat center/contain;
  width:32px;height:32px;
  display:inline-block;
  margin-right:.4rem;
  vertical-align:middle;
}

#menuToggle{
  margin:0px;
}

nav button{
  margin-top:0px;
}
nav a{
  margin-top:0px;
}

#brand{cursor:pointer}

/* --- logo grande en la portada --- */
.hero-logo{
  width:100px;           /* tamaño cómodo en móvil */
  max-width:40vw;        /* no sobrepasa el contenedor */
  display:block;
  margin:0 auto 1rem;    /* centrado + espacio inferior */
}
.home{
  display:flex;
  flex-direction: column;
}
.home h2{
  align-self: center;
}

.home p{
  align-self: center;
}

.home nav{
  flex-direction: column;
  align-self: center;
  width: 100%;
}