/* Archivo (SIL OFL). Autoalojada: la app funciona sin internet y sin pedirle
   fuentes a nadie. Un archivo variable por subset (peso 400 a 700). */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('vendor/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('vendor/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Aviso de manzana repetida entre zonas: aparece antes de los resultados */
.aviso-mzona {
  margin: 10px 0 2px;
  padding: 10px 12px;
  border-left: 3px solid #c98a2e;
  border-radius: 0 8px 8px 0;
  background: rgba(201, 138, 46, .12);
  font-size: .84rem;
  line-height: 1.5;
  color: var(--ink);
}
[data-tema="oscuro"] .aviso-mzona { background: rgba(224, 160, 74, .16); border-left-color: #e0a04a; --warning-ink: #e8d1ad; }
/* Zona con problemas de seguridad: el mismo molde del aviso, en rojo */
.aviso-riesgo { border-left-color: #b02418; background: rgba(176, 36, 24, .13); }
[data-tema="oscuro"] .aviso-riesgo { background: rgba(214, 90, 70, .18); border-left-color: #d65a46; }
.aviso-riesgo-critico {
  border: 1px solid rgba(176, 36, 24, .42);
  border-left: 5px solid #b02418;
  background: rgba(176, 36, 24, .18);
}
[data-tema="oscuro"] .aviso-riesgo-critico {
  background: rgba(214, 90, 70, .24);
  border-color: rgba(214, 90, 70, .5);
  border-left-color: #d65a46;
}
.aviso-riesgo-critico strong { color: #8f1d13; }
[data-tema="oscuro"] .aviso-riesgo-critico strong { color: #ffb3a6; }
.aviso-mzona p { margin: 0 0 8px; color: var(--warning-ink, #5d461f); }
.aviso-mzona-botones { display: flex; flex-wrap: wrap; gap: 6px; }
.aviso-mzona-botones button {
  font: inherit;
  font-size: .8rem;
  padding: 5px 10px;
  border: 1px solid var(--line, #ccc);
  border-radius: 6px;
  background: var(--card, #fff);
  color: var(--ink);
  cursor: pointer;
}
.aviso-mzona-botones button:active { background: rgba(var(--accent-rgb), .14); }

/* ===================================================================
   PALETA: papel calido + tinta casi negra + un solo acento (naranja de
   seguridad). Nada de degradados. Radios chicos. La app se usa afuera,
   bajo el sol: contraste alto y superficies planas leen mejor.
   =================================================================== */
:root {
  --navy: #231f1a;      /* tinta: titulos y botones */
  --navy-2: #3b362d;
  --teal: #0e6b50;      /* verde funcional: listo, hover, foco */
  --blue: #24594a;
  --accent: #d9480f;    /* naranja de seguridad: lo importante */
  --accent-2: #b93c0c;
  --accent-rgb: 217, 72, 15;
  --ink: #231f1a;
  --muted: #6f675a;
  --line: #e2dccf;
  --paper: #f4f1ea;
  --white: #fffef9;
  --shadow: 0 1px 2px rgba(35, 31, 26, .05), 0 10px 30px rgba(35, 31, 26, .07);
  --radius: 12px;
  font-family: 'Archivo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--paper);
}

  * { box-sizing: border-box; }
  html { min-height: 100%; background: var(--paper); }
  /* La app es una sola columna: no debe deslizarse de lado como una pagina web.
     overflow-x hidden en html y body corta el desbordamiento, y overscroll-behavior
     evita el efecto de "arrastrar" la pagina al llegar al borde. */
  html, body { overflow-x: hidden; overscroll-behavior-x: none; }
  body {
    min-height: 100%;
    margin: 0;
    max-width: 100%;
    background: var(--paper);
  }
  /* En Android 15 el edge-to-edge es obligatorio, asi que la barra de estado y la
     de navegacion se dibujan encima del contenido. Sin estos rellenos el titulo
     queda debajo del notch y los botones bajo los iconos de la bateria. */
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

  button, input { font: inherit; }
  button { cursor: pointer; }
  button:disabled { cursor: wait; opacity: .62; }

  .topbar {
    min-height: 66px;
    display: flex;
    align-items: center;
    /* El boton de tema se queda a la izquierda y Configuracion a la derecha. */
    justify-content: space-between;
    gap: 12px;
    padding: 10px clamp(16px, 4vw, 48px);
    /* El relleno de arriba aparta el titulo y los botones del notch. */
    padding-top: calc(10px + env(safe-area-inset-top));
    color: #faf7f0;
    background: var(--navy);
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  /* El aviso de conexion se oculta: el repartidor no lo consulta y solo distrae
     en una barra que se quiere limpia. El elemento sigue en el HTML para que el
     codigo que lo actualiza no se rompa. */
  .topbar .connection-status { display: none; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark { width: 38px; height: 38px; display: block; flex: none; border-radius: 10px; box-shadow: 0 2px 8px rgba(var(--accent-rgb), .3); object-fit: cover; }
.brand-texto { min-width: 0; }
.brand strong { display: block; font-size: 1.02rem; letter-spacing: -.01em; }
.brand small { display: block; margin-top: 3px; color: #b9b0a0; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.connection-status { color: #d8f5ef; font-size: .78rem; white-space: nowrap; }
.connection-status::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #ffd166; }
.connection-status.online::before { background: #55e3a9; }
.connection-status.offline::before { background: #ff9b71; }

.button { border: 0; border-radius: 9px; min-height: 42px; padding: 9px 14px; font-weight: 700; transition: transform .12s ease, background .15s ease, box-shadow .15s ease; }
.button:active { transform: translateY(1px) scale(.985); }
.button-primary { color: #fff; background: var(--accent); box-shadow: 0 1px 2px rgba(var(--accent-rgb), .3), 0 6px 16px rgba(var(--accent-rgb), .22); }
.button-primary:hover { background: var(--accent-2); }
.button-secondary { color: var(--navy); background: #eae4d6; }
.button-secondary:hover { background: #ded7c5; }
.button-quiet { color: var(--navy); background: #efeade; }
.button-quiet:hover { background: #e4ddcc; }
.button-light { color: var(--navy); background: #fffef9; }
.button-light:hover { background: #efe9dc; }
.button-wide { width: 100%; min-height: 50px; margin-top: 4px; }
.boton-icono { width: 16px; height: 16px; margin-right: 5px; vertical-align: -3px; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--white); font-size: 1.55rem; line-height: 1; }
.icon-button:hover { color: var(--navy); background: #f3eee3; }

  .app-layout { width: min(1440px, 100%); margin: 0 auto; padding: clamp(16px, 3vw, 34px); padding-bottom: calc(clamp(16px, 3vw, 34px) + env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(290px, 370px) minmax(0, 1fr); gap: 20px; align-items: start; }
.search-card, .results-card, .zones-card, .map-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.search-card { padding: 24px; position: sticky; top: 96px; }
  .section-heading, .results-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  /* Contador y X juntos, al mismo lado, como en la tarjeta de busqueda. */
  .heading-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
  /* Los tres botones de la ruta ocupan el mismo ancho para que se vean cuadrados. */
  .ruta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .ruta-actions .button { flex: 1 1 130px; }
.eyebrow { margin: 0 0 5px; color: var(--accent); font-size: .67rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; color: var(--navy); font-size: clamp(1.55rem, 3vw, 1.95rem); letter-spacing: -.03em; }
h2 { margin-bottom: 0; color: var(--navy); font-size: 1.08rem; letter-spacing: -.015em; }
.muted { color: var(--muted); }
.intro { margin-bottom: 20px; font-size: .85rem; line-height: 1.5; }
.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field > span { color: var(--navy); font-size: .76rem; font-weight: 700; }
.field input { width: 100%; min-height: 46px; border: 1px solid #cfc7b6; border-radius: 8px; padding: 10px 12px; color: var(--ink); background: #fbfaf5; outline: 0; }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14); background: #fff; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.example-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 15px; color: var(--muted); font-size: .72rem; }
.chip { border: 1px solid #cfc7b6; border-radius: 8px; padding: 6px 9px; color: var(--navy); background: #faf8f1; font-size: .7rem; font-weight: 700; }
.chip:hover { border-color: var(--accent); background: #f7ece1; }
.data-status { display: flex; align-items: center; gap: 8px; min-height: 34px; margin-top: 18px; padding: 9px 10px; border-radius: 8px; color: var(--muted); background: #f2efe6; font-size: .72rem; }
.data-status.ready { color: #0e6b50; background: #e9f3ed; }
.data-status.error { color: #9d3d36; background: #f9ece8; }
.spinner { width: 15px; height: 15px; flex: none; border: 2px solid #d8d2c4; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.data-actions { margin-top: 8px; }
.data-actions .button { width: 100%; min-height: 38px; font-size: .72rem; }
.source-note { margin: 15px 0 0; color: #8a8272; font-size: .66rem; line-height: 1.45; }

.workspace { min-width: 0; display: grid; gap: 20px; }
.map-card { min-height: 500px; overflow: hidden; position: relative; }
#map { min-height: 500px; z-index: 1; }
.map-toolbar { position: absolute; z-index: 500; top: 12px; left: 12px; display: flex; gap: 7px; }
.map-button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(35,31,26,.16); border-radius: 8px; min-height: 38px; padding: 8px 11px; color: var(--navy); background: rgba(255,254,249,.95); box-shadow: 0 2px 8px rgba(35,31,26,.12); font-size: .74rem; font-weight: 700; }
.map-button svg { width: 15px; height: 15px; flex: none; }
.map-button:hover { background: #f1ede2; }
.map-message { position: absolute; z-index: 500; left: 12px; bottom: 12px; max-width: calc(100% - 24px); margin: 0; padding: 8px 10px; border-radius: 8px; color: var(--navy); background: rgba(255,254,249,.93); box-shadow: 0 2px 8px rgba(35,31,26,.1); font-size: .72rem; }
.results-card { padding: 20px; }
.count-badge { min-width: 32px; padding: 5px 8px; border-radius: 7px; color: var(--navy); background: #efeade; font-size: .72rem; font-weight: 800; text-align: center; }
.avisos-resultados { display: grid; gap: 8px; margin-top: 15px; }
.avisos-resultados:empty { display: none; }
.results { display: grid; gap: 8px; margin-top: 15px; max-height: 430px; overflow: auto; }
.result-item { display: grid; gap: 7px; width: 100%; padding: 13px; border: 1px solid var(--line); border-radius: 10px; text-align: left; color: var(--ink); background: var(--white); animation: aparecer .28s ease both; animation-delay: var(--retraso, 0ms); }
.result-item:hover, .result-item:focus-visible { border-color: var(--teal); background: #f4f8f4; outline: 0; }
.result-address { color: var(--navy); font-size: .9rem; font-weight: 800; }
.result-meta { display: flex; flex-wrap: wrap; gap: 5px 10px; color: var(--muted); font-size: .7rem; }
.result-reference { color: #5c6e60; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .67rem; word-break: break-all; }
.empty-state { padding: 28px 12px; color: var(--muted); text-align: center; font-size: .84rem; }

.zones-card { width: min(1440px, 100%); margin: 0 auto 20px; padding: 20px clamp(16px, 3vw, 34px); }
.zones-card .section-heading { align-items: center; }
.zones-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 9px; margin-top: 14px; }
.zone-filter { max-width: 360px; margin-top: 13px; }
.zone-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.download-status { min-height: 18px; margin: 10px 0 0; color: var(--muted); font-size: .72rem; }
.zone-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.zone-item[hidden] { display: none; }
.zone-chip { display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 8px 10px; border: 1px solid #cfc7b6; border-radius: 8px; color: var(--navy); background: #faf8f1; font-size: .72rem; }
.zone-chip strong { font-size: .8rem; }
.zone-chip small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.zone-download { flex: none; min-height: 34px; border: 1px solid #cfc7b6; border-radius: 8px; padding: 6px 8px; color: var(--navy); background: #f0ece0; font-size: .68rem; font-weight: 700; }
.zone-download:hover { background: #e4ddcc; }
.zone-download.ready { border-color: #9cc9ae; color: #0e6b50; background: #e8f3ec; }
.footer { width: min(1440px, 100%); margin: 0 auto; padding: 0 clamp(16px, 3vw, 34px) 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; color: #837b6c; font-size: .68rem; }
.footer a { color: var(--blue); }
.footer-enlaces { display: flex; flex-wrap: wrap; gap: 10px; }
.legal-acepta { display: flex; align-items: flex-start; gap: 9px; margin: 4px 0 12px; font-size: .78rem; line-height: 1.4; color: var(--muted); cursor: pointer; }
.legal-acepta input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--blue); }
.legal-acepta a { color: var(--blue); text-decoration: underline; }

.record-dialog { width: min(570px, calc(100% - 24px)); border: 0; border-radius: 14px; padding: 25px; color: var(--ink); background: var(--white); box-shadow: 0 24px 70px rgba(35,31,26,.3); }
.record-dialog::backdrop { background: rgba(28, 24, 18, .62); }
.origen-dialog { max-height: min(88vh, 760px); overflow-y: auto; }
.origen-dialog[open] { display: block; }
.origen-opciones { justify-content: stretch; }
.origen-opciones .button { flex: 1 1 190px; }
.origen-resultados { display: grid; gap: 8px; margin-top: 12px; }
.origen-resultado { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--surface, var(--white)); text-align: left; font: inherit; }
.origen-resultado:disabled { opacity: .65; }
.dialog-close { position: absolute; top: 9px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: 1.7rem; }
.dialog-close:hover { color: var(--navy); background: #f2eee2; }
.record-dialog h2 { margin-bottom: 17px; font-size: 1.35rem; }
.record-details { display: grid; grid-template-columns: minmax(110px, .75fr) 1.25fr; gap: 8px 13px; font-size: .78rem; }
.record-details dt { color: var(--muted); }
.record-details dd { margin: 0; color: var(--ink); font-weight: 700; word-break: break-word; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 21px; }
.route-status { min-height: 18px; margin: 13px 0 0; color: var(--muted); font-size: .72rem; }
.route-steps { display: grid; gap: 7px; max-height: 220px; margin: 10px 0 0; padding: 0 0 0 25px; overflow: auto; color: var(--ink); font-size: .75rem; }
.route-steps li::marker { color: var(--accent); font-weight: 800; }
.toast { position: fixed; z-index: 2000; right: 16px; bottom: 16px; max-width: min(360px, calc(100% - 32px)); padding: 11px 14px; border-radius: 9px; color: #faf7f0; background: #332e26; box-shadow: 0 10px 28px rgba(0,0,0,.22); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; font-size: .76rem; }
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .app-layout { grid-template-columns: 1fr; }
  .search-card { position: static; }
  .map-card, #map { min-height: 430px; }
  .zones-card { margin-top: 0; }
}

@media (max-width: 560px) {
  .topbar { min-height: 58px; padding: 8px 12px; }
  .brand-mark { width: 34px; height: 34px; border-radius: 8px; font-size: 1.1rem; }
  .brand strong { font-size: .9rem; }
  .brand small { font-size: .58rem; }
  .connection-status { display: none; }
  .top-actions .button { min-height: 36px; padding: 7px 9px; font-size: .68rem; }
  .app-layout { padding: 11px; gap: 12px; }
  .search-card, .results-card { padding: 16px; border-radius: 10px; }
  .map-card, #map { min-height: 370px; }
  .map-toolbar { top: 9px; left: 9px; }
  .map-button { min-height: 35px; padding: 7px 8px; font-size: .68rem; }
  .map-message { left: 9px; bottom: 9px; max-width: calc(100% - 18px); }
  .field-grid { gap: 7px; }
  .record-dialog { padding: 21px 17px; }
  .dialog-actions .button { flex: 1 1 auto; }
  .footer { flex-direction: column; padding-bottom: 20px; }
}

.field-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-left: 3px solid #d98a2b;
  background: rgba(217, 138, 43, .12);
  border-radius: 0 6px 6px 0;
  font-size: .82rem;
  line-height: 1.45;
  color: #6b4a1c;
}

/* ---- columna izquierda: busquador + zonas + ruta ---- */
.left-column { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.panel-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); padding: 20px; }
.small { font-size: .8rem; }

/* ---- reporte de direcciones que no aparecen ---- */
.reporte-card { border-left: 3px solid var(--accent); }
.reporte-insignia {
  flex: none;
  padding: 5px 8px;
  border-radius: 7px;
  color: #7c3b0d;
  background: #fbe8d9;
  font-size: .68rem;
  font-weight: 800;
  white-space: nowrap;
}
.reporte-casos {
  margin: 10px 0 13px;
  padding: 9px 11px;
  border-radius: 8px;
  color: #5d4a33;
  background: #f6f0e4;
  font-size: .73rem;
  line-height: 1.45;
}
.reporte-form { display: grid; gap: 4px; margin-top: 14px; }
.reporte-form[hidden] { display: none; }
.reporte-resumen { margin: 0 0 5px; color: var(--accent); font-size: .76rem; font-weight: 700; }
.reporte-resumen:empty { display: none; }
.reporte-form .field { margin-bottom: 5px; }
.reporte-form textarea {
  width: 100%;
  min-height: 78px;
  border: 1px solid #cfc7b6;
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fbfaf5;
  font: inherit;
  resize: vertical;
  outline: 0;
}
.reporte-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14); background: #fff; }
.reporte-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 5px 0 2px; }
.reporte-acciones .button { flex: 1 1 145px; min-height: 42px; font-size: .74rem; }
.reporte-foto-caja { position: relative; margin: 9px 0 5px; }
.reporte-foto-caja img { display: block; width: 100%; max-height: 230px; object-fit: cover; border: 1px solid var(--line); border-radius: 10px; background: #eee8dc; }
.reporte-foto-caja .mini { position: absolute; right: 8px; bottom: 8px; background: rgba(255,254,249,.94); }
.reporte-requisito { margin: 6px 0; color: #7c3b0d; font-size: .72rem; line-height: 1.45; }
.reporte-aviso-rostro {
  margin: 6px 0; padding: 8px 10px; border: 1px solid #e0b48a; border-radius: 9px;
  background: #fdf3e6; color: #7c3b0d; font-size: .72rem; line-height: 1.45;
}
.reporte-aviso-rostro strong { color: #9d3d36; }
.reporte-confirmar {
  display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 8px;
  font-size: .74rem; line-height: 1.4; color: var(--ink); cursor: pointer;
}
.reporte-confirmar input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); }
.reporte-estado { min-height: 18px; margin: 9px 0 0; color: var(--muted); font-size: .75rem; line-height: 1.45; }
.reporte-estado.error { color: #9d3d36; }
.reporte-estado.ok { color: #0e6b50; font-weight: 700; }
.reporte-cta { margin-top: 10px; }
.reporte-faltantes { margin-top: 8px; }
.faltantes-dialog { width: min(760px, calc(100% - 20px)); max-height: 88vh; padding: 22px; overflow: hidden; }
.faltantes-dialog[open] { display: flex; flex-direction: column; }
.faltantes-dialog h2 { margin-bottom: 4px; }
.faltantes-dialog .dialog-actions { flex: none; margin-top: 12px; }
.faltantes-lista {
  flex: 1 1 auto;
  min-height: 0;
  margin: 10px -4px 0;
  padding: 0 4px;
  overflow: auto;
  overscroll-behavior: contain;
}
.faltantes-ayuda { margin: 6px 0 0; color: var(--muted); font-size: .74rem; line-height: 1.35; }
.faltantes-grupo { margin: 0 0 10px; border: 1px solid var(--line); border-radius: 10px; background: #fbfaf5; }
.faltantes-grupo.prioridad { border-color: #d9584d; background: #fdf3e6; }
.faltantes-grupo summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faltantes-grupo summary::-webkit-details-marker { display: none; }
.faltantes-grupo summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.faltantes-grupo[open] summary { border-bottom: 1px solid var(--line); }
.faltantes-grupo summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
.faltantes-grupo[open] summary::after { transform: rotate(45deg); }
.faltantes-grupo.prioridad summary { color: #b3261e; }
.faltantes-zona { flex: 1 1 auto; min-width: 0; }
.faltantes-tipo { display: block; margin-top: 2px; color: var(--muted); font-size: .67rem; font-weight: 600; }
.faltantes-grupo.prioridad .faltantes-tipo { color: #b3261e; }
.faltantes-cuenta {
  flex: none;
  min-width: 26px;
  padding: 1px 7px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(35,31,26,.07);
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
}
.faltantes-grupo.prioridad .faltantes-cuenta { color: #b3261e; background: rgba(217,88,77,.12); }
.faltantes-casas { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.faltantes-casa { display: block; padding: 7px 11px; border-top: 1px solid rgba(226,220,207,.7); font-size: .76rem; }
.faltantes-casa:first-child { border-top: 0; }
.faltantes-casa strong { color: var(--ink); white-space: nowrap; }
.faltantes-vacio { padding: 18px 4px; color: var(--muted); font-size: .8rem; }
.reporte-camara-dialog { padding: 21px; }
.reporte-camara-vista { overflow: hidden; margin: 12px 0 8px; border-radius: 10px; background: #1d241f; }
.reporte-camara-vista video { display: block; width: 100%; max-height: 58vh; object-fit: cover; }
[data-tema="oscuro"] .reporte-casos { color: #e9dcc8; background: #3a3127; }
[data-tema="oscuro"] .reporte-insignia { color: #ffd4b4; background: #58351f; }
[data-tema="oscuro"] .reporte-requisito { color: #ffbd8a; }
[data-tema="oscuro"] .reporte-aviso-rostro { background: #3a2a1c; border-color: #6b4a2c; color: #ffd4b4; }
[data-tema="oscuro"] .reporte-aviso-rostro strong { color: #ff9d8a; }
[data-tema="oscuro"] .reporte-confirmar { color: #e9dcc8; }
[data-tema="oscuro"] .reporte-form textarea { background: #16130f; border-color: #3a352c; }
[data-tema="oscuro"] .faltantes-grupo { background: #26211b; border-color: #3a352c; }
[data-tema="oscuro"] .faltantes-grupo.prioridad { background: #3a2a1c; border-color: #b3261e; }
[data-tema="oscuro"] .faltantes-grupo.prioridad summary { color: #ff9d8a; }
[data-tema="oscuro"] .faltantes-grupo.prioridad .faltantes-tipo { color: #ffbd8a; }
[data-tema="oscuro"] .faltantes-grupo.prioridad .faltantes-cuenta { color: #ff9d8a; background: rgba(255,157,138,.14); }
[data-tema="oscuro"] .faltantes-grupo[open] summary { border-bottom-color: #3a352c; }
[data-tema="oscuro"] .faltantes-cuenta { background: rgba(255,255,255,.09); }
[data-tema="oscuro"] .faltantes-casa { border-top-color: #332e26; }

.zone-mode { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 10px; }
.zone-mode .small { margin-left: auto; }
.chip { border: 1px solid rgba(35,31,26,.2); background: var(--white); color: var(--navy); border-radius: 8px; padding: 6px 12px; font-size: .76rem; font-weight: 700; cursor: pointer; }
.chip-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.zonas-filtro { width: 100%; margin-bottom: 10px; padding: 9px 11px; border: 1px solid rgba(35,31,26,.18); border-radius: 8px; font-size: .9rem; background: #fbfaf5; color: var(--ink); }
.zonas-filtro::placeholder { color: var(--muted); opacity: .85; }
.zonas-lista { display: flex; flex-direction: column; gap: 2px; max-height: 268px; overflow-y: auto; }
.zona-item { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; font-size: .85rem; }
.zona-item:hover { background: rgba(35,31,26,.05); }
.zona-item input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--accent); }
.zona-item span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zona-item small { color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; }

/* ---- lista de entregas y ruta ---- */
.ruta-actions { display: flex; gap: 8px; margin: 12px 0 10px; }
.ruta-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; max-height: 320px; overflow-y: auto; }
.parada { border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; background: var(--white); }
.parada-hoy { border-left: 3px solid var(--accent); }
.parada-lista { border-left: 3px solid #c9c2b2; }
.parada-top { display: flex; align-items: baseline; gap: 7px; }
.parada-n { font-weight: 900; color: var(--navy); font-size: .8rem; min-width: 17px; }
.parada-dir { flex: 1 1 auto; font-size: .87rem; font-weight: 700; }
.parada-meta { color: var(--muted); font-size: .75rem; margin-top: 2px; }
.parada-acciones { display: flex; gap: 6px; margin-top: 7px; }
.mini { border: 1px solid rgba(35,31,26,.2); background: var(--white); color: var(--navy); border-radius: 7px; padding: 5px 9px; font-size: .72rem; font-weight: 700; cursor: pointer; }
.mini-primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.parada-lista .parada-dir { text-decoration: line-through; opacity: .55; }
.ruta-vacia { color: var(--muted); font-size: .85rem; }

/* ---- resultados junto al buscador, con botones de mapa a mano ---- */
.resultados-inline { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.resultados-inline .results { margin-top: 12px; max-height: 60vh; }
.result-item { cursor: pointer; }
/* Fichas sin coordenada: Google las busca por nombre. Se marcan en rojo. */
.result-item.result-sin-gps { border-color: #c0392b; background: #fff3f1; box-shadow: inset 3px 0 0 #c0392b; }
.result-item.result-sin-gps:hover,
.result-item.result-sin-gps:focus-visible { border-color: #c0392b; background: #ffe8e4; }
.result-sin-gps .result-mzlote { color: #9b1c12; }
.result-gps-alerta { display: flex; align-items: center; gap: 6px; color: #9b1c12; font-size: .78rem; font-weight: 800; }
.result-gps-alerta::before { content: '!'; display: grid; place-items: center; width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%; background: #c0392b; color: #fff; font-size: .68rem; line-height: 1; }
.result-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 3px; }
.result-actions .mini { width: 100%; min-height: 44px; padding: 8px 11px; border-radius: 8px; font-size: .86rem; line-height: 1.1; }

/* ---- configuracion: zonas aparte ---- */
.config-card {
  width: min(1440px, 100%);
  margin: 0 auto 34px;
  padding: clamp(16px, 3vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
  animation: subir .4s cubic-bezier(.22, .7, .3, 1) both;
}

/* Configuración es una pantalla aparte: mientras está abierta, la app se
   esconde. Es la misma página con la vista cambiada, no otra navegación. */
body[data-vista="config"] .app-layout,
body[data-vista="config"] .footer,
body[data-vista="config"] #licenciaCard { display: none; }

/* ---- panel de zonas: solo los barrios activos ---- */
.zonas-agregar { position: relative; margin-bottom: 12px; }
.zonas-lista { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.zona-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--white); font-size: .87rem; }
.zona-item span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zona-item small { color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.zona-quitar { flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid rgba(35,31,26,.18); border-radius: 7px; background: var(--white); color: var(--navy); font-size: 1rem; line-height: 1; cursor: pointer; }
.zona-quitar:hover { background: #f2eee2; }
.zonas-sugeridas { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 5px; list-style: none; max-height: 232px; overflow-y: auto; background: var(--white); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.zona-sugerencia { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 7px; font-size: .86rem; color: var(--ink); cursor: pointer; }
.zona-sugerencia:hover { background: #f2eee2; }
.ver-mas { margin-top: 4px; }

/* ---- sugerencias del campo de barrio (las dibuja la app, no el sistema) ---- */
.campo-con-sugerencias { position: relative; }
.campo-con-sugerencias .field { display: block; }
.zona-sugerencia { color: var(--ink); }
.zona-sugerencia.muted { color: var(--muted); }
.result-distancia { color: var(--blue); font-weight: 800; }
.result-catastro { color: #5f4416; background: #f7ecdb; border-radius: 5px; padding: 0 5px; font-size: .78rem; }
.result-confianza { display: inline-block; border-radius: 7px; padding: 0 7px; font-size: .68rem; font-weight: 800; background: #eef1ea; color: var(--blue); }
.result-confianza-manzana_alterna, .result-confianza-sin_manzana, .result-confianza-sin_lote, .result-confianza-sin_punto, .result-confianza-sin_fuente { background: #f7ecdb; color: #7a4a12; }
.result-confianza-campo { background: #e7f2ea; color: #0e6b50; }
.result-confianza-aproximada, .result-confianza-numero_casa { background: #f7ecdb; color: #7a4a12; }
.aviso-duplicado { margin: 0 0 10px; padding: 9px 11px; border-left: 3px solid #b3261e; background: #f9e9e6; border-radius: 0 7px 7px 0; font-size: .8rem; line-height: 1.45; color: #8b241a; }
.result-varias { color: #a93226; font-weight: 800; }
.result-motivo { display: block; margin-top: 3px; color: var(--blue); font-size: .78rem; font-weight: 700; }
.result-alternativas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.config-datos { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.config-datos h3 { margin: 0 0 10px; font-size: .95rem; color: var(--navy); }
.config-zonas-descarga { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.config-zonas-descarga h3 { margin: 0 0 10px; font-size: .95rem; color: var(--navy); }
.config-zonas-descarga .zone-actions { margin-bottom: 10px; }

/* --- ruta: volver a la base, rutas partidas y ubicacion del cliente --- */
.check-line { display: flex; align-items: center; gap: 9px; margin: 4px 0 2px; color: var(--ink); font-size: .78rem; cursor: pointer; }
.check-line input { width: 19px; height: 19px; margin: 0; accent-color: var(--accent); flex: 0 0 auto; }
.ruta-tramos { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 10px 0 4px; }
.ruta-tramos .muted { width: 100%; margin: 0; }

/* --- escaner de QR (X Cargo) --- */

/* --- resultados: primero manzana y lote, como habla el repartidor --- */
.result-mzlote { display: block; font-size: 1.02rem; color: var(--ink); letter-spacing: .2px; }
.result-calle { display: block; font-size: .78rem; color: var(--muted); margin-top: 1px; }

/* --- modo carga: agrupar entregas en salidas --- */


.map-card[hidden] { display: none !important; }
.map-toggle { width: 100%; margin-bottom: 8px; }


/* ===================================================================
   TEMA OSCURO
   El atributo data-tema lo pone un script del <head> antes de pintar, y lo
   cambia el boton de la barra. Todo se decide con las variables de :root,
   mas un bloque que corrige los colores que estaban escritos a mano.
   =================================================================== */
[data-tema="oscuro"] {
  /* --navy deja de ser "tinta oscura" y pasa a ser una tinta clara: en el
     tema claro se usa sobre fondo blanco, y en el oscuro sobre fondo negro. */
  --navy: #f0ebe0;
  --navy-2: #d6cfc0;
  --teal: #45c896;
  --blue: #8fc0ad;
  --accent: #f0692f;
  --accent-2: #d85a22;
  --accent-rgb: 240, 105, 47;
  --ink: #ece7db;
  --muted: #a49b8b;
  --line: #322e27;
  --paper: #131110;
  --white: #1c1915;
  --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 12px 32px rgba(0, 0, 0, .4);
}

[data-tema="oscuro"] body { background: var(--paper); }

/* La barra superior se oscurece; el boton de tema va sobre ella. */
[data-tema="oscuro"] .topbar { background: #0e0d0b; }

.tema-boton {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 9px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.tema-boton:active { transform: translateY(1px); }
.tema-boton:hover { background: rgba(255, 255, 255, .22); }
.tema-icono { width: 20px; height: 20px; grid-area: 1 / 1; }
/* En dia se ve la luna (a donde vas); en oscuro, el sol (a donde vuelves). */
.tema-sol { display: none; }
[data-tema="oscuro"] .tema-luna { display: none; }
[data-tema="oscuro"] .tema-sol { display: block; }

/* Superficies: tarjetas, listas, campos. */
[data-tema="oscuro"] .search-card,
[data-tema="oscuro"] .results-card,
[data-tema="oscuro"] .zones-card,
[data-tema="oscuro"] .map-card,
[data-tema="oscuro"] .panel-card,
[data-tema="oscuro"] .config-card {
  background: #1c1915;
  border-color: #2a2620;
}
[data-tema="oscuro"] .field input,
[data-tema="oscuro"] .zonas-filtro { background: #16130f; }
[data-tema="oscuro"] input,
[data-tema="oscuro"] select,
[data-tema="oscuro"] textarea { color: var(--ink); }
[data-tema="oscuro"] ::placeholder { color: var(--muted); opacity: .9; }
[data-tema="oscuro"] .result-item,
[data-tema="oscuro"] .parada,
[data-tema="oscuro"] .zona-item,
[data-tema="oscuro"] .zonas-sugeridas { background: #171410; border-color: #2a2620; }
[data-tema="oscuro"] .result-item:hover,
[data-tema="oscuro"] .result-item:focus-visible,
[data-tema="oscuro"] .zona-sugerencia:hover,
[data-tema="oscuro"] .zona-item:hover { background: #24201a; }
[data-tema="oscuro"] .result-item.result-sin-gps { background: #2a1512; border-color: #b94a3a; box-shadow: inset 3px 0 0 #ff7a66; }
[data-tema="oscuro"] .result-item.result-sin-gps:hover,
[data-tema="oscuro"] .result-item.result-sin-gps:focus-visible { background: #351b16; border-color: #ff8b78; }
[data-tema="oscuro"] .result-sin-gps .result-mzlote,
[data-tema="oscuro"] .result-gps-alerta { color: #ffb4a8; }
[data-tema="oscuro"] .result-gps-alerta::before { background: #ff7a66; color: #1c1915; }

/* Botones. */
[data-tema="oscuro"] .button-primary { background: var(--accent); color: #fff; }
[data-tema="oscuro"] .button-primary:hover { background: var(--accent-2); }
[data-tema="oscuro"] .chip-active,
[data-tema="oscuro"] .mini-primary { background: #f0ebe0; border-color: #f0ebe0; color: #131110; }
[data-tema="oscuro"] .button-secondary { background: #262119; color: #e8e2d6; }
[data-tema="oscuro"] .button-secondary:hover { background: #322b21; }
[data-tema="oscuro"] .button-quiet { background: #221f19; color: #d8d2c6; }
[data-tema="oscuro"] .button-quiet:hover { background: #2c2820; }
[data-tema="oscuro"] .icon-button { background: #1c1915; color: #d8d2c6; border-color: #322e27; }
[data-tema="oscuro"] .icon-button:hover { background: #262119; }
[data-tema="oscuro"] .chip,
[data-tema="oscuro"] .mini,
[data-tema="oscuro"] .zone-download,
[data-tema="oscuro"] .zona-quitar { background: #221f19; color: #e8e2d6; border-color: #3a352c; }
[data-tema="oscuro"] .chip:hover,
[data-tema="oscuro"] .mini:hover { background: #2c2820; }
[data-tema="oscuro"] .zona-quitar:hover,
[data-tema="oscuro"] .dialog-close:hover { background: #2c2820; }
[data-tema="oscuro"] .zone-download.ready { background: #14271f; color: #7fe3b6; border-color: #2c5c48; }

/* Textos de acento que estaban en color fijo. */
.eyebrow { color: var(--accent); }
[data-tema="oscuro"] .result-reference { color: #8f9c85; }
[data-tema="oscuro"] .result-catastro { color: #e8c79a; background: #2a2118; }
[data-tema="oscuro"] .result-varias { color: #ff8f7d; }
[data-tema="oscuro"] .result-distancia,
[data-tema="oscuro"] .result-motivo { color: #8fc0ad; }
[data-tema="oscuro"] .footer,
[data-tema="oscuro"] .source-note { color: #8a8272; }
[data-tema="oscuro"] .count-badge { background: #262119; color: #e8e2d6; }
[data-tema="oscuro"] .parada-lista { border-left-color: #4a4438; }
[data-tema="oscuro"] .parada-hoy { border-left-color: var(--accent); }

/* Estados: listo, error, avisos. */
[data-tema="oscuro"] .data-status { background: #1a1712; }
[data-tema="oscuro"] .data-status.ready { background: #14271f; color: #7fe3b6; }
[data-tema="oscuro"] .data-status.error { background: #2f1713; color: #ff9b8f; }
[data-tema="oscuro"] .aviso-duplicado { background: #2f1713; color: #ffb3a8; }
[data-tema="oscuro"] .spinner { border-color: #3a352c; }
[data-tema="oscuro"] .map-button,
[data-tema="oscuro"] .map-message { background: rgba(23, 20, 16, .94); color: #e5dfd3; }
[data-tema="oscuro"] .map-button:hover { background: #262119; }
[data-tema="oscuro"] .toast { background: #2c2820; }
[data-tema="oscuro"] .record-dialog { background: #1c1915; }
[data-tema="oscuro"] .field-note { background: #2a2118; color: #e8c79a; }

/* Pista de lotes cuando una busqueda no encuentra nada */
.pista-lotes {
  margin: 10px 0 2px;
  padding: 10px 12px;
  border-left: 3px solid var(--teal);
  border-radius: 0 8px 8px 0;
  background: rgba(14, 107, 80, .09);
  font-size: .84rem;
  line-height: 1.5;
  color: var(--ink);
}
.pista-lotes p { margin: 0; }
.pista-lotes .mini { margin-top: 8px; }
[data-tema="oscuro"] .pista-lotes { background: rgba(69, 200, 150, .13); border-left-color: #45c896; }

/* ===================================================================
   PULIDO VISUAL (18/10/2026): animaciones suaves, botón de tuerca y el
   recorrido de bienvenida de primera vez.
   =================================================================== */

@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes brotar { 0% { transform: scale(.55); opacity: 0; } 60% { transform: scale(1.07); opacity: 1; } 100% { transform: scale(1); } }
@keyframes trazar { to { stroke-dashoffset: 0; } }

/* Las tarjetas entran escalonadas al abrir la app. Es solo una entrada: con
   animation-fill-mode both el estado final es el normal de siempre. */
.search-card { animation: subir .5s cubic-bezier(.22, .7, .3, 1) both; }
.left-column > .panel-card { animation: subir .5s cubic-bezier(.22, .7, .3, 1) both; animation-delay: .08s; }
.left-column > .panel-card ~ .panel-card { animation-delay: .16s; }
.workspace { animation: subir .55s cubic-bezier(.22, .7, .3, 1) both; animation-delay: .1s; }
.aviso-mzona { animation: aparecer .3s ease both; }

/* Botón de configuración: una tuerca; abierto, una flecha para volver. */
.gear-icono { width: 20px; height: 20px; grid-area: 1 / 1; }
.gear-volver { display: none; }
body[data-vista="config"] .gear-tuerca { display: none; }
body[data-vista="config"] .gear-volver { display: block; }

/* ---- recorrido de bienvenida ---- */
.wizard {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(24, 20, 15, .68);
  animation: aparecer .25s ease both;
  touch-action: none;
}
.wizard[hidden] { display: none; }
body.wizard-abierto { overflow: hidden; overscroll-behavior: none; }
body.wizard-abierto .topbar,
body.wizard-abierto main,
body.wizard-abierto .footer { pointer-events: none; }
body.wizard-abierto .search-card,
body.wizard-abierto .workspace,
body.wizard-abierto .left-column > .panel-card,
body.wizard-abierto .wizard-paso.activo,
body.wizard-abierto .wizard-paso.activo .wizard-logo,
body.wizard-abierto .wizard-paso.activo .wizard-check-circulo,
body.wizard-abierto .wizard-paso.activo .wizard-check-tilde { animation: none !important; transform: none !important; }
.wizard-card {
  width: min(430px, 100%);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  position: relative;
  padding: 28px 22px 20px;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .38);
}
.wizard-saltar {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 0;
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--muted);
  background: transparent;
  font-size: .74rem;
  font-weight: 700;
}
.wizard-saltar:hover { color: var(--navy); background: rgba(35, 31, 26, .07); }
.wizard-paso { display: none; }
.wizard-paso.activo { display: block; animation: subir .38s cubic-bezier(.22, .7, .3, 1) both; }
.wizard-logo {
  width: 78px;
  height: 78px;
  margin: 8px auto 14px;
  display: block;
  object-fit: contain;
}
.wizard-paso.activo .wizard-logo { animation: brotar .55s cubic-bezier(.34, 1.3, .5, 1) both; }
.wizard-titulo { margin: 0 0 7px; text-align: center; font-size: 1.32rem; letter-spacing: -.02em; }
.wizard-texto { max-width: 32ch; margin: 0 auto 16px; text-align: center; font-size: .85rem; line-height: 1.55; }
.wizard-paso .button-wide { margin-top: 8px; }
.wizard-paso .button-wide:first-of-type { margin-top: 0; }
.wizard-opcion {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 10px;
  padding: 14px;
  border: 1.5px solid var(--line);
  border-radius: 15px;
  color: var(--ink);
  background: var(--white);
  text-align: left;
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease, background .18s ease;
}
.wizard-opcion:active { transform: scale(.985); }
.wizard-opcion:hover { border-color: var(--accent); }
.wizard-opcion.elegida {
  border-color: var(--accent);
  background: #fff7f0;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15);
}
[data-tema="oscuro"] .wizard-opcion.elegida { background: var(--white); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .22); }
.wizard-opcion-icono {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--navy);
  background: var(--paper);
}
.wizard-opcion-icono svg { width: 27px; height: 27px; }
[data-tema="oscuro"] .wizard-opcion-icono { background: #14110e; }
.wizard-opcion-texto { min-width: 0; }
.wizard-opcion-texto strong { display: block; font-size: .98rem; color: var(--navy); }
.wizard-opcion-texto small { display: block; margin-top: 3px; color: var(--muted); font-size: .74rem; line-height: 1.4; }
.wizard-pie { display: flex; justify-content: center; margin-top: 12px; }
.wizard-atras {
  border: 0;
  border-radius: 8px;
  padding: 7px 12px;
  color: var(--muted);
  background: transparent;
  font-size: .78rem;
  font-weight: 700;
}
.wizard-atras:hover { color: var(--navy); background: rgba(35, 31, 26, .07); }
.wizard-check { display: block; width: 94px; height: 94px; margin: 12px auto 14px; color: var(--teal); }
.wizard-check-circulo { stroke-dasharray: 266; stroke-dashoffset: 266; }
.wizard-check-tilde { stroke-dasharray: 62; stroke-dashoffset: 62; }
.wizard-paso.activo .wizard-check-circulo { animation: trazar .7s ease-out both; }
.wizard-paso.activo .wizard-check-tilde { animation: trazar .5s ease-out .45s both; }
.wizard-puntos { display: flex; justify-content: center; gap: 7px; margin-top: 20px; }
.wizard-punto { width: 8px; height: 8px; border-radius: 999px; background: var(--line); transition: width .25s ease, background .25s ease; }
.wizard-punto.activo { width: 22px; background: var(--accent); }

/* ---- configuración en bloques: una tarjeta por tema, con su icono ---- */
.config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.config-bloque {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 15px 13px;
  background: rgba(35, 31, 26, .022);
}
.config-bloque + .config-bloque-ancho,
.config-bloque-ancho {
  margin-top: 14px;
}
.config-bloque-cabecera {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 4px;
}
.config-bloque-cabecera h2 { margin: 0 0 3px; }
.config-bloque-cabecera p { margin: 0; }
.config-icono {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), .1);
}
.config-icono svg { width: 20px; height: 20px; }
.config-bloque .zone-mode { margin: 11px 0 2px; }
.config-bloque .zonas-agregar { margin-top: 6px; margin-bottom: 10px; }
.config-bloque .data-status { margin-top: 12px; }
.config-bloque.config-zonas-descarga { margin-top: 0; padding-top: 15px; border-top: 1px solid var(--line); }
[data-tema="oscuro"] .config-bloque { background: rgba(255, 255, 255, .022); }
[data-tema="oscuro"] .config-icono { background: rgba(var(--accent-rgb), .16); }
@media (max-width: 760px) {
  .config-grid { grid-template-columns: 1fr; }
}

/* Accesibilidad: con "reducir movimiento" activado no se anima nada. */
@media (prefers-reduced-motion: reduce) {
  .search-card, .left-column > .panel-card, .workspace, .config-card,
  .result-item, .aviso-mzona, .wizard, .wizard-paso.activo,
  .wizard-paso.activo .wizard-logo, .wizard-paso.activo .wizard-check-circulo,
  .wizard-paso.activo .wizard-check-tilde { animation: none !important; }
  .wizard-check-circulo, .wizard-check-tilde { stroke-dashoffset: 0 !important; }
}

@media (max-width: 560px) {
  .brand small { display: none; }
  .wizard-card { padding: 26px 16px 16px; }
}

/* Ajustes: jerarquía y controles compactos para uso con una mano. */
.config-card {
  width: min(980px, calc(100% - 24px));
  margin: 18px auto;
  padding: clamp(16px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  box-shadow: var(--shadow);
}
.config-card > .section-heading { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.config-card .section-heading .muted { margin: 6px 0 0; }
.config-grid { gap: 16px; }
.config-bloque { border-radius: 15px; transition: border-color .16s ease, background .16s ease; }
.config-bloque:focus-within { border-color: var(--accent); }
.theme-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-swatches .chip { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; }
.config-card .zone-mode .chip,
.config-card .theme-swatches .chip { min-height: 48px; padding: 10px 15px; font-size: .88rem; }
.config-card .zone-mode .chip[aria-pressed="true"],
.config-card .theme-swatches .chip[aria-pressed="true"],
.config-card .zone-mode .chip[aria-checked="true"] {
  background: color-mix(in srgb, var(--accent) 16%, var(--white));
  border: 2px solid var(--accent);
  color: var(--ink);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
  font-weight: 800;
}
.config-card .zone-mode .chip[aria-pressed="true"]::after,
.config-card .theme-swatches .chip[aria-pressed="true"]::after,
.config-card .zone-mode .chip[aria-checked="true"]::after { content: "✓"; margin-left: 4px; color: var(--accent); font-weight: 900; }
.theme-dot { width: 12px; height: 12px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.theme-dot-naranja { background: #d9480f; }
.theme-dot-verde { background: #0e6b50; }
.theme-dot-azul { background: #1769aa; }
.theme-dot-violeta { background: #7254a6; }
.theme-dot-rosado { background: #d63384; }
html[data-paleta="verde"] { --accent: #0e6b50; --accent-2: #07563f; --accent-rgb: 14, 107, 80; --teal: #0e6b50; --blue: #0e6b50; }
html[data-paleta="azul"] { --accent: #1769aa; --accent-2: #0f4f83; --accent-rgb: 23, 105, 170; --teal: #1769aa; --blue: #1769aa; }
html[data-paleta="violeta"] { --accent: #7254a6; --accent-2: #573d88; --accent-rgb: 114, 84, 166; --teal: #7254a6; --blue: #60468f; }
html[data-paleta="rosado"] { --accent: #c22570; --accent-2: #9d1857; --accent-rgb: 194, 37, 112; --teal: #c22570; --blue: #b21e65; }
/* Aviso de límites y verificación, compartido entre bienvenida y ajustes. */
.aviso-uso {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--white, #fff));
  color: var(--ink);
  line-height: 1.5;
  text-align: left;
}
.aviso-uso p { margin: 0.45rem 0 0; }
.aviso-uso h2 { margin: 0; font-size: 1rem; }
.wizard-paso .aviso-uso { font-size: 0.9rem; }
html[data-tema="oscuro"][data-paleta="verde"] { --accent: #55c49c; --accent-2: #36a77d; --accent-rgb: 85, 196, 156; --teal: #55c49c; --blue: #8ad7ba; }
html[data-tema="oscuro"][data-paleta="azul"] { --accent: #71b7f0; --accent-2: #4c98d4; --accent-rgb: 113, 183, 240; --teal: #71b7f0; --blue: #9acdf5; }
html[data-tema="oscuro"][data-paleta="violeta"] { --accent: #b6a0ee; --accent-2: #9b82d9; --accent-rgb: 182, 160, 238; --teal: #b6a0ee; --blue: #c9b9f4; }
html[data-tema="oscuro"][data-paleta="rosado"] { --accent: #f08ab8; --accent-2: #df6299; --accent-rgb: 240, 138, 184; --teal: #f08ab8; --blue: #f4a4c8; }

/* El modo lento elimina trabajo visual, sin rebajar GPS, búsqueda ni datos. */
html[data-rendimiento="bajo"] *,
html[data-rendimiento="bajo"] *::before,
html[data-rendimiento="bajo"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
html[data-rendimiento="bajo"] .search-card,
html[data-rendimiento="bajo"] .results-card,
html[data-rendimiento="bajo"] .zones-card,
html[data-rendimiento="bajo"] .map-card,
html[data-rendimiento="bajo"] .panel-card,
html[data-rendimiento="bajo"] .config-card,
html[data-rendimiento="bajo"] .record-dialog,
html[data-rendimiento="bajo"] .result-item { box-shadow: none !important; }
html[data-rendimiento="bajo"] .result-item { animation: none !important; }
html[data-rendimiento="bajo"] .leaflet-zoom-animated { transition: none !important; }
rd-check-circulo,
  .wizard-paso.activo .wizard-check-tilde { animation: none !important; }
  .wizard-check-circulo, .wizard-check-tilde { stroke-dashoffset: 0 !important; }
}

@media (max-width: 560px) {
  .brand small { display: none; }
  .wizard-card { padding: 26px 16px 16px; }
}