/* =====================================================================
   Recogida de enseres — hoja de estilos
   Lenguaje visual: cuadrante de servicio municipal.
   Tinta oscura de puerta de camión, papel reciclado, cinta de alta
   visibilidad y rayado de señalización para lo que está cerrado.
   ===================================================================== */

:root{
  --tinta:      #16181d;
  --tinta-70:   #4a4f59;
  --tinta-45:   #7b818c;
  --linea:      #d6d3ca;
  --papel:      #eceae4;
  --papel-2:    #f6f5f1;
  --blanco:     #fff;

  --hivis:      #d8e600;   /* cinta de alta visibilidad: acento único */
  --hivis-osc:  #a8b400;
  --senal:      #c62828;
  --verde:      #1a7f4b;
  --ambar:      #b45309;

  --r:      4px;
  --sombra: 0 1px 2px rgba(22,24,29,.06), 0 8px 24px -18px rgba(22,24,29,.5);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  color:var(--tinta);
  background:var(--papel);
}

h1,h2,h3{ margin:0; line-height:1.15; letter-spacing:-.015em }
h1{ font-size:1.6rem; font-weight:650 }
h2{ font-size:1.05rem; font-weight:650 }
h3{ font-size:.95rem; font-weight:650 }
p{ margin:0 0 .6rem }
a{ color:inherit }

/* Rótulos pequeños: la voz de la hoja de ruta */
.eyebrow,.tarjeta__titulo,.cab__rol,.marcador__item span,.datos span,.zona__n,.ficha__n{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700;
  color:var(--tinta-45);
}
.num,.tel,.dia__num,.dia__cupo,.marcador__item b,input[type=date],.historial span{
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------ cabecera */
.cab{
  position:sticky; top:0; z-index:900;
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  padding:.6rem 1.2rem;
  background:var(--tinta); color:#f2f1ee;
  border-bottom:3px solid var(--hivis);
}
.cab__marca{ display:flex; align-items:center; gap:.7rem; margin-right:auto }
.cab__marca a{ text-decoration:none; display:block }
.cab__marca b{ display:block; font-size:.95rem; letter-spacing:-.01em }
.cab__marca small{ display:block; font-size:.7rem; color:#9aa0ab; letter-spacing:.06em; text-transform:uppercase }
.cab__cinta{
  width:10px; height:34px; border-radius:1px;
  background:repeating-linear-gradient(-45deg,var(--hivis) 0 5px,var(--tinta) 5px 10px);
}
.cab__nav{ display:flex; flex-wrap:wrap; gap:.15rem }
.cab__nav a{
  padding:.42rem .7rem; border-radius:var(--r); text-decoration:none;
  font-size:.85rem; color:#c9ccd3;
}
.cab__nav a:hover{ background:#22252c; color:#fff }
.cab__nav a.activo{ background:var(--hivis); color:var(--tinta); font-weight:650 }
.cab__yo{ display:flex; align-items:center; gap:.6rem; font-size:.8rem }
.cab__rol{ color:#8c929d }
.cab__nombre{ color:#e7e6e2 }
.cab .btn--fantasma{ border-color:#3a3f49; color:#e7e6e2 }
.cab .btn--fantasma:hover{ background:var(--hivis); border-color:var(--hivis); color:var(--tinta) }

.contenido{ max-width:1280px; margin:0 auto; padding:1.4rem 1.2rem 4rem }

.pie{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  max-width:1280px; margin:0 auto; padding:1rem 1.2rem 2rem;
  font-size:.75rem; color:var(--tinta-45); border-top:1px solid var(--linea);
}

/* ------------------------------------------------------------- titular */
.titular{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin-bottom:1.1rem;
}
.titular .eyebrow{ display:block; margin-bottom:.15rem }

/* ------------------------------------------------------------- avisos */
.aviso{
  padding:.7rem .9rem; margin-bottom:1rem; border-radius:var(--r);
  border-left:4px solid var(--tinta); background:var(--blanco); box-shadow:var(--sombra);
  font-size:.9rem;
}
.aviso ul{ margin:.4rem 0 0; padding-left:1.1rem }
.aviso--ok{ border-left-color:var(--verde) }
.aviso--error{ border-left-color:var(--senal) }
.aviso--aviso{ border-left-color:var(--ambar) }

/* ------------------------------------------------------------ botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.5rem .9rem; border:1px solid var(--tinta); border-radius:var(--r);
  background:var(--blanco); color:var(--tinta);
  font:inherit; font-size:.85rem; font-weight:600; text-decoration:none; cursor:pointer;
  transition:background .12s ease, color .12s ease, transform .12s ease;
}
.btn:hover{ background:var(--tinta); color:var(--blanco) }
.btn--principal{ background:var(--hivis); border-color:var(--hivis-osc); color:var(--tinta) }
.btn--principal:hover{ background:var(--tinta); border-color:var(--tinta); color:var(--hivis) }
.btn--fantasma{ border-color:var(--linea); background:transparent; font-weight:500 }
.btn--fantasma:hover{ background:var(--tinta); color:var(--blanco) }
.btn--peligro{ border-color:var(--senal); color:var(--senal) }
.btn--peligro:hover{ background:var(--senal); color:#fff }
.btn--icono{ padding:.4rem .65rem; font-size:1rem; line-height:1 }
.btn--mini{ padding:.3rem .6rem; font-size:.78rem }
.btn:disabled{ opacity:.45; cursor:not-allowed }

.enlace-peligro{
  border:0; background:none; padding:.2rem; color:var(--senal);
  font:inherit; font-size:.78rem; text-decoration:underline; cursor:pointer;
}

:focus-visible{ outline:3px solid var(--hivis-osc); outline-offset:2px }

/* ----------------------------------------------------------- tarjetas */
.tarjeta{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r);
  padding:1.1rem; margin-bottom:1.1rem; box-shadow:var(--sombra);
}
.tarjeta__titulo{ margin-bottom:.7rem; display:flex; align-items:center; gap:.5rem }
.cuenta{
  font-family:var(--mono); font-size:.7rem; padding:.05rem .35rem;
  background:var(--papel); border-radius:2px; color:var(--tinta-70);
}
.rejilla-2{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:1.1rem; align-items:start }
.lateral .tarjeta:last-child{ margin-bottom:0 }
.pista{ font-size:.8rem; color:var(--tinta-45); margin:.5rem 0 0 }
.destacado{ font-size:1.05rem; font-weight:650; margin:.2rem 0 }
.vacio{ text-align:center; padding:2.2rem 1rem }

.datos{ list-style:none; margin:0; padding:0 }
.datos li{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.42rem 0; border-bottom:1px dashed var(--linea) }
.datos li:last-child{ border-bottom:0 }
.datos b{ font-weight:650; text-align:right }
.datos--roles b{ font-weight:500; font-size:.85rem; color:var(--tinta-70) }

.punto{ display:inline-block; width:.6rem; height:.6rem; border-radius:50%; vertical-align:middle }

/* =====================================================================
   CALENDARIO — el elemento con carácter de la aplicación.
   Cada día muestra una barra con un tramo por hueco disponible,
   pintado con el color de la zona que lo ocupa.
   ===================================================================== */
.cal__barra{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.7rem }
.cal__titulo{ font-size:1rem; text-transform:uppercase; letter-spacing:.12em }
.cal__titulo span{ color:var(--tinta-45); font-weight:500 }

.cal__semana{
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px;
}
.cal__semana span{
  text-align:center; font-size:.65rem; font-weight:700; letter-spacing:.12em;
  color:var(--tinta-45); padding-bottom:.2rem; border-bottom:1px solid var(--linea);
}
.cal__rejilla{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px }

.dia{
  display:flex; flex-direction:column; gap:.25rem;
  min-height:92px; padding:.4rem .45rem;
  border:1px solid var(--linea); border-radius:var(--r);
  background:var(--papel-2); text-decoration:none; text-align:left;
  font:inherit; color:inherit; cursor:pointer;
  transition:border-color .12s ease, transform .12s ease;
}
.dia--vacio{ border:0; background:transparent; min-height:0; cursor:default }
.dia__num{ font-size:1.05rem; font-weight:650; line-height:1 }
.dia__cupo{ font-size:.68rem; color:var(--tinta-45); font-weight:600 }

.dia:hover:not(.dia--bloqueado):not(.dia--vacio){ border-color:var(--tinta); transform:translateY(-1px) }
.dia--libre{ background:var(--blanco) }
.dia--hoy{ box-shadow:inset 0 0 0 2px var(--tinta) }
.dia--elegido{ background:var(--hivis); border-color:var(--hivis-osc) }
.dia--elegido .dia__cupo{ color:var(--tinta) }

/* Rayado de señalización: el día no admite citas */
.dia--completo,.dia--cerrado{
  background-image:repeating-linear-gradient(-45deg,transparent 0 6px,rgba(22,24,29,.07) 6px 12px);
}
.dia--completo .dia__cupo{ color:var(--senal) }
.dia--pasado,.dia--fuera_plazo{ background:var(--papel); color:var(--tinta-45) }
.dia--bloqueado{ cursor:not-allowed }

/* barra de huecos */
.barra{ display:flex; gap:2px; height:7px; margin-top:auto }
.barra i{ flex:1 1 0; background:var(--linea); border-radius:1px }

.chips{ display:flex; flex-wrap:wrap; gap:2px }
.chip{
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.05rem .32rem; border-radius:2px;
  font-size:.63rem; font-weight:600; line-height:1.5;
  background:color-mix(in srgb, var(--c) 16%, white);
  border-left:3px solid var(--c);
  color:var(--tinta);
}
.chip b{ font-family:var(--mono); font-size:.62rem }
.chip--mas{ background:var(--papel); border-left-color:var(--tinta-45) }
.leyenda{ display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.8rem }
.leyenda .chip{ font-size:.72rem; padding:.15rem .45rem }

/* resumen del día elegido en el formulario */
.resumen-dia{
  margin-top:.8rem; padding:.7rem .8rem; border-radius:var(--r);
  background:var(--papel-2); border-left:4px solid var(--hivis-osc);
}
.resumen-dia h4{ margin:0 0 .3rem; font-size:.9rem }
.resumen-dia ul{ margin:.4rem 0 0; padding-left:1.1rem; font-size:.82rem; color:var(--tinta-70) }

/* ---------------------------------------------------------- formularios */
.formulario{ display:block }
.campo{ display:flex; flex-direction:column; gap:.25rem; margin:0 0 .8rem }
.campo label,.formulario legend{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  font-weight:700; color:var(--tinta-70);
}
.campo--check label,.opciones label{
  display:inline-flex; align-items:center; gap:.4rem;
  text-transform:none; letter-spacing:0; font-size:.88rem; font-weight:500; color:var(--tinta);
}
.campos-2{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem }

input[type=text],input[type=password],input[type=number],input[type=date],
input[type=search],input:not([type]),select,textarea{
  width:100%; padding:.5rem .6rem;
  border:1px solid var(--linea); border-radius:var(--r);
  background:var(--blanco); color:var(--tinta);
  font:inherit; font-size:.92rem;
}
input:focus,select:focus,textarea:focus{ border-color:var(--tinta); outline:3px solid var(--hivis-osc); outline-offset:1px }
textarea{ resize:vertical }
input[type=color]{ width:3rem; height:2.2rem; padding:2px; border:1px solid var(--linea); border-radius:var(--r); background:var(--blanco) }
input[type=file]{ font-size:.85rem }
fieldset{ border:0; padding:0; margin:0 0 .8rem }

.opciones{ display:flex; flex-wrap:wrap; gap:.4rem .9rem }
.opciones--col{ flex-direction:column; gap:.3rem }
.opciones + .campo,.opciones--col + .campo{ margin-top:.8rem }

.formulario--linea{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:.6rem }
.formulario--linea .campo{ margin:0; min-width:9rem }
.formulario--linea .campo--ancho{ flex:1 1 14rem }
.formulario--linea .campo--corto{ min-width:5.5rem; width:5.5rem }
.formulario--suelto{ margin-top:.9rem; display:flex; gap:.5rem; flex-wrap:wrap }
.formulario--suelto input{ flex:1 1 8rem }
.botonera{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.6rem }
.botonera--fin{ margin-top:.8rem }

.paso{
  display:flex; align-items:center; gap:.55rem; margin:0 0 .9rem;
  font-size:1rem; text-transform:uppercase; letter-spacing:.06em;
}
.paso small{ text-transform:none; letter-spacing:0; color:var(--tinta-45); font-weight:500 }
.paso span{
  display:grid; place-items:center; width:1.5rem; height:1.5rem;
  background:var(--tinta); color:var(--hivis); border-radius:50%;
  font-size:.8rem; font-weight:700;
}
.paso + .paso{ margin-top:1.4rem }

.acciones-fijas{
  position:sticky; bottom:0; z-index:800;
  display:flex; justify-content:flex-end; gap:.6rem;
  padding:.8rem 0; margin-top:.4rem;
  background:linear-gradient(to top,var(--papel) 70%,rgba(236,234,228,0));
}
.buscador{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:.7rem }
.buscador .campo:first-child{ flex:1 1 20rem; margin:0 }
.buscador .campo{ margin:0 }

/* ---------------------------------------------------------------- mapa */
.mapa{ height:340px; border:1px solid var(--linea); border-radius:var(--r); background:var(--papel-2) }
.mapa--alto{ height:440px }
.mapa--sin{
  display:grid; place-items:center; padding:1.2rem; text-align:center;
  font-size:.85rem; color:var(--tinta-45);
  background-image:repeating-linear-gradient(-45deg,transparent 0 8px,rgba(22,24,29,.05) 8px 16px);
}
.mapa-fila{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:1rem; align-items:start }
.marcador-mapa{ border-radius:50%; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.4) }
.pop b{ display:block; margin-bottom:.15rem }
.pop small{ color:var(--tinta-45) }

/* --------------------------------------------------------- hoja de ruta */
.nav-dia{ display:flex; align-items:center; gap:.4rem }
.nav-dia input[type=date]{ width:auto }

.marcador{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.6rem;
  padding:.9rem 1.1rem; margin-bottom:1.1rem;
  background:var(--tinta); color:#f1f0ed; border-radius:var(--r);
}
.marcador__item{ display:flex; flex-direction:column; line-height:1.1 }
.marcador__item b{ font-size:1.5rem; font-weight:650 }
.marcador__item span{ color:#9aa0ab }
.marcador__acciones{ margin-left:auto; display:flex; flex-wrap:wrap; gap:.5rem }
.marcador__acciones .btn--fantasma{ border-color:#3a3f49; color:#e7e6e2 }
.marcador__acciones .btn--fantasma:hover{ background:var(--hivis); color:var(--tinta); border-color:var(--hivis) }

.zona{ margin-bottom:1.4rem }
.zona__cab{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:.45rem .7rem; border-left:6px solid var(--c);
  background:color-mix(in srgb, var(--c) 12%, white);
  border-radius:var(--r);
}
.zona__cab h2{ font-size:1rem }
.zona__cab .btn{ margin-left:auto }

.parada{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  background:var(--blanco); border:1px solid var(--linea); border-left:6px solid var(--c);
  border-radius:var(--r); padding:.9rem 1rem; margin-top:.55rem; box-shadow:var(--sombra);
}
.parada__datos{ flex:1 1 22rem; min-width:0 }
.parada__cab{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; margin-bottom:.15rem }
.parada__cab h3{ font-size:1rem }
.parada__persona{ font-size:.88rem; color:var(--tinta-70); margin-bottom:.35rem }
.parada__persona .tel{ font-family:var(--mono); font-size:.85rem }
.parada__detalle{ font-size:.9rem; margin-bottom:.5rem }
.parada__acciones{ display:flex; flex-wrap:wrap; gap:.4rem }
.parada--recogida{ background:#f6faf7 }
.parada--no_realizada{ background:#fdf8f1 }
.parada--cancelada{ opacity:.55 }
.parada--cancelada .parada__datos h3{ text-decoration:line-through }

.nota{
  font-size:.85rem; background:var(--papel-2); border-left:3px solid var(--ambar);
  padding:.45rem .6rem; border-radius:2px; margin:.4rem 0;
}

.estado{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  padding:.1rem .4rem; border-radius:2px; white-space:nowrap }
.estado--pendiente{ background:var(--papel); color:var(--tinta-70); border:1px solid var(--linea) }
.estado--ok{ background:#e3f2e9; color:var(--verde) }
.estado--incidencia{ background:#fbeee0; color:var(--ambar) }
.estado--cancelada{ background:#fbe4e4; color:var(--senal) }

.cierre{ flex:1 1 17rem; background:var(--papel-2); border-radius:var(--r); padding:.6rem .75rem; align-self:flex-start }
.cierre summary{ cursor:pointer; font-size:.82rem; font-weight:650 }
.cierre form{ margin-top:.7rem }
.cierre .campo{ margin-bottom:.6rem }

.miniaturas{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0 }
.miniaturas img{ width:78px; height:78px; object-fit:cover; border-radius:var(--r); border:1px solid var(--linea) }
.miniaturas--grande img{ width:104px; height:104px }
.miniaturas figure{ margin:0; text-align:center }

.historial{ list-style:none; margin:0; padding:0; font-size:.82rem }
.historial li{ padding:.4rem 0; border-bottom:1px dashed var(--linea) }
.historial li:last-child{ border-bottom:0 }
.historial span{ display:block; color:var(--tinta-45); font-size:.72rem }
.historial em{ color:var(--tinta-70) }

/* ------------------------------------------------------------- tablas */
.tabla-envoltorio{ overflow-x:auto }
.tabla{ width:100%; border-collapse:collapse; font-size:.88rem }
.tabla th{
  text-align:left; font-size:.66rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--tinta-45); padding:.4rem .5rem; border-bottom:1px solid var(--linea); white-space:nowrap;
}
.tabla td{ padding:.5rem; border-bottom:1px solid var(--papel); vertical-align:middle }
.tabla tr:hover td{ background:var(--papel-2) }
.tabla .num{ font-family:var(--mono); font-size:.82rem; white-space:nowrap }

/* -------------------------------------------------------------- fichas */
.fichas{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem }
.ficha{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:.8rem;
  padding:.7rem .8rem; border:1px solid var(--linea); border-radius:var(--r);
  border-left:6px solid var(--c,var(--tinta)); background:var(--papel-2);
}
.ficha .formulario--linea{ flex:1 1 24rem }
.ficha--apagada{ opacity:.55 }
.ficha__login{ font-family:var(--mono); font-weight:650; font-size:.9rem }
.ficha__n{ white-space:nowrap }

/* -------------------------------------------------------------- acceso */
.pantalla-acceso{
  min-height:100vh; display:grid; place-items:center; padding:1.5rem;
  background:var(--tinta);
}
.acceso{
  width:min(880px,100%); display:grid; grid-template-columns:1fr 1fr;
  background:var(--blanco); border-radius:var(--r); overflow:hidden; box-shadow:0 30px 80px -40px #000;
}
.acceso__marca{ padding:2.2rem 1.8rem; background:var(--tinta); color:#f2f1ee }
.acceso__marca h1{ margin:1rem 0 .4rem; font-size:1.5rem }
.acceso__marca p{ color:#9aa0ab; font-size:.88rem }
.acceso__form{ padding:2.2rem 1.8rem }
.acceso__form label{
  display:block; margin-bottom:.25rem; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--tinta-70);
}
.acceso__form input{ margin-bottom:1rem }
.acceso__form .btn{ width:100% }

/* ------------------------------------------------------------ responsive */
@media (max-width:980px){
  .rejilla-2,.mapa-fila{ grid-template-columns:1fr }
  .cab{ padding:.5rem .8rem }
  .cab__nav{ order:3; width:100%; overflow-x:auto }
}
@media (max-width:700px){
  body{ font-size:14px }
  .cab{ position:static; gap:.5rem .8rem; padding:.5rem .7rem }
  .cab__cinta{ height:26px; width:8px }
  .cab__marca b{ font-size:.85rem }
  .cab__rol{ display:none }
  .cab__nav{ order:0; width:auto; flex:1 1 100%; gap:.1rem }
  .cab__nav a{ padding:.35rem .55rem; font-size:.8rem }
  .cab__yo{ font-size:.75rem }
  .contenido{ padding:1rem .8rem 3rem }
  .campos-2{ grid-template-columns:1fr }
  .dia{ min-height:66px; padding:.3rem .3rem }
  .dia .chips{ display:none }
  .dia__cupo{ font-size:.6rem }
  .marcador{ gap:1rem }
  .marcador__item b{ font-size:1.2rem }
  .marcador__acciones{ margin-left:0; width:100% }
  .acceso{ grid-template-columns:1fr }
  .acceso__marca{ padding:1.4rem }
  .parada{ padding:.75rem .8rem }
  .cierre{ flex-basis:100% }
  .mapa{ height:260px }
  .mapa--alto{ height:320px }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important }
  .dia:hover{ transform:none }
}

/* --------------------------------------------------------------- print */
@media print{
  .cab,.pie,.marcador__acciones,.cierre,.parada__acciones,.nav-dia,.aviso,#mapa-caja{ display:none !important }
  body{ background:#fff; font-size:11pt }
  .tarjeta,.parada{ box-shadow:none; break-inside:avoid }
  .marcador{ background:#fff; color:#000; border:1px solid #000 }
  .marcador__item span{ color:#000 }
  .zona__cab{ background:#fff; border-left:6px solid #000 }
  a[href]::after{ content:"" }
}

/* =====================================================================
   Versión 2: marca propia, contacto, informes y ajustes
   ===================================================================== */

/* ------------------------------------------------------- logotipo */
.cab__logo{ display:flex; align-items:center; margin-right:auto; padding-right:.6rem }
.cab__logo img{ height:40px; width:auto; max-width:210px; object-fit:contain; display:block }
.acceso__logo{ max-width:200px; max-height:70px; object-fit:contain; display:block; margin-bottom:.4rem }
.logo-actual{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.8rem; margin-bottom:.8rem; background:var(--papel-2); border-radius:var(--r);
  background-image:repeating-linear-gradient(-45deg,transparent 0 8px,rgba(22,24,29,.04) 8px 16px);
}
.logo-actual img{ max-height:56px; max-width:220px; object-fit:contain }

/* ---------------------------------------------- zona con su color */
.zona-caja{ display:flex; align-items:stretch; gap:.4rem }
.zona-muestra{
  width:1.9rem; flex:0 0 1.9rem; border-radius:var(--r);
  border:1px solid var(--linea); background:transparent;
}
.select-zona{ flex:1 }
.select-zona option{ padding:.3rem }

/* ------------------------------------------------------- contacto */
.campo-con-boton{ display:flex; gap:.4rem; align-items:stretch; flex-wrap:wrap }
.campo-con-boton input{ flex:1 1 10rem }
.btn--wa{ border-color:#1f9d55; color:#12703b; font-weight:650 }
.btn--wa:hover{ background:#1f9d55; border-color:#1f9d55; color:#fff }
.btn--tel{ border-color:var(--linea) }
.contacto{ display:inline-flex; gap:.3rem; margin-left:.4rem; vertical-align:middle }
.wa-mini{
  display:inline-block; margin-left:.35rem; padding:0 .3rem; border-radius:2px;
  background:#e3f2e9; color:#12703b; font-size:.66rem; font-weight:700; text-decoration:none;
}
.ref{ font-family:var(--mono); font-size:.82rem; color:var(--tinta-45) }
.pista--linea{ margin:0; align-self:center }
.nota--obs{ border-left-color:var(--tinta-45) }

/* ----------------------------------------------------------- mapa */
.mapa--grande{ height:1560px }
.mapa-herramientas{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:.6rem; margin-bottom:.8rem;
}
.mapa-herramientas .campo{ margin:0 }
.mapa-herramientas .campo--ancho{ flex:1 1 18rem }

/* -------------------------------------------------------- ajustes */
.mosaico{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.8rem }
.mosaico__item{
  display:block; padding:1rem 1.1rem; text-decoration:none;
  background:var(--blanco); border:1px solid var(--linea); border-left:6px solid var(--tinta);
  border-radius:var(--r); box-shadow:var(--sombra);
  transition:border-left-color .12s ease, transform .12s ease;
}
.mosaico__item:hover{ border-left-color:var(--hivis-osc); transform:translateY(-1px) }
.mosaico__item b{ display:block; margin-bottom:.2rem }
.mosaico__item span{ font-size:.83rem; color:var(--tinta-45) }
.campos-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem }
.ficha__solo{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; flex:1 1 22rem }

/* ------------------------------------------------------- informes */
.filtros{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1.2rem }
.filtros__bloque--ancho{ grid-column:1 / -1 }
.filtros__bloque .tarjeta__titulo{ margin-bottom:.5rem }
.opciones--rejilla{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.3rem .9rem;
}
.tabla--informe td{ vertical-align:top; font-size:.83rem; max-width:22rem }
.tabla--informe img.mini{
  width:38px; height:38px; object-fit:cover; border-radius:2px;
  border:1px solid var(--linea); margin:1px;
}

@media (max-width:980px){
  .campos-3{ grid-template-columns:1fr }
  .mapa--grande{ height:1140px }
}
@media (max-width:700px){
  .cab__logo img{ height:30px; max-width:140px }
  .mapa--grande{ height:960px }
}
@media print{
  .cab__logo{ display:block !important }
}

/* =====================================================================
   Versión 2.1: zonas en radio, recogidas de vía pública
   ===================================================================== */

/* --------------------------------------------- zonas como botones */
.zonas-radio{ display:flex; flex-wrap:wrap; gap:.4rem }
.zonas-radio .zona-op,
.campo .zonas-radio label{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.42rem .7rem .42rem .55rem;
  border:1px solid var(--linea); border-left:5px solid var(--c);
  border-radius:var(--r); background:var(--blanco);
  font-size:.88rem; font-weight:500; cursor:pointer;
  text-transform:none; letter-spacing:0; color:var(--tinta);
  transition:background .12s ease, border-color .12s ease;
}
.zonas-radio .zona-op{ text-transform:none; letter-spacing:0; font-weight:500; color:var(--tinta) }
.zona-op:hover{ background:color-mix(in srgb, var(--c) 10%, white) }
.zona-op input{ position:absolute; opacity:0; width:0; height:0 }
.zona-op__punto{
  width:.85rem; height:.85rem; border-radius:50%;
  border:2px solid var(--c); background:transparent; flex:0 0 auto;
}
.zona-op:has(input:checked){
  background:color-mix(in srgb, var(--c) 18%, white);
  border-color:var(--c); font-weight:650;
  box-shadow:inset 0 0 0 1px var(--c);
}
.zona-op:has(input:checked) .zona-op__punto{ background:var(--c) }
.zona-op:has(input:focus-visible){ outline:3px solid var(--hivis-osc); outline-offset:2px }

/* Reserva para navegadores sin :has() — el color del borde ya distingue */
.zona-op input:checked ~ .zona-op__nombre{ font-weight:650 }

/* ------------------------------------------- botón copiar dirección */
.btn--copiar{ white-space:nowrap; border-style:dashed }
.campo-con-boton .btn--copiar{ flex:0 0 auto }

/* --------------------------------------------------- vía pública */
.estado--calle{ background:#e6eefb; color:#1d4ed8 }
.chip--calle{
  background:#e6eefb; border-left-color:#1d4ed8; color:#1d4ed8;
}
.parada--calle{ border-left-style:dashed }

/* =====================================================================
   Guía de uso
   ===================================================================== */
.guia__resumen{ font-size:1.05rem; color:var(--tinta-70); max-width:60ch; margin-bottom:1rem }
.guia__niveles{ display:flex; gap:.5rem; margin-bottom:1rem }
.guia__perfiles{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;
  padding:.7rem .9rem; margin-bottom:1.2rem;
  background:var(--papel-2); border-radius:var(--r); border-left:4px solid var(--tinta);
}
.guia__perfiles .eyebrow{ margin-right:.3rem }

/* ------------------------------------------------------ guía rápida */
.guia-pasos{ list-style:none; margin:0 0 1.2rem; padding:0; counter-reset:paso }
.guia-paso{
  display:flex; gap:.9rem; align-items:flex-start;
  background:var(--blanco); border:1px solid var(--linea); border-left:5px solid var(--hivis-osc);
  border-radius:var(--r); padding:.9rem 1rem; margin-bottom:.5rem; box-shadow:var(--sombra);
  break-inside:avoid;
}
.guia-paso__n{
  flex:0 0 auto; display:grid; place-items:center;
  width:1.9rem; height:1.9rem; border-radius:50%;
  background:var(--tinta); color:var(--hivis);
  font-weight:700; font-size:.9rem; font-variant-numeric:tabular-nums;
}
.guia-paso b{ display:block; font-size:1rem; margin-bottom:.15rem }
.guia-paso p{ margin:0; color:var(--tinta-70); font-size:.92rem }

/* En el móvil del equipo de recogida, todo más grande y con más aire */
.guia-pasos--movil .guia-paso{ padding:1.1rem }
.guia-pasos--movil .guia-paso b{ font-size:1.05rem }
.guia-pasos--movil .guia-paso p{ font-size:.98rem; line-height:1.55 }
.guia-pasos--movil .guia-paso__n{ width:2.2rem; height:2.2rem; font-size:1rem }

/* --------------------------------------------------- guía detallada */
.guia-detalle{ max-width:78ch }
.guia-bloque{ break-inside:avoid }
.guia-bloque__titulo{
  display:flex; align-items:center; gap:.6rem; margin-bottom:.7rem;
  font-size:1.05rem;
}
.guia-bloque__titulo span{
  display:grid; place-items:center; width:1.6rem; height:1.6rem; flex:0 0 auto;
  border-radius:50%; background:var(--hivis); color:var(--tinta);
  font-size:.8rem; font-weight:700;
}
.guia-lista{ margin:0; padding-left:1.1rem }
.guia-lista li{ margin-bottom:.5rem; color:var(--tinta-70); line-height:1.55 }
.guia-lista li:last-child{ margin-bottom:0 }
.guia__pie{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; justify-content:space-between }
.guia__pie p{ margin:0; max-width:52ch }

@media (max-width:700px){
  .guia__resumen{ font-size:.98rem }
  .guia__niveles .btn{ flex:1 1 0; justify-content:center }
  .guia-paso{ padding:.8rem }
}
@media print{
  .no-imprimir{ display:none !important }
  .guia-paso,.guia-bloque{ box-shadow:none; border-color:#999 }
  .guia-paso__n,.guia-bloque__titulo span{ background:#000; color:#fff; -webkit-print-color-adjust:exact; print-color-adjust:exact }
}

/* ------------------------------------- v2.4: plantillas y validación */
.plantillas{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem }
.plantillas li{
  display:flex; align-items:center; gap:.5rem; padding:.5rem .7rem;
  border:1px solid var(--linea); border-left:5px solid var(--tinta); border-radius:var(--r);
  background:var(--papel-2);
}
.plantillas li.activa{ border-left-color:var(--hivis-osc); background:var(--blanco) }
.plantillas a{ text-decoration:none }
.plantillas b{ display:block; font-size:.92rem }
.plantillas span{ font-size:.75rem; color:var(--tinta-45) }
.periodos{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.8rem }
.periodo-op{ text-transform:none; letter-spacing:0 }
.periodo-op input{ position:absolute; opacity:0; width:0; height:0 }
.periodo-op span{
  display:inline-block; padding:.42rem .8rem; border:1px solid var(--linea);
  border-radius:var(--r); background:var(--blanco); font-size:.88rem; cursor:pointer;
}
.periodo-op:has(input:checked) span{ background:var(--hivis); border-color:var(--hivis-osc); font-weight:650 }
.periodo-op:has(input:focus-visible) span{ outline:3px solid var(--hivis-osc); outline-offset:2px }
.estado--validar{ background:#efe6fb; color:#6d28d9 }
.chip--validar{ background:#efe6fb; border-left-color:#6d28d9; color:#6d28d9 }
.validar-ficha{ display:flex; flex-wrap:wrap; gap:1.2rem; border-left:6px solid var(--c) }
.validar-ficha__datos{ flex:1 1 24rem; min-width:0 }
.validar-ficha__acciones{ flex:1 1 15rem }
.dia-mini{ text-transform:none; letter-spacing:0; font-weight:600 }
.periodo-activo{ margin:.3rem 0 0; font-size:.85rem; color:var(--tinta-45) }
.periodo-activo b{ color:var(--tinta) }

/* --------------------------- v2.5: historial del teléfono al teclear */
.aviso-tel{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  margin:-.4rem 0 .9rem; padding:.6rem .8rem;
  background:var(--papel-2); border-left:4px solid var(--tinta); border-radius:var(--r);
  font-size:.85rem;
}
.aviso-tel--ojo{ background:#fdf0e3; border-left-color:var(--ambar) }
.aviso-tel__ojo{
  padding:.1rem .4rem; border-radius:2px; background:var(--ambar); color:#fff;
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
}
.dlg{ border:0; padding:0; background:transparent; max-width:min(920px,94vw); width:100% }
.dlg::backdrop{ background:rgba(22,24,29,.55) }
.dlg__caja{
  background:var(--blanco); border-radius:var(--r); overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6); display:flex; flex-direction:column;
  max-height:88vh;
}
.dlg__cab{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding:1rem 1.2rem; background:var(--tinta); color:#f2f1ee;
}
.dlg__cab h2{ font-size:1.15rem; margin-top:.15rem }
.dlg__cab .eyebrow{ color:#9aa0ab }
.dlg__cab .btn{ background:transparent; border-color:#3a3f49; color:#e7e6e2 }
.dlg__cuerpo{ padding:1.2rem; overflow:auto }
.dlg__pie{
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.6rem;
  padding:.9rem 1.2rem; border-top:1px solid var(--linea); background:var(--papel-2);
}
.dlg__ultima{
  padding:.9rem 1rem; margin-bottom:1.2rem;
  background:var(--papel-2); border-left:5px solid var(--hivis-osc); border-radius:var(--r);
}
.dlg__ultima dl{ display:grid; grid-template-columns:minmax(8rem,auto) 1fr; gap:.35rem .9rem; margin:.5rem 0 0 }
.dlg__ultima dt{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  font-weight:700; color:var(--tinta-45);
}
.dlg__ultima dd{ margin:0; font-size:.92rem }
@media (max-width:700px){
  .dlg__ultima dl{ grid-template-columns:1fr; gap:.1rem .5rem }
  .dlg__ultima dt{ margin-top:.5rem }
  .dlg__pie .btn{ flex:1 1 100% }
}