:root {
  --verde: #00914a;
  --verde-oscuro: #00703a;
  --amarillo: #ffcc08;
  --texto: #1d2b1d;
  --texto-suave: #4a554a;
  --lila-50: #f4f0fc;
  --lila-100: #e9e2f8;
  --lila-200: #cdbdee;
  --lila-600: #6b4fbb;
  --lila-800: #4b3590;
  --sombra: 0 2px 10px rgba(0, 0, 0, 0.3);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--texto); background: var(--lila-100); }
button { font: inherit; cursor: pointer; }
#app { min-height: 100%; }
#aviso-offline { display: none; position: fixed; z-index: 50; top: 0; left: 0; right: 0; padding: 6px 12px; background: var(--amarillo); color: #222; text-align: center; font-size: 14px; }
.sin-conexion #aviso-offline { display: block; }

/* Login y selector (lila) */
.entrada { min-height: 100vh; padding: 48px 20px 24px; background: linear-gradient(170deg, var(--lila-100), var(--lila-200)); text-align: center; }
.marca { margin: 0; color: var(--verde); font-size: 28px; font-weight: 800; letter-spacing: 1px; }
.lema { margin: 4px 0 28px; color: var(--lila-800); font-size: 16px; }
.saludo { margin: 0; font-size: 24px; color: var(--texto); }
.tarjeta-login { max-width: 360px; margin: 0 auto; padding: 20px; background: #fff; border-radius: 16px; box-shadow: 0 4px 16px rgba(80, 50, 140, 0.25); text-align: left; }
.tarjeta-login label { display: block; margin: 0 0 4px; font-size: 14px; color: var(--lila-800); }
.tarjeta-login input { width: 100%; margin-bottom: 14px; padding: 12px; font-size: 16px; border: 1px solid var(--lila-200); border-radius: 10px; }
.tarjeta-login input:focus { outline: 2px solid var(--lila-600); border-color: var(--lila-600); }
.error { margin: 0 0 12px; color: #a32619; font-size: 14px; }
.btn-primario { width: 100%; padding: 13px; border: 0; border-radius: 10px; background: var(--lila-600); color: #fff; font-weight: 700; font-size: 16px; }
.btn-primario:disabled { opacity: 0.6; }
.btn-sec { padding: 8px 14px; border: 1px solid var(--lila-200); border-radius: 10px; background: #fff; color: var(--lila-800); font-size: 14px; }
.entrada-lista { text-align: left; max-width: 480px; margin: 0 auto; }
.lista-haciendas { display: grid; gap: 10px; margin: 16px 0 24px; }
.tarjeta-hacienda { display: grid; gap: 4px; width: 100%; padding: 14px; border: 0; border-radius: 14px; background: #fff; text-align: left; box-shadow: 0 2px 8px rgba(80, 50, 140, 0.2); }
.tarjeta-hacienda b { font-size: 17px; }
.tarjeta-hacienda span { color: var(--texto-suave); font-size: 14px; }
.aviso-vacio { color: var(--lila-800); font-size: 15px; }

/* Visor */
.visor { position: fixed; inset: 0; display: grid; grid-template-columns: 1fr; }
.panel { display: none; }
.mapa-wrap { position: relative; }
#mapa { position: absolute; inset: 0; }
.barra { position: absolute; z-index: 5; top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.chip-hacienda { display: block; padding: 8px 12px; border: 0; border-radius: 12px; background: #fff; color: var(--texto); text-align: left; box-shadow: var(--sombra); }
.chip-hacienda b { display: block; font-size: 15px; }
.chip-hacienda span { color: var(--texto-suave); font-size: 13px; }
.chip-hacienda.fijo { cursor: default; }
.ficha { position: absolute; z-index: 5; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); padding: 12px 14px; background: #fff; border-radius: 14px; box-shadow: var(--sombra); }
.ficha b { font-size: 16px; }
.ficha p { margin: 2px 0 0; color: var(--texto-suave); font-size: 14px; }
.etiqueta { padding: 1px 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.85); color: var(--texto); font-size: 12px; font-weight: 700; pointer-events: none; white-space: nowrap; }

@media (min-width: 900px) {
  .visor { grid-template-columns: 320px 1fr; }
  .panel { display: block; overflow-y: auto; padding: 16px; background: #fff; border-right: 1px solid var(--lila-200); }
  .panel h2 { margin: 0; font-size: 18px; }
  .panel .resumen { margin: 2px 0 14px; color: var(--texto-suave); font-size: 14px; }
  .panel button { display: block; width: 100%; margin-bottom: 6px; padding: 10px 12px; border: 1px solid var(--lila-200); border-radius: 10px; background: var(--lila-50); text-align: left; }
  .panel button.activa { border-color: var(--lila-600); background: var(--lila-100); }
  .panel button span { display: block; color: var(--texto-suave); font-size: 13px; }
  .ficha { left: auto; right: 10px; width: 320px; }
}