:root {
  color-scheme: light dark;
  --bg: #f4f3f9;
  --surface: #ffffff;
  --border: #dcdaeb;
  --text: #1a1a2e;
  --text-muted: #6e6d87;
  --accent: #3d4b91;
  --accent-dark: #2c3670;
  --accent-light: #e9eaf8;
  --visited: #3d4b91;
  --visited-bg: #e9eaf8;
  --noone: #6e6d87;
  --noone-bg: #eeedf5;
  --interested: #b45309;
  --interested-bg: #fef3c7;
  --revisit: #1d4ed8;
  --revisit-bg: #eff6ff;
  --unvisited: #e3e1ee;
  --manzana-hacer: #16a34a;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #13131f;
    --surface: #1c1c2c;
    --border: #31314a;
    --text: #ece9f7;
    --text-muted: #9a98b5;
    --accent: #7b85d4;
    --accent-dark: #5960ad;
    --accent-light: #262a4a;
    --visited: #7b85d4;
    --visited-bg: #262a4a;
    --noone: #9a98b5;
    --noone-bg: #26263a;
    --interested: #f2a94e;
    --interested-bg: #3d2f12;
    --revisit: #7c93f5;
    --revisit-bg: #1c2340;
    --unvisited: #2c2c40;
    --manzana-hacer: #22c55e;
    --shadow: 0 1px 3px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.25);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  font-family: 'IBM Plex Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 15px;
}

/* HOME */
.home-header {
  background: var(--accent);
  color: white;
  padding: 22px 20px 18px;
  text-align: center;
}
.home-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.home-sub {
  font-size: 12px;
  font-family: 'IBM Plex Mono', monospace;
  opacity: 0.75;
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.home-nav {
  display: flex;
  gap: 10px;
  padding: 16px;
  max-width: 540px;
  margin: 0 auto;
}
.home-nav-btn {
  flex: 1;
  padding: 14px 10px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow);
}
.home-nav-btn:active { background: var(--bg); }
.hero-mapa-wrapper {
  max-width: 540px;
  margin: 0 auto;
  padding: 0 16px 16px;
}
#mapa-zona {
  height: calc(100vh - 230px);
  min-height: 320px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  overflow: hidden;
}
.btn-volver-inicio {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  cursor: pointer;
  margin-bottom: 6px;
}

/* TERRITORIO DEL DÍA (salidas de hoy) */
.dia-header {
  background: var(--accent);
  color: white;
  padding: 14px 20px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.dia-header-title { font-size: 16px; font-weight: 700; }
.dias-tabs {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  overflow-x: auto;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.dias-tabs::-webkit-scrollbar { display: none; }
.dia-tab {
  flex-shrink: 0;
  padding: 8px 14px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--text);
  cursor: pointer;
  text-transform: uppercase;
}
.dia-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.sin-salidas-hoy {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  padding: 60px 20px;
}
.mapa-dia-wrapper {
  width: 100%;
  background: var(--surface);
}
.mapa-dia {
  width: 100%;
  height: calc(100vh - 110px);
  height: calc(100dvh - 110px);
  min-height: 420px;
}

/* Tarjeta flotante con la info del territorio, arriba del mapa */
.territorio-float-card {
  background: rgba(255,255,255,0.88);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  padding: 10px 12px;
  min-width: 190px;
  max-width: 220px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  transform: translate(-50%, calc(-100% - 10px)) scale(var(--card-scale, 1));
  transform-origin: bottom center;
  transition: transform 0.1s linear;
}
.territorio-float-num { font-weight: 700; font-size: 16px; color: var(--accent-dark); }
.territorio-float-manzanas { font-size: 13px; color: #1a1a2e; margin-top: 3px; }
.territorio-float-dato { font-size: 13px; color: #1a1a2e; margin-top: 4px; }

.manzana-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 0px 4px !important;
}
.territorio-label {
  background: #fff;
  color: #000;
  font-weight: 700;
  font-size: 22px;
  padding: 5px 14px;
  border-radius: 8px;
  border: 2px solid #1a1a18;
  text-align: center;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* HEADER */
.header {
  background: var(--accent);
  color: white;
  padding: 16px 20px 14px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.header-title {
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  opacity: 0.7;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.header-name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.header-badge {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  padding: 4px 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
}
.header-progress {
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
  height: 5px;
  overflow: hidden;
}
.header-progress-bar {
  height: 100%;
  background: white;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.header-stats {
  display: flex;
  gap: 16px;
  margin-top: 6px;
}
.header-stat {
  font-size: 11px;
  opacity: 0.8;
  font-family: 'IBM Plex Mono', monospace;
}
.header-stat span {
  opacity: 1;
  font-weight: 600;
}

/* MAIN */
.main { padding: 16px; max-width: 540px; margin: 0 auto; }

/* TABS MANZANAS */
.manzanas-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.manzanas-tabs::-webkit-scrollbar { display: none; }
.manzana-tab {
  flex-shrink: 0;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.manzana-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.manzana-tab-label {
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 2px;
}
.manzana-tab.active .manzana-tab-label { opacity: 0.7; }
.manzana-tab-num {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.manzana-tab-mini {
  display: flex;
  gap: 2px;
  justify-content: center;
  margin-top: 4px;
}
.mini-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--unvisited);
}
.mini-dot.done { background: var(--accent); }
.manzana-tab.active .mini-dot { background: rgba(255,255,255,0.3); }
.manzana-tab.active .mini-dot.done { background: rgba(255,255,255,0.85); }

/* MANZANA VISTA */
.manzana-header {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.manzana-info-label {
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.manzana-info-val {
  font-size: 14px;
  font-weight: 600;
}
.manzana-pct {
  font-size: 26px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--accent);
  letter-spacing: -0.03em;
}

/* ESTADO CARGANDO / ERROR */
.estado-pantalla {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* MAPA DEL TERRITORIO */
.mapa-territorio-wrapper {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
#mapa-territorio {
  height: 260px;
  width: 100%;
}
.btn-como-llegar {
  width: 100%;
  padding: 12px;
  background: var(--accent);
  color: white;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'IBM Plex Sans', sans-serif;
}

/* AGREGAR CASA */
.agregar-casa {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.input-casa {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 13px;
  font-family: 'IBM Plex Sans', sans-serif;
  background: var(--surface);
  color: var(--text);
}
.btn-agregar-casa {
  padding: 9px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.sin-casas {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  padding: 14px 0;
}

/* LEGEND */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 9px;
}
.legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}

/* CASAS */
.casas-list { display: flex; flex-direction: column; gap: 8px; }

.casa-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color 0.2s;
}
.casa-card.estado-visitado { border-color: var(--visited); }
.casa-card.estado-nadie { border-color: var(--border); }
.casa-card.estado-interesado { border-color: var(--interested); }
.casa-card.estado-revisitar { border-color: var(--revisit); }

.casa-top {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  gap: 12px;
  cursor: pointer;
}

.casa-padron {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 70px;
  letter-spacing: 0.02em;
}

.casa-dir {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}
.casa-dir small {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 1px;
}

.casa-estado-badge {
  font-size: 10px;
  font-weight: 600;
  border-radius: 5px;
  padding: 3px 8px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge-sin-visitar { background: var(--unvisited); color: var(--text-muted); }
.badge-visitado { background: var(--visited-bg); color: var(--visited); }
.badge-nadie { background: var(--noone-bg); color: var(--noone); }
.badge-interesado { background: var(--interested-bg); color: var(--interested); }
.badge-revisitar { background: var(--revisit-bg); color: var(--revisit); }

/* PANEL ACCIONES */
.casa-panel {
  border-top: 1.5px solid var(--border);
  padding: 12px 14px;
  display: none;
  flex-direction: column;
  gap: 10px;
  background: #fafaf7;
}
.casa-panel.open { display: flex; }

.panel-label {
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.acciones-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.accion-btn {
  border: 1.5px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  padding: 9px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s;
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--text);
  text-align: left;
}
.accion-btn:active { transform: scale(0.97); }
.accion-btn.selected-visitado { background: var(--visited-bg); border-color: var(--visited); color: var(--visited); }
.accion-btn.selected-nadie { background: var(--noone-bg); border-color: #aaa; color: var(--noone); }
.accion-btn.selected-interesado { background: var(--interested-bg); border-color: var(--interested); color: var(--interested); }
.accion-btn.selected-revisitar { background: var(--revisit-bg); border-color: var(--revisit); color: var(--revisit); }
.accion-icon { font-size: 16px; line-height: 1; }

.nota-area {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 9px 11px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  resize: none;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
  min-height: 60px;
}
.nota-area:focus { border-color: var(--accent); }
.nota-area::placeholder { color: var(--text-muted); }

.fecha-visita {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'IBM Plex Mono', monospace;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* BOTÓN CERRAR MANZANA */
.btn-cerrar-manzana {
  margin-top: 16px;
  width: 100%;
  padding: 14px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  font-family: 'IBM Plex Sans', sans-serif;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-cerrar-manzana:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-cerrar-manzana:not(:disabled):active { opacity: 0.85; }

/* MODAL CONFIRMACIÓN */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
}
.overlay.show { display: flex; }
.modal {
  background: var(--surface);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  animation: slideUp 0.25s ease;
}
@keyframes slideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.modal-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.modal-text { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 20px; }
.modal-resumen {
  background: var(--bg);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.resumen-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.resumen-row .lbl { color: var(--text-muted); }
.resumen-row .val { font-weight: 600; font-family: 'IBM Plex Mono', monospace; }
.modal-btns { display: flex; gap: 10px; }
.btn-cancel {
  flex: 1; padding: 12px;
  border: 1.5px solid var(--border);
  background: none;
  border-radius: 8px;
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--text);
}
.btn-confirm {
  flex: 2; padding: 12px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  font-family: 'IBM Plex Sans', sans-serif;
}

/* TOAST */
.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: #1a1a18;
  color: white;
  padding: 11px 20px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 500;
  z-index: 300;
  transition: transform 0.3s ease;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* COMPLETADO */
.manzana-completada {
  background: var(--visited-bg);
  border: 1.5px solid var(--visited);
  border-radius: var(--radius);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--visited);
  font-weight: 500;
}

/* ─────────────────────────────────────────────
   DESKTOP (≥900px): letras y botones más grandes,
   los mapas ocupan todo el ancho (con 15px de margen
   a cada lado) en vez de quedar en una columna angosta.
   ───────────────────────────────────────────── */
@media (min-width: 900px) {
  body { font-size: 20px; }

  .main { max-width: 800px; }
  .home-nav { max-width: 900px; padding: 20px 15px; }
  .hero-mapa-wrapper {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 15px 20px;
    box-sizing: border-box;
  }

  .mapa-territorio-wrapper {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 15px;
    box-sizing: border-box;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  #mapa-territorio {
    height: 440px;
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow);
  }

  .mapa-dia { padding: 0 15px; box-sizing: border-box; }

  .home-title { font-size: 23px; }
  .home-sub { font-size: 17px; }
  .home-nav-btn { font-size: 18px; padding: 18px 14px; }
  .btn-volver-inicio { font-size: 16px; padding: 6px 12px; }

  .dia-header-title { font-size: 21px; }
  .dia-tab { font-size: 17px; padding: 11px 18px; }
  .sin-salidas-hoy { font-size: 19px; }
  .territorio-float-card { min-width: 240px; max-width: 300px; padding: 14px 16px; }
  .territorio-float-num { font-size: 20px; }
  .territorio-float-manzanas { font-size: 17px; }
  .territorio-float-dato { font-size: 17px; }

  .header-title { font-size: 16px; }
  .header-name { font-size: 24px; }
  .header-badge { font-size: 16px; padding: 6px 13px; }
  .header-stat { font-size: 16px; }

  .manzana-tab { padding: 11px 18px; }
  .manzana-tab-label { font-size: 15px; }
  .manzana-tab-num { font-size: 21px; }

  .manzana-info-label { font-size: 15px; }
  .manzana-info-val { font-size: 19px; }
  .manzana-pct { font-size: 31px; }
  .estado-pantalla { font-size: 19px; }

  .btn-como-llegar { font-size: 18px; padding: 16px; }
  .input-casa { font-size: 18px; padding: 13px 15px; }
  .btn-agregar-casa { font-size: 18px; padding: 13px; }
  .sin-casas { font-size: 17px; }

  .legend-item { font-size: 16px; padding: 5px 12px; }

  .casa-padron { font-size: 17px; }
  .casa-dir { font-size: 19px; }
  .casa-dir small { font-size: 16px; }
  .casa-estado-badge { font-size: 15px; padding: 5px 11px; }

  .panel-label { font-size: 16px; }
  .acciones-grid { gap: 10px; }
  .accion-btn { font-size: 17px; padding: 13px 12px; }
  .accion-icon { font-size: 21px; }
  .nota-area { font-size: 18px; padding: 12px 14px; }
  .fecha-visita { font-size: 16px; }

  .btn-cerrar-manzana { font-size: 19px; padding: 18px; }

  .modal-title { font-size: 23px; }
  .modal-text { font-size: 18px; }
  .resumen-row { font-size: 18px; }
  .btn-cancel, .btn-confirm { font-size: 19px; padding: 16px; }

  .toast { font-size: 18px; padding: 14px 24px; }
  .manzana-completada { font-size: 18px; padding: 15px 18px; }
}