/* =========================================================================
   Ojo Comas · Prototipo ciudadano (Comas, Lima, Perú)
   styles.css — Hoja de estilos propia. Mobile-first (probado a 360 px).
   Todo el layout crítico vive aquí: NO depende de Tailwind ni de ningún build.
   Paleta: rojo institucional #C8102E · verde #1F9D55 · ámbar #E8A33D
   ========================================================================= */

/* ----------------------------- 1. Tokens -------------------------------- */
:root {
  --rojo: #C8102E;
  --rojo-oscuro: #9E0C24;
  --rojo-claro: #FDECEF;
  --verde: #1F9D55;
  --verde-claro: #E8F6EE;
  --ambar: #E8A33D;
  --ambar-claro: #FDF3E3;
  --tinta: #111827;
  --gris-900: #1F2937;
  --gris-700: #4B5563;
  --gris-500: #6B7280;
  --gris-300: #D1D5DB;
  --gris-200: #E5E7EB;
  --gris-100: #F3F4F6;
  --gris-50: #F9FAFB;
  --blanco: #FFFFFF;
  --radio-tarjeta: 20px;
  --radio-control: 16px;
  --radio-chico: 12px;
  --sombra-1: 0 1px 2px rgba(17, 24, 39, .06), 0 6px 18px rgba(17, 24, 39, .06);
  --sombra-2: 0 10px 30px rgba(17, 24, 39, .14);
  --transicion: all .2s ease;
  --ancho-max: 1040px;
  --altura-banner: auto;
}

/* --------------------------- 2. Reset suave ----------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;              /* cuerpo mínimo 16px */
  line-height: 1.6;             /* line-height generoso */
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 .8em; }
ul, ol { margin: 0 0 .8em; padding-left: 1.1em; }
img { max-width: 100%; height: auto; display: block; }
strong { font-weight: 700; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Foco visible y accesible en TODA la interfaz */
:focus-visible {
  outline: 3px solid var(--rojo);
  outline-offset: 2px;
  border-radius: 6px;
}

.saltar-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 5000;
  background: var(--rojo);
  color: var(--blanco);
  padding: 12px 18px;
  border-radius: 0 0 var(--radio-chico) 0;
  font-weight: 600;
  text-decoration: none;
}
.saltar-contenido:focus { left: 0; }

.oculto { display: none !important; }
.oculto-visual {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 16px;
}

/* --------------------------- 3. Banner legal ---------------------------- */
.banner-legal {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: var(--rojo);
  color: var(--blanco);
  padding: 8px 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}

.banner-legal__texto {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  text-align: center;
  max-width: var(--ancho-max);
  margin-inline: auto;
}

.enlace-inline {
  background: none;
  border: 0;
  padding: 2px 2px;
  margin: 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  min-height: 24px;
}
.banner-legal .enlace-inline { color: #FFE3E8; }
.banner-legal .enlace-inline:hover { color: var(--blanco); }

/* ------------------------------- 4. Hero -------------------------------- */
.hero {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(200, 16, 46, .10) 0%, rgba(200, 16, 46, 0) 60%),
    linear-gradient(180deg, #FFF7F8 0%, var(--blanco) 100%);
  padding: 28px 0 26px;
  border-bottom: 1px solid var(--gris-200);
}

.hero__sello {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--rojo);
  background: var(--rojo-claro);
  border: 1px solid rgba(200, 16, 46, .18);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 14px;
}

.hero__titulo {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--tinta);
  margin-bottom: 10px;
}

.hero__subtitulo {
  font-size: 17px;
  color: var(--gris-700);
  margin-bottom: 18px;
  max-width: 46ch;
}

.hero__acciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.hero__datos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.hero__datos li {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-chico);
  padding: 8px 6px;
  text-align: center;
  font-size: 12px;
  color: var(--gris-500);
  line-height: 1.35;
}
.hero__datos strong { display: block; font-size: 20px; color: var(--rojo); }

/* ------------------------------ 5. Botones ------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;             /* área táctil mínima */
  min-width: 44px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: var(--radio-control);
  background: var(--gris-100);
  color: var(--gris-900);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transicion);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

.btn--primario { background: var(--rojo); color: var(--blanco); border-color: var(--rojo); }
.btn--primario:hover { background: var(--rojo-oscuro); border-color: var(--rojo-oscuro); }

.btn--rojo {
  background: var(--rojo);
  color: var(--blanco);
  border-color: var(--rojo);
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(200, 16, 46, .28);
}
.btn--rojo:hover { background: var(--rojo-oscuro); }

.btn--fantasma {
  background: var(--blanco);
  color: var(--gris-900);
  border-color: var(--gris-300);
}
.btn--fantasma:hover { background: var(--gris-50); border-color: var(--gris-500); }

.btn--suave {
  background: var(--gris-100);
  color: var(--gris-900);
  border-color: var(--gris-200);
}
.btn--suave:hover { background: var(--gris-200); }

.btn--peligro-suave {
  background: var(--rojo-claro);
  color: var(--rojo-oscuro);
  border-color: rgba(200, 16, 46, .25);
}

.btn--apoyo {
  background: var(--verde-claro);
  color: #14663A;
  border-color: rgba(31, 157, 85, .3);
}
.btn--apoyo:hover { background: #D8EFE3; }

.btn--grande { min-height: 52px; font-size: 17px; padding: 14px 20px; }
.btn--chico { min-height: 44px; padding: 9px 13px; font-size: 14px; border-radius: var(--radio-chico); }
.btn--bloque { width: 100%; }

/* ------------------------------ 6. Secciones ---------------------------- */
.seccion { padding: 22px 0; border-bottom: 1px solid var(--gris-100); }
.seccion--transparencia { background: var(--gris-50); }

.seccion__titulo { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.seccion__ayuda { color: var(--gris-500); font-size: 15px; margin-bottom: 14px; }
.seccion__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Avisos (modo degradado, entorno) */
.aviso {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: var(--radio-chico);
  font-size: 14px;
  font-weight: 500;
  background: var(--ambar-claro);
  border: 1px solid rgba(232, 163, 61, .45);
  color: #7A4E0B;
}
.aviso--info { background: #EEF4FF; border-color: #C7D8FF; color: #1E3A8A; }
.aviso--error { background: var(--rojo-claro); border-color: rgba(200, 16, 46, .35); color: var(--rojo-oscuro); }

/* --------------------------- 7. Chips de zona --------------------------- */
.chips-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: 4px 16px 12px;
  margin: 0 -16px;
  scrollbar-width: thin;
}
.chips-scroll::-webkit-scrollbar { height: 6px; }
.chips-scroll::-webkit-scrollbar-thumb { background: var(--gris-300); border-radius: 999px; }

.chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 15px;
  border-radius: var(--radio-control);
  border: 2px solid var(--zona-color, var(--gris-300));
  background: var(--blanco);
  color: var(--zona-color, var(--gris-900));
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transicion);
  box-shadow: var(--sombra-1);
}
.chip:hover { transform: translateY(-2px); }
.chip.es-activo {
  background: var(--zona-color, var(--rojo));
  color: var(--zona-texto, var(--blanco));
  border-color: var(--zona-color, var(--rojo));
  box-shadow: 0 6px 18px rgba(17, 24, 39, .22);
  transform: translateY(-2px);
  outline: 3px solid rgba(17, 24, 39, .12);
  outline-offset: 2px;
}
.chip--todas { --zona-color: var(--rojo); --zona-texto: var(--blanco); }
.chip__punto {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: currentColor;
  opacity: .8;
  display: inline-block;
}
.chip.es-activo .chip__punto { background: var(--zona-texto, var(--blanco)); opacity: .95; }

/* ---------------------- 8. Panel de detalle de zona --------------------- */
.detalle-zona {
  margin-top: 12px;
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-tarjeta);
  padding: 16px;
  box-shadow: var(--sombra-1);
}
.detalle-zona__vacio { margin: 0; color: var(--gris-500); font-size: 15px; }

.detalle-zona__cinta {
  height: 6px;
  border-radius: 999px;
  background: var(--zona-color, var(--rojo));
  margin: -16px -16px 14px;
  border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0;
}
.detalle-zona__titulo { font-size: 20px; font-weight: 800; }
.detalle-zona__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 12px 0;
}
.detalle-zona__item {
  background: var(--gris-50);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-chico);
  padding: 10px 12px;
}
.detalle-zona__item dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gris-500);
  font-weight: 700;
  margin-bottom: 2px;
}
.detalle-zona__item dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--gris-900); }
.detalle-zona__subtitulo {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gris-500);
  margin: 14px 0 8px;
}
.chips-barrios { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-barrio {
  background: var(--gris-100);
  border: 1px solid var(--gris-200);
  color: var(--gris-700);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 500;
}
.hitos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hito {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
  color: var(--gris-700);
  background: var(--gris-50);
  border-left: 3px solid var(--zona-color, var(--rojo));
  border-radius: 8px;
  padding: 7px 10px;
}
.hito__tipo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gris-500);
  flex: 0 0 auto;
}
.detalle-zona__precision {
  margin-top: 14px;
  font-size: 13px;
  color: var(--gris-500);
  background: var(--gris-50);
  border: 1px dashed var(--gris-300);
  border-radius: var(--radio-chico);
  padding: 10px 12px;
}
.detalle-zona__acciones { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------- 9. Mapa -------------------------------- */
.mapa-envoltorio {
  position: relative;
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  border: 1px solid var(--gris-200);
  box-shadow: var(--sombra-1);
  background: var(--gris-100);
}

.mapa {
  height: 60vh;                 /* móvil */
  min-height: 340px;
  width: 100%;
  z-index: 1;
}

.mapa-mensaje {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: var(--gris-100);
  color: var(--gris-700);
  font-size: 15px;
  z-index: 5;
}

.btn-reportar-aqui {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 900;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  max-width: calc(100% - 24px);
  padding: 12px 20px;
  border: 0;
  border-radius: var(--radio-control);
  background: var(--rojo);
  color: var(--blanco);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(200, 16, 46, .42);
  transition: var(--transicion);
  animation: aparecer .25s ease-out;
}
.btn-reportar-aqui:hover { background: var(--rojo-oscuro); transform: translateX(-50%) translateY(-2px); }
.btn-reportar-aqui__mas { font-size: 20px; line-height: 1; }
.btn-reportar-aqui__coords { font-size: 11px; font-weight: 500; opacity: .85; }

/* Botón para quitar el marcador temporal del punto elegido en el mapa */
.btn-quitar-punto {
  position: absolute;
  right: 12px;
  bottom: 16px;
  z-index: 900;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gris-300);
  background: rgba(255, 255, 255, .96);
  color: var(--gris-900);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--sombra-2);
  transition: var(--transicion);
}
.btn-quitar-punto:hover { background: var(--rojo-claro); color: var(--rojo); border-color: rgba(200, 16, 46, .3); }

@keyframes aparecer {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Etiquetas permanentes de zona sobre el mapa */
.etiqueta-zona {
  background: rgba(255, 255, 255, .82);
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  color: var(--gris-900);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 1px 4px;
}
.etiqueta-zona::before { display: none; }

/* Leyenda flotante de estados (control Leaflet) */
.leyenda-mapa {
  background: rgba(255, 255, 255, .96);
  border-radius: var(--radio-chico);
  box-shadow: var(--sombra-2);
  padding: 8px 11px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gris-900);
  font-weight: 600;
}
.leyenda-mapa__titulo {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gris-500);
  margin-bottom: 4px;
}
.leyenda-mapa__fila { display: flex; align-items: center; gap: 6px; }
.leyenda-mapa__punto {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid var(--blanco);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
  flex: 0 0 auto;
}

.filtros-estado {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 2px 4px;
  margin: 0;
}
.filtros-estado__titulo {
  font-size: 13px;
  font-weight: 700;
  color: var(--gris-500);
  flex: 0 0 auto;
}
.pill-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid var(--gris-300);
  background: var(--blanco);
  color: var(--gris-700);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transicion);
}
.pill-estado.es-activo {
  background: var(--gris-900);
  border-color: var(--gris-900);
  color: var(--blanco);
}
.pill-estado[aria-pressed="false"] { opacity: .55; text-decoration: line-through; }

.punto {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}
.punto--pendiente { background: var(--rojo); }
.punto--proceso { background: var(--ambar); }
.punto--resuelto { background: var(--verde); }

.nota-mapa {
  font-size: 12px;
  color: var(--gris-500);
  margin: 10px 0 0;
}

/* ------------------------------- 10. Feed ------------------------------- */
.feed { display: grid; gap: 14px; }

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-tarjeta);
  padding: 16px;
  box-shadow: var(--sombra-1);
}
.tarjeta__titulo { font-size: 18px; font-weight: 700; }
.tarjeta__ayuda { font-size: 14px; color: var(--gris-500); margin-bottom: 12px; }
.tarjeta__nota { font-size: 12px; color: var(--gris-500); margin: 10px 0 0; }

.tarjeta-reporte {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-1);
  overflow: hidden;
  transition: var(--transicion);
  animation: entrar .25s ease-out;
}
.tarjeta-reporte:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); }

@keyframes entrar {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.tarjeta-reporte__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--gris-100);
  overflow: hidden;
}
.tarjeta-reporte__media img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-reporte__sinfoto {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  background: linear-gradient(135deg, var(--gris-100), var(--blanco));
  color: var(--gris-500);
}
.tarjeta-reporte__cuerpo { padding: 14px 16px 16px; }
.tarjeta-reporte__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.etiqueta-categoria {
  font-size: 14px;
  font-weight: 700;
  color: var(--gris-900);
}
.badge {
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge--pendiente { background: var(--rojo-claro); color: var(--rojo-oscuro); border-color: rgba(200, 16, 46, .25); }
.badge--en_proceso { background: var(--ambar-claro); color: #7A4E0B; border-color: rgba(232, 163, 61, .45); }
.badge--resuelto { background: var(--verde-claro); color: #14663A; border-color: rgba(31, 157, 85, .3); }

.tarjeta-reporte__desc { font-size: 16px; margin-bottom: 8px; }
.tarjeta-reporte__meta { font-size: 13px; color: var(--gris-500); margin-bottom: 4px; }
.tarjeta-reporte__direccion { font-size: 13px; color: var(--gris-700); margin-bottom: 10px; }
.tarjeta-reporte__acciones { display: flex; flex-wrap: wrap; gap: 8px; }

.feed__pie { margin-top: 16px; }
.feed__vacio {
  text-align: center;
  color: var(--gris-500);
  background: var(--gris-50);
  border: 1px dashed var(--gris-300);
  border-radius: var(--radio-tarjeta);
  padding: 26px 18px;
}
.feed__vacio strong { display: block; color: var(--gris-900); font-size: 17px; margin-bottom: 4px; }

.apoyo__conteo { font-weight: 800; }

/* -------------------------- 11. Transparencia --------------------------- */
.contadores {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 0 0 16px;
}
.contador {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-top: 4px solid var(--gris-300);
  border-radius: var(--radio-tarjeta);
  padding: 14px;
  text-align: center;
  box-shadow: var(--sombra-1);
}
.contador dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--gris-500);
}
.contador dd { margin: 4px 0 0; font-size: 34px; font-weight: 800; line-height: 1.1; color: var(--gris-900); }
.contador--total { border-top-color: var(--gris-900); }
.contador--pendiente { border-top-color: var(--rojo); }
.contador--pendiente dd { color: var(--rojo); }
.contador--proceso { border-top-color: var(--ambar); }
.contador--proceso dd { color: #B9761B; }
.contador--resuelto { border-top-color: var(--verde); }
.contador--resuelto dd { color: var(--verde); }

.grafico { margin-bottom: 14px; }
.grafico__lienzo { position: relative; width: 100%; height: 260px; }
.grafico__alternativa { font-size: 12px; color: var(--gris-500); margin: 8px 0 0; }

.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ranking__vacio { color: var(--gris-500); font-size: 15px; }
.ranking__item { display: grid; gap: 4px; }
.ranking__fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; }
.ranking__nombre { display: inline-flex; align-items: center; gap: 7px; color: var(--gris-900); }
.ranking__punto { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.ranking__valor { color: var(--gris-500); font-variant-numeric: tabular-nums; }
.ranking__barra {
  height: 9px;
  border-radius: 999px;
  background: var(--gris-100);
  overflow: hidden;
}
.ranking__barra span {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .5s ease;
}

/* --------------------------- 12. Cómo funciona -------------------------- */
.pasos-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pasos-info li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--gris-50);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-tarjeta);
  padding: 14px;
}
.pasos-info__num {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--rojo);
  color: var(--blanco);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.pasos-info p { margin: 0; font-size: 14px; color: var(--gris-700); }

/* ------------------------------- 13. Footer ----------------------------- */
.footer {
  background: var(--gris-900);
  color: #E5E7EB;
  padding: 26px 0 34px;
  font-size: 14px;
}
.footer__marca { font-size: 20px; font-weight: 800; color: var(--blanco); margin-bottom: 8px; }
.footer__linea { margin: 0 0 4px; }
.footer__enlaces { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; }
.footer__enlaces a,
.footer__enlaces .enlace-inline {
  color: var(--blanco);
  font-weight: 600;
  text-decoration: underline;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0;
}
.footer__enlaces a:hover { color: #FFC9D2; }
.footer__atribucion {
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-top: 12px;
  font-size: 12px;
  color: #9CA3AF;
}
.footer__atribucion p { margin: 0 0 3px; }

/* ------------------------------- 14. Toasts ----------------------------- */
.toasts {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3000;
  display: grid;
  gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--gris-900);
  color: var(--blanco);
  border-radius: var(--radio-chico);
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 500;
  box-shadow: var(--sombra-2);
  animation: entrar .2s ease-out;
  border-left: 4px solid var(--gris-500);
}
.toast--ok { border-left-color: var(--verde); }
.toast--error { border-left-color: var(--rojo); }
.toast--info { border-left-color: var(--ambar); }

/* ------------------------------- 15. Modales ---------------------------- */
.modal-fondo {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(17, 24, 39, .55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal {
  background: var(--blanco);
  width: 100%;
  max-width: 680px;
  border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-2);
  animation: subir .25s ease-out;
}
@keyframes subir {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--gris-200);
  position: sticky;
  top: 0;
  background: var(--blanco);
  border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0;
  z-index: 2;
}
.modal__titulo { font-size: 20px; font-weight: 800; }
.modal__desc { margin: 0; font-size: 13px; color: var(--gris-500); }

.btn-cerrar {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gris-200);
  background: var(--gris-100);
  color: var(--gris-900);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transicion);
}
.btn-cerrar:hover { background: var(--rojo-claro); color: var(--rojo); border-color: rgba(200, 16, 46, .3); }

.modal__cuerpo { padding: 16px; overflow-y: auto; }

/* Progreso del formulario */
.progreso {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gris-100);
  background: var(--gris-50);
}
.progreso__item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gris-500);
  min-width: 0;
}
.progreso__bola {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--gris-300);
  color: var(--blanco);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.progreso__texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progreso__item.es-activo { color: var(--rojo); }
.progreso__item.es-activo .progreso__bola { background: var(--rojo); }
.progreso__item.es-hecho { color: var(--verde); }
.progreso__item.es-hecho .progreso__bola { background: var(--verde); }

/* Pasos */
.paso { border: 0; margin: 0; padding: 0; min-width: 0; }
.paso__titulo { font-size: 19px; font-weight: 800; padding: 0; margin-bottom: 4px; }
.paso__ayuda { font-size: 14px; color: var(--gris-500); margin-bottom: 14px; }
.paso__acciones { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.paso__acciones--dos { flex-direction: column-reverse; }

.categorias { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.categoria { position: relative; display: block; cursor: pointer; }
.categoria input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.categoria__caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 100px;
  padding: 12px 8px;
  text-align: center;
  border: 2px solid var(--gris-200);
  border-radius: var(--radio-tarjeta);
  background: var(--blanco);
  transition: var(--transicion);
}
.categoria__emoji { font-size: 30px; line-height: 1.1; }
.categoria__nombre { font-size: 16px; font-weight: 700; }
.categoria__detalle { font-size: 12px; color: var(--gris-500); }
.categoria input:checked + .categoria__caja {
  border-color: var(--rojo);
  background: var(--rojo-claro);
  box-shadow: 0 6px 18px rgba(200, 16, 46, .18);
}
.categoria input:focus-visible + .categoria__caja { outline: 3px solid var(--rojo); outline-offset: 2px; }
.categoria:hover .categoria__caja { border-color: var(--gris-300); }

.ubicacion-caja {
  background: var(--gris-50);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-tarjeta);
  padding: 14px;
}
.ubicacion-caja__titulo { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.ubicacion-caja__coords { font-size: 14px; color: var(--gris-700); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.ubicacion-caja__acciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* Campos */
.campo { margin-bottom: 16px; }
.campo__etiqueta { display: block; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.campo__ayuda { font-size: 13px; color: var(--gris-500); margin: 6px 0 0; }

.input, .textarea, .select-grande {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 2px solid var(--gris-200);
  border-radius: var(--radio-control);
  background: var(--blanco);
  font-size: 16px;     /* evita el zoom automático en iOS */
  transition: var(--transicion);
}
.input:focus, .textarea:focus, .select-grande:focus { border-color: var(--rojo); outline: none; box-shadow: 0 0 0 3px rgba(200, 16, 46, .14); }
.input:disabled { background: var(--gris-100); color: var(--gris-500); cursor: not-allowed; }
.textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.select-grande { font-size: 17px; font-weight: 600; min-height: 56px; }

.contador { text-align: right; font-size: 13px; color: var(--gris-500); margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.contador.es-limite { color: var(--rojo); font-weight: 700; }

.campo--check { display: flex; gap: 10px; align-items: flex-start; }
.campo--check input {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  margin: 2px 0 0;
  accent-color: var(--rojo);
}
.campo--check label { font-size: 14px; line-height: 1.5; color: var(--gris-700); }

.deteccion {
  font-size: 14px;
  font-weight: 600;
  color: var(--gris-700);
  background: var(--gris-50);
  border: 1px dashed var(--gris-300);
  border-radius: var(--radio-chico);
  padding: 9px 12px;
  margin: 0 0 10px;
}
.deteccion.es-ok { background: var(--verde-claro); border-color: rgba(31, 157, 85, .4); color: #14663A; border-style: solid; }
.deteccion.es-aviso { background: var(--ambar-claro); border-color: rgba(232, 163, 61, .5); color: #7A4E0B; }

/* Foto */
.foto-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.foto-preview {
  margin-top: 12px;
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  background: var(--gris-50);
}
.foto-preview img { width: 100%; max-height: 260px; object-fit: cover; }
.foto-preview__meta { padding: 12px; }
.foto-preview__meta p { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.foto-preview__nota { font-size: 12px !important; color: var(--gris-500); font-weight: 500 !important; }

/* Resumen y avisos del paso 3 */
.resumen {
  background: var(--gris-50);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-tarjeta);
  padding: 14px;
  margin-bottom: 14px;
}
.resumen__fila { display: flex; gap: 10px; justify-content: space-between; font-size: 14px; padding: 5px 0; border-bottom: 1px dashed var(--gris-200); }
.resumen__fila:last-child { border-bottom: 0; }
.resumen__clave { color: var(--gris-500); font-weight: 600; flex: 0 0 auto; }
.resumen__valor { text-align: right; font-weight: 600; word-break: break-word; }
.resumen__foto { width: 100%; max-height: 150px; object-fit: cover; border-radius: var(--radio-chico); margin-top: 8px; }

.anonimo-aviso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--verde-claro);
  border: 1px solid rgba(31, 157, 85, .3);
  border-radius: var(--radio-chico);
  padding: 11px 13px;
  margin-bottom: 14px;
}
.anonimo-aviso p { margin: 0; font-size: 14px; color: #14663A; font-weight: 600; }

.turnstile-caja {
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-chico);
  padding: 12px;
  background: var(--gris-50);
  min-height: 76px;
}
.turnstile-caja__nota { font-size: 12px; color: var(--gris-500); margin: 8px 0 0; }
.turnstile-caja.es-listo { background: var(--blanco); }
.turnstile-caja.es-fallo { background: var(--ambar-claro); border-color: rgba(232, 163, 61, .5); }

.error-paso {
  margin: 12px 0 0;
  background: var(--rojo-claro);
  border: 1px solid rgba(200, 16, 46, .3);
  color: var(--rojo-oscuro);
  border-radius: var(--radio-chico);
  padding: 11px 13px;
  font-size: 14px;
  font-weight: 600;
}

/* Éxito */
.exito { text-align: center; padding: 10px 0 4px; }
.exito__check { width: 84px; height: 84px; margin: 0 auto 10px; display: block; }
.exito__circulo {
  stroke: var(--verde);
  stroke-width: 3;
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: trazo .5s ease-out forwards;
}
.exito__marca {
  stroke: var(--verde);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: trazo .35s ease-out .35s forwards;
}
@keyframes trazo { to { stroke-dashoffset: 0; } }
.exito__titulo { font-size: 21px; font-weight: 800; color: var(--verde); }
.exito__texto { font-size: 15px; color: var(--gris-700); margin-bottom: 16px; }

/* Detalle de reporte (modal) */
.detalle-reporte__foto { width: 100%; border-radius: var(--radio-chico); margin-bottom: 12px; }
.detalle-reporte__fila { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 6px 0; border-bottom: 1px dashed var(--gris-200); }
.detalle-reporte__fila:last-of-type { border-bottom: 0; }
.detalle-reporte__clave { color: var(--gris-500); font-weight: 600; }
.historial { list-style: none; margin: 8px 0 16px; padding: 0 0 0 6px; border-left: 2px solid var(--gris-200); }
.historial__item { position: relative; padding: 0 0 14px 16px; font-size: 14px; }
.historial__item::before {
  content: '';
  position: absolute;
  left: -7px; top: 7px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--rojo);
  border: 2px solid var(--blanco);
}
.historial__fecha { display: block; font-size: 12px; color: var(--gris-500); }
.historial__estado { font-weight: 800; text-transform: capitalize; }
.historial__nota { margin: 2px 0 0; color: var(--gris-700); }

/* Texto legal */
.texto-legal { font-size: 15px; }
.texto-legal__fecha { font-size: 13px; color: var(--gris-500); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.texto-legal h3 { font-size: 16px; font-weight: 800; margin: 18px 0 6px; color: var(--gris-900); }
.texto-legal p { color: var(--gris-700); }
.texto-legal ul { color: var(--gris-700); padding-left: 1.2em; }
.texto-legal li { margin-bottom: 4px; }

/* Bloqueo de scroll del documento con modal abierto */
body.modal-abierto { overflow: hidden; }

/* --------------------------- 16. Responsive ----------------------------- */
@media (min-width: 480px) {
  .hero__acciones { flex-direction: row; flex-wrap: wrap; }
  .categorias { grid-template-columns: repeat(2, 1fr); }
  .paso__acciones--dos { flex-direction: row; justify-content: space-between; }
  .paso__acciones--dos .btn { flex: 1 1 0; }
}

@media (min-width: 700px) {
  body { font-size: 17px; }
  .hero { padding: 40px 0 34px; }
  .hero__titulo { font-size: 40px; }
  .hero__subtitulo { font-size: 19px; }
  .seccion__titulo { font-size: 28px; }
  .contadores { grid-template-columns: repeat(4, 1fr); }
  .categorias { grid-template-columns: repeat(4, 1fr); }
  .detalle-zona__grid { grid-template-columns: 1fr 1fr; }
  .feed { grid-template-columns: repeat(2, 1fr); }
  .modal-fondo { align-items: center; padding: 24px; }
  .modal { border-radius: var(--radio-tarjeta); max-height: 90vh; }
  .modal__cabecera { border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0; }
  .toasts { left: auto; right: 20px; bottom: 20px; max-width: 380px; }
  .footer__enlaces { grid-auto-flow: column; justify-content: start; gap: 22px; }
}

@media (min-width: 900px) {
  .mapa { height: 70vh; }        /* escritorio */
  .feed { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------- 17. Preferencias de movimiento --------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover,
  .chip:hover,
  .tarjeta-reporte:hover,
  .btn-reportar-aqui:hover { transform: none; }
}

/* Ajustes finos para pantallas muy angostas (360 px) */
@media (max-width: 380px) {
  .contenedor { padding: 0 12px; }
  .chips-scroll { padding-left: 12px; padding-right: 12px; margin: 0 -12px; }
  .hero__titulo { font-size: 27px; }
  .contador dd { font-size: 30px; }
  .btn { padding: 11px 14px; font-size: 15px; }
  .btn-reportar-aqui { font-size: 16px; padding: 11px 16px; }
  .progreso__texto { display: none; }
  .progreso__item { justify-content: center; }
}

/* Impresión: el prototipo se imprime legible */
@media print {
  .banner-legal, .toasts, .modal-fondo, .btn-reportar-aqui, .mapa-envoltorio { display: none !important; }
  body { color: #000; }
}

/* =============================================================================
 * MARCA DE AGUA DE DATOS FICTICIOS SOBRE EL MAPA
 *
 * Motivo legal: si alguien captura la pantalla y la difunde sin el banner superior,
 * el mapa con 28 reportes en calles reales de Comas podría hacer creer que son
 * problemas reales, con riesgo de difamación hacia el distrito o de publicidad
 * engañosa. La marca queda DENTRO de la captura, así que el carácter ficticio no
 * se puede separar de la imagen.
 *
 * `pointer-events: none` para que no interfiera con el mapa; `aria-hidden` en el
 * HTML para que los lectores de pantalla no la lean dos veces.
 * ============================================================================= */
.mapa-marca-ficticio {
  position: absolute;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
  user-select: none;
  text-align: center;
  padding: 12px;
}

.mapa-marca-ficticio__linea1 {
  font-size: clamp(28px, 7vw, 56px);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #C8102E;
  opacity: 0.18;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.85), 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: rotate(-18deg);
  line-height: 1.05;
}

.mapa-marca-ficticio__linea2 {
  font-size: clamp(11px, 2.4vw, 17px);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #C8102E;
  opacity: 0.22;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
  transform: rotate(-18deg);
}

@media (prefers-reduced-motion: no-preference) {
  .mapa-marca-ficticio { animation: aparecerMarca 600ms ease-out both; }
  @keyframes aparecerMarca { from { opacity: 0; } to { opacity: 1; } }
}

/* Etiqueta "FICTICIO" que acompaña a cada reporte (mapa y listado). */
.etiqueta-ficticio {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #FDE7EA;
  color: #8A0B20;
  border: 1px solid #F3B9C3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}