/* Identidad tomada del escudo: verde del campo, oro y rojo de las barras, azul de la cinta */
:root {
  --verde: #1a7a3a;
  --verde-oscuro: #0f4a24;
  --verde-noche: #0a331a;
  --oro: #f4c31c;
  --oro-suave: #fdf3cc;
  --rojo: #d3222b;
  --azul: #1717d0;
  --tinta: #17211b;
  --tinta-suave: #5d6a62;
  --fondo: #f6f4ec;
  --papel: #ffffff;
  --linea: #e3e1d6;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(15, 40, 22, .06), 0 6px 20px rgba(15, 40, 22, .06);
  --barras: repeating-linear-gradient(90deg, var(--oro) 0 28px, var(--rojo) 28px 56px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--tinta);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--verde-oscuro); text-underline-offset: 2px; }
h1 { font-size: 1.6rem; line-height: 1.15; letter-spacing: -.02em; font-weight: 800; margin: 0 0 1rem; }
h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-suave); margin: 2rem 0 .7rem; }
code { background: var(--oro-suave); padding: .15em .45em; border-radius: 6px; font-size: 1.05em; font-weight: 600; }
small { display: block; color: var(--tinta-suave); font-size: .85rem; font-weight: 400; }
ul { padding-left: 1.2rem; }
li { margin: .35rem 0; }

/* ---------- Cabecera ---------- */

.cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: linear-gradient(120deg, var(--verde-noche), var(--verde-oscuro) 60%, var(--verde));
  color: #fff; padding: .55rem 1rem;
}
.marca { display: flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; }
.marca img { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.marca strong { display: block; line-height: 1.15; font-size: 1.05rem; letter-spacing: -.01em; }
.marca small { color: #cfe6d4; font-size: .78rem; }
.sesion { display: flex; align-items: center; gap: .5rem; font-size: .88rem; }
.sesion a, .sesion .enlace {
  color: #fff; text-decoration: none; padding: .35rem .7rem; border-radius: 999px;
  background: rgba(255, 255, 255, .12);
}
.sesion a:hover, .sesion .enlace:hover { background: rgba(255, 255, 255, .24); }
.sesion a.privada { background: var(--oro); color: var(--verde-noche); font-weight: 700; padding: .45rem 1rem; }
.sesion a.privada:hover { background: #ffd84a; }
.franja { height: 6px; background: var(--barras); }

.menu {
  display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none;
  background: var(--papel); border-bottom: 1px solid var(--linea); padding: .5rem .75rem;
  position: sticky; top: 0; z-index: 5;
}
.menu::-webkit-scrollbar { display: none; }
.menu a {
  padding: .45rem .95rem; border-radius: 999px; color: var(--tinta-suave);
  text-decoration: none; white-space: nowrap; font-weight: 600; font-size: .95rem;
}
.menu a:hover { background: var(--fondo); color: var(--tinta); }
.menu a.actual { background: var(--verde-oscuro); color: #fff; }

main { max-width: 54rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }

.titulo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.titulo h1 { margin: 0; }

/* ---------- Marcador ---------- */

.marcador {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1rem 1.5rem; align-items: end;
  background: linear-gradient(135deg, var(--verde-noche), var(--verde-oscuro) 55%, var(--verde));
  color: #fff; border-radius: 20px; padding: 1.3rem 1.4rem 1.2rem 1.7rem; box-shadow: var(--sombra);
  position: relative; overflow: hidden;
}
.marcador::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 8px; background: repeating-linear-gradient(180deg, var(--oro) 0 14px, var(--rojo) 14px 28px); }
.dato span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #bfe0c7; }
.dato strong { display: block; font-size: 1.45rem; line-height: 1.15; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.dato.principal strong { font-size: 2.5rem; color: var(--oro); }
.dato.al-dia strong { color: #fff; }
.progreso { grid-column: 1 / -1; }
.progreso small { color: #cfe6d4; margin-top: .4rem; }
progress { display: block; width: 100%; height: 10px; border: 0; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .18); appearance: none; -webkit-appearance: none; }
progress::-webkit-progress-bar { background: rgba(255, 255, 255, .18); }
progress::-webkit-progress-value { background: var(--oro); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--oro); border-radius: 999px; }

/* ---------- Plantilla ---------- */

.plantilla { list-style: none; margin: 0; padding: 0; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.plantilla li { margin: 0; border-bottom: 1px solid var(--linea); }
.plantilla li:last-child { border-bottom: 0; }
.plantilla a { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; color: var(--tinta); text-decoration: none; }
.plantilla a:hover { background: #fbfaf5; }
.quien { flex: 1; min-width: 0; }
.quien b { display: block; font-weight: 650; line-height: 1.25; }
.avatar {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--oro-suave); color: var(--verde-oscuro); font-weight: 800; font-size: .85rem; letter-spacing: .02em;
  border: 2px solid var(--oro);
}
.importe { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 1.05rem; }
.importe.al-dia { font-weight: 600; font-size: .85rem; color: var(--verde); }
.baja b, .baja .avatar { opacity: .55; }
.debe { color: var(--rojo); }

/* ---------- Tarjetas y formularios ---------- */

.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.1rem 1.2rem; margin: 1rem 0; box-shadow: var(--sombra); }
.tarjeta > h2:first-child { margin-top: 0; }
.tarjeta > h1:first-child { margin-top: 0; }
.tarjeta p { margin: .4rem 0 .8rem; }
.estrecha { max-width: 30rem; }
summary { cursor: pointer; font-weight: 700; }
details[open] > summary { margin-bottom: 1rem; }

.formulario { display: grid; gap: .9rem; }
.formulario.en-linea { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); align-items: end; }
label { display: grid; gap: .3rem; font-size: .88rem; font-weight: 650; }
label.casilla { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
input, select {
  font: inherit; font-weight: 400; width: 100%; min-height: 46px; padding: .55rem .75rem;
  border: 1.5px solid #cfd3c8; border-radius: 10px; background: #fff; color: var(--tinta);
}
input:hover, select:hover { border-color: #aab3a6; }
input:focus, select:focus { outline: 0; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(26, 122, 58, .2); }
input[type="checkbox"] { width: 1.2rem; min-height: 1.2rem; accent-color: var(--verde); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .55rem 1.25rem;
  border: 0; border-radius: 999px; background: var(--verde); color: #fff; font: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer; box-shadow: 0 2px 0 var(--verde-noche);
}
.boton:hover { background: var(--verde-oscuro); }
.boton:active { transform: translateY(1px); box-shadow: none; }
.boton.secundario { background: #fff; color: var(--verde-oscuro); box-shadow: inset 0 0 0 1.5px var(--verde); }
.boton.secundario:hover { background: #eef6ef; }
.boton.peligro { background: var(--rojo); box-shadow: 0 2px 0 #8f141b; }
.enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--verde-oscuro); text-decoration: underline; cursor: pointer; }
.botones { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.filtros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; align-items: end;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem; margin-bottom: 1rem;
}

.aviso { padding: .75rem 1rem; border-radius: 12px; margin: 0 0 1rem; border: 1px solid; font-weight: 500; }
.aviso.ok { background: #e8f5ea; border-color: #b9dfc0; color: #0f4a24; }
.aviso.mal { background: #fdecec; border-color: #f3bcbf; color: #8f141b; }
.credenciales p { margin: 0 0 .6rem; }
.nota { color: var(--tinta-suave); font-size: .9rem; }
.vacio { color: var(--tinta-suave); padding: 1.5rem 1rem; text-align: center; background: var(--papel); border: 1px dashed #cfd3c8; border-radius: var(--radio); }

/* ---------- Tablas ---------- */

.tabla { overflow-x: auto; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); margin-top: 1rem; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .7rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-suave); background: #fbfaf5; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fdfcf8; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acciones { text-align: right; white-space: nowrap; }
tr.anulada td { color: var(--tinta-suave); }
tr.anulada td:not(.acciones) { text-decoration: line-through; }
tr.anulada .estado, tr.anulada small { text-decoration: none; display: inline-block; }

.estado { display: inline-block; padding: .15rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.est-pendiente { background: #fdecec; color: #a3161e; }
.est-parcial { background: var(--oro-suave); color: #6b5200; }
.est-pagada { background: #e3f3e6; color: var(--verde-oscuro); }
.est-anulada { background: #eceae2; color: #4d564f; }

.datos { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin: 0 0 1rem; }
.datos dt { color: var(--tinta-suave); }
.datos dd { margin: 0; font-weight: 500; }

/* ---------- Pantalla de entrada ---------- */

.portada {
  background:
    radial-gradient(60rem 30rem at 50% -10%, rgba(244, 195, 28, .22), transparent 60%),
    linear-gradient(160deg, var(--verde-noche), var(--verde-oscuro) 50%, var(--verde));
  background-attachment: fixed;
}
.portada .cabecera { display: none; }
.portada .franja { height: 10px; }
.portada main { max-width: 26rem; padding-top: 5.5rem; }
.entrada {
  background: var(--papel); border-radius: 24px; padding: 0 1.5rem 1.5rem; text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}
.entrada .escudo-grande { display: block; margin: 0 auto -2.6rem; position: relative; top: -3.6rem; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .28)); }
.entrada h1 { margin-bottom: .2rem; }
.entrada .club { color: var(--tinta-suave); margin: 0 0 1.3rem; font-size: .92rem; }
.entrada .formulario { text-align: left; }
.entrada .boton { width: 100%; }
.entrada .nota { margin: 1.1rem 0 0; }
.volver { text-align: center; margin-top: 1.2rem; }
.volver a { color: #fff; }
.portada .aviso { box-shadow: 0 8px 20px rgba(0, 0, 0, .2); }

/* ---------- Táctil y móvil ---------- */

/* Con menos de 16 px el iPhone amplía la página al tocar un campo */
input, select { font-size: 1rem; }

details.tarjeta > summary { margin: -1.1rem -1.2rem; padding: 1.1rem 1.2rem; border-radius: var(--radio); }
details.tarjeta[open] > summary { margin-bottom: 0; }
.caja-filtros .filtros { background: none; border: 0; padding: 0; margin: 0; }
.acciones a, .acciones .enlace { display: inline-block; padding: .35rem 0 .35rem .6rem; }
.atajo { display: none; }

@media (max-width: 640px) {
  h1 { font-size: 1.35rem; }
  main { padding-top: 1.1rem; }
  .con-atajo main { padding-bottom: 6.5rem; }
  .cabecera { padding-top: max(.55rem, env(safe-area-inset-top)); }
  .marca small { display: none; }
  .marca { gap: .5rem; }
  .marca img { width: 38px; height: 38px; }
  .marca strong { white-space: nowrap; font-size: .98rem; }
  .sesion { gap: .35rem; }
  .sesion a, .sesion .enlace { padding: .6rem .7rem; }
  .menu a { padding: .65rem 1rem; }
  .con-atajo .titulo .boton { display: none; } /* en estas pantallas está el botón fijo de abajo */
  .titulo .boton { width: 100%; }
  .solo-pc { display: none; }
  main > p:first-child > a { display: inline-block; padding: .5rem 0; }

  .marcador { grid-template-columns: 1fr 1fr; padding: 1.1rem 1.1rem 1rem 1.5rem; }
  .dato.principal { grid-column: 1 / -1; }
  .dato.principal strong { font-size: 2.3rem; }

  .formulario .boton, .filtros .boton { width: 100%; }
  .botones { gap: .5rem 1rem; }
  .botones a { padding: .6rem 0; }

  /* Botón fijo para apuntar una multa con el pulgar */
  .atajo {
    display: inline-flex; align-items: center; position: fixed; z-index: 10;
    right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom));
    min-height: 52px; padding: 0 1.4rem; border-radius: 999px;
    background: var(--verde); color: #fff; font-weight: 800; text-decoration: none;
    box-shadow: 0 2px 0 var(--verde-noche), 0 10px 24px rgba(10, 51, 26, .35);
  }

  /* Las tablas principales pasan a fichas apiladas */
  .fichas thead { position: absolute; left: -9999px; }
  .fichas tr { display: block; padding: .7rem .9rem; border-bottom: 1px solid var(--linea); }
  .fichas tbody tr:last-child { border-bottom: 0; }
  .fichas td { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem 1rem; padding: .15rem 0; border: 0; text-align: right; white-space: normal; }
  .fichas td[data-t]::before { content: attr(data-t); color: var(--tinta-suave); font-size: .82rem; text-align: left; flex: none; }
  .fichas td small { flex-basis: 100%; text-align: left; }
  .fichas tbody tr:hover td { background: none; }

  /* Ficha compacta de multa: fecha y estado arriba, motivo, jugador, importes; toda la ficha se puede tocar */
  .fichas.multas tr { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; position: relative; padding: .85rem .9rem; }
  .fichas.multas td { display: block; padding: 0; text-align: left; }
  .fichas.multas td[data-t]::before { content: none; }
  .fichas.multas td[data-t="Fecha"] { grid-area: 1 / 1; font-size: .82rem; color: var(--tinta-suave); }
  .fichas.multas td[data-t="Estado"] { grid-area: 1 / 2; text-align: right; }
  .fichas.multas td[data-t="Motivo"] { grid-area: 2 / 1 / 3 / -1; font-weight: 700; line-height: 1.3; padding: .1rem 0; }
  .fichas.multas td[data-t="Motivo"] small { margin-top: .2rem; }
  .fichas.multas td[data-t="Jugador"] { grid-area: 3 / 1 / 4 / -1; }
  .fichas.multas td[data-t="Jugador"] a { position: relative; z-index: 1; display: inline-block; padding: .3rem 0; }
  .fichas.multas td[data-t="Importe"] { grid-area: 4 / 1; font-size: .9rem; color: var(--tinta-suave); }
  .fichas.multas td[data-t="Importe"]::before { content: "Importe "; }
  .fichas.multas td[data-t="Pendiente"] { grid-area: 4 / 2; text-align: right; font-weight: 800; }
  .fichas.multas td[data-t="Pendiente"]::before { content: "Pendiente "; font-weight: 400; font-size: .82rem; color: var(--tinta-suave); }
  .fichas.multas td.acciones { height: 0; font-size: 0; }
  .fichas.multas td.acciones a { padding: 0; }
  .fichas.multas td.acciones a::after { content: ""; position: absolute; inset: 0; }
  .fichas.multas tr:active { background: #fbfaf5; }
}