/* Paleta cálida/rural: verde oliva oscuro + terracota como acento, sobre
   fondo crema en vez de blanco puro. Nada de tipografías externas — en
   zona rural el dato móvil no siempre es bueno, así que se usa la fuente
   del sistema en vez de sumar una dependencia de red solo por estética. */
:root {
  --color-primario: #33523a;
  --color-primario-oscuro: #253c29;
  --color-acento: #c1663f;
  --color-acento-suave: #f3ded0;
  --color-fondo: #fdfaf5;
  --color-fondo-alterno: #f5eee1;
  --color-texto: #382f26;
  --color-texto-secundario: #7a6a58;
  --color-borde: #e4d7c3;
  --color-disponible: #5c7f3f;
  --color-reservado: #d1912f;
  --color-vendido: #b8452f;
  --sombra-calida: 0 -4px 16px rgba(56, 38, 20, 0.22);
  --sombra-calida-suave: 0 1px 4px rgba(56, 38, 20, 0.18);
  --radio-chico: 8px;
  --radio-mediano: 12px;
  --radio-grande: 18px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--color-texto);
  background: var(--color-fondo);
  -webkit-tap-highlight-color: transparent;
}

button {
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

button:active {
  transform: scale(0.97);
}

#encabezado {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--color-primario);
  color: #fff;
  padding: 10px 14px;
  box-shadow: 0 2px 8px rgba(37, 60, 41, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Sin encabezado no hay forma de llegar al menú (el ☰ vive ahí adentro),
   así que ocultarlo alcanza para dejar "modo embed" en solo mapa/catálogo
   público — cargar/editar/administrar sigue existiendo, pero solo desde
   la URL real de la app, nunca desde el iframe embebido. */
.modo-embed #encabezado {
  display: none;
}

#encabezado h1 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

#barra-sesion {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
}

#sesion-activa {
  display: flex;
  align-items: center;
  gap: 8px;
}

#sesion-email {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#barra-sesion button {
  background: rgba(255,255,255,.16);
  color: #fff;
  border: none;
  border-radius: var(--radio-chico);
  padding: 6px 10px;
  font-size: 0.78rem;
  cursor: pointer;
}

#barra-sesion button:hover {
  background: rgba(255,255,255,.26);
}

#btn-menu {
  background: rgba(255,255,255,.16);
  color: #fff;
  border: none;
  border-radius: var(--radio-chico);
  padding: 6px 10px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

#btn-menu:hover {
  background: rgba(255,255,255,.26);
}

/* Menú lateral (drawer): todas las secciones/subsecciones de la app,
   pensado para poder sumar más sin volver a amontonar botones en el
   header — ver comentario en index.html. */
#drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1800;
  background: rgba(37, 30, 20, 0.4);
}

#drawer-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1900;
  width: 260px;
  max-width: 82vw;
  background: var(--color-fondo);
  box-shadow: 4px 0 16px rgba(56, 38, 20, 0.25);
  padding: 16px 14px calc(34px + 16px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#drawer-menu .panel-header {
  margin-bottom: 8px;
}

.drawer-grupo {
  margin: 4px 0;
  border-top: 1px solid var(--color-borde);
}

/* Título de cada subsección del menú: plegable, para que la lista no
   se alargue sola a medida que se sumen más secciones/subsecciones. */
.drawer-grupo-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 12px 4px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-texto-secundario);
  cursor: pointer;
}

.drawer-grupo-titulo:hover {
  color: var(--color-texto);
}

.drawer-grupo-flecha {
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.15s ease;
}

.drawer-grupo-titulo.abierto .drawer-grupo-flecha {
  transform: rotate(90deg);
}

.drawer-grupo-items {
  padding-bottom: 6px;
}

.drawer-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radio-chico);
  padding: 10px 8px;
  margin: 2px 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-texto);
  cursor: pointer;
}

.drawer-item:hover {
  background: var(--color-fondo-alterno);
}

#btn-ver-catastro-cercano.activo,
#btn-ver-lista.activo {
  background: var(--color-acento);
  color: #fff;
  font-weight: 700;
}

/* "Cargar a mano" (antes "+ Lote"): sigue existiendo para loteos que
   todavía no están en el catastro, pero ya no es la forma principal de
   cargar un lote — se lo baja de tono para no competir con "+ Manzana" /
   "+ Parcela", que traen datos oficiales. */
.btn-secundario {
  opacity: 0.6;
}

#catastro-cercano-mensaje,
#mensaje-carga-inicial {
  position: fixed;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: rgba(37, 30, 20, 0.92);
  color: #fff;
  font-size: 0.78rem;
  padding: 8px 14px;
  border-radius: var(--radio-chico);
  max-width: 90vw;
  text-align: center;
}

#btn-flotante-catastro {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 46px;
  z-index: 1100;
  background: var(--color-primario);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: var(--sombra-calida-suave);
  cursor: pointer;
}

#btn-flotante-catastro:hover {
  background: var(--color-primario-oscuro);
}

/* Barra flotante del editor de forma del lote — ver iniciarEdicionPoligono
   en app.js. Arriba del mapa (no abajo, para no tapar el dedo/mouse
   mientras se arrastra una esquina cerca del borde inferior). */
#editor-poligono-barra {
  position: fixed;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-mediano);
  box-shadow: var(--sombra-calida-suave);
  padding: 10px 14px;
  max-width: 92vw;
  width: 320px;
}

.editor-poligono-ayuda {
  margin: 0 0 8px;
  font-size: 0.8rem;
  color: var(--color-texto-secundario);
  text-align: center;
}

#editor-poligono-medidas {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.82rem;
  margin-bottom: 10px;
}

#editor-poligono-medidas span {
  color: var(--color-texto-secundario);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#editor-poligono-medidas strong {
  color: var(--color-primario-oscuro);
  font-size: 0.95rem;
}

#editor-poligono-barra .botones-alternativos button {
  font-size: 0.85rem;
}

/* Aviso + botón "Simplificar forma" — solo aparece cuando se detectan
   esquinas casi en línea recta (ver detectarVerticesCasiColineales en
   app.js), no siempre. */
#editor-poligono-simplificar {
  margin-bottom: 10px;
  padding: 6px 8px;
  background: var(--color-fondo-alterno, rgba(0, 0, 0, 0.04));
  border-radius: var(--radio-chico);
}

#editor-poligono-simplificar .editor-poligono-ayuda {
  margin: 0 0 6px;
}

#editor-poligono-simplificar button {
  font-size: 0.8rem;
  padding: 4px 10px;
}

/* Bloque "ajustar un lado a su medida real" dentro de la misma barra
   flotante — ver seleccionarLado/aplicarLargoDeLado en app.js. */
#editor-poligono-lados {
  margin-bottom: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--color-borde);
}

#editor-poligono-lados .editor-poligono-ayuda {
  margin: 0 0 6px;
  text-align: left;
}

.botones-modo-lado {
  margin-bottom: 8px;
}

.botones-modo-lado button {
  font-size: 0.78rem;
  padding: 3px 9px;
  opacity: 0.6;
}

.botones-modo-lado button.activo {
  opacity: 1;
  background: var(--color-primario-oscuro);
  color: #fff;
}

#lista-lados {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  max-height: 110px;
  overflow-y: auto;
}

#lista-lados li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 6px;
  font-size: 0.8rem;
  border-radius: var(--radio-chico);
  cursor: pointer;
}

#lista-lados li:hover {
  background: var(--color-fondo-alterno, rgba(0, 0, 0, 0.05));
}

#lista-lados li.activo {
  background: var(--color-acento);
  color: #fff;
}

#lado-seleccionado-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

#lado-seleccionado-form span {
  flex-basis: 100%;
  font-size: 0.8rem;
  color: var(--color-texto-secundario);
}

#lado-seleccionado-form label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--color-texto-secundario);
}

#lado-seleccionado-form input[type="number"] {
  width: 64px;
  padding: 3px 6px;
  font-size: 0.85rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
}

#lado-seleccionado-form button {
  font-size: 0.8rem;
  padding: 4px 10px;
}

#lado-seleccionado-form .editor-poligono-ayuda {
  font-size: 0.72rem;
  margin: 2px 0 0;
}

/* Marcador arrastrable en cada esquina del lote, mientras se ajusta la
   forma — circulito bien visible y con área de toque grande (importa en
   celular, no solo con mouse). */
.marcador-vertice-edicion {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--color-acento);
  box-shadow: 0 1px 4px rgba(56, 38, 20, 0.4);
  cursor: grab;
}

.marcador-vertice-edicion:active {
  cursor: grabbing;
}

/* Cartel al pasar el mouse sobre un lote cargado (ver bindTooltip en
   cargarLotesDesdeFirestore) — Leaflet trae su propio estilo de
   tooltip por default, blanco/genérico, no combina con el resto. */
.tooltip-lote-mapa {
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
  box-shadow: var(--sombra-calida-suave);
  color: var(--color-texto);
  font-size: 0.78rem;
  line-height: 1.4;
  padding: 8px 10px;
}

.tooltip-lote-mapa::before {
  border-top-color: var(--color-borde);
}

.tooltip-lote-titulo {
  font-weight: 700;
  color: var(--color-primario-oscuro);
  margin-bottom: 2px;
}

/* Número de parcela sobre cada polígono de referencia del catastro
   ("Ver catastro cercano"), imitando el look del visor oficial. */
.etiqueta-parcela-catastro {
  background: none;
  border: none;
  box-shadow: none;
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  text-shadow: 0 0 3px #000, 0 0 3px #000;
}

.etiqueta-parcela-catastro::before {
  display: none;
}

#mapa {
  position: absolute;
  top: 44px;
  bottom: 34px;
  left: 0;
  right: 0;
}

/* "Modo embed" (?embed=1, la clase la pone un script inline en <head> —
   ver index.html): sin encabezado, el mapa arranca desde arriba del
   todo. Ver .modo-embed #encabezado más abajo, junto al resto de las
   reglas de layout — se mantiene acá para que quede junto a #mapa, no
   por orden alfabético del archivo. */
.modo-embed #mapa {
  top: 0;
}

/* Leaflet hace los polígonos enfocables por accesibilidad (tabindex),
   así que al tocar un lote el navegador le dibuja su contorno de foco
   por default — un rectángulo recto alrededor de todo el polígono, sin
   relación con su forma real (se nota fuerte en lotes irregulares).
   Se saca: no es una selección que hayamos diseñado, es un efecto del
   navegador que quedaba feo y confuso. */
#mapa .leaflet-interactive:focus {
  outline: none;
}

#leyenda-legal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--color-acento-suave);
  color: var(--color-primario-oscuro);
  font-size: 0.72rem;
  text-align: center;
  padding: 6px 8px;
  border-top: 1px solid var(--color-borde);
}

/* Hoja inferior (bottom sheet): patrón compartido por la ficha del lote y
   los formularios de login / carga de lote, para uso con una mano en celular */
.hoja-inferior {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1500;
  background: var(--color-fondo);
  border-radius: var(--radio-grande) var(--radio-grande) 0 0;
  box-shadow: var(--sombra-calida);
  padding: 22px 18px calc(34px + 16px);
  max-height: 70vh;
  overflow-y: auto;
}

/* Barrita de agarre arriba de cada hoja, para que se sienta como un
   panel que se desliza y no como un recuadro pegado a la pantalla. */
.hoja-inferior::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-borde);
}

.oculto {
  display: none !important;
}

/* Antes era una "×" suelta sin fondo — poco visible, y hacía que
   tentara más usar el botón "atrás" del navegador para salir de una
   hoja/panel (que no cierra nada acá adentro: te saca de la app entera,
   porque esto no es navegación real de páginas). Ahora es un botón con
   forma y contraste propios, para que se note que hay algo para tocar
   ahí y no haga falta recurrir al del navegador. */
.btn-cerrar {
  position: absolute;
  top: 8px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--color-fondo-alterno);
  border: 1px solid var(--color-borde);
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--color-texto-secundario);
  cursor: pointer;
}

.btn-cerrar:hover {
  background: var(--color-borde);
  color: var(--color-texto);
}

#ficha-titulo {
  margin: 0 46px 10px 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primario-oscuro);
}

.ficha-datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  margin: 0 0 16px;
  font-size: 0.92rem;
  align-items: center;
}

.ficha-datos dt {
  font-weight: 600;
  color: var(--color-texto-secundario);
}

.ficha-datos dd {
  margin: 0;
}

.ficha-botones {
  display: flex;
  gap: 10px;
}

.ficha-botones button {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: var(--radio-mediano);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

#btn-como-llegar {
  background: var(--color-primario);
  color: #fff;
}

#btn-como-llegar:hover {
  background: var(--color-primario-oscuro);
}

#btn-estoy-yendo {
  background: var(--color-fondo-alterno);
  color: var(--color-texto);
}

#btn-estoy-yendo:hover {
  background: var(--color-borde);
}

.btn-peligro {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: none;
  border-radius: var(--radio-mediano);
  background: none;
  color: var(--color-vendido);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

/* "Editar lote" en la ficha: mismo lugar/tamaño que "Borrar lote", pero
   con el color primario en vez de rojo — no es una acción destructiva. */
.btn-editar-ficha {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--color-primario);
  border-radius: var(--radio-mediano);
  background: none;
  color: var(--color-primario);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-editar-ficha:hover {
  background: var(--color-fondo-alterno);
}

#compartir-lote-mensaje {
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-primario);
  font-weight: 600;
  margin: 6px 0 0;
  word-break: break-all;
  user-select: text;
}

/* Fotos del lote (Cloudinary) — mismo look de "caja" que
   #ficha-interesados, ver renderFotos en app.js. */
#ficha-fotos {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-mediano);
  background: var(--color-fondo-alterno);
  padding: 10px 12px 12px;
  margin-bottom: 12px;
}

.ficha-fotos-titulo {
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-texto-secundario);
}

#galeria-fotos-lote {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

#galeria-fotos-lote:empty {
  margin-bottom: 0;
}

.foto-lote {
  position: relative;
  width: 76px;
  height: 76px;
}

.foto-lote img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radio-chico);
  cursor: pointer;
  display: block;
}

.btn-borrar-foto {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--color-vendido);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

#subir-foto-label {
  display: inline-block;
  cursor: pointer;
}

#ficha-foto-cargando {
  font-size: 0.8rem;
  color: var(--color-texto-secundario);
  margin: 6px 0 0;
}

/* Lista de interesados por lote (mini-CRM liviano) — mismo look de
   "caja" que .fieldset-servicios/.permisos-seccion, para que se sienta
   consistente con el resto de la ficha. */
#ficha-interesados {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-mediano);
  background: var(--color-fondo-alterno);
  padding: 10px 12px 12px;
  margin-bottom: 12px;
}

.ficha-interesados-titulo {
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-texto-secundario);
}

#lista-interesados {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#lista-interesados:empty {
  display: none;
}

.fila-interesado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  background: var(--color-fondo);
  border-radius: var(--radio-chico);
  padding: 6px 8px;
  font-size: 0.82rem;
}

.fila-interesado-datos strong {
  color: var(--color-texto);
}

.fila-interesado-datos span {
  color: var(--color-texto-secundario);
}

.fila-interesado button {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--color-vendido);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0;
}

#formulario-interesado {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

#formulario-interesado input {
  font: inherit;
  font-size: 0.85rem;
  padding: 8px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
  background: #fff;
  color: var(--color-texto);
}

#formulario-interesado button[type="submit"] {
  border: 1px dashed var(--color-borde);
  border-radius: var(--radio-chico);
  background: none;
  color: var(--color-texto-secundario);
  padding: 8px;
  font-size: 0.85rem;
  cursor: pointer;
}

#formulario-interesado button[type="submit"]:hover {
  background: var(--color-fondo);
  color: var(--color-texto);
}

/* Panel de navegación a pie con brújula */
#panel-navegacion {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(37, 60, 41, 0.95);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 24px;
}

/* El "×" genérico de .btn-cerrar se ancla a top:8px/right:12px de su
   propio contenedor posicionado — para el resto de las hojas/paneles
   (que arrancan más abajo en la pantalla) eso cae bien, pero este panel
   es el único que cubre TODA la pantalla desde arriba (inset:0), así
   que sin este ajuste el "×" termina en el mismo punto que "Ingresar"/el
   estado de sesión del header, que se transparenta debajo (el fondo es
   95% opaco, no 100%) — reportado en vivo, "se superpone". Mismo offset
   (54px) que ya usa la leyenda de colores del mapa para despejar el
   header. */
#panel-navegacion .btn-cerrar {
  top: 54px;
}

#brujula-flecha {
  font-size: 5rem;
  line-height: 1;
  transition: transform 0.15s ease-out;
  transform: rotate(0deg);
}

#nav-mensaje {
  font-size: 1.1rem;
  max-width: 320px;
}

/* Colores de los lotes según estado (usados desde app.js) */
.leyenda-estados {
  position: absolute;
  top: 54px;
  left: 8px;
  z-index: 900;
  background: rgba(253, 250, 245, .94);
  border-radius: var(--radio-mediano);
  padding: 8px 10px;
  font-size: 0.72rem;
  box-shadow: var(--sombra-calida-suave);
}

.leyenda-estados div {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0;
}

.leyenda-estados span {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

/* Formularios: login, carga de lote, y los del panel de administración
   (perfiles/usuarios) — todos comparten el mismo look. */
#formulario-login,
#formulario-lote,
#formulario-perfil,
#formulario-usuario,
#formulario-editar-lote,
#formulario-sector {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

#formulario-login label,
#formulario-lote label,
#formulario-perfil label,
#formulario-usuario label,
#formulario-editar-lote label,
#formulario-sector label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-texto-secundario);
}

#formulario-login input,
#formulario-lote input,
#formulario-lote select,
#formulario-lote textarea,
#formulario-perfil input,
#formulario-usuario input,
#formulario-usuario select,
#formulario-editar-lote input,
#formulario-editar-lote select,
#formulario-editar-lote textarea,
#formulario-sector input {
  font: inherit;
  font-weight: 400;
  color: var(--color-texto);
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
  padding: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#formulario-login input:focus,
#formulario-lote input:focus,
#formulario-lote select:focus,
#formulario-lote textarea:focus,
#formulario-perfil input:focus,
#formulario-usuario input:focus,
#formulario-usuario select:focus,
#formulario-editar-lote input:focus,
#formulario-editar-lote select:focus,
#formulario-editar-lote textarea:focus,
#formulario-sector input:focus {
  outline: none;
  border-color: var(--color-primario);
  box-shadow: 0 0 0 3px rgba(51, 82, 58, 0.15);
}

#formulario-lote textarea {
  min-height: 90px;
  font-family: ui-monospace, monospace;
  font-size: 0.82rem;
  resize: vertical;
}

#formulario-editar-lote textarea {
  min-height: 70px;
  resize: vertical;
}

.fieldset-servicios {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-mediano);
  background: var(--color-fondo-alterno);
  padding: 10px 12px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.fieldset-servicios legend {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-texto-secundario);
  padding: 0 4px;
}

.opcion-servicio {
  flex-direction: row !important;
  align-items: center;
  gap: 6px !important;
  font-weight: 400 !important;
  color: var(--color-texto) !important;
}

.opcion-servicio input[type="checkbox"] {
  width: auto;
  padding: 0;
}

/* Árbol de permisos en "Perfiles de seguridad": secciones (Lotes,
   Administración...) con un checkbox "maestro" que tilda/destilda a
   todos sus permisos hijos de una — ver PERMISOS_SECCIONES en app.js. */
.permisos-arbol-titulo {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-texto-secundario);
  margin: 0 0 -4px;
}

.permisos-seccion {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-mediano);
  background: var(--color-fondo-alterno);
  padding: 10px 12px;
}

.permisos-seccion + .permisos-seccion {
  margin-top: 8px;
}

.permisos-seccion-titulo {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px !important;
  font-weight: 700 !important;
  color: var(--color-texto) !important;
}

.permisos-seccion-titulo input[type="checkbox"] {
  width: auto;
  padding: 0;
}

.permisos-seccion-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 0 24px;
}

/* Chips de servicios: reusados en la ficha del lote y en la vista en
   grilla. Sin dato cargado (lotes importados del catastro, que no trae
   este dato) se distingue de "no tiene el servicio": ahí no se muestra
   ningún chip, ver renderServicios() en app.js. */
.chip-servicio {
  display: inline-block;
  font-size: 0.8rem;
  padding: 3px 8px;
  border-radius: var(--radio-chico);
  margin: 0 4px 4px 0;
  background: var(--color-acento-suave);
  color: var(--color-primario-oscuro);
  opacity: 1;
}

.chip-servicio.sin-servicio {
  opacity: 0.4;
  filter: grayscale(1);
}

.btn-link {
  background: none;
  border: none;
  color: var(--color-primario);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
}

#editor-servicios {
  margin: -8px 0 16px;
}

#editor-servicios .botones-alternativos {
  margin-top: 10px;
}

#editor-sector {
  margin: -8px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#editor-sector label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-texto-secundario);
}

#editor-sector input {
  font: inherit;
  font-weight: 400;
  color: var(--color-texto);
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
  padding: 10px;
}

#editor-sector .botones-alternativos {
  margin-top: 2px;
}

#formulario-login button[type="submit"],
#formulario-lote button[type="submit"],
#formulario-perfil button[type="submit"],
#formulario-usuario button[type="submit"],
#formulario-editar-lote button[type="submit"],
#formulario-sector button[type="submit"] {
  background: var(--color-primario);
  color: #fff;
  border: none;
  border-radius: var(--radio-mediano);
  padding: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

#formulario-login button[type="submit"]:hover,
#formulario-lote button[type="submit"]:hover,
#formulario-perfil button[type="submit"]:hover,
#formulario-usuario button[type="submit"]:hover,
#formulario-editar-lote button[type="submit"]:hover,
#formulario-sector button[type="submit"]:hover {
  background: var(--color-primario-oscuro);
}

.mensaje-error {
  color: var(--color-vendido);
  font-size: 0.85rem;
  margin: 0;
}

/* "(vencida desde ...)" junto al estado "Reservado" en la ficha, cuando
   pasó la fecha de "Reservado hasta" sin que nadie actualizara el
   lote — ver textoEstadoConVencimiento en app.js. */
.texto-vencido {
  color: var(--color-vendido);
  font-weight: 600;
}

#lote-area-calculada {
  font-size: 0.82rem;
  color: var(--color-texto-secundario);
  margin: 0;
}

#lote-area-calculada.area-advertencia {
  color: var(--color-vendido);
  font-weight: 600;
}

.texto-ayuda {
  font-size: 0.82rem;
  color: var(--color-texto-secundario);
  margin: 4px 0 12px;
}

#manzana-resultado {
  font-size: 0.85rem;
  margin: 12px 0;
}

#manzana-resultado ul {
  margin: 8px 0 0;
  padding-left: 18px;
  max-height: 30vh;
  overflow-y: auto;
}

#manzana-confirmar {
  width: 100%;
  background: var(--color-primario);
  color: #fff;
  border: none;
  border-radius: var(--radio-mediano);
  padding: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

#manzana-confirmar:hover {
  background: var(--color-primario-oscuro);
}

.botones-alternativos {
  display: flex;
  gap: 8px;
  margin-top: -4px;
}

.botones-alternativos button {
  flex: 1;
  background: var(--color-fondo-alterno);
  color: var(--color-texto);
  border: none;
  border-radius: var(--radio-chico);
  padding: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.botones-alternativos button:hover {
  background: var(--color-borde);
}

#parcela-resultado {
  font-size: 0.85rem;
  margin: 12px 0;
  max-height: 40vh;
  overflow-y: auto;
}

.parcela-candidata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-borde);
}

.parcela-candidata p {
  margin: 0;
  flex: 1;
}

.parcela-candidata button {
  background: var(--color-primario);
  color: #fff;
  border: none;
  border-radius: var(--radio-chico);
  padding: 8px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.parcela-candidata button:hover {
  background: var(--color-primario-oscuro);
}

/* Panel de captura de vértices (GPS o tocando el mapa): barra flotante
   abajo, NO a pantalla completa — en el modo "dibujar en el mapa" el
   corredor tiene que poder ver y tocar el mapa mientras está abierto. */
#panel-captura-vertices {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 34px;
  z-index: 1600;
  background: rgba(37, 30, 20, 0.94);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--sombra-calida);
}

#captura-mensaje {
  font-size: 0.9rem;
  max-width: 400px;
  margin: 0;
}

#captura-contador {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}

.botones-captura {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: 100%;
  max-width: 420px;
}

.botones-captura button {
  flex: 1;
  padding: 12px 6px;
  border: none;
  border-radius: var(--radio-mediano);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

#btn-captura-agregar {
  background: var(--color-disponible);
  color: #fff;
}

#btn-captura-deshacer,
#btn-captura-terminar {
  background: rgba(255,255,255,.15);
  color: #fff;
}

/* Panel de pantalla completa: patrón compartido por "Ver como lista" y
   "Administrar" — a diferencia de las hojas inferiores, son pantallas
   con tablas que necesitan todo el alto disponible, no un panel que
   flota sobre el mapa. */
.panel-pantalla-completa {
  position: fixed;
  inset: 0;
  z-index: 1700;
  background: var(--color-fondo);
  display: flex;
  flex-direction: column;
  padding: 16px 12px calc(34px + 16px);
  overflow-y: auto;
}

/* Sticky en vez de static: estos 5 paneles pueden tener bastante para
   scrollear (grilla de lotes, tabla de usuarios, el Dashboard) y el
   header (con el botón de cerrar) se quedaba arriba del todo — para
   cerrar había que volver a scrollear hasta el principio primero.
   El margen/padding negativo cancela el padding del panel para que la
   franja pegajosa llegue de punta a punta con su propio fondo (si no,
   el contenido se veía pasar por abajo/al costado del header al
   scrollear). */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 5;
  margin: -16px -12px 12px;
  padding: 16px 12px 12px;
  background: var(--color-fondo);
}

.panel-header h2 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--color-primario-oscuro);
}

.panel-header .btn-cerrar {
  position: static;
  flex-shrink: 0;
}

/* Filtros de la vista en grilla: sector/estado, para encontrar un lote
   puntual rápido cuando hay muchos cargados. */
#vista-lista-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 16px;
}

#vista-lista-filtros label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-texto-secundario);
}

#vista-lista-filtros select {
  font: inherit;
  min-width: 160px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
  padding: 8px 10px;
  background: #fff;
  color: var(--color-texto);
}

#vista-lista-sin-resultados {
  color: var(--color-texto-secundario);
  font-size: 0.9rem;
}

#vista-lista-paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--color-texto-secundario);
}

#vista-lista-paginacion button {
  font: inherit;
  font-weight: 600;
  color: var(--color-primario);
  background: var(--color-fondo-alterno);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
  padding: 6px 12px;
  cursor: pointer;
}

#vista-lista-paginacion button:disabled {
  color: var(--color-texto-secundario);
  cursor: default;
  opacity: 0.5;
}

#vista-lista-paginacion button:not(:disabled):hover {
  background: var(--color-borde);
}

#vista-lista-vacio {
  color: var(--color-texto-secundario);
  font-size: 0.9rem;
}

/* La tabla nunca debe desbordar la pantalla horizontalmente — con
   varias columnas (Lote, Sector, Superficie, Estado...) no entra
   cómoda en un celular, así que scrollea ella sola en vez de romper
   el layout de toda la página. */
.tabla-scroll {
  width: 100%;
  overflow-x: auto;
}

.tabla-panel {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-bottom: 16px;
}

.tabla-panel th {
  text-align: left;
  padding: 8px 6px;
  border-bottom: 2px solid var(--color-borde);
  color: var(--color-texto-secundario);
}

.tabla-panel td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--color-borde);
  vertical-align: middle;
}

.tabla-panel tbody tr:nth-child(even) {
  background: var(--color-fondo-alterno);
}

.tabla-panel tr.fila-lote {
  cursor: pointer;
}

.tabla-panel tr.fila-lote:active {
  background: var(--color-acento-suave);
}

.tabla-panel .btn-borrar-fila {
  background: none;
  border: none;
  color: var(--color-vendido);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px;
}

.tabla-panel .btn-editar-fila {
  background: none;
  border: none;
  color: var(--color-primario);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px;
}

.tabla-panel select {
  font: inherit;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
  padding: 4px 6px;
  background: #fff;
  color: var(--color-texto);
}

/* Panel de administración: pestañas Usuarios / Perfiles, para no apilar
   todo en una sola pantalla larga (con varios usuarios cargados se
   pierde de vista rápido cuál es cuál). */
.tabs-admin {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--color-borde);
}

.tab-admin {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 4px;
  margin-bottom: -1px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-texto-secundario);
  cursor: pointer;
}

.tab-admin.activo {
  color: var(--color-primario);
  border-bottom-color: var(--color-primario);
}

.seccion-admin {
  margin-bottom: 28px;
}

#btn-agregar-usuario,
#btn-agregar-perfil,
#btn-agregar-sector {
  width: 100%;
  background: none;
  border: 1px dashed var(--color-primario);
  border-radius: var(--radio-mediano);
  padding: 10px;
  margin-bottom: 12px;
  color: var(--color-primario);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

#btn-agregar-usuario:hover,
#btn-agregar-perfil:hover,
#btn-agregar-sector:hover {
  background: var(--color-fondo-alterno);
}

/* Dashboard — ver dashboard.js. Reusa colores/chips/sombras que ya
   existen en el resto de la app (estados del mapa, chip-servicio,
   sombra-calida-suave) en vez de inventar un lenguaje visual nuevo. */
.dashboard-seccion {
  margin-bottom: 22px;
}

.dashboard-seccion-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}

.dashboard-seccion-titulo h3 {
  margin: 0;
}

.dashboard-seccion h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: var(--color-primario-oscuro);
}

/* Cuántos hay en la lista, a simple vista sin tener que contar filas
   (ej. "Reservas por vencer  3"). Se oculta con 0 — un contador en cero
   al lado del título no suma nada que el texto de "vacío" no diga ya. */
.dashboard-contador {
  display: inline-block;
  background: var(--color-primario);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
  padding: 1px 6px;
  border-radius: 999px;
}

.dashboard-ayuda {
  margin: 0 0 8px;
  font-size: 0.78rem;
  color: var(--color-texto-secundario);
}

.dashboard-vacio {
  font-size: 0.82rem;
  color: var(--color-texto-secundario);
  margin: 0;
}

.dashboard-tarjetas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dashboard-tarjeta {
  flex: 1 1 100px;
  background: var(--color-fondo-alterno);
  border: 1px solid var(--color-borde);
  border-top: 3px solid var(--color-borde);
  border-radius: var(--radio-mediano);
  padding: 10px 12px;
  text-align: center;
  box-shadow: var(--sombra-calida-suave);
}

/* Mismo color por estado que ya usa el mapa (leyenda-estados) y la
   ficha del lote — el dashboard no inventa una paleta de estado propia. */
.dashboard-tarjeta.total { border-top-color: var(--color-primario); }
.dashboard-tarjeta.disponible { border-top-color: var(--color-disponible); }
.dashboard-tarjeta.reservado { border-top-color: var(--color-reservado); }
.dashboard-tarjeta.vendido { border-top-color: var(--color-vendido); }

.dashboard-tarjeta strong {
  display: block;
  font-size: 1.4rem;
  color: var(--color-primario-oscuro);
}

.dashboard-tarjeta span {
  font-size: 0.75rem;
  color: var(--color-texto-secundario);
}

/* Barra de composición del inventario: mismo dato que las 3 tarjetas de
   estado, pero de un vistazo se ve la proporción sin sumar mentalmente.
   Ancho de cada segmento puesto inline desde dashboard.js (% real). */
.dashboard-composicion {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-borde);
  margin-top: 10px;
}

.dashboard-composicion span {
  height: 100%;
}

.dashboard-composicion .disponible { background: var(--color-disponible); }
.dashboard-composicion .reservado { background: var(--color-reservado); }
.dashboard-composicion .vendido { background: var(--color-vendido); }

.dashboard-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dashboard-ranking {
  padding-left: 0;
}

.dashboard-lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--color-fondo-alterno);
  border-radius: var(--radio-chico);
  padding: 7px 10px;
  font-size: 0.82rem;
  cursor: pointer;
  box-shadow: var(--sombra-calida-suave);
}

.dashboard-lista li:hover {
  background: var(--color-borde);
}

.dashboard-lista .dashboard-lote-titulo-grupo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dashboard-lista .dashboard-lote-titulo {
  color: var(--color-texto);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-lista .dashboard-lote-dato {
  color: var(--color-texto-secundario);
  flex-shrink: 0;
}

.dashboard-lista .dashboard-lote-dato.texto-vencido {
  color: var(--color-vendido);
  font-weight: 600;
}

/* Fila "Ver los N en la lista completa" al pie de una lista recortada
   por MAX_FILAS_LISTA (dashboard.js) — mismo look que dashboard-lista
   li, pero centrada y en el color de acento para que se note que es
   una acción, no otro lote más. */
.dashboard-lista .dashboard-ver-todos {
  justify-content: center;
  color: var(--color-acento);
  font-weight: 600;
  font-size: 0.8rem;
  background: var(--color-acento-suave);
}

.dashboard-lista .dashboard-ver-todos:hover {
  background: var(--color-acento);
  color: #fff;
}

/* Medallero de los rankings ("Más consultados"/"Con más interesados"):
   el top 3 se distingue por color en vez de depender solo del orden en
   la lista, útil para leer rápido en una pantalla chica de celular. */
.dashboard-rango {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-borde);
  color: var(--color-texto-secundario);
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.dashboard-ranking li:nth-child(1) .dashboard-rango {
  background: var(--color-acento);
  color: #fff;
}

.dashboard-ranking li:nth-child(2) .dashboard-rango {
  background: var(--color-primario);
  color: #fff;
}

.dashboard-ranking li:nth-child(3) .dashboard-rango {
  background: var(--color-primario-oscuro);
  color: #fff;
}

/* Pill de urgencia de "Reservas por vencer" — mismo criterio de color
   que ya usa texto-vencido, pero como fondo lleno pesa más a simple
   vista que un texto rojo suelto. */
.dashboard-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-fondo);
  color: var(--color-texto-secundario);
  border: 1px solid var(--color-borde);
  white-space: nowrap;
}

.dashboard-badge.urgente {
  background: var(--color-acento-suave);
  color: var(--color-acento);
  border-color: var(--color-acento);
}

.dashboard-badge.vencida {
  background: var(--color-vendido);
  color: #fff;
  border-color: var(--color-vendido);
}

/* Chips de "Lotes incompletos" — mismo lenguaje visual que chip-servicio
   (ficha/grilla), en tono acento en vez de verde: acá "sin foto"/"sin
   precio" es una falta a resolver, no un servicio disponible. */
.dashboard-chips {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.dashboard-chip-falta {
  display: inline-block;
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: var(--radio-chico);
  background: var(--color-acento-suave);
  color: var(--color-acento);
  white-space: nowrap;
}

/* Mini barra comparativa en "Precio promedio por zona" — mismo dato que
   la columna de texto, pero deja ver de un vistazo qué zona está más
   cara sin tener que leer cada número. Ancho puesto inline desde
   dashboard.js (% relativo a la zona más cara de la tabla). */
.dashboard-precio-celda {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-precio-bar-track {
  flex: 1 1 50px;
  min-width: 36px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-borde);
  overflow: hidden;
}

.dashboard-precio-bar-fill {
  height: 100%;
  background: var(--color-acento);
  border-radius: 999px;
}

/* Panel "Auditoría" — ver js/auditoria.js. Mismo lenguaje visual que las
   filas de dashboard-lista (tarjeta con sombra suave), pero sin ser
   clickeable — es un registro de solo lectura, no navega a ningún lado. */
.auditoria-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auditoria-lista li {
  background: var(--color-fondo-alterno);
  border-radius: var(--radio-chico);
  padding: 8px 10px;
  font-size: 0.82rem;
  box-shadow: var(--sombra-calida-suave);
}

.auditoria-linea {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}

.auditoria-usuario {
  font-weight: 600;
  color: var(--color-texto);
}

.auditoria-fecha {
  color: var(--color-texto-secundario);
  font-size: 0.75rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.auditoria-accion {
  color: var(--color-texto);
}

.auditoria-detalle {
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
  margin-top: 2px;
}

.auditoria-borrar {
  display: block;
  width: max-content;
  margin: 4px 0 0 auto;
}