/* Diseño para una mano, al sol, con guantes. Botones grandes, contraste alto,
   fondo oscuro (gasta menos batería en OLED y se lee mejor bajo el sol). */

:root {
  --fondo: #0b1410;
  --tarjeta: #14201a;
  --borde: #24352b;
  --texto: #e8f0ea;
  --tenue: #93a89c;
  --verde: #22c55e;
  --verde-oscuro: #14532d;
  --ambar: #fbbf24;
  --rojo: #f87171;
  --azul: #38bdf8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 3rem;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, sans-serif;
  -webkit-text-size-adjust: 100%;
}

#app { padding: 0.75rem; max-width: 40rem; margin: 0 auto; }

/* estado del GPS, siempre visible arriba */
.gps {
  position: sticky; top: 0; z-index: 10;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem; font-weight: 600;
  text-align: center;
  background: var(--borde); color: var(--tenue);
}
.gps.bueno   { background: var(--verde-oscuro); color: #bbf7d0; }
.gps.regular { background: #422006; color: var(--ambar); }
.gps.malo    { background: #450a0a; color: var(--rojo); }

.cabecera { padding: 0.5rem 0 1rem; }
.cabecera h1 { margin: 0.25rem 0; font-size: 1.5rem; }
.sub { margin: 0; color: var(--tenue); font-size: 0.9rem; }
.chico { font-size: 0.82rem; color: var(--tenue); }
.centrado { text-align: center; }
.grande { font-size: 1.35rem; font-weight: 700; }
.ok { color: var(--verde); }
.aviso { color: var(--ambar); }

.volver {
  background: none; border: 0; color: var(--azul);
  font-size: 1rem; padding: 0.5rem 0; cursor: pointer;
}

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 0.9rem;
  padding: 1rem;
  margin-bottom: 0.85rem;
}
.tarjeta h2 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.tarjeta.destacada { border-color: var(--verde); }

/* botón de lote, con su progreso */
.tarjeta.lote {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  text-align: left; color: inherit; font: inherit; cursor: pointer;
}
.tarjeta.lote.completo { border-color: var(--verde); }
.progreso { display: flex; align-items: center; gap: 0.5rem; }
.tilde { color: var(--verde); font-size: 1.5rem; }

.boton {
  display: block; width: 100%;
  padding: 1rem; margin-bottom: 0.75rem;
  border: 1px solid var(--borde); border-radius: 0.75rem;
  background: var(--tarjeta); color: var(--texto);
  font-size: 1.05rem; font-weight: 600;
  cursor: pointer;
}
.boton.primario { background: var(--verde); color: #04250f; border-color: var(--verde); }
.boton.apagado  { opacity: 0.45; }
.boton:disabled { cursor: not-allowed; }

label { display: block; margin-bottom: 0.75rem; color: var(--tenue); font-size: 0.88rem; }
input, select {
  display: block; width: 100%; margin-top: 0.3rem;
  padding: 0.8rem; border-radius: 0.6rem;
  border: 1px solid var(--borde); background: var(--fondo); color: var(--texto);
  font-size: 1.05rem;
}

/* el mapita */
.mapa {
  width: 100%; height: 20rem;
  border: 1px solid var(--borde); border-radius: 0.9rem;
  margin-bottom: 0.75rem;
  touch-action: none;
}
.motivo { margin: 0 0 0.75rem; font-size: 0.9rem; text-align: center; min-height: 1.4em; }

/* cronómetro del punto */
.cronometro {
  font-size: 3.2rem; font-weight: 800; text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 0.75rem 0; margin-bottom: 0.15rem;
}
.cronometro.corriendo { color: var(--ambar); }
.cronometro.bien      { color: var(--verde); }

/* contador de daño: el campo más importante de la app */
.contador { display: flex; align-items: center; gap: 0.75rem; margin: 0.5rem 0; }
.contador input {
  flex: 1; text-align: center; font-size: 2.5rem; font-weight: 700; padding: 0.5rem;
}
.paso {
  width: 4rem; height: 4rem; flex: none;
  border-radius: 0.75rem; border: 1px solid var(--borde);
  background: var(--fondo); color: var(--texto);
  font-size: 2rem; cursor: pointer;
}

.opciones { display: flex; gap: 0.75rem; }
.opcion {
  flex: 1; padding: 1.1rem;
  border-radius: 0.75rem; border: 1px solid var(--borde);
  background: var(--fondo); color: var(--texto);
  font-size: 1.1rem; font-weight: 600; cursor: pointer;
}
.opcion.elegida { background: var(--verde); color: #04250f; border-color: var(--verde); }

.miniaturas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.miniaturas figure { margin: 0; width: 5.5rem; }
.miniaturas img { width: 100%; border-radius: 0.5rem; display: block; }
.miniaturas figcaption { font-size: 0.7rem; color: var(--tenue); text-align: center; }
.req { float: right; font-size: 0.75rem; color: var(--ambar); font-weight: 400; }

.rejilla-trampas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.trampa { margin: 0; font-size: 0.8rem; }
.trampa input { padding: 0.6rem; text-align: center; font-size: 1.2rem; }

.fila {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--borde);
}
.fila:last-child { border-bottom: 0; }
.historial .fila { font-size: 0.9rem; }

.cargando { text-align: center; color: var(--tenue); padding: 3rem 0; }