:root {
  --verde: #1b5e3f;
  --verde-claro: #2e7d5b;
  --arena: #f4f1e8;
  --tinta: #17211c;
  --gris: #6b7671;
  --linea: #dcdfd9;
  --fondo: #ffffff;
  --alerta: #b3261e;
  --ok: #1b7a3f;
  --radio: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background: var(--arena);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

header {
  background: var(--verde);
  color: #fff;
  padding: 0.9rem 1rem;
  position: sticky;
  top: 0;
  z-index: 10;
}
header a { color: #fff; text-decoration: none; }
header .titulo { font-weight: 700; letter-spacing: 0.02em; }
header .sub { font-size: 0.85rem; opacity: 0.85; }

main { max-width: 900px; margin: 0 auto; padding: 1rem; }

h1 { font-size: 1.35rem; margin: 0 0 0.25rem; }
h2 { font-size: 1.05rem; margin: 1.75rem 0 0.6rem; color: var(--verde); }
p.nota { color: var(--gris); font-size: 0.9rem; margin: 0.25rem 0 1rem; }

.tarjeta {
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1rem;
  margin-bottom: 1rem;
}

/* ---- formulario ---- */
label { display: block; font-size: 0.8rem; color: var(--gris); margin-bottom: 0.2rem; }
input, select, button {
  font-family: inherit;
  font-size: 16px;              /* evita el zoom automatico en iOS */
}
input[type="text"], input[type="number"], input[type="date"], select {
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: #fff;
  color: var(--tinta);
}
input:focus, select:focus { outline: 2px solid var(--verde-claro); outline-offset: 1px; }

.fila { display: grid; gap: 0.75rem; margin-bottom: 0.75rem; }
.fila.dos { grid-template-columns: 1fr 1fr; }
.fila.tres { grid-template-columns: 1fr 1fr 1fr; }

button, .boton {
  display: inline-block;
  background: var(--verde);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 0.75rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
button:active { background: var(--verde-claro); }
button.grande, .boton.grande { width: 100%; padding: 0.95rem; font-size: 1.05rem; }
.boton.secundario { background: #fff; color: var(--verde); border: 1px solid var(--verde); }

/* ---- tarjeta de scores ---- */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.score {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
table.score th, table.score td {
  border: 1px solid var(--linea);
  padding: 0.15rem;
  text-align: center;
}
table.score thead th {
  background: var(--verde);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.45rem 0.2rem;
  position: sticky;
  top: 0;
}
table.score td.hoyo { background: #eef2ee; font-weight: 600; width: 2.2rem; }
table.score td.par  { background: #f7f8f6; color: var(--gris); font-size: 0.8rem; width: 2rem; }
table.score tr.suma td { background: #eef2ee; font-weight: 700; }
/* Subtotales de cada vuelta y columnas de handicap/neto/sandy en la vista de
   resultados: se separan del score hoyo por hoyo con un fondo distinto. */
table.score td.subtotal { background: #eef2ee; font-weight: 700; }
table.score td.aparte { background: #f7f8f6; }
table.score td.aparte:first-of-type { border-left: 2px solid var(--verde-claro); }
table.score tr.suma td.etiqueta { text-align: right; padding-right: 0.5rem; font-size: 0.8rem; }

table.score input[type="number"] {
  width: 100%;
  min-width: 2.6rem;
  border: 0;
  padding: 0.5rem 0.1rem;
  text-align: center;
  font-size: 1.05rem;
  background: transparent;
  -moz-appearance: textfield;
}
table.score input::-webkit-outer-spin-button,
table.score input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
table.score input:focus { background: #fffbe6; outline: 2px solid var(--verde-claro); }
table.score td.bajo-par input { color: var(--ok); font-weight: 700; }
table.score td.sobre-par input { color: var(--alerta); }

/* ---- resultados ---- */
table.datos { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.datos th {
  text-align: left; font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--gris);
  border-bottom: 2px solid var(--linea); padding: 0.4rem 0.5rem;
}
table.datos td { border-bottom: 1px solid var(--linea); padding: 0.5rem; }
table.datos td.num, table.datos th.num { text-align: right; }
table.datos tr.podio td { background: #f2f8f4; font-weight: 600; }
table.datos td.dinero { font-weight: 600; }
table.datos td.jugador { white-space: nowrap; }
table.datos td.cero { color: var(--gris); font-weight: 400; }

/* Cabecera de dos pisos, como la hoja "Copa Caribe ajustada": arriba el nombre
   del bloque, abajo cada columna. */
table.datos tr.grupo-col th {
  border-bottom: 0;
  padding-bottom: 0.15rem;
  text-align: center;
  color: var(--verde);
}
table.datos .bloque { border-left: 2px solid var(--linea); }

/* Encabezado de la liquidacion: numero de jugadores, apuesta y bolsa. */
table.datos.resumen { width: auto; margin-bottom: 1rem; }
table.datos.resumen td { border: 0; padding: 0.15rem 1.5rem 0.15rem 0; }
table.datos.resumen td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Los indices que entran al promedio, como el bloque "4 MEJORES INDICES". */
table.datos.indices td.cuenta {
  background: #e2f2e8;
  font-weight: 700;
  color: var(--ok);
}
table.datos.indices td { white-space: nowrap; }
.sembrado { color: var(--gris); font-weight: 400; }
/* Quien no jugo esa fecha: sigue en la tabla, pero en segundo plano. */
table.datos tr.no-jugo td { color: var(--gris); }
table.datos th { white-space: nowrap; }

/* En las tablas anchas el nombre se queda fijo mientras se desplazan las
   columnas de la derecha: sin eso, en el celular uno pierde de vista de quien
   es la fila. */
table.datos td.jugador,
table.datos thead th:first-child {
  position: sticky;
  left: 0;
  background: var(--fondo);
  z-index: 2;
}
table.datos tr.podio td.jugador { background: #f2f8f4; }
table.score tbody td:first-child,
table.score thead th:first-child {
  position: sticky;
  left: 0;
  background: var(--fondo);
  z-index: 2;
}
table.score thead th:first-child { background: var(--verde); }
table.datos tr.no-jugo td.jugador { font-style: italic; }

.parametro {
  display: grid;
  grid-template-columns: 1fr 8rem;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.6rem 0.6rem;
  border-bottom: 1px solid var(--linea);
}
.parametro:last-child { border-bottom: 0; }
.parametro label { margin: 0; font-size: 0.95rem; color: var(--tinta); }
.parametro .ayuda {
  grid-column: 1 / -1;
  margin: 0; font-size: 0.8rem; color: var(--gris);
}
.parametro.cambiado { background: #fffdf0; border-left: 3px solid var(--verde-claro); }
.parametro .original {
  display: inline-block; margin-left: 0.5rem; padding: 0.05rem 0.4rem;
  background: #eef2ee; border-radius: 4px; color: var(--verde);
}

h3.grupo {
  font-size: 0.95rem;
  margin: 1.5rem 0 0.4rem;
  color: var(--tinta);
}
h3.grupo .nota { font-weight: 400; color: var(--gris); font-size: 0.85rem; }

table.datos tfoot tr.totales td {
  border-top: 2px solid var(--linea);
  border-bottom: 0;
  font-weight: 700;
  color: var(--verde);
}
table.datos tr.grupo-col th.bloque { border-bottom: 1px solid var(--linea); }

.pill {
  display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600;
}
.pill.ok { background: #e2f2e8; color: var(--ok); }
.pill.falta { background: #fdeceb; color: var(--alerta); }

.aviso {
  border-left: 4px solid var(--verde); background: #fff;
  padding: 0.75rem 1rem; border-radius: 0 var(--radio) var(--radio) 0;
  margin-bottom: 1rem;
}
.aviso.error { border-left-color: var(--alerta); }

footer { color: var(--gris); font-size: 0.8rem; text-align: center; padding: 2rem 1rem; }

@media (max-width: 560px) {
  /* En el celular el nombre, el neto y la plata son lo que importa; el resto
     queda en la version de escritorio y en el Excel. */
  table.datos .opcional { display: none; }
  table.datos th, table.datos td { padding: 0.5rem 0.35rem; font-size: 0.95rem; }
}

@media (max-width: 480px) {
  .fila.tres { grid-template-columns: 1fr; }
  main { padding: 0.75rem; }
}

/* La fecha abierta manda en la portada: es lo unico que hay que hacer hoy. */
.tarjeta.abierta {
  border-left: 5px solid var(--verde);
}
.tarjeta.abierta h1 { margin-bottom: 0.2rem; }
.grupos { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0 0.2rem; }