/* ===========================================================================
   EL ANOTADOR
   ---------------------------------------------------------------------------
   Esta pantalla ya vivía en el tablero antes de que el tablero tuviera
   nombre: el verde de aquí (#0f1f17) y el del sistema (#0E1F17) eran casi
   el mismo color. De hecho el sistema salió de esta pantalla, que era la
   única de las cinco que parecía de béisbol.

   Así que aquí no cambia el aspecto: cambia de dónde salen los colores, que
   ahora es `marca.css`. Lo que se queda propio son dos cosas, a propósito:

     · El rojo y el azul de las teclas. No son colores de marca, son colores
       de DATO: hit / se embasa / out. Mandan dentro de esta pantalla y no
       significan nada afuera.
     · El radio grande. Un tablero no tiene esquinas redondas, pero una
       tecla que se toca con el pulgar sí.
   =========================================================================== */
:root {
  color-scheme: dark;
  --fondo:  var(--tablero);
  --panel:  var(--tablero-alto);
  --panel2: #203C2D;              /* un escalón más: la tecla levantada */
  --linea:  var(--raya-tablero);
  --texto:  var(--sobre-tablero);
  --tenue:  var(--sobre-tablero-2);
  --tiza:   var(--cal);
  /*  --arcilla NO se redeclara aquí. `marca.css` ya la define, y escribir
      `--arcilla: var(--arcilla)` es un ciclo: la variable queda inválida y
      todo lo que la use —la raya del diamante, la goma, la entrada que se
      está jugando— se queda sin color. Costó un diamante sin contorno.  */
  --verde:   var(--pasto);
  --amarillo: var(--ocre);
  --rojo: #E05A4F;                /* out */
  --azul: #5AA7E0;                /* se embasa */
  --radio: 14px;
  --sombra: 0 8px 28px rgba(0,0,0,.35);
  /* Zonas seguras: env() en navegador/PWA; --safe-area-inset-* lo inyecta Capacitor en Android */
  --sup: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px));
  --inf: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px));
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--fondo); color: var(--texto);
  font-family: var(--letra); font-size: 16px; line-height: 1.35; overscroll-behavior: none; }
body { padding-bottom: var(--inf); min-height: 100vh; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
.tenue { color: var(--tenue); }
.num { font-variant-numeric: tabular-nums; }

/* Barra superior */
.barra { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: calc(10px + var(--sup)) 16px 10px; background: var(--fondo); border-bottom: 1px solid var(--linea); }
.barra h1 { font-size: 18px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icono { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; background: var(--panel); }
.icono:active { background: var(--panel2); }

.contenido { padding: 14px 16px 110px; max-width: 760px; margin: 0 auto; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 18px; border-radius: 12px; background: var(--panel2); font-weight: 600; }
.btn:active { filter: brightness(1.2); }
.btn.primario { background: var(--verde); color: #08130d; }
.btn.peligro { background: transparent; color: var(--rojo); border: 1px solid var(--rojo); }
.btn.bloque { width: 100%; }
.btn[disabled] { opacity: .4; }

/* Tarjetas de inicio */
.tarjeta { background: var(--panel); border-radius: var(--radio); padding: 14px; margin-bottom: 10px; }
.juego-item { display: flex; align-items: center; gap: 12px; }
.juego-item .marc { font-size: 22px; font-weight: 800; min-width: 74px; text-align: center; }
.juego-item .info { flex: 1; min-width: 0; }
.juego-item .eqs { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-estado { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--panel2); color: var(--tenue); }
.chip-estado.vivo { background: rgba(63,179,112,.18); color: var(--verde); }
.vacio { text-align: center; padding: 40px 10px; color: var(--tenue); }

/* Formularios */
.campo { display: block; margin-bottom: 12px; }
/* Dos campos cortos en una linea: en un telefono angosto se parten solos. */
.dos-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dos-campos .campo { margin-bottom: 12px; min-width: 0; }
@media (max-width: 340px) { .dos-campos { grid-template-columns: 1fr; gap: 0; } }
.campo > span { display: block; font-size: 13px; color: var(--tenue); margin-bottom: 5px; }
.entrada, select.entrada, textarea.entrada { width: 100%; padding: 12px; background: var(--panel); border: 1px solid var(--linea); border-radius: 10px; outline: none; }
.entrada:focus { border-color: var(--verde); }
textarea.entrada { min-height: 170px; font-family: ui-monospace, Menlo, monospace; font-size: 14px; line-height: 1.5; }
.fila { display: flex; gap: 10px; }
.fila > * { flex: 1; }
.segmento { display: flex; background: var(--panel); border-radius: 12px; padding: 4px; gap: 4px; }
.segmento button { flex: 1; min-height: 42px; border-radius: 9px; font-weight: 600; color: var(--tenue); }
.segmento button.on { background: var(--panel2); color: var(--texto); }
.seccion { margin: 22px 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); }
.ayuda { font-size: 13px; color: var(--tenue); margin: -4px 0 12px; }
.check { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.check input { width: 22px; height: 22px; accent-color: var(--verde); }
.error-form { background: rgba(224,90,79,.15); color: #ffb3ab; padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; font-size: 14px; }

/* Pizarra */
.pizarra { overflow-x: auto; background: var(--panel); border-radius: var(--radio); }
.pizarra table { border-collapse: collapse; width: 100%; font-size: 14px; }
.pizarra th, .pizarra td { padding: 6px 7px; text-align: center; min-width: 26px; }
.pizarra th { color: var(--tenue); font-weight: 500; font-size: 12px; }
.pizarra td:first-child, .pizarra th:first-child { text-align: left; position: sticky; left: 0; background: var(--panel); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pizarra .tot { font-weight: 800; border-left: 1px solid var(--linea); }
.pizarra .actual { background: rgba(240,194,75,.15); color: var(--amarillo); }

/* Situación */
.situacion { display: grid; grid-template-columns: 1fr 160px; gap: 10px; margin: 10px 0; }
.sit-info { background: var(--panel); border-radius: var(--radio); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.entrada-txt { font-size: 20px; font-weight: 800; }
.outs { display: flex; gap: 6px; align-items: center; }
.outs i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--rojo); }
.outs i.on { background: var(--rojo); }
.persona { font-size: 14px; }
.persona b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.persona small { color: var(--tenue); }
.diamante { background: var(--panel); border-radius: var(--radio); display: grid; place-items: center; }
.diamante svg { width: 100%; height: auto; }
.ultimo { font-size: 13px; color: var(--tenue); background: var(--panel); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }

/* Teclado de jugadas */
.grupo-t { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); margin: 12px 2px 6px; }
.teclas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tecla { min-height: 58px; border-radius: 12px; background: var(--panel2); font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; padding: 4px; }
.tecla small { font-weight: 500; font-size: 11px; color: var(--tenue); margin-top: 3px; }
.tecla:active { transform: scale(.97); }
.tecla.hit { background: #1d4a33; }
.tecla.hit b { color: #7ee0a6; }
.tecla.emb { background: #21384a; }
.tecla.emb b { color: #9fd0f5; }
.tecla.out { background: #43251f; }
.tecla.out b { color: #ffb0a3; }
.acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }

/* Pestañas inferiores */
.pestanas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; background: var(--panel); border-top: 1px solid var(--linea); padding-bottom: var(--inf); }
.pestanas button { flex: 1; padding: 12px 0 10px; font-size: 13px; color: var(--tenue); font-weight: 600; }
.pestanas button.on { color: var(--verde); box-shadow: inset 0 3px 0 var(--verde); }

/* Box score */
.box h3 { font-size: 15px; margin: 18px 0 8px; }
.box table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--panel); border-radius: 10px; overflow: hidden; }
.box th, .box td { padding: 7px 5px; text-align: center; border-bottom: 1px solid var(--linea); }
.box th { color: var(--tenue); font-weight: 500; font-size: 11px; }
.box td:first-child, .box th:first-child { text-align: left; padding-left: 10px; }
.box tr.total td { font-weight: 800; border-bottom: 0; }
.box .det { font-size: 12px; color: var(--tenue); margin-top: 6px; line-height: 1.6; }

/* Log */
.log-mitad { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--amarillo); margin: 16px 0 6px; }
.log-item { background: var(--panel); border-radius: 10px; padding: 9px 12px; margin-bottom: 6px; font-size: 14px; display: flex; gap: 10px; }
.log-item .n { color: var(--tenue); min-width: 26px; }
.log-item.c { border-left: 3px solid var(--verde); }

/* Hoja inferior */
.hoja { position: fixed; inset: 0; z-index: 20; }
.hoja-fondo { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.hoja-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow-y: auto; background: var(--fondo); border-radius: 20px 20px 0 0; padding: 8px 16px calc(16px + var(--inf)); box-shadow: var(--sombra); max-width: 760px; margin: 0 auto; animation: sube .18s ease-out; }
@keyframes sube { from { transform: translateY(30px); opacity: .5; } }
.agarre { width: 44px; height: 5px; border-radius: 3px; background: var(--linea); margin: 4px auto 12px; }
.hoja h2 { font-size: 19px; }
.hoja .sub { color: var(--tenue); font-size: 14px; margin: 2px 0 12px; }
/* La rejilla de posiciones es una sola: `.def-grid`. Aqui habia otra,
   `.posiciones`, de botones cuadrados de 40px para una sola letra; cuando
   se agrego el «¿quien erro?» se reuso por error y el nombre del jugador
   no cabia — se leia «P.Jorg M.». */
.pos-txt { min-width: 70px; font-weight: 800; font-size: 18px; color: var(--amarillo); }
.corredor { background: var(--panel); border-radius: 12px; padding: 10px; margin-bottom: 8px; }
.corredor .quien { font-weight: 600; margin-bottom: 8px; display: flex; justify-content: space-between; gap: 8px; }
.corredor .quien small { color: var(--tenue); font-weight: 500; }
.destinos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.destinos button { min-height: 42px; border-radius: 10px; background: var(--panel2); font-weight: 700; font-size: 14px; }
.destinos button.on { background: var(--azul); color: #07131c; }
.destinos button.on.anota { background: var(--verde); }
.destinos button.on.outb { background: var(--rojo); color: #fff; }
.destinos button:disabled { opacity: .25; }
.contador { display: flex; align-items: center; gap: 10px; }
.contador button { width: 40px; height: 40px; border-radius: 10px; background: var(--panel2); font-size: 20px; font-weight: 700; }
.pie-hoja { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; margin-top: 14px; }
.lista-opc button { display: flex; width: 100%; text-align: left; padding: 14px; background: var(--panel); border-radius: 12px; margin-bottom: 8px; font-weight: 600; justify-content: space-between; }

/* Aviso */
.aviso { position: fixed; left: 12px; right: 12px; bottom: calc(76px + var(--inf)); z-index: 30; background: #fff; color: #10201a; border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; box-shadow: var(--sombra); max-width: 520px; margin: 0 auto; font-size: 14px; }
.aviso span { flex: 1; }
.aviso button { font-weight: 800; color: #1a7a47; padding: 4px 6px; }
.aviso.error { background: #ffe1dc; }

.fin { background: rgba(240,194,75,.12); border: 1px solid rgba(240,194,75,.4); color: var(--amarillo); border-radius: var(--radio); padding: 14px; margin: 10px 0; text-align: center; font-weight: 700; }

@media (min-width: 640px) {
  .teclas { grid-template-columns: repeat(6, 1fr); }
  .situacion { grid-template-columns: 1fr 200px; }
}
.aviso[hidden], .hoja[hidden] { display: none; }

/* Selector de defensores por posición */
.def-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 2px 6px; }
.def-borrar { font-size: 13px; font-weight: 600; color: var(--tenue); padding: 4px 8px; border-radius: 8px; background: var(--panel); }
.def-sel { font-weight: 800; font-size: 17px; color: var(--rojo); margin: 0 2px 8px; min-height: 22px; }
.def-sel.on { color: var(--amarillo); }
.def-sel small { color: var(--tenue); font-weight: 500; font-size: 13px; }
.def-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.def-grid button { min-height: 54px; border-radius: 10px; background: var(--panel2); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 2px; line-height: 1.1; }
.def-grid button b { font-size: 16px; }
.def-grid button small { font-size: 10.5px; color: var(--tenue); margin-top: 3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.def-grid button.on { background: var(--amarillo); color: #1c1606; }
.def-grid button.on small { color: #4a3d10; }
/* Pero en la de los errores, el escogido va en rojo: en esta pantalla el
   rojo ya es el color del out y del error, y amarillo diria «escogido»
   cuando lo que dice es «este fallo». */
.def-grid.errores button.on { background: var(--rojo); color: #fff; }
.def-grid.errores button.on small { color: #ffdcd8; }

.fin-det { font-size: 13px; font-weight: 500; color: var(--tenue); margin-top: 6px; }

/* Estado de la subida. Solo aparece cuando hay algo que decir. */
.sync {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 10px;
  background: var(--panel2); color: var(--tenue);
  font-size: 13px; text-align: center;
}
.sync.malo { background: rgba(214,106,92,.15); color: var(--rojo); font-weight: 600; }

/* Alineación del día: nombre, estado y posición en una fila */
.fila-alin { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fila-alin .quitar {
  flex: 1; min-width: 0; text-align: left; background: var(--panel2);
  border-radius: 10px; padding: 12px 14px; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pos-sel {
  flex: none; width: 76px; min-height: 44px; padding: 0 6px;
  background: var(--panel2); color: var(--texto); border: 1px solid var(--linea);
  border-radius: 10px; font: inherit; font-size: 15px; font-weight: 600;
  text-align: center;
}
.chip-def {
  flex: none; padding: 8px 10px; border-radius: 10px; font-size: 12px;
  background: transparent; color: var(--tenue); border: 1px solid var(--linea);
}
.chip-def.on { background: var(--verde); color: #08130d; border-color: var(--verde); font-weight: 700; }