/* ============================================================
   pozos-bahia — hoja de estilos
   Movil primero. Tipografia del sistema: no cargamos fuentes de
   Google ni de ningun tercero, para no filtrar la IP de nadie.
   ============================================================ */
:root {
  --tinta:      #14181d;
  --tinta-baja: #5b6570;
  --papel:      #ffffff;
  --fondo:      #f4f5f7;
  --borde:      #dfe3e8;
  --acento:     #c0392b;
  --radio:      12px;
  --sombra:     0 2px 10px rgba(0, 0, 0, .1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinta:      #eef1f4;
    --tinta-baja: #9aa4ae;
    --papel:      #1a1e23;
    --fondo:      #101317;
    --borde:      #2c333b;
    --sombra:     0 2px 10px rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fondo);
  color: var(--tinta);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
}

/* ---------- barra superior ---------- */
.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-top)) 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
}

.barra h1 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.barra h1 span {
  color: var(--tinta-baja);
  font-weight: 500;
}

.icono {
  width: 32px;
  height: 32px;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: transparent;
  color: var(--tinta-baja);
  font-size: 1rem;
  cursor: pointer;
}

/* ---------- contadores ---------- */
.numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
}

.numeros div {
  padding: 10px 8px 12px;
  text-align: center;
  border-right: 1px solid var(--borde);
}

.numeros div:last-child { border-right: 0; }

.numeros strong {
  display: block;
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.numeros span {
  font-size: .72rem;
  color: var(--tinta-baja);
}

/* ---------- mapa ---------- */
#mapa {
  flex: 1;
  min-height: 0;
  background: var(--fondo);
}

.chinche span {
  display: block;
  width: 18px;
  height: 18px;
  margin: 2px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

/* ---------- boton flotante ---------- */
.flotante {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--acento);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
  cursor: pointer;
}

.flotante svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* ---------- dialogos ---------- */
dialog {
  width: min(520px, 100vw);
  max-height: 92vh;
  margin: auto auto 0;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: var(--radio) var(--radio) 0 0;
  background: var(--papel);
  color: var(--tinta);
  overflow-y: auto;
}

@media (min-width: 560px) {
  dialog {
    margin: auto;
    border-radius: var(--radio);
  }
}

dialog::backdrop { background: rgba(0, 0, 0, .55); }

dialog h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  letter-spacing: -.01em;
}

dialog h3 {
  margin: 18px 0 4px;
  font-size: .95rem;
}

dialog p { margin: 0 0 10px; }

.cerrar {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--fondo);
  color: var(--tinta-baja);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.ayuda { color: var(--tinta-baja); font-size: .9rem; }

.nota {
  margin: 10px 0;
  color: var(--tinta-baja);
  font-size: .8rem;
}

.fina {
  margin-top: 18px;
  color: var(--tinta-baja);
  font-size: .74rem;
}

.fina a { color: inherit; }

/* ---------- ficha ---------- */
#ficha-foto {
  width: 100%;
  max-height: 46vh;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 12px;
  background: var(--fondo);
}

.meta {
  color: var(--tinta-baja);
  font-size: .85rem;
}

.comentario:empty { display: none; }

.acciones {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.acciones button { flex: 1; }

/* ---------- botones ---------- */
.principal, .secundario {
  width: 100%;
  margin-top: 12px;
  padding: 13px;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}

.principal {
  border: 0;
  background: var(--acento);
  color: #fff;
}

.principal:disabled {
  background: var(--borde);
  color: var(--tinta-baja);
  cursor: not-allowed;
}

.secundario {
  border: 1px solid var(--borde);
  background: transparent;
  color: var(--tinta);
}

/* ---------- paso 1: foto ---------- */
.soltar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 190px;
  margin: 12px 0;
  border: 2px dashed var(--borde);
  border-radius: 10px;
  background: var(--fondo);
  color: var(--tinta-baja);
  cursor: pointer;
  overflow: hidden;
}

.soltar img {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
}

/* ---------- paso 2: mini mapa ---------- */
#mini-mapa {
  height: 260px;
  margin: 12px 0 0;
  border-radius: 10px;
  overflow: hidden;
}

.pin-fijo {
  position: relative;
  height: 0;
  pointer-events: none;
}

.pin-fijo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 130px;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

/* ---------- paso 3: gravedad ---------- */
.gravedad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0 16px;
}

.gravedad button {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 6px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: transparent;
  color: var(--tinta);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
}

.gravedad button small {
  color: var(--tinta-baja);
  font-size: .68rem;
  font-weight: 400;
  line-height: 1.25;
}

.gravedad button.elegido {
  border-color: var(--acento);
  box-shadow: inset 0 0 0 1px var(--acento);
}

.campo {
  display: block;
  color: var(--tinta-baja);
  font-size: .85rem;
}

.campo textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--fondo);
  color: var(--tinta);
  font: inherit;
  font-size: .92rem;
  resize: vertical;
}

/* ---------- duplicados ---------- */
.cercano {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borde);
}

.cercano img {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
}

.cercano div { flex: 1; min-width: 0; }

.cercano strong {
  display: block;
  font-size: .9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cercano small {
  color: var(--tinta-baja);
  font-size: .76rem;
}

.cercano button {
  flex: none;
  padding: 8px 12px;
  border: 1px solid var(--acento);
  border-radius: 8px;
  background: transparent;
  color: var(--acento);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- progreso ---------- */
#progreso {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: color-mix(in srgb, var(--papel) 92%, transparent);
}

.giro {
  width: 28px;
  height: 28px;
  border: 3px solid var(--borde);
  border-top-color: var(--acento);
  border-radius: 50%;
  animation: girar .8s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .giro { animation-duration: 2.4s; }
}

/* ---------- panel de moderacion ---------- */
.admin {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

.admin table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}

.admin th, .admin td {
  padding: 8px;
  border-bottom: 1px solid var(--borde);
  text-align: left;
  vertical-align: middle;
}

.admin img {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  object-fit: cover;
}

.admin select, .admin input {
  padding: 7px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
}

.flotante { white-space: nowrap; padding-inline: 20px; }

/* Varias reglas de este archivo fijan display, lo que pisaria el
   display:none que trae [hidden]. Esto lo deja siempre ganando. */
[hidden] { display: none !important; }

/* Leaflet pinta sus capas en z-index 400: el pin tiene que ir por encima. */
.pin-fijo { z-index: 500; }
.pin-fijo::after { z-index: 500; }