/* Ficha Sábado CGM — casa club de campo viejo.
   Verde inglés, papel crema, latón y filetes finos. Tipografía con solera.
   Nada de tarjetas planas ni colores de aplicación deportiva.

   Cómo está ordenado: primero la paleta y la escala, luego lo que vale en
   toda la aplicación (base, tipografía, ornamentos), y después cada pantalla
   en el orden en que se llega a ella. Cada selector se declara UNA vez;
   app/tests/test_css.py lo vigila. */

/* ======================================================================
   1. Paleta y escala
   ====================================================================== */

:root {
  --verde: #0c3823;
  --verde-claro: #17593a;
  --papel: #f4ecd8;
  --papel-claro: #fbf6e9;
  --nogal: #4a3220;
  --tinta: #2b2114;
  --tinta-suave: #6e5d47;
  --granate: #8c2f1d;

  /* El latón es ornamento: rombos, filetes, bordes decorativos. Sobre el
     papel da 3:1 y con sol desaparece, así que lo que se pica o significa
     algo va en verde o tinta. Para un texto chico que quiera seguir dorado
     está --laton-texto, que sí se lee (5.6:1). */
  --laton: #b0873a;
  --laton-claro: #d8b163;
  --laton-texto: #7f5c1c;

  /* --filete es para rayas y punteados. Un borde de botón necesita más
     contraste que eso (3:1 mínimo), y ese es --borde: nogal claro. */
  --filete: #c9b78e;
  --borde: #8f7a58;

  --display: "Cormorant Garamond", "Hoefler Text", Georgia, serif;
  --texto: "EB Garamond", "Iowan Old Style", Georgia, serif;

  /* Una sola escala para toda la aplicación. Antes había veinticinco
     tamaños sueltos y se notaba: números del mismo tipo salían distintos
     de una pantalla a otra. */
  --rotulo: 12px;   /* versalitas espaciadas y notas al pie */
  --apunte: 14px;   /* lo que acompaña, en cursiva */
  --texto-normal: 16px;
  --destacado: 19px;
  --cifra: 22px;
  --cifra-grande: 28px;
  --numero-de-hoyo: 48px;
}

/* ======================================================================
   2. Base: la mesa verde y el papel encima
   ====================================================================== */

* { box-sizing: border-box; }

/* Que se sienta aplicación y no página:
   - `manipulation` apaga el zoom del doble toque y el retardo que el
     navegador se tomaba para saber si venía un segundo toque, así que cada
     golpe responde al instante;
   - sin el recuadro gris del toque, que es marca de web;
   - y sin rebote al llegar al final, que en el campo parecía que la
     pantalla se rompía. */
/* Cambiar de pantalla con un fundido en vez del parpadeo de una página que
   se recarga. El navegador que no lo entienda hace lo de siempre. */
@view-transition { navigation: auto; }

html {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--texto);
  font-size: var(--texto-normal);
  /* Numerales alineados: los de estilo antiguo de estas fuentes hacen que
     «+5 +3 +1» se lea «+5 +3 +ı» con sol. Tabulares para que las columnas
     de la tarjeta y las cadenas no bailen. */
  font-variant-numeric: lining-nums tabular-nums;
  /* Las cursivas vienen en sus archivos: que el navegador no invente. */
  font-synthesis: none;
  color: var(--tinta);
  background-color: var(--verde);
  background-image:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 4px),
    radial-gradient(90% 60% at 50% 0%, var(--verde-claro), var(--verde) 70%);
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; }

/* Mantener el dedo en un botón seleccionaba su palabra y salía la lupa.
   El texto de lectura sí se puede copiar; lo que se pica, no. Los chips y
   los atajos son botones, así que entran aquí. */
.papel button { -webkit-user-select: none; user-select: none; }
.papel summary { -webkit-user-select: none; user-select: none; }
.papel .placa { -webkit-user-select: none; user-select: none; }

/* Con teclado o lector se ve dónde está uno; con el dedo no estorba. */
:focus-visible { outline: 2px solid var(--laton); outline-offset: 2px; }

.hoja {
  max-width: 540px;
  margin: 0 auto;
  /* Abajo, el alto de la barra más lo que el teléfono se reserva para su
     propia raya: si no, la barra tapa el último renglón. */
  padding: 10px 12px calc(86px + env(safe-area-inset-bottom));
  /* El papel llega hasta la barra aunque la pantalla traiga poco: un hueco
     de mesa verde entre el texto y la barra se ve a medio hacer. `dvh` es
     el alto de verdad, con la barra del navegador contada. */
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.papel {
  flex: 1;
  position: relative;
  background: var(--papel-claro);
  background-image: radial-gradient(120% 80% at 50% 0%, #fffdf6, var(--papel) 85%);
  border: 1px solid var(--nogal);
  outline: 1px solid var(--laton);
  outline-offset: 4px;
  padding: 18px 18px 20px;
}

/* ======================================================================
   3. Tipografía: las mismas palabras de clase dan el mismo aspecto en
      toda la aplicación
   ====================================================================== */

.rotulo {
  font-size: var(--rotulo);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 10px;
}

/* Un rótulo que abre una parte sin rombo delante: el margen hace de
   separador. */
.rotulo.aparte { margin-top: 28px; }

.apunte {
  font-size: var(--apunte);
  font-style: italic;
  color: var(--tinta-suave);
}

.apunte.sub { margin: 16px 0 6px; }

.cifra {
  font-family: var(--display);
  font-size: var(--cifra);
}

.cifra.chica { font-size: var(--destacado); }

.nombre { font-size: var(--texto-normal); }

/* El número de un renglón (el índice de la portada, el orden del rol). */
.numero {
  font-family: var(--display);
  color: var(--verde);
  letter-spacing: 0.04em;
}

/* El párrafo con que abre cada pantalla: dice de qué va, centrado. */
.entrada {
  font-size: var(--texto-normal);
  text-align: center;
  color: var(--tinta-suave);
  margin: 0 0 22px;
}

/* Un sello en versalitas doradas: «paga la primera». */
.sello {
  flex: none;
  margin-left: auto;
  max-width: 12em;
  font-size: var(--rotulo);
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: right;
  color: var(--laton-texto);
}

.centrado { text-align: center; }
.crece { flex: 1; }

.gano { color: var(--verde); }
.perdio { color: var(--granate); }

.vacio {
  font-style: italic;
  color: var(--tinta-suave);
  text-align: center;
  margin: 26px 0;
}

/* A 0.6 el que no va se sigue leyendo con sol; la raya dice que no va. */
.apagada .nombre,
.apagada .apunte { opacity: 0.6; text-decoration: line-through; }

/* Lo que hay que saber antes de picar: con golpes, cambiar quién va lo
   recalcula todo. Va en granate para que no se lea como un apunte. */
.aviso {
  font-size: var(--apunte);
  font-style: italic;
  color: var(--granate);
  border: 1px solid var(--granate);
  padding: 10px 12px;
  margin: 0 0 12px;
}

/* El aviso de arriba al llegar recién cerrado: una banda de papel con
   filete, no una alerta de aplicación. */
.aviso-cerrado {
  margin: -8px 0 14px;
  padding: 10px 12px;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: var(--destacado);
  color: var(--verde);
  border-top: 1px solid var(--laton);
  border-bottom: 1px solid var(--laton);
}

/* ======================================================================
   4. Cabecera con escudo, filetes y ornamentos
   ====================================================================== */

.escudo {
  width: 48px;
  height: 48px;
  margin: 0 auto 8px;
  border: 2px solid var(--verde);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: var(--cifra-grande);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--verde);
  box-shadow: inset 0 0 0 4px var(--papel-claro), inset 0 0 0 5px var(--laton);
}

.cabecera { text-align: center; }

.cabecera h1 {
  font-family: var(--display);
  /* Cabe en una línea hasta en la pantalla más angosta: en dos se comía
     media portada y lo útil quedaba abajo. */
  font-size: clamp(26px, 8.2vw, 36px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  color: var(--verde);
}

/* Las interiores llevan el título más chico, y que quepa en una línea. */
.cabecera.interior h1 { font-size: clamp(22px, 7vw, 30px); }

.cabecera .bajo {
  font-size: var(--rotulo);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 6px 0 0;
}

.filete {
  border: 0;
  border-top: 3px double var(--filete);
  margin: 14px 0;
}

/* Los rombos marcan un cambio de capítulo: uno entre cada parte grande,
   no entre cada lista. Entre subsecciones basta .rotulo.aparte. */
.rombo {
  text-align: center;
  color: var(--laton);
  letter-spacing: 0.6em;
  font-size: var(--rotulo);
  margin: 16px 0;
}

.rombo::before { content: "◆  ◆  ◆"; }

/* ======================================================================
   2b. La barra de abajo: a donde se va todo el tiempo
   ====================================================================== */

/* Clavada abajo, al alcance del pulgar, para no tener que volver a la
   portada para moverse. Es madera y latón, no una barra de aplicación
   plana: banda oscura, filete dorado arriba y versalitas. */
.barra {
  /* Se queda quieta mientras la pantalla se funde: una barra que parpadea
     con cada toque delata que hubo una recarga. */
  view-transition-name: barra;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  display: flex;
  background: var(--verde);
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 60%);
  border-top: 1px solid var(--laton);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35), 0 -8px 18px rgba(0, 0, 0, 0.25);
  padding-bottom: env(safe-area-inset-bottom);
}

.destino {
  position: relative;
  flex: 1;
  display: flex;
  -webkit-user-select: none;
  user-select: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 60px;
  padding: 8px 2px 7px;
  text-decoration: none;
  color: var(--papel);
  opacity: 0.62;
}

.destino svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.destino span {
  font-size: var(--rotulo);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Donde estás: en latón claro y con su marca arriba, como la cinta de un
   libro. Nada de pastilla de color. */
.destino.aqui {
  color: var(--laton-claro);
  opacity: 1;
}

.destino.aqui::before {
  content: "";
  position: absolute;
  top: 0;
  width: 34px;
  height: 2px;
  background: var(--laton-claro);
}

.destino:active { opacity: 1; background: rgba(255, 255, 255, 0.06); }

/* ======================================================================
   5. Portada: la próxima jugada, la placa y el índice
   ====================================================================== */

.proxima { text-align: center; }

.proxima .fecha {
  font-family: var(--display);
  /* Una línea en el teléfono: en dos empujaba el índice fuera de la
     pantalla y había que desplazar para ver el libro entero. */
  font-size: clamp(23px, 6.6vw, 32px);
  /* La única cifra de estilo antiguo: la fecha grande, como en un libro. */
  font-variant-numeric: oldstyle-nums;
  line-height: 1.05;
  margin: 0;
  color: var(--tinta);
}

/* La misma fecha, más chica, cuando encabeza la jugada. */
.proxima .fecha.chica { font-size: var(--cifra-grande); }

.proxima .hora {
  font-family: var(--display);
  font-size: var(--cifra-grande);
  color: var(--verde);
  margin: 2px 0 0;
}

.proxima .hora::before,
.proxima .hora::after { content: "—"; color: var(--laton); margin: 0 10px; }

.en-que-vamos {
  font-family: var(--display);
  font-size: var(--destacado);
  font-style: italic;
  color: var(--tinta-suave);
  margin: 8px 0 0;
}

/* Botón de placa de latón */
.placa {
  display: block;
  width: 100%;
  margin: 20px auto 0;
  padding: 14px 26px;
  min-height: 48px;
  text-align: center;
  font-family: var(--texto);
  font-size: var(--texto-normal);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--papel-claro);
  background: var(--verde);
  border: 1px solid var(--verde);
  box-shadow: inset 0 0 0 1px var(--laton-claro);
}

.placa:active { background: var(--verde-claro); }

.placa + .placa { margin-top: 10px; }

.indice { list-style: none; margin: 0; padding: 0; }

.indice li { border-bottom: 1px dotted var(--filete); }
.indice li:last-child { border-bottom: 0; }

.indice a,
.indice a:link,
.indice a:visited {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: baseline;
  min-height: 48px;
  padding: 9px 2px;
  text-decoration: none;
  color: var(--tinta);
}

.indice .numero { font-size: var(--texto-normal); }

.indice .que { font-size: var(--destacado); }

.indice .nota {
  grid-column: 2;
  font-size: var(--apunte);
  color: var(--tinta-suave);
  font-style: italic;
  margin-top: 2px;
}

/* La portada: quiénes van ese sábado. A dónde se va está en la barra. */
.quienes {
  font-size: var(--apunte);
  line-height: 1.45;
  color: var(--tinta-suave);
  margin: 10px 0 0;
}
/* La línea de abajo de la portada: entrar, o «Capturando desde este
   teléfono · salir». Discreta, en cursiva, con 44 px para el dedo. */
.captura-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 6px;
  margin-top: 22px;
  font-size: var(--apunte);
  font-style: italic;
  color: var(--tinta-suave);
}
.captura-linea a,
.captura-linea button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 6px;
  font-family: var(--texto);
  font-size: var(--apunte);
  font-style: italic;
  color: var(--verde);
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.captura-linea form { display: inline-flex; align-items: center; }
.captura-linea form::before { content: "·"; }

/* ======================================================================
   6. Vuelta a la portada y enlaces de texto
   ====================================================================== */

/* Mide 44 px de alto para picarse, pero el texto queda donde estaba:
   el relleno se compensa con el margen. */
.volver {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  margin: -13px 0 1px -4px;
  font-size: var(--apunte);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinta-suave);
}

/* Dentro de un flex el espacio de la flecha se pierde: va como margen. */
.volver::before { content: "←"; margin-right: 6px; }

.ver-detalle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  margin: -2px 0 -8px -4px;
  font-size: var(--apunte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde);
  text-decoration: none;
}

.ver-detalle::after { content: "›"; margin-left: 5px; }

/* Solo en su línea y centrado, como al pie del marcador. */
.ver-detalle.suelto { display: flex; justify-content: center; margin: 8px 0 0; }

/* Un enlace dentro de un apunte: el texto se queda, el área de toque crece. */
.enlace { display: inline-block; padding: 13px 0; margin: -13px 0; color: var(--verde); }

/* El código del sorteo lleva a la página que lo comprueba: 44 px para el
   dedo sin mover el renglón, como la fecha del historial. */
.codigo {
  display: inline-block;
  font-family: var(--display);
  min-height: 44px;
  line-height: 44px;
  padding: 0 4px;
  margin: -14px 0;
  font-style: normal;
  letter-spacing: 0.08em;
  color: var(--verde);
}

/* ======================================================================
   7. Listas de jugadores
   ====================================================================== */

.lista { list-style: none; margin: 0; padding: 0; }

.lista li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px dotted var(--filete);
}

.lista li:last-child { border-bottom: 0; }

/* El color del jugador es dato, no estilo: llega en --color desde la
   plantilla. */
.monograma {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: var(--destacado);
  color: var(--papel-claro);
  background: var(--color, var(--tinta-suave));
  border: 1px solid rgba(0, 0, 0, 0.25);
}

.lista .cifra {
  margin-left: auto;
  white-space: nowrap;
}

.descansa .monograma { opacity: 0.45; filter: grayscale(0.8); }
.descansa .nombre { color: var(--tinta-suave); }

/* El rol: el orden en que toca descansar. */
.rol .numero { width: 22px; flex: none; font-size: var(--destacado); }

/* ======================================================================
   8. La jugada de la semana: quién va, por dónde salen y a qué hora
   ====================================================================== */

/* Por dónde se sale y a qué hora: chips en fila, centrados, que se
   acomodan en dos renglones cuando no caben. */
.salida { text-align: center; margin: 18px 0 0; }
.salida .apunte { display: block; margin: 0 0 10px; }
.opciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 10px; }
.opciones .chip { color: var(--verde); }
.opciones .chip.puesta { color: var(--papel-claro); }
.horas .chip { padding: 0 11px; min-width: 44px; font-variant-numeric: lining-nums tabular-nums; }

/* Cuando les cambian el horario: la hora sale de la rueda del teléfono, que
   también se pica. El campo va a 16 px para que iOS no haga zoom al
   enfocarlo, y el alto de siempre para el pulgar. */
.otra-hora {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 10px;
}
.otra-hora label { font-size: var(--rotulo); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-suave); }
.otra-hora input[type="time"] {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--filete);
  border-radius: 6px;
  background: var(--papel-claro);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  font-variant-numeric: lining-nums tabular-nums;
}
.otra-hora .chip { color: var(--verde); }

/* El interruptor de «apuesta de normal», dentro del renglón del integrante:
   va suelto, no al final de la línea como los de la jugada. */
.picar.de-siempre { margin: 8px 0 4px; justify-content: flex-start; }

/* Apostar es lo normal, así que el chip puesto va discreto —filete y nada
   más— para no competir con el «Va», que es el que manda el renglón. Lo que
   sí salta es el apagado: ése es el aviso de que hoy ese no cobra. */
.chip.de-apuesta.puesta { background: none; color: var(--verde); border-color: var(--filete); }
.chip.de-apuesta:not(.puesta) {
  border-style: dashed;
  border-color: var(--granate);
  color: var(--granate);
}

/* El chip que se mira y no se pica, al final del renglón: «Descansa», o
   «Va» cuando ya hay golpes. El apagado es el del que descansa. */
.lista > li > .chip.fijo { margin-left: auto; white-space: nowrap; }

/* «va», «no va», «descansa» al final del renglón cuando no se pica. */
.estado {
  margin-left: auto;
  font-size: var(--rotulo);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  white-space: nowrap;
}
.apagada .estado { opacity: 0.6; }

/* Un renglón cuyos botones van debajo del nombre: con dos descansando son
   dos botones «Por A / Por B» y en 320 px no caben a un lado. */
.lista li.ofrecerse { flex-wrap: wrap; }
.lista li.ofrecerse .picar {
  /* Con base 100% y el margen del monograma, tiene que poder encoger. */
  flex: 1 1 100%;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
  margin: 2px 0 0 50px;
}
.lista li.ofrecerse .picar button:not([aria-label]) {
  height: auto;
  min-height: 44px;
  padding: 8px 14px;
  white-space: normal;
  text-align: left;
  line-height: 1.25;
}

/* Lo que se guarda tras un toque: «¿Otro quiere descansar?». */
.plegado { margin-top: 14px; }
.plegado summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: var(--apunte);
  font-style: italic;
  color: var(--tinta-suave);
  border-top: 1px dotted var(--filete);
}
.plegado summary::-webkit-details-marker { display: none; }
.plegado summary::before { content: "＋"; color: var(--verde); margin-right: 8px; }
.plegado[open] summary::before { content: "－"; }
.plegado > .apunte { display: block; margin: 4px 0 6px; }

/* ======================================================================
   9. Historial y jugadas
   ====================================================================== */

.jugada { margin-bottom: 26px; }

.jugada h3 {
  font-family: var(--display);
  font-size: var(--cifra);
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--verde);
}

.jugada h3.chico { font-size: var(--destacado); }

/* La fecha lleva al detalle: sin subrayado, y con 44 px para el dedo sin
   mover el texto. */
.jugada h3 a {
  display: inline-block;
  padding: 9px 0;
  margin: -9px 0;
  text-decoration: none;
}

/* Quién fue: la fila de monogramas chicos de los que jugaron. */
.quien-fue { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.monograma.chico { width: 30px; height: 30px; font-size: var(--texto-normal); }

/* La fecha del historial es el renglón que se abre: lleva su › al final. */
.jugada h3 a.abre::after {
  content: "›";
  margin-left: 8px;
  color: var(--laton-texto);
  font-weight: 400;
}

/* ======================================================================
   10. Ventajas
   ====================================================================== */

.ventaja .golpes { color: var(--verde); }

/* Las ventajas: cada par es un renglón que se abre. Cerrado dice quién le
   da a quién; abierto, el porqué y los dos botones con nombre, a lo ancho,
   para que en «parejos» quede claro quién va a dar. */
.ventaja .desglose .apunte { display: block; margin: 0 0 4px; }
.ventaja .da { display: flex; gap: 8px; margin: 10px 0 4px; }

.ventaja .da button {
  flex: 1;
  min-height: 44px;
  padding: 0 8px;
  font-family: var(--texto);
  font-size: var(--texto-normal);
  color: var(--verde);
  background: transparent;
  border: 1px solid var(--borde);
  cursor: pointer;
}

.ventaja .da button:active { background: var(--papel); }

/* Las ventajas del cierre y del historial: el nombre y la cifra en un
   renglón, el porqué debajo, como en integrantes. */
.lista li.ventaja { display: block; }
.ventaja .quien-da { display: flex; align-items: baseline; gap: 10px; }
.ventaja .quien-da .nombre { flex: 1; }
.ventaja > .apunte { display: block; margin-top: 2px; }

/* Las ventajas que dejó el cierre, diez con cinco jugadores: renglones más
   apretados para que la placa de confirmar no quede a tres pantallas. */
.lista.ventajas li { padding: 8px 2px; }

/* ======================================================================
   11. Picar en vez de teclear: los −/+, los botones con palabra y los chips
   ====================================================================== */

.picar { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.picar button {
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  font-family: var(--display);
  font-size: var(--cifra);
  color: var(--verde);
  background: transparent;
  border: 1px solid var(--borde);
  cursor: pointer;
}

.picar button:active { background: var(--papel); }

/* Los botones con palabra en vez de signo: que no se corte el texto. */
.picar button:not([aria-label]) {
  width: auto;
  padding: 0 14px;
  font-family: var(--texto);
  font-size: var(--apunte);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.picar .cifra {
  min-width: 38px;
  text-align: center;
  margin: 0;
}

/* El par del hoyo, en la bandera del marcador. */
.picar.el-par { justify-content: center; margin: 0; }
.picar.el-par button { width: 44px; min-width: 0; padding: 0; font-size: var(--destacado); }
.picar.el-par .cifra { font-size: var(--texto-normal); min-width: 56px; font-family: var(--texto); }

/* Los putts, dentro de los extras de un jugador. */
.picar.putts button { width: 44px; padding: 0; font-size: var(--texto-normal); }
.picar.putts .cifra { font-family: var(--texto); font-size: var(--apunte); min-width: 62px; }

/* El chip: un botón redondeado que dice una palabra. Lleno cuando está
   puesto; «fijo» cuando se mira y no se pica; «apagado» el del que descansa. */
.chip {
  min-height: 44px;
  padding: 0 14px;
  font-family: var(--texto);
  font-size: var(--apunte);
  color: var(--tinta-suave);
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 22px;
  cursor: pointer;
}

.chip.puesta {
  color: var(--papel-claro);
  background: var(--verde);
  border-color: var(--verde);
}

/* Un chip que se mira y no se pica. */
.chip.fijo { display: inline-flex; align-items: center; cursor: default; }
.chip.apagado { color: var(--tinta-suave); border-color: var(--filete); border-style: dashed; }

/* El interruptor de quién va: verde lleno cuando va, apagado cuando no.
   Con la misma letra que «Por el 1» y las horas: una sola tipografía en
   los chips de la jugada. */
.picar button.chip { min-width: 72px; letter-spacing: 0; text-transform: none; }

/* ======================================================================
   12. Los foursomes del sorteo
   ====================================================================== */

.foursome {
  text-align: center;
  padding: 9px 0;
  border-bottom: 1px dotted var(--filete);
  font-size: var(--texto-normal);
}

.foursome:last-of-type { border-bottom: 0; }

.foursome .contra {
  display: block;
  font-family: var(--display);
  font-style: italic;
  color: var(--tinta-suave);
  font-size: var(--texto-normal);
  margin: 2px 0;
}

/* Los equipos: la base arriba y las tres parejas contrarias debajo. */
.base {
  font-family: var(--display);
  font-size: var(--destacado);
  color: var(--verde);
  text-align: center;
  margin: 10px 0 4px;
}
.foursome .apunte { display: block; margin-top: 4px; }

/* El comprobante del sorteo, en texto limpio para pegarlo en el grupo. */
.comprobante {
  font-family: var(--texto);
  font-size: var(--apunte);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--tinta);
  background: var(--papel);
  border: 1px dotted var(--filete);
  padding: 12px 14px;
  margin: 16px 0 0;
}

/* La página del código del sorteo: con qué se hizo y si coincide. */
.dato { text-align: center; margin: 0 0 6px; }
.veredicto {
  font-family: var(--display);
  font-size: var(--cifra-grande);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 6px;
}
.veredicto.coincide { color: var(--verde); }
.veredicto.no-coincide { color: var(--granate); }

/* ======================================================================
   13. Lo pactado y de cuánto va hoy: atajos, montos e interruptores
   ====================================================================== */

/* Atajos de monto: los tres de un toque */
.atajos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }

.atajo {
  min-height: 44px;
  /* Un atajo corto («10») también tiene que caber bajo el dedo. */
  min-width: 44px;
  padding: 0 14px;
  font-family: var(--display);
  font-size: var(--destacado);
  letter-spacing: 0.02em;
  color: var(--verde);
  background: var(--papel-claro);
  border: 1px solid var(--borde);
  cursor: pointer;
}

.atajo:active { background: var(--papel); }

.renglon-de-monto { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.renglon-de-monto .apunte { flex: 1; }
.renglon-de-monto .cifra { min-width: 72px; font-size: var(--destacado); }

.interruptores { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }

/* Los atajos dentro de una pareja: más chicos, para que quepan en una fila
   y no se confundan con los de «todos a la vez». */
.atajos.compactos { gap: 6px; margin-bottom: 10px; }
.atajos.compactos .atajo { font-size: var(--texto-normal); padding: 0 9px; }

/* Lo que cuelga de la primera: la unidad y el medal, en su propia línea. */
.apunte.cuelga { display: block; margin: -4px 0 10px; }

/* Un interruptor con su monto a la derecha, en la misma línea. */
.interruptor { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 8px 0; }
.interruptor > form:first-child { flex: 1; }
.interruptor .cifra { margin-left: auto; }

/* Los tres montos de fairways, greens y putts, colgando de su interruptor. */
.sub-montos { margin: 0 0 6px 14px; }

/* Los foursomes en una línea: la base ▸ la rival. Si no cabe, se parte en
   el ▸ y no a media pareja. */
.versus { color: var(--laton-texto); }
.pareja { white-space: nowrap; }

/* Quién contra quién, SIEMPRE en dos renglones. Dejándolo fluir, «Vicente y
   Román ▸ Gabriel y Carlos» cabía en uno y «… ▸ Gabriel y Santiago» no, así
   que tres foursomes seguidos se veían desparejos: uno alto y dos bajos. */
.entre-parejas .versus + .pareja { display: block; }

/* Con el punto en cero, los chips de quién juega las monedas se apagan. */
.interruptores.apagados .chip { opacity: 0.45; }

/* Los tres montos de una apuesta, dichos en una línea. */
.montos-dichos { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 8px; }
.un-monto { display: inline-flex; align-items: baseline; gap: 6px; }

/* ======================================================================
   14. Lo que se abre al picarlo: renglones con desglose
   ====================================================================== */

/* El renglón que se abre ocupa el ancho entero: si no, la cifra se queda a
   media línea en vez de irse al borde. */
.lista li.abrible { display: block; padding: 0; }
.abrible > details { width: 100%; }

.abrible summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 2px;
  min-height: 52px;
}

.abrible summary::-webkit-details-marker { display: none; }
.abrible summary > span:not(.monograma):not(.cifra) { flex: 1; }
.abrible summary::after {
  content: "›";
  font-family: var(--display);
  font-size: var(--cifra);
  color: var(--verde);
  margin-left: 4px;
}
.abrible details[open] summary::after { content: "⌄"; }

.abrible .desglose {
  list-style: none;
  margin: 0 0 12px;
  padding: 10px 0 0 12px;
  border-left: 2px solid var(--filete);
}

.abrible .desglose li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 0;
}

.abrible .desglose li > span:first-child:not(.monograma):not(.moneda) { flex: 1; }

.desglose li { padding: 9px 2px; }
.desglose .cifra { font-size: var(--destacado); }

/* Lo que dio cero pero explica: la cifra en gris, que no compita. */
.desglose li.explica .cifra { color: var(--tinta-suave); }

/* El «cada uno» bajo el monto del foursome. */
.abrible .cifra small { display: block; font-family: var(--texto); font-size: var(--rotulo); color: var(--tinta-suave); text-align: right; }

/* ======================================================================
   15. El marcador del hoyo
   ====================================================================== */

.bandera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  gap: 4px;
}

.de-que-hoyo { text-align: center; margin: 4px 0 0; }

.bandera .flecha {
  width: 44px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: var(--cifra-grande);
  color: var(--verde);
  text-decoration: none;
}

.numero-de-hoyo {
  font-family: var(--display);
  font-size: var(--numero-de-hoyo);
  line-height: 1;
  margin: 0;
  min-width: 52px;
  color: var(--verde);
}

.marcador li { display: block; padding: 7px 2px; }

/* El renglón de cada jugador: quién es, cómo va y sus extras. */
.quien { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.quien .monograma { width: 30px; height: 30px; font-size: var(--texto-normal); align-self: center; }
.quien .crece { min-width: 0; }
.quien .apunte { display: block; white-space: nowrap; }

/* La estrella del que va mejor en el hoyo. */
.mejor { color: var(--verde); font-size: var(--texto-normal); }

/* El punto de siempre: dice que ahí recibe golpe, como en la tarjeta de papel. */
.con-stroke {
  color: var(--laton-texto);
  font-size: var(--texto-normal);
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
}

/* El golpe, de un toque */
.de-un-toque { display: flex; gap: 4px; }

.golpe {
  flex: 1;
  min-height: 48px;
  font-family: var(--display);
  font-size: var(--cifra);
  color: var(--tinta);
  background: var(--papel-claro);
  border: 1px solid var(--borde);
  cursor: pointer;
}

.golpe:active { background: var(--papel); }

.golpe.es-el-par { border-color: var(--laton-texto); }

.golpe.puesto {
  color: var(--papel-claro);
  background: var(--verde);
  border-color: var(--verde);
}

.golpe.otro { flex: 0 0 44px; font-size: var(--destacado); color: var(--verde); }

/* Los extras de un jugador, a la mano: el «⋯» al final de su renglón. */
.abre-extras {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: var(--destacado);
  color: var(--verde);
  text-decoration: none;
  border: 1px solid var(--borde);
  border-radius: 50%;
  position: relative;
}

.abre-extras.abierto { background: var(--verde); color: var(--papel-claro); border-color: var(--verde); }

.abre-extras.con-algo::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verde);
}

.extras.del-jugador {
  margin-top: 10px;
  padding: 10px 0 2px;
  border-top: 1px dotted var(--filete);
}

/* El lugar en un par 3 */
.el-oyese .golpe { min-height: 44px; font-size: var(--destacado); }

/* El par del hoyo cuando no se pica: en el hueco del −/+. */
.par-dicho { min-width: 56px; font-size: var(--texto-normal); }

/* El golpe de cada quien como en la tarjeta: la marca de siempre, más
   grande que en la tabla, y qué fue contra el par. */
.golpes-puestos { display: flex; align-items: center; gap: 12px; min-height: 48px; padding-left: 2px; }
.golpes-puestos .marca { width: 40px; height: 40px; font-size: var(--cifra); color: var(--tinta); }
.golpes-puestos .apunte { font-family: var(--display); font-style: italic; }

/* Lo pedido, a la vista en cada hoyo de la segunda vuelta. */
.pedido-dicho { margin: 8px 0 0; }

/* ======================================================================
   16. Lo que se pica además de los golpes: chips de unidades y pinkys
   ====================================================================== */

.extras { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin-top: 8px; }

.chip.pinky { border-style: dashed; color: var(--granate); font-size: var(--apunte); padding: 0 10px; }
.chip.pinky.puesta { background: var(--granate); border-color: var(--granate); color: var(--papel-claro); }

/* Lo que no se pica en cada hoyo se guarda tras un toque: el marcador tiene
   que leerse con el sol en la cara. */
/* Una parte entera que se pliega: el rótulo hace de tirador y ocupa el
   ancho, para picarlo sin apuntar. Cerrada, el marcador cabe en una
   pantalla; abierta, se queda abierta. */
.plegable-grande > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}

.plegable-grande > summary .rotulo { margin: 0; }
.plegable-grande > summary::-webkit-details-marker { display: none; }

.plegable-grande > summary::after {
  content: "＋";
  color: var(--verde);
  font-size: var(--destacado);
}

.plegable-grande[open] > summary::after { content: "－"; }

.extras-del-hoyo { margin-top: 14px; }

.extras-del-hoyo summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: var(--apunte);
  font-style: italic;
  color: var(--tinta-suave);
  border-top: 1px dotted var(--filete);
}

.extras-del-hoyo summary::-webkit-details-marker { display: none; }
.extras-del-hoyo summary::before { content: "＋"; color: var(--verde); margin-right: 8px; }
.extras-del-hoyo[open] summary::before { content: "－"; }

.de-quien { margin: 10px 0 16px; }
.de-quien .rotulo { margin: 0 0 6px; }

/* Una moneda: un círculo chico con borde de latón. Apagada cuando nadie
   la tiene; con el latón entero cuando alguien la lleva en la mano. */
.moneda {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--laton);
  box-shadow: inset 0 0 0 2px var(--papel-claro), inset 0 0 0 3px var(--laton-claro);
  background: var(--papel);
  font-family: var(--display);
  font-size: var(--rotulo);
  font-weight: 600;
  color: var(--laton-texto);
}
.moneda.en-mano { background: var(--laton-claro); color: var(--tinta); }

/* El chip de una moneda en el panel del jugador: la moneda va delante. */
.chip.de-moneda { display: inline-flex; align-items: center; gap: 6px; padding-left: 6px; }
.chip.de-moneda.puesta .moneda { background: var(--laton-claro); color: var(--tinta); }

/* La lista de las monedas dentro del renglón abierto. */
.las-monedas li { padding: 6px 0; }

/* El «de regulation» debajo de los lugares del oyese, en su propia línea. */
.el-oyese .de-un-toque { flex-wrap: wrap; }
.chip.regulation { flex: 1 1 100%; border-radius: 22px; }

/* Los extras de un jugador van por grupos con su rótulo chico —Oyese,
   Estadísticas, Unidades, Monedas, Pinkys—: así el «Birdie» de las unidades
   no se confunde con el de las monedas. Cada grupo ocupa su línea. */
.grupo-de-extras { flex: 1 1 100%; margin-bottom: 6px; }
.grupo-de-extras .rotulo { margin: 0 0 6px; letter-spacing: 0.2em; }
.grupo-de-extras .chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* La moneda que se tenía y otro se picó después en el mismo hoyo: el chip
   se apaga y lo dice; picarlo la recupera. */
.chip.de-moneda.la-tenia { border-style: dashed; opacity: 0.7; }
.chip.de-moneda.la-tenia .moneda { opacity: 0.6; }
.chip.de-moneda .apunte { font-size: var(--rotulo); }

/* ======================================================================
   17. Cómo va cada juego
   ====================================================================== */

.los-juegos { margin-bottom: 4px; }

.un-juego .contra-quien { color: var(--laton-texto); }

.un-juego table { width: 100%; border-collapse: collapse; margin: 0 0 12px; }

.un-juego th {
  width: 82px;
  text-align: left;
  font-weight: 400;
  font-size: var(--rotulo);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding: 3px 0;
}

.un-juego td { padding: 3px 0; font-family: var(--display); font-size: var(--texto-normal); }
.un-juego .cadena { color: var(--tinta); padding-left: 4px; }
.un-juego .pesos { text-align: right; width: 58px; color: var(--tinta-suave); }
.un-juego .pesos.perdio { color: var(--granate); }

/* Los puntos de cada quien en la línea de «Las monedas»: «C +3 · S −1». */
.puntos-de { white-space: nowrap; }
.puntos-de + .puntos-de { margin-left: 10px; }

/* ======================================================================
   18. La segunda vuelta: qué pidió cada quien
   ====================================================================== */

/* La segunda vuelta: un renglón por par, con los dos chips en la misma
   línea y lo que ya se pidió al lado. */
.pedido { padding: 10px 0; border-bottom: 1px dotted var(--filete); }
.pedido:last-child { border-bottom: 0; }
.a-quien { margin: 0 0 4px; }
.a-quien .apunte { display: block; }
.extras.en-linea { align-items: center; margin-top: 4px; }
.lo-pedido { align-self: center; }

/* ======================================================================
   19. La tarjeta de los 18 hoyos
      Se marca como se ha marcado siempre: sin nada el par, un círculo el
      birdie, dos el águila, un cuadro el bogey y dos el doble o peor.
   ====================================================================== */

.tarjeta-de-score table { width: 100%; border-collapse: collapse; }

.tarjeta-de-score th,
.tarjeta-de-score td {
  position: relative;
  padding: 7px 2px;
  text-align: center;
  font-family: var(--display);
  font-size: var(--destacado);
  border-bottom: 1px solid var(--filete);
}

.tarjeta-de-score thead th { border-bottom: 2px solid var(--filete); padding-bottom: 10px; }
.tarjeta-de-score .monograma { width: 30px; height: 30px; font-size: var(--texto-normal); margin: 0 auto; }

/* El par y el index en gris chico, como en la tarjeta de papel. Son
   columnas, no marcas: .col-par para que no choque con .marca.par. */
.tarjeta-de-score .col-par,
.tarjeta-de-score .col-index {
  width: 28px;
  font-family: var(--texto);
  font-size: var(--rotulo);
  color: var(--tinta-suave);
}

.tarjeta-de-score th.hoyo {
  width: 58px;
  text-align: left;
  font-family: var(--texto);
  font-size: var(--apunte);
  color: var(--tinta-suave);
}

/* El número del hoyo lleva al marcador: 44 px de alto para el dedo, con
   el relleno metido en el de la celda para que la fila no crezca tanto. */
.tarjeta-de-score th.hoyo a {
  display: block;
  min-width: 44px;
  padding: 12px 0;
  margin: -7px 0;
  color: var(--verde);
  text-decoration: none;
  font-size: var(--texto-normal);
}

.tarjeta-de-score .suma th.hoyo,
.tarjeta-de-score .suma td {
  border-top: 2px solid var(--filete);
  border-bottom: 2px solid var(--filete);
  color: var(--verde);
}

.tarjeta-de-score tfoot th { border-bottom: 0; padding-top: 12px; color: var(--verde); }
.tarjeta-de-score tfoot td {
  border-bottom: 0;
  padding-top: 12px;
  color: var(--verde);
  font-size: var(--cifra);
}

/* Todos los golpes ocupan la misma caja, tengan marca o no: si no, unos
   números salen más grandes que otros y la columna baila. */
.marca {
  display: inline-grid;
  place-items: center;
  width: 27px;
  height: 27px;
  line-height: 1;
  font-family: var(--display);
  font-style: normal;
}

.marca.birdie { border: 1px solid var(--verde); border-radius: 50%; }
.marca.aguila {
  border: 1px solid var(--verde);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--papel-claro), 0 0 0 4px var(--verde);
}
.marca.bogey { border: 1px solid var(--tinta-suave); }
.marca.doble {
  border: 1px solid var(--tinta-suave);
  box-shadow: 0 0 0 3px var(--papel-claro), 0 0 0 4px var(--tinta-suave);
}

/* La leyenda: cada marca con su palabra, y que no se parta a media pareja. */
.leyenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-top: 22px;
  line-height: 2;
}
.leyenda .marca { margin: 0 2px; }
.leyenda .clave { white-space: nowrap; }

/* El punto de golpe en la casilla de la tarjeta, arriba a la derecha como
   se marca en el papel. En la leyenda va suelto, en su línea. */
.punto {
  position: absolute;
  top: 2px;
  right: 1px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--laton-texto);
}
.punto.suelto { position: static; font-size: var(--texto-normal); letter-spacing: 0; }

/* El número del hoyo en la tarjeta de un sábado cerrado: igual que el
   enlace, pero no lleva a ningún marcador. */
.sin-enlace {
  display: block;
  padding: 12px 0;
  margin: -7px 0;
  color: var(--verde);
  font-size: var(--texto-normal);
}

/* Quién es quién en la tarjeta: el monograma con su apodo, bajo la tabla. */
/* El line-height va explícito: .leyenda lo pone en 2 y aquí manda el de
   un apunte. */
.leyenda.quienes { margin-top: 14px; gap: 6px 14px; line-height: 1.45; }
.leyenda.quienes .monograma { width: 24px; height: 24px; font-size: var(--apunte); font-style: normal; display: inline-grid; vertical-align: middle; }

/* ======================================================================
   20. El cierre y la cuenta: cerrar a medias, reabrir, el resumen y «Ya cobró»
   ====================================================================== */

/* Lo que se abre con un segundo toque: cerrar a medias, reabrir, el texto
   del resumen. El summary mide 44 px y no lleva triángulo. */
.a-medias,
.se-cerro-mal,
.resumen { margin-top: 18px; }

.a-medias summary,
.se-cerro-mal summary,
.resumen summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--apunte);
  font-style: italic;
  color: var(--tinta-suave);
  letter-spacing: 0.06em;
}

.a-medias summary::-webkit-details-marker,
.se-cerro-mal summary::-webkit-details-marker,
.resumen summary::-webkit-details-marker { display: none; }

.a-medias summary::before,
.se-cerro-mal summary::before,
.resumen summary::before { content: "＋"; color: var(--verde); margin-right: 8px; }

.a-medias[open] summary::before,
.se-cerro-mal[open] summary::before,
.resumen[open] summary::before { content: "－"; }

.a-medias .apunte,
.se-cerro-mal .apunte { display: block; text-align: center; margin: 4px 0 0; }

/* La placa de dentro mide lo mismo que la de arriba: un botón por sí solo
   se encoge a su texto. */

/* El texto que se comparte, tal cual se pega: papel, tipografía del cuerpo
   y sin desbordarse a lo ancho. */
.resumen pre {
  margin: 8px 0 0;
  padding: 12px 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--texto);
  font-size: var(--apunte);
  line-height: 1.5;
  color: var(--tinta);
  background: var(--papel);
  border: 1px dotted var(--borde);
}

/* La cuenta: cada quien se abre para ver de qué sábados viene, y el botón
   de «Ya cobró» queda a la derecha, fuera de lo que se abre. */
.lista li.cuenta-de { align-items: flex-start; }
.cuenta-de > details { flex: 1; min-width: 0; }

.cuenta-de summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}

.cuenta-de summary::-webkit-details-marker { display: none; }
.cuenta-de summary .cifra { margin-left: auto; white-space: nowrap; }

.cuenta-de .desglose {
  list-style: none;
  margin: 0 0 4px;
  padding: 6px 0 0 12px;
  border-left: 2px solid var(--filete);
}

.cuenta-de .desglose li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 0; }
.cuenta-de .desglose .apunte { flex: 1; }
.cuenta-de .picar { margin-top: 2px; }
.apagada .picar { margin-left: auto; }

/* «Ya cobró» y «Ya pagó» miden lo mismo: si no, las cifras bailan de un
   renglón al otro. */
.cuenta-de .picar button { min-width: 7.5em; }

/* ======================================================================
   21. Reglas del grupo: lo que vale cada cosa, para leerse, no para picarse
   ====================================================================== */

.lo-que-vale { width: 100%; border-collapse: collapse; }

.lo-que-vale th {
  text-align: left;
  font-weight: 400;
  font-size: var(--texto-normal);
  padding: 11px 0;
  border-bottom: 1px dotted var(--filete);
}

.lo-que-vale td {
  text-align: right;
  white-space: nowrap;
  font-family: var(--display);
  font-size: var(--destacado);
  color: var(--verde);
  padding: 11px 0 11px 12px;
  border-bottom: 1px dotted var(--filete);
}

.lo-que-vale tr:last-child th,
.lo-que-vale tr:last-child td { border-bottom: 0; }

/* El orden de los nueve hoyos no cabe en una línea a 320 px: se parte. */
.lo-que-vale td.larga { white-space: normal; overflow-wrap: anywhere; }

/* ======================================================================
   22. Entrar a capturar: el único campo que se teclea
   ====================================================================== */

/* El único campo que se teclea en toda la aplicación: la palabra de la
   casa, una vez por teléfono. A 16 px para que iOS no haga zoom al
   enfocar; la placa a lo ancho, que un botón solo se encoge a su texto. */
.palabra { margin: 0 auto; max-width: 320px; }
.palabra .rotulo { display: block; text-align: center; }
.palabra input[type="password"] {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  font-family: var(--texto);
  font-size: var(--texto-normal);
  letter-spacing: 0.3em;
  color: var(--tinta);
  background: var(--papel-claro);
  border: 1px solid var(--borde);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.palabra input[type="password"]:focus { outline: 2px solid var(--verde); outline-offset: 1px; }

/* ======================================================================
   23. Pantallas angostas
      El papel cede margen antes que los botones: ninguno baja de 44 px,
      que menos que eso no se pica bien con el pulgar. A 320 px quedan
      290 px de papel y seis botones de 45 px con sus huecos.
   ====================================================================== */

@media (max-width: 360px) {
  .papel { padding-left: 8px; padding-right: 8px; }
  .hoja { padding-left: 6px; padding-right: 6px; }
  .picar.el-par .cifra { min-width: 44px; }
  .numero-de-hoyo { min-width: 40px; }
}

/* En 320 px no caben nombre, cifra y «Ya cobró» en una línea: el botón
   baja a su renglón, a la derecha, antes que encimarse con la cifra. */
@media (max-width: 360px) {
  .lista li.cuenta-de { flex-wrap: wrap; row-gap: 4px; }
  .cuenta-de > details { flex-basis: 100%; }
  .cuenta-de .picar { margin-top: 0; }
}