/* Visor: sistema visual. Decisiones y razones en docs/DISENO.md */

:root {
  /* Marca: azul marino de la organización en el encabezado y la barra de pestañas */
  --marino: #0B2A4A;
  --marino-presion: #17406B;
  --marino-linea: #3A5574;
  --marino-texto: #C5D3E3;

  --fondo: #EEF1F6;
  --superficie: #FFFFFF;
  --tinta: #14202B;
  --tinta-suave: #51606E;
  --linea: #D5DBE3;
  --linea-fuerte: #A9B4C1;

  /* Un solo acento para acciones, enlaces y la pestaña activa */
  --acento: #1560BD;
  --acento-oscuro: #0F4A94;
  --acento-fondo: #E6EEF9;

  --pendiente: #9A5A00;
  --proceso: #1B56B8;
  --resuelto: #2C7A4B;
  --cancelado: #5C6873;
  --peligro: #B3261E;
  --peligro-fondo: #FBECEB;
  --ok-fondo: #E8F3EC;
  --aviso-fondo: #FFF4DF;

  /* Dos radios: controles y bloques (paneles y botones de tipo) */
  --r-control: 8px;
  --r-bloque: 14px;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 40px;


  --tipo-luz: inset 0 1px 0 rgba(255, 255, 255, .28);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }
/* El atributo hidden manda siempre, aunque una clase (.boton, .estado) ponga otro display. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  /* Tipografías (css/fuentes.css): Public Sans para leer y llenar, Montserrat para títulos y botones.
     Si el archivo de la letra faltara, cae a la del sistema sin romper nada. */
  font: 16px/1.5 var(--fuente-texto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif);
}

h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 700; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }
p, ul { margin: 0; }
a { color: var(--acento); }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
a, button, select, label { touch-action: manipulation; }
button, .boton, .tipo, .nav a { user-select: none; -webkit-user-select: none; }

.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.suave { color: var(--tinta-suave); }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: var(--e2); top: -60px; z-index: 20; padding: var(--e3) var(--e4); background: var(--superficie); color: var(--tinta); border-radius: var(--r-control); }
.saltar:focus { top: var(--e2); }

/* Separaciones que antes eran estilos en línea */
.arriba-3 { margin-top: var(--e3); }
.arriba-4 { margin-top: var(--e4); }
.arriba-5 { margin-top: var(--e5); }
.al-pie { align-self: end; }

/* ---------- Encabezado: logo, organización y sistema ---------- */
.enc {
  position: relative; z-index: 12;
  /* La foto de la ciudad se tiñe de azul (solo aporta su claroscuro) y un velo marino, más cerrado abajo,
     mantiene el contraste del texto. */
  background: linear-gradient(rgba(11, 42, 74, .30), rgba(11, 42, 74, .72)), #1D58B0 url(../img/fondo-ciudad.svg) center 45% / cover;
  background-blend-mode: normal, luminosity;
  color: #fff;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e3);
  padding: var(--e2) max(var(--e4), env(safe-area-inset-right)) var(--e2) max(var(--e4), env(safe-area-inset-left));
  padding-top: max(var(--e2), env(safe-area-inset-top));
  min-height: 60px;
}
/* Teléfono: encabezado alto y la página sube sobre él con las esquinas redondeadas. */
@media (max-width: 899.98px) {
  .enc { min-height: 104px; padding-top: max(var(--e4), env(safe-area-inset-top)); padding-bottom: 34px; }
  .enc::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 20px; background: var(--fondo); border-radius: 22px 22px 0 0; }
  /* En el inicio lo que sube sobre el encabezado es la propia bandeja de botones: va por encima de él, salvo con
     el menú abierto, que debe taparla. */
  .con-bandeja .enc::after { display: none; }
  .con-bandeja .pagina { position: relative; z-index: 13; margin-top: -22px; padding-top: 0; padding-left: var(--e3); padding-right: var(--e3); }
  .menu-abierto .con-bandeja .pagina { z-index: auto; }
  .con-bandeja .tipos, .con-bandeja .bandeja { background: #F8F9FC; }
  body.con-fondo .enc::after { display: none; }
  .nav { top: calc(100% - 20px); }
  /* Con el botón «Menú» a la vista no caben el municipio y el sistema: se queda el nombre del sistema. */
  .enc .municipio { display: none; }
  .enc .sistema { border-left: 0; padding-left: 0; }
  .pagina { padding-top: var(--e1); }
}
.enc :focus-visible { outline-color: #fff; }
.marca { display: flex; align-items: center; gap: 10px; flex: none; color: inherit; text-decoration: none; }
.marca img { display: block; width: 34px; height: auto; filter: drop-shadow(0 2px 3px rgba(4, 14, 28, .4)); }
.municipio { display: none; line-height: 1.15; }
.municipio b { display: block; font-size: 1.125rem; }
.municipio span { font-size: .8125rem; }
.sistema { flex: 1; min-width: 0; line-height: 1.2; }
/* Montserrat es más ancha que la letra del sistema: en teléfono el nombre se ajusta para caber junto a «Menú». */
.sistema { text-shadow: 0 1px 2px rgba(4, 14, 28, .5); }
.sistema b { display: block; font-size: clamp(.6875rem, 3.05vw, .9375rem); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sistema span { font-size: .75rem; color: #DCE6F2; }
.sistema .largo { display: none; }
.sesion { align-items: center; gap: var(--e3); flex: none; }
.sesion form { margin: 0; }
.quien { display: none; font-size: .875rem; color: var(--marino-texto); max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salir {
  min-height: 44px; padding: 0 14px; border-radius: var(--r-control);
  background: transparent; color: #fff; border: 1px solid #6C86A3; font: inherit; font-weight: 600; cursor: pointer;
}
.salir:active { background: var(--marino-presion); }

@media (min-width: 600px) {
  .enc { gap: 0 18px; min-height: 72px; padding-left: var(--e5); padding-right: var(--e5); }
  .marca img { width: 36px; }
  .municipio { display: block; }
  .sistema { border-left: 1px solid var(--marino-linea); padding-left: 18px; }
  .sistema b { font-size: 1.125rem; }
  .sistema span { font-size: .8125rem; }
  .sistema .corto { display: none; }
  .sistema .largo { display: inline; }
  .quien { display: inline; }
}

/* ---------- Pestañas ---------- */
/* Teléfono: botón «Menú» en el encabezado; el menú baja desde él, a todo lo ancho, con «Salir» dentro.
   Escritorio (900 px o más): las pestañas quedan a la vista en una fila bajo el encabezado. */
.hamb {
  display: inline-flex; align-items: center; gap: var(--e2); flex: none;
  min-height: 46px; padding: 0 14px; border-radius: 12px;
  /* Vidrio: deja ver la foto del encabezado. */
  background: rgba(11, 42, 74, .38); color: #fff; border: 1px solid rgba(255, 255, 255, .5); font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.hamb:active { background: var(--marino-presion); }
.hamb svg, .nav svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sesion { display: none; }

.nav {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 12;
  background: var(--marino); color: var(--marino-texto);
  padding: 0 env(safe-area-inset-right, 0px) var(--e2) env(safe-area-inset-left, 0px);
  border-radius: 0 0 var(--r-bloque) var(--r-bloque);
  box-shadow: 0 14px 24px -12px rgba(11, 42, 74, .55);
}
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav-quien { padding: 14px var(--e4) 10px; font-size: .875rem; }
.nav-quien b { display: block; font-size: 1rem; color: #fff; overflow-wrap: anywhere; }
/* «Mi perfil» dentro del menú del teléfono: un enlace de texto, no un renglón del menú. */
.nav .nav-quien a { display: inline; min-height: 0; padding: 0; margin-right: var(--e2); background: none; color: inherit; font-weight: 600; text-decoration: underline; }
.nav-quien .sello { display: inline-block; margin-top: 6px; }
a.quien { text-decoration: none; }
a.quien:hover { text-decoration: underline; }
.sesion a.sello { text-decoration: none; }
.nav a, .nav-salir button {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 48px; padding: 0 var(--e4);
  border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
.nav a:active, .nav-salir button:active { background: var(--marino-presion); }
.nav [aria-current="page"] { background: var(--acento); color: #fff; }
.nav-salir { margin: 6px 0 0; border-top: 1px solid var(--marino-linea); }
.nav-salir button { color: #fff; }
.velo { display: none; }

/* Con script, el menú empieza cerrado y el fondo se oscurece al abrirlo. */
.js .nav { transform: translateY(-8px); opacity: 0; visibility: hidden; }
.js.menu-abierto .nav { transform: none; opacity: 1; visibility: visible; }
.js .velo { display: block; position: fixed; inset: 0; z-index: 11; background: rgba(11, 42, 74, .45); opacity: 0; pointer-events: none; }
.js.menu-abierto .velo { opacity: 1; pointer-events: auto; }

/* Teléfono y tableta: el menú es una tarjeta clara de vidrio que cuelga del encabezado, con margen a los lados.
   La pestaña actual va en azul; «Salir», aparte y en rojo, para no tocarlo por error. */
@media (max-width: 899.98px) {
  .nav {
    left: var(--e3); right: var(--e3); top: calc(100% - 26px); padding: var(--e2);
    background: rgba(255, 255, 255, .90); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    color: var(--tinta); border: 1px solid #fff; border-radius: 20px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 24px 48px -16px rgba(4, 14, 28, .6);
  }
  .nav-quien { margin: 0 0 var(--e1); padding: 10px var(--e3) var(--e3); font-size: .8125rem; color: var(--tinta-suave); border-bottom: 1px solid var(--linea); }
  .nav-quien b { color: var(--marino); }
  .nav ul { display: grid; gap: 2px; }
  .nav a, .nav-salir button { min-height: 50px; padding: 0 var(--e3); border-radius: 12px; }
  .nav a svg { color: var(--acento); }
  .nav a:active, .nav-salir button:active { background: var(--acento-fondo); }
  .nav [aria-current="page"] { background: linear-gradient(180deg, #1A6BE0, #0F56C4); color: #fff; box-shadow: var(--tipo-luz), 0 8px 14px -8px var(--acento); }
  .nav [aria-current="page"] svg { color: #fff; }
  .nav-salir { margin: var(--e1) 0 0; padding-top: var(--e1); border-top: 1px solid var(--linea); }
  .nav-salir button { color: var(--peligro); }
  .js .nav { transform: translateY(-10px) scale(.98); transform-origin: top right; }
  .js.menu-abierto .nav { transform: none; }
  .js .velo { background: rgba(6, 16, 36, .5); }
}

/* Computadora (900 px o más): todo en una sola franja sobre la foto. A la izquierda la marca, al centro las
   pestañas como pastillas de vidrio y a la derecha quién tiene la sesión y «Salir». El contenido se centra al
   ancho de la página para que en monitores grandes no se vaya a las orillas. */
@media (min-width: 900px) {
  .hamb, .nav-quien, .nav-salir, .velo, .js .velo { display: none; }
  .enc {
    flex-wrap: nowrap; gap: var(--e4); min-height: 124px; overflow: hidden;
    padding-left: max(var(--e5), calc((100% - 1360px) / 2)); padding-right: max(var(--e5), calc((100% - 1360px) / 2));
    background: var(--marino);
    box-shadow: 0 12px 28px -14px rgba(11, 42, 74, .7);
  }
  /* La foto va en su propia capa: el fondo (img/fondo-ciudad.svg) teñida de azul y apenas desenfocada,
     porque estirada a todo el monitor se le notaría el grano. Encima, el velo que da contraste al texto:
     más cerrado a los lados, donde van la marca y «Salir», y abajo, donde el encabezado toca la página. */
  .enc::before { content: ""; position: absolute; inset: -8px; z-index: -1; background: #1D58B0 url(../img/fondo-ciudad.svg) center 40% / cover; background-blend-mode: luminosity; filter: blur(2px) saturate(1.1); }
  .enc::after { content: ""; position: absolute; inset: 0; z-index: -1; background:
    linear-gradient(90deg, rgba(11, 42, 74, .70) 0%, rgba(11, 42, 74, .28) 38%, rgba(11, 42, 74, .28) 62%, rgba(11, 42, 74, .72) 100%),
    linear-gradient(180deg, rgba(11, 42, 74, .10) 0%, rgba(11, 42, 74, .30) 55%, rgba(11, 42, 74, .78) 100%); }
  .enc .municipio { display: none; }
  .enc .sistema { flex: 0 1 auto; min-width: 0; border-left: 0; padding-left: 0; }
  .sistema b { font-size: 1.25rem; }
  .sistema span { font-size: .9375rem; }
  .marca img { width: 56px; }
  .municipio b { font-size: 1.3125rem; }
  .municipio span { font-size: .9375rem; }
  .nav, .js .nav {
    position: static; order: 3; flex: 1 1 auto; margin: 0; padding: 0; transform: none; opacity: 1; visibility: visible;
    background: none; border-radius: 0; box-shadow: none; color: #E6EEF8;
  }
  .nav ul { display: flex; justify-content: center; gap: 6px; }
  .nav a { gap: var(--e2); width: auto; min-height: 48px; padding: 0 18px; border: 1px solid transparent; border-radius: 999px; font-size: 1rem; white-space: nowrap; text-shadow: 0 1px 2px rgba(4, 14, 28, .45); }
  .nav svg { width: 20px; height: 20px; }
  .nav a:active { background: rgba(255, 255, 255, .22); }
  .nav [aria-current="page"] { background: rgba(255, 255, 255, .20); border-color: rgba(255, 255, 255, .55); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 6px 14px -8px rgba(4, 14, 28, .6); }
  .sesion { display: flex; order: 4; }
  .quien { color: #E6EEF8; text-shadow: 0 1px 2px rgba(4, 14, 28, .45); }
  .salir { min-height: 48px; padding: 0 18px; border-radius: 12px; background: rgba(11, 42, 74, .38); border-color: rgba(255, 255, 255, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
  .pagina { padding-top: var(--e6); }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .nav a:not([aria-current]):hover { background: rgba(255, 255, 255, .12); color: #fff; }
  .salir:hover { background: rgba(11, 42, 74, .6); }
}
/* Computadora angosta o tableta acostada: se va el nombre de quien tiene la sesión y las pestañas se aprietan.
   Hasta 1440 px desde que hay cinco pestañas (Reporte, 2026-10-23): si no, el nombre del sistema se cortaba. */
@media (min-width: 900px) and (max-width: 1439.98px) {
  .enc { gap: var(--e3); }
  .enc .quien { display: none; }
  .nav ul { gap: 2px; }
  .nav a { padding: 0 11px; }
}
/* En el tramo más justo las pestañas van sin icono. */
@media (min-width: 900px) and (max-width: 1099.98px) { .nav svg { display: none; } .sistema b { font-size: 1.0625rem; } .sistema span { font-size: .8125rem; } }
/* Cinco pestañas (2026-10-23): el nombre del sistema no se encoge (las pestañas ocupan lo que sobra, no más) y la
   etiqueta «Faltan datos» no va en el encabezado de computadora, donde ya no cabía: sigue en el menú y en Mi perfil. */
@media (min-width: 900px) {
  .enc .sistema { flex: 0 0 auto; }
  .nav, .js .nav { flex: 0 1 auto; margin-inline: auto; }
}
@media (min-width: 1440px) { .nav a { padding: 0 14px; } }
@media (min-width: 900px) { .sesion .sello { display: none; } }
/* Con espacio de sobra vuelve el nombre de la organización junto al logo (desde 1720 px: con cinco pestañas no cabía antes). */
@media (min-width: 1720px) {
  .enc { padding-left: max(var(--e5), calc((100% - 1520px) / 2)); padding-right: max(var(--e5), calc((100% - 1520px) / 2)); }
  .enc .municipio { display: block; }
  .enc .sistema { border-left: 1px solid rgba(255, 255, 255, .35); padding-left: 18px; }
}

/* ---------- Página ---------- */
.pagina { max-width: 1120px; margin: 0 auto; padding: var(--e4) max(var(--e4), env(safe-area-inset-right)) var(--e6) max(var(--e4), env(safe-area-inset-left)); }
@media (min-width: 600px) { .pagina { padding: var(--e5) var(--e5) var(--e6); } }

.cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e5); }
.cabecera.junta { margin-bottom: var(--e3); align-items: center; }
.cabecera p { color: var(--tinta-suave); }
.cabecera form { margin: 0; }
/* Un botón junto al título (Mi perfil › Editar mis datos) no se estira a todo lo ancho. */
.cabecera .boton, .cabecera .boton.principal { flex: none; }
.seccion { margin-top: var(--e5); }
.titulada > h2 { margin-bottom: var(--e2); }
.panel { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-bloque); padding: var(--e4); }

/* ---------- Inicio del capturista: un botón por tipo de reporte ---------- */
/* Aire arriba: los botones no deben pegarse al encabezado. */
.inicio { padding-top: 0; }
.inicio > .ultimo { margin-top: var(--e5); }
@media (min-width: 900px) {
  .inicio { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--e5); align-items: start; }
  .inicio > .ultimo { margin-top: 0; }
}

/* minmax(0, 1fr): las tres columnas miden lo mismo aunque un nombre largo no quepa (con 1fr a secas, lo ensancharia).
   La rejilla va sobre un panel claro, como una bandeja. */
.tipos { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 10px; background: rgba(255, 255, 255, .62); border: 1px solid #fff; border-radius: 22px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 0 22px rgba(150, 195, 255, .35), 0 14px 30px -18px rgba(11, 42, 74, .35); }
.tipos > li { display: grid; }
/* El grupo abierto encabeza sus botones: regresar a la izquierda, su nombre a la derecha. */
.tipos-cabeza { grid-column: 1 / -1; display: flex !important; align-items: center; justify-content: space-between; gap: var(--e3); padding: 0 var(--e1) 2px; }
.tipos-volver { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 var(--e4) 0 var(--e3); border-radius: 14px; background: var(--superficie); box-shadow: inset 0 0 0 1.5px var(--acento); color: var(--acento); font-weight: 700; text-decoration: none; }
.tipos-volver svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transform: scaleX(-1); }
.tipos-volver:active { background: var(--acento-fondo); }
.tipos-cabeza p { margin: 0; min-width: 0; text-align: right; line-height: 1.2; color: var(--marino); }
.tipos-cabeza b { display: block; font-size: 1.25rem; }
.tipos-cabeza small { display: block; font-size: .875rem; color: var(--tinta-suave); }
/* --c: color del tipo o del grupo (dbo.TiposReporte.color). --f: su foto (img/tipos/fondos); sin foto queda el color.
   La foto se ve entera; el nombre va abajo sobre una sombra, que es lo que mantiene legible el texto blanco. */
.tipo {
  position: relative; overflow: hidden; display: block; container-type: inline-size;
  aspect-ratio: 4 / 5; min-height: 124px; border-radius: 16px;
  background: var(--c) var(--f, none) center / cover; color: #fff; text-decoration: none; text-align: left;
  /* Vidrio: filo claro y resplandor por dentro; por fuera, sombra corta de contacto y sombra larga de su color. */
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .36), inset 0 2px 2px rgba(255, 255, 255, .55), inset 0 0 16px rgba(255, 255, 255, .16), inset 0 -10px 16px -8px rgba(4, 14, 28, .35),
    0 1px 2px rgba(11, 42, 74, .22), 0 10px 18px -8px var(--c), 0 6px 14px -6px rgba(11, 42, 74, .30);
}
/* Sobre la foto solo va una sombra abajo, detrás del texto: lo de arriba se queda con sus colores. */
.tipo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 46%, rgba(4, 14, 28, .30) 70%, rgba(4, 14, 28, .72) 100%); }
/* El texto se apoya abajo. Las medidas van en cqi (centésimas del ancho del botón) para que el título más largo
   (Acumuladores, Nomenclatura) y su renglón de abajo quepan en un renglón en cualquier tamaño de pantalla. */
.tipo-texto { position: absolute; left: 8%; right: 3%; bottom: 7%; text-shadow: 0 1px 3px rgba(4, 14, 28, .75), 0 0 10px rgba(4, 14, 28, .35); }
.tipo b { display: block; font-size: 3.2vw; font-size: 11cqi; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; white-space: nowrap; }
.tipo small { display: block; font-size: 2.6vw; font-size: 9cqi; font-weight: 600; line-height: 1.15; margin-top: 1.5cqi; }
.tipo-ir { position: absolute; top: 7px; right: 7px; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .24); border: 1.5px solid rgba(255, 255, 255, .85); box-shadow: 0 2px 4px rgba(4, 14, 28, .25); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.tipo-ir svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 600px) {
  .tipos { gap: 18px; padding: 18px; }
  .tipo { border-radius: 20px; }
  .tipo-ir { top: 12px; right: 12px; width: 30px; height: 30px; }
  .tipo-ir svg { width: 15px; height: 15px; }
}

/* Fondo ilustrado en pequeño: el bloque del icono en «Último reporte», Consulta, el filtro del Dashboard y la banda de Captura. */
.ult-ico { background: var(--c) var(--f, none) center / cover; }

/* Último reporte: una tarjeta dentro del panel, con el tipo como un botón en pequeño. */
.ultimo { padding: 14px var(--e3) var(--e3); background: rgba(255, 255, 255, .62); border: 1px solid #fff; border-radius: 22px; box-shadow: 0 1px 2px rgba(11, 42, 74, .08), 0 14px 30px -18px rgba(11, 42, 74, .35); }
.ultimo h2 { font-size: 1.0625rem; padding: 0 var(--e1); color: var(--marino); }
.ult-tarjeta { margin-top: 10px; padding: var(--e3); background: var(--superficie); border-radius: 16px; box-shadow: 0 1px 2px rgba(11, 42, 74, .10), 0 8px 18px -12px rgba(11, 42, 74, .30); }
.ult-fila { display: flex; align-items: center; gap: 14px; }
.ult-ico { flex: none; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .34), 0 6px 12px -6px var(--c); }
.ult-ico .ico { width: 54px; height: 54px; filter: drop-shadow(0 3px 3px rgba(4, 14, 28, .35)); }
.ult-datos { flex: 1; min-width: 0; font-size: .9375rem; line-height: 1.35; overflow-wrap: anywhere; }
.ult-datos b, .ult-datos span { display: block; }
.ult-datos b { font-size: 1.0625rem; color: var(--marino); }
.ult-folio { display: flex !important; align-items: center; gap: 6px; margin-top: 2px; font-size: .875rem; color: var(--tinta-suave); }
.ult-folio svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ult-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--linea); }
.ult-detalle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--e4); border-radius: 12px; background: var(--acento-fondo); font-weight: 600; text-decoration: none; }
.ult-detalle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ult-detalle:active { background: #D3E2F6; }
.ult-todos { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; margin-top: var(--e3); border-radius: 12px; background: var(--superficie); box-shadow: inset 0 0 0 1.5px var(--acento); color: var(--acento); font-weight: 700; text-decoration: none; }
.ult-todos svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ult-todos:active { background: var(--acento-fondo); }
.ult-vacio { display: flex; align-items: center; gap: 14px; }
.ult-vacio img { flex: none; width: 56px; height: 56px; opacity: .6; filter: grayscale(1); }

/* Captura: el tipo elegido encabeza el formulario en una tarjeta, con su foto completa en chico (de fondo y
   recortada a una tira no se reconocía). */
.banda {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e2) var(--e3) var(--e2) var(--e2); margin: 0 0 var(--e4); border-radius: 16px;
  background: var(--superficie); border: 1px solid #fff; color: var(--marino); font-weight: inherit;
  box-shadow: 0 1px 2px rgba(11, 42, 74, .10), 0 10px 20px -12px rgba(11, 42, 74, .32);
}
.banda-foto { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: var(--c) var(--f, none) center / cover; }
.banda .ico { width: 40px; height: 40px; filter: drop-shadow(0 3px 3px rgba(4, 14, 28, .35)); }
.banda > span:not(.banda-foto) { min-width: 0; }
.banda b { display: block; font-size: 1.1875rem; line-height: 1.15; overflow-wrap: anywhere; }
.banda small { display: block; font-size: .9375rem; font-weight: 400; }

/* Mientras se envía el reporte: tapa todo, también el encabezado y el menú, para que un toque por accidente no saque de la página. */
.guardando-velo { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: var(--e5); background: rgba(11, 42, 74, .88); color: #fff; text-align: center; }
.guardando-velo[hidden] { display: none; }
.guardando-velo b { display: block; font-size: 1.375rem; }
.guardando-velo p { margin-top: var(--e1); font-size: 1.0625rem; color: var(--marino-texto); }
.guardando-velo i { display: block; width: 46px; height: 46px; margin: 0 auto var(--e4); border-radius: 50%; border: 4px solid rgba(255, 255, 255, .28); border-top-color: #fff; }
@media (prefers-reduced-motion: no-preference) { .guardando-velo i { animation: guardando-gira .9s linear infinite; } }
@keyframes guardando-gira { to { transform: rotate(360deg); } }

/* ---------- Captura: asistente de tres pasos ----------
   Pensado para gente mayor: letra base de 18 px, botones de 60 px, una pregunta por pantalla. */
.captura { max-width: 640px; margin: 0 auto; font-size: 1.125rem; }
.captura .pregunta { font-size: 1.5rem; line-height: 1.15; margin-bottom: var(--e3); }
.captura .paso + .paso { margin-top: var(--e6); }
.captura .asistente .paso + .paso { margin-top: 0; }
.avance { margin-bottom: var(--e2); }
.avance-barras { display: flex; gap: 6px; margin-bottom: 6px; }
.avance-barras span { flex: 1; height: 8px; border-radius: 4px; background: #C9D2DC; }
.avance-barras span.ya { background: var(--marino); }
.avance p { font-size: 1rem; color: var(--tinta-suave); }

.captura .boton { min-height: 60px; font-size: 1.1875rem; border-radius: 12px; }
.captura .boton.guardar { gap: var(--e2); background: linear-gradient(180deg, #34935A, #25693F); border-color: #25693F; font-size: 1.25rem; box-shadow: var(--tipo-luz), 0 10px 18px -8px rgba(37, 105, 63, .8); }
.captura .boton.guardar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.captura .boton.guardar:active { background: #1B4F31; border-color: #1B4F31; }
.captura .boton[aria-disabled="true"] { background: #C9D2DC; border-color: #C9D2DC; color: #3C4955; }
.captura .enlace { min-height: 48px; font-size: 1.0625rem; font-weight: 600; }
.captura .campo { margin-top: var(--e3); }
.captura .campo label { font-size: 1.0625rem; }
.captura .campo input, .captura .campo textarea { min-height: 56px; border-width: 2px; font-size: 1.125rem; }
.captura .campo textarea { min-height: 110px; }
.campos-dos { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.campos-dos.iguales { grid-template-columns: 1fr 1fr; }

/* Estado de la ubicación: una franja con su icono (palomita, lupa girando o aviso), del color de lo que pasa. */
.estado { display: flex; align-items: center; gap: 10px; padding: 10px var(--e3); border-radius: 14px; font-weight: 700; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); }
.estado::before { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%; background: currentColor var(--m) center / 62% no-repeat; }
.estado small { display: block; font-size: .9375rem; font-weight: 400; }
.estado.ok { background: var(--ok-fondo); color: #1B4F31; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.500l4.500 4.500L19 7.500'/%3E%3C/svg%3E"); }
.estado.busca { background: var(--acento-fondo); color: var(--acento-oscuro); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 4a8 8 0 1 0 8 8'/%3E%3C/svg%3E"); }
.estado.sin { background: var(--aviso-fondo); color: #5E3700; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 6v7M12 17.500v.500'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: no-preference) { .estado.busca::before { animation: girar 900ms linear infinite; } }
@keyframes girar { to { transform: rotate(360deg); } }

/* Lo que el mapa encontró en ese punto */
/* Lo que el mapa encontró: una tarjeta con un renglón por dato (icono, nombre del dato y su valor). */
.lugar { margin: var(--e3) 0 0; padding: var(--e1) var(--e3); background: var(--superficie); border: 1px solid #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(11, 42, 74, .10), 0 10px 20px -12px rgba(11, 42, 74, .32); }
.lugar-fila { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--e3); align-items: center; padding: 10px 0; }
.lugar-fila + .lugar-fila { border-top: 1px solid var(--linea); }
.lugar-fila i { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--acento-fondo); color: var(--acento); }
.lugar-fila svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lugar-fila svg.lleno { fill: currentColor; stroke: none; }
.lugar-fila svg.lleno circle { fill: var(--acento-fondo); }
.lugar-fila dt { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--tinta-suave); }
.lugar-fila dd { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.25; color: var(--marino); overflow-wrap: anywhere; }
/* Las dos acciones van parejas, cada una con su icono. */
.paso-acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--e2); margin-top: var(--e3); }
.captura .paso-acciones .boton { gap: var(--e2); min-height: 52px; padding: 0 var(--e2); font-size: 1rem; border-radius: 14px; white-space: normal; text-align: left; line-height: 1.15; }
.paso-acciones .boton svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Mapa: con controles (controles blancos abajo a la derecha, crédito en píldora, pin con aro blanco). */
.mapa-caja { border-radius: var(--r-bloque); overflow: hidden; background: #DDE4EC; box-shadow: 0 1px 2px rgba(11, 42, 74, .12), 0 8px 18px -12px rgba(11, 42, 74, .30); }
.mapa-motor { height: 320px; width: 100%; z-index: 0; }
.mapa-pista { margin: 6px 2px 10px; font-size: .9375rem; color: var(--tinta-suave); }
.mapa-motor .mapboxgl-ctrl-group { border: 1px solid #CDD4E8; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 10px 24px -8px rgba(20, 28, 38, .3); }
.mapa-motor .mapboxgl-ctrl-group button { width: 44px; height: 44px; }
.mapa-motor .mapboxgl-ctrl-zoom-in { border-bottom: 1px solid #CDD4E8; }
.mapa-motor .mapboxgl-ctrl-attrib { background: rgba(255, 255, 255, .85); font-size: 10.5px; border-radius: 999px; margin: 0 6px 6px 0; box-shadow: 0 1px 4px rgba(20, 28, 38, .15); }
/* Pin del reporte: el botón ilustrado de su tipo en un círculo con aro blanco, sobre una punta y una sombra
   ovalada. Mide 66 px de alto: la punta (abajo, al centro) es la coordenada. */
.mapa-pin { position: relative; width: 56px; height: 66px; background: transparent; border: 0; cursor: grab; }
.pin-gota { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border: 3px solid #fff; border-radius: 50%;
  background: var(--c, var(--marino)) var(--f, none) center / cover; box-shadow: 0 6px 12px -2px rgba(4, 14, 28, .45), inset 0 2px 2px rgba(255, 255, 255, .35); }
.pin-gota img { width: 72%; filter: drop-shadow(0 2px 2px rgba(4, 14, 28, .4)); }
.pin-punta { position: absolute; left: 50%; top: 44px; width: 16px; height: 16px; margin-left: -8px; background: #fff; border-radius: 0 0 4px 0; transform: rotate(45deg); box-shadow: 3px 3px 6px -2px rgba(4, 14, 28, .35); }
.pin-sombra { position: absolute; left: 50%; bottom: 0; width: 22px; height: 6px; margin-left: -11px; border-radius: 50%; background: rgba(4, 14, 28, .28); }
.mapa-pin.arrastrando { cursor: grabbing; }
@media (prefers-reduced-motion: no-preference) {
  .pin-gota, .pin-punta { transition: transform 160ms var(--ease-out); }
  .pin-sombra { transition: transform 160ms var(--ease-out), opacity 160ms var(--ease-out); }
  /* Al arrastrarlo se levanta y su sombra se achica, como al cargar algo. */
  .mapa-pin.arrastrando .pin-gota { transform: translateY(-8px) scale(1.06); }
  .mapa-pin.arrastrando .pin-punta { transform: translateY(-8px) rotate(45deg); }
  .mapa-pin.arrastrando .pin-sombra { transform: scale(.7); opacity: .6; }
}

/* Mapa de la captura: tarjeta de vidrio, más alta, con la colonia escrita arriba y el botón de ubicación. */
.mapa-captura { position: relative; border: 1px solid #fff; border-radius: 18px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 1px 2px rgba(11, 42, 74, .12), 0 14px 26px -14px rgba(11, 42, 74, .40); }
.mapa-captura .mapa-motor { height: 360px; }
@media (min-width: 600px) { .mapa-captura .mapa-motor { height: 440px; } }
.mapa-colonia { position: absolute; left: var(--e2); top: var(--e2); z-index: 1; max-width: calc(100% - 76px); padding: 6px var(--e3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: rgba(255, 255, 255, .94); color: var(--marino); border-radius: 999px; font-size: .9375rem; font-weight: 700; box-shadow: 0 2px 6px rgba(11, 42, 74, .28); }
.mapa-ubicarme { position: absolute; right: 10px; top: var(--e2); z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; cursor: pointer;
  background: #fff; color: var(--acento); border: 1px solid #CDD4E8; border-radius: 12px; box-shadow: 0 10px 24px -8px rgba(20, 28, 38, .3); }
.mapa-ubicarme svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mapa-ubicarme svg .lleno { fill: currentColor; stroke: none; }
.mapa-ubicarme:active { background: var(--acento-fondo); }

/* Foto: una tarjeta grande que abre la cámara, con la cámara en un círculo azul, y debajo la galería como
   segundo botón. */
.foto-heroe {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e3);
  width: 100%; min-height: 250px; padding: var(--e4); text-align: center; cursor: pointer;
  border: 2px dashed color-mix(in srgb, var(--acento) 50%, transparent); border-radius: 22px;
  background: linear-gradient(180deg, #fff 0%, #EEF4FD 100%); color: var(--marino); font: inherit; font-size: 1.25rem; font-weight: 700; line-height: 1.2;
  box-shadow: 0 1px 2px rgba(11, 42, 74, .10), 0 14px 26px -14px rgba(21, 96, 189, .45);
}
.foto-ico { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; color: #fff;
  background: linear-gradient(160deg, #2B7BEA, #0F56C4); box-shadow: 0 0 0 8px rgba(21, 96, 189, .12), inset 0 2px 2px rgba(255, 255, 255, .35), 0 12px 20px -8px rgba(15, 86, 196, .7); }
.foto-heroe svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.foto-heroe:active { background: #E6EEF9; }
/* Ya con una foto, el botón se achica pero sigue pareciendo botón: quien captura debe ver que caben más. */
.foto-heroe.chico { flex-direction: row; min-height: 76px; margin-top: var(--e3); padding: var(--e2) var(--e3); font-size: 1.0625rem; text-align: left; border-radius: 18px; }
.foto-heroe.chico .foto-ico { flex: none; width: 48px; height: 48px; box-shadow: 0 0 0 4px rgba(21, 96, 189, .12), inset 0 2px 2px rgba(255, 255, 255, .35); }
.foto-heroe.chico svg { width: 26px; height: 26px; stroke-width: 2.1; }
/* La galería: botón parejo, con su icono de imagen puesto por la hoja (el texto lo cambia el script). */
.captura .foto-galeria { width: 100%; gap: var(--e2); min-height: 54px; margin-top: var(--e3); font-size: 1.0625rem; border-radius: 14px; }
.foto-galeria::before { content: ""; flex: none; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.500' width='17' height='15' rx='3'/%3E%3Ccircle cx='9' cy='10' r='1.800'/%3E%3Cpath d='M4.500 17.500l5-4.500 3.500 3 3-2.500 4 3.500'/%3E%3C/svg%3E"); }
.foto-ayuda { margin-top: var(--e3); text-align: center; }
.foto-area { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--e2); margin-bottom: var(--e3); }
.foto-miniatura { position: relative; min-width: 0; overflow: hidden; background: #DDE4EC; border: 1px solid #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(11, 42, 74, .10), 0 10px 20px -12px rgba(11, 42, 74, .32); }
.foto-miniatura img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.foto-miniatura:only-child img { aspect-ratio: 16 / 11; }
.foto-quitar {
  position: absolute; top: var(--e2); right: var(--e2); display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--e3);
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; background: rgba(11, 26, 46, .72); color: #fff;
  font: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.foto-quitar::before { content: "×"; font-size: 1.25rem; line-height: 1; }

/* Paso 3 · El comentario en su tarjeta, con la cuenta de letras. */
.nota-tarjeta { padding: var(--e3); background: var(--superficie); border: 1px solid #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(11, 42, 74, .10), 0 10px 20px -12px rgba(11, 42, 74, .32); }
.nota-tarjeta label { font-size: 1.0625rem; font-weight: 700; color: var(--marino); }
.nota-tarjeta textarea { min-height: 132px; margin-top: var(--e1); padding: var(--e3); font-size: 1.0625rem; line-height: 1.4; background: #F7F9FC; border: 1.5px solid #D5DEEB; border-radius: 14px; }
.nota-tarjeta textarea:focus-visible { outline: 0; border-color: var(--acento); background: #fff; box-shadow: 0 0 0 4px rgba(21, 96, 189, .18); }
.nota-pie { display: flex; justify-content: space-between; gap: var(--e3); margin-top: 6px; font-size: .875rem; color: var(--tinta-suave); }

/* Datos del ciudadano: plegado, con su icono y la palabra «Opcional» para que nadie crea que hay que llenarlo. */
.ciudadano { margin-top: var(--e3); padding: 0 var(--e3); background: var(--superficie); border: 1px solid #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(11, 42, 74, .10), 0 10px 20px -12px rgba(11, 42, 74, .32); }
.ciudadano[open] { padding-bottom: var(--e3); }
.ciudadano summary { display: flex; align-items: center; gap: var(--e3); min-height: 64px; cursor: pointer; list-style: none; font-weight: 700; line-height: 1.2; color: var(--marino); }
.ciudadano summary::-webkit-details-marker { display: none; }
.ciudadano summary i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--acento-fondo); color: var(--acento); }
.ciudadano summary svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ciudadano summary small { display: block; margin-top: 2px; font-size: .8125rem; font-weight: 600; color: var(--tinta-suave); }
.ciudadano summary::after { content: ""; flex: none; margin-left: auto; margin-right: var(--e1); width: 9px; height: 9px; border-right: 2px solid var(--acento); border-bottom: 2px solid var(--acento); transform: translateY(-3px) rotate(45deg); }
.ciudadano[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.ciudadano .ayuda { margin: 0 0 var(--e3); padding: var(--e2) var(--e3); background: var(--acento-fondo); border-radius: 10px; color: var(--acento-oscuro); }
.ciudadano input { min-height: 50px; background: #F7F9FC; border: 1.5px solid #D5DEEB; border-radius: 12px; }
.ciudadano input:focus-visible { outline: 0; border-color: var(--acento); background: #fff; box-shadow: 0 0 0 4px rgba(21, 96, 189, .18); }

/* Datos de una persona (Views/Shared/_Persona.cshtml): usuario o ciudadano que reporta. */
.persona .campo { margin-top: 0; }
.persona-seccion { margin-top: var(--e2); padding-top: var(--e3); border-top: 1px solid var(--linea); font-weight: 650; color: var(--tinta-suave); }
.req { color: var(--peligro); }
/* Resumen antes de guardar: lo que ya lleva el reporte, cada cosa con su icono y una palomita. */
.resumen { margin-top: var(--e3); padding: var(--e3) var(--e3) var(--e1); background: linear-gradient(180deg, #fff, #F2F8F4); border: 1px solid #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(11, 42, 74, .10), 0 10px 20px -12px rgba(44, 122, 75, .40); }
.resumen h3 { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: var(--e1); }
.resumen p { display: flex; align-items: center; gap: var(--e3); padding: var(--e2) 0; font-weight: 600; color: var(--marino); }
.resumen p + p { border-top: 1px solid var(--linea); }
.resumen p span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.resumen i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--acento-fondo); color: var(--acento); }
.resumen i svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.resumen i svg.lleno { fill: currentColor; stroke: none; }
.resumen i svg.lleno circle { fill: var(--acento-fondo); }
.resumen .res-tipo { background: var(--c) var(--f, none) center / cover; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .34); }
.resumen .res-tipo .ico { width: 30px; height: 30px; filter: drop-shadow(0 2px 2px rgba(4, 14, 28, .35)); }
.resumen p::after { content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--resuelto) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.500l4.500 4.500L19 7.500'/%3E%3C/svg%3E") center / 62% no-repeat; }

/* Pie: «Atrás» chico, «Siguiente/Guardar» grande. Botones normales al terminar el paso: no flotan ni tapan
   el contenido; se llega a ellos bajando, como en cualquier formulario. */
.asistente-pie { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: var(--e5); }
.asistente .asistente-pie { grid-template-columns: 1fr 2fr; }
.asistente .asistente-pie.solo { grid-template-columns: 1fr; }
.banda-cambiar { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e3); border-radius: var(--r-control); border: 1.5px solid var(--acento); color: var(--acento); font-size: .9375rem; font-weight: 700; text-decoration: none; background: var(--superficie); }

/* ---------- Controles ---------- */
label, .etiqueta { display: block; font-weight: 600; margin-bottom: var(--e1); font-size: .9375rem; }
/* Un dato que el formulario muestra pero no deja cambiar (el rol, para quien solo administra capturistas). */
.rol-fijo { display: flex; align-items: center; min-height: 44px; padding: 0 var(--e3); border-radius: var(--r-control); background: var(--acento-fondo); color: var(--acento-oscuro); font-weight: 600; }
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=date], input[type=number], select, textarea {
  width: 100%; min-height: 44px; padding: var(--e2) var(--e3);
  font: inherit; color: inherit; background: var(--superficie);
  border: 1px solid var(--linea-fuerte); border-radius: var(--r-control);
}
textarea { min-height: 96px; resize: none; }
input[type=file] { width: 100%; min-height: 44px; padding: var(--e2) 0; font: inherit; }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--acento); margin: 0; flex: none; }
.ayuda { font-size: .875rem; color: var(--tinta-suave); margin-top: var(--e1); }

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--e4);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--acento); color: #fff; border: 1px solid var(--acento); border-radius: var(--r-control);
}
.boton:active { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }
.boton.secundario { background: var(--superficie); color: var(--acento); border-color: var(--linea-fuerte); }
.boton.secundario:active { background: var(--acento-fondo); }
.boton.principal { flex: 1 1 220px; min-height: 52px; font-size: 1.0625rem; }
.boton:disabled { opacity: .55; cursor: not-allowed; }
button.enlace { min-height: 44px; background: none; border: 0; padding: 0; font: inherit; color: var(--acento); cursor: pointer; text-decoration: underline; }

/* Formularios en rejilla */
.rejilla { display: grid; gap: var(--e4); grid-template-columns: repeat(12, 1fr); }
.rejilla > * { grid-column: span 12; min-width: 0; }
@media (min-width: 720px) {
  .c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c6 { grid-column: span 6; }
}
.acciones { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin-top: var(--e5); }
.filtros { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: flex-end; margin-bottom: var(--e4); }
.filtros.al-final { margin: var(--e4) 0 0; }
.filtros > div { min-width: 150px; flex: 1 1 150px; }
.filtros .boton { flex: none; }

fieldset { border: 1px solid var(--linea); border-radius: var(--r-control); padding: var(--e4); margin: 0; min-width: 0; }
fieldset.arriba-5 { margin-top: var(--e5); }
legend { font-weight: 650; padding: 0 var(--e2); }
.opcion { display: flex; align-items: center; gap: var(--e3); min-height: 44px; padding: var(--e1) 0; font-weight: 400; margin: 0; }
.opcion.arriba-4 { margin-top: var(--e4); }

/* ---------- Mensajes y estados vacíos ---------- */
.mensaje { padding: var(--e3) var(--e4); border-radius: var(--r-control); margin-bottom: var(--e4); border: 1px solid; }
.mensaje.arriba-4 { margin: var(--e4) 0 0; }
.mensaje ul { margin: 0; padding: 0; list-style: none; }
.mensaje.error { background: var(--peligro-fondo); border-color: var(--peligro); color: #7A1912; }
.mensaje.ok { background: var(--ok-fondo); border-color: var(--resuelto); color: #1B4F31; }
.mensaje.aviso { background: var(--aviso-fondo); border-color: var(--pendiente); color: #5E3700; }
.vacio { padding: var(--e5); text-align: center; background: var(--superficie); border: 1px dashed var(--linea-fuerte); border-radius: var(--r-bloque); }
.vacio h2, .vacio h3 { font-size: 1.125rem; margin-bottom: var(--e2); }

/* ---------- Tablas ---------- */
/* position: relative contiene a .oculto-visual; si no, su posición estática ensancha toda la página. */
.tabla-caja { position: relative; overflow-x: auto; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-bloque); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: var(--e3) var(--e3); border-bottom: 1px solid var(--linea); vertical-align: middle; }
th { font-size: .8125rem; font-weight: 650; color: var(--tinta-suave); background: #F5F7FA; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; }
td form { margin: 0; }
a.folio { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 44px; min-height: 44px; font-weight: 600; }

/* Estatus: el color acompaña al texto, nunca lo reemplaza */
/* El folio que le dio CIAC al reporte (Bandeja VISOR). El número de VISOR es "Reporte"; el de CIAC, "Folio CIAC". */
/* Va en sólido para que se distinga de todo lo demás a primera vista. */
.folio-ciac, .rep-datos > .folio-ciac { display: inline-flex; align-items: baseline; gap: 8px; width: fit-content; padding: 4px 12px; border-radius: 10px; background: #0F4A94; color: #fff; font-size: 1.0625rem; font-weight: 800; line-height: 1.3; letter-spacing: .02em; white-space: nowrap; }
.folio-ciac small { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.rep-datos > .folio-ciac { margin-top: 6px; }
.folio-ciac.grande { margin-top: 8px; padding: 8px 16px; font-size: 1.5rem; }
.folio-ciac.grande small { font-size: .75rem; }
.ult-folio-ciac { display: flex; justify-content: center; width: auto; margin-top: var(--e3); }
.folio-ciac-trabajo { margin-top: 4px; font-size: .875rem; color: var(--tinta-suave); }
/* Todo lo que se escribe se ve en mayúsculas (y se guarda así); las indicaciones de ejemplo, no. El usuario
   para entrar y la contraseña (data-tal-cual) se ven y se mandan tal como se escriben, también cuando el
   ojo de «ver contraseña» la vuelve campo de texto. */
:is(input[type=text], input[type=email], input[type=search], input[type=tel], textarea):not([data-tal-cual]) { text-transform: uppercase; }
input::placeholder, textarea::placeholder { text-transform: none; }
.estatus { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: .875rem; font-weight: 600; padding: 3px 10px 3px 8px; border-radius: 999px; white-space: nowrap; background: color-mix(in srgb, currentColor 14%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent); }
.estatus::before { content: ""; flex: none; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3C/svg%3E"); }
/* Pendiente lleva un reloj; resuelto, una palomita. */
.estatus-0::before { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.estatus-2::before { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l3 3 5-6'/%3E%3C/svg%3E"); }
.estatus-0 { color: var(--pendiente); }
.estatus-1 { color: var(--proceso); }
.estatus-2 { color: var(--resuelto); }
.estatus-3 { color: var(--cancelado); }
.marca-repetido { font-size: .8125rem; font-weight: 600; color: var(--pendiente); }

/* ---------- Consulta: periodo de un toque, resumen por estatus y lista por día ---------- */
.consulta { max-width: 760px; margin: 0 auto; }
/* Bandeja: el panel claro de vidrio donde vive una página entera (en teléfono sube sobre el encabezado). */
.bandeja { padding: var(--e4) var(--e3) var(--e5); background: rgba(255, 255, 255, .62); border: 1px solid #fff; border-radius: 22px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 0 22px rgba(150, 195, 255, .35), 0 14px 30px -18px rgba(11, 42, 74, .35); }
@media (min-width: 600px) { .bandeja { padding: var(--e5); } }
.consulta-titulo { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e3); padding: 0 var(--e1); }
.consulta-titulo h1 { font-size: 1.75rem; letter-spacing: -.02em; color: var(--marino); }
.consulta-titulo p { min-width: 0; padding-left: var(--e3); border-left: 1px solid var(--linea-fuerte); font-size: .8125rem; line-height: 1.3; color: var(--tinta-suave); }
.consulta-titulo .num { white-space: normal; }
.periodo { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: var(--e1); background: #E4EAF3; border-radius: 16px; box-shadow: inset 0 1px 2px rgba(11, 42, 74, .10); }
.periodo a { display: grid; place-items: center; min-height: 44px; border-radius: 12px; font-weight: 600; color: var(--tinta-suave); text-decoration: none; }
.periodo a[aria-current] { background: var(--superficie); color: var(--acento); box-shadow: 0 1px 2px rgba(11, 42, 74, .16), 0 6px 12px -6px rgba(21, 96, 189, .45); }
.fechas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e3); align-items: end; margin-top: var(--e3); padding: var(--e3); background: var(--superficie); border-radius: var(--r-bloque); box-shadow: 0 1px 2px rgba(11, 42, 74, .12); }
.fechas .boton { grid-column: 1 / -1; min-height: 48px; }
@media (min-width: 600px) { .fechas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } .fechas .boton { grid-column: auto; } }

/* Cada número lleva el color de su estatus (.estatus-N) y, al tocarlo, filtra la lista. */
.contadores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2); margin-top: var(--e3); }
/* Tarjeta de vidrio teñida con el color de su estatus: el número grande, su nombre debajo y el icono en la esquina. */
.contador { position: relative; display: block; min-height: 84px; padding: 10px 10px 10px 12px; text-decoration: none; border: 2px solid #fff; border-radius: 16px;
  background: linear-gradient(160deg, #fff 30%, color-mix(in srgb, currentColor 16%, #fff) 100%);
  box-shadow: 0 1px 2px rgba(11, 42, 74, .10), 0 10px 18px -10px color-mix(in srgb, currentColor 55%, transparent), 0 8px 18px -12px rgba(11, 42, 74, .30); }
.contador b { display: block; font-size: 2rem; line-height: 1.05; }
.contador span { font-size: .8125rem; font-weight: 600; color: var(--tinta); }
.contador i { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, currentColor 18%, #fff); }
.contador svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.contador[aria-current] { border-color: currentColor; }

.mas-filtros { margin-top: var(--e3); background: var(--superficie); border: 1px solid #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(11, 42, 74, .10), 0 8px 18px -12px rgba(11, 42, 74, .30); }
.mas-filtros summary { display: flex; align-items: center; gap: var(--e3); min-height: 52px; padding: 0 var(--e4); font-weight: 700; color: var(--acento); cursor: pointer; list-style: none; }
.mas-filtros summary svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.mas-filtros summary::-webkit-details-marker { display: none; }
/* La flecha va al final, separada por un filo. */
.mas-filtros summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid; border-bottom: 2px solid; transform: translateY(-3px) rotate(45deg); box-shadow: none; }
.mas-filtros[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.mas-filtros .filtros { margin: 0; padding: var(--e1) var(--e4) var(--e4); }
/* En teléfono cada lista ocupa su renglón y los botones quedan juntos al final. */
.mas-filtros .filtros > div { flex-basis: 220px; }

.cuenta { margin-top: var(--e4); padding: 0 var(--e1) var(--e3); font-size: .9375rem; border-bottom: 1px solid var(--linea); }
.cuenta b { color: var(--tinta); }
.dia { margin: var(--e4) var(--e1) var(--e2); font-size: 1rem; color: var(--marino); }
.consulta .vacio { margin-top: var(--e4); }
/* Cada reporte es su propia tarjeta: el tipo en un botón pequeño con su fondo ilustrado y, al lado, lo que importa. */
.reportes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.reporte { display: flex; align-items: center; gap: 14px; padding: var(--e3); color: inherit; text-decoration: none; background: var(--superficie); border: 1px solid #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(11, 42, 74, .10), 0 10px 20px -12px rgba(11, 42, 74, .32); }
.reporte:active { background: var(--acento-fondo); }
/* Franja del folio CIAC: baja a su propio renglón y llega a las orillas de la tarjeta. */
.reporte { flex-wrap: wrap; overflow: hidden; }
.rep-pie { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--e3); margin: 0 calc(-1 * var(--e3)) calc(-1 * var(--e3)); padding: 7px 14px; background: #0F4A94; color: #fff; font-size: .8125rem; }
.rep-pie b { margin-left: 6px; font-size: 1.0625rem; font-weight: 800; letter-spacing: .02em; }
.rep-pie > span + span { font-weight: 600; }
.rep-ico { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 16px; background: var(--c) var(--f, none) center / cover; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .34), inset 0 2px 2px rgba(255, 255, 255, .45), 0 8px 14px -6px var(--c); }
.rep-ico .ico { width: 52px; height: 52px; filter: drop-shadow(0 3px 3px rgba(4, 14, 28, .35)); }
.rep-datos { flex: 1; min-width: 0; font-size: .875rem; line-height: 1.35; overflow-wrap: anywhere; }
.rep-datos > span { display: block; }
/* El nombre del tipo nunca se parte a media palabra: si no cabe junto al estatus, el estatus baja de renglón. */
.rep-datos > .rep-arriba { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px var(--e2); margin-bottom: 2px; }
.rep-arriba b { font-size: .9375rem; letter-spacing: -.01em; white-space: nowrap; overflow-wrap: normal; color: var(--marino); }
@media (min-width: 480px) { .rep-arriba b { font-size: 1.0625rem; } }
.rep-arriba .estatus { font-size: .75rem; padding: 2px 8px 2px 6px; }
.rep-datos > .rep-linea { display: flex; gap: 6px; margin-top: 2px; white-space: normal; }
/* Teléfono: el botón del tipo un poco más chico, para que el nombre más largo quepa junto al estatus. */
@media (max-width: 479.98px) { .reporte { gap: var(--e3); } .rep-ico { width: 60px; height: 60px; border-radius: 14px; } .rep-ico .ico { width: 44px; height: 44px; } }
.rep-linea svg { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: #7C8A9A; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rep-linea svg.lleno { fill: #7C8A9A; stroke: none; }
.rep-linea svg.lleno circle { fill: #fff; }
@media (hover: hover) and (pointer: fine) { .reporte:hover { background: #F5F7FA; } .periodo a:not([aria-current]):hover { color: var(--tinta); } }

/* Paginación */
.paginacion { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-top: var(--e4); flex-wrap: wrap; }
.paginacion nav { display: flex; gap: var(--e2); }

/* ---------- Dashboard: tablero de tipos; debajo, el mapa y una pregunta por bloque ---------- */
.tablero { max-width: 960px; margin: 0 auto; }
/* El Dashboard usa todo el ancho de la pantalla (2026-10-21): en computadora había mucho espacio sin usar. */
.con-tablero .pagina { max-width: none; }
.con-tablero .tablero { max-width: none; }
@media (min-width: 900px) { .con-tablero .pagina { padding-left: clamp(var(--e5), 2.5vw, 48px); padding-right: clamp(var(--e5), 2.5vw, 48px); } }
.tablero .contador svg.lleno { fill: currentColor; stroke: none; }
.tablero .contador svg.lleno circle { fill: #fff; }
.tablero-bloque { margin-top: var(--e5); }
.tablero-bloque > h2 { margin: 0 var(--e1) var(--e2); font-size: 1rem; color: var(--marino); }
.tablero-nota { margin: var(--e2) var(--e1) 0; font-size: .8125rem; color: var(--tinta-suave); }
.tablero .vacio { margin-top: var(--e5); }
.tablero-bloques { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .tablero-bloques { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e5); align-items: start; } }
.tablero .panel { border: 1px solid #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(11, 42, 74, .10), 0 10px 20px -12px rgba(11, 42, 74, .32); }

/* «¿Qué se reporta?»: las mismas barras de colonias y personas; el nombre lleva a Consulta y dice cómo va contra el periodo anterior. */
.barra-nombre a { color: inherit; text-decoration: none; }
.barra-nombre small { margin-left: var(--e2); font-size: .75rem; font-weight: 600; color: var(--tinta-suave); white-space: nowrap; }
.barra-pista i.vacia { min-width: 0; width: 0; }

.tablero-mapa { position: relative; border: 1px solid #fff; border-radius: 18px; }
.tablero-mapa .mapa-motor { height: 280px; }
@media (min-width: 720px) { .tablero-mapa .mapa-motor { height: 420px; } }
.mapa-nota { position: absolute; left: var(--e2); top: var(--e2); z-index: 1; padding: var(--e1) 10px; background: rgba(255, 255, 255, .94); border-radius: 999px; font-size: .8125rem; font-weight: 600; box-shadow: 0 1px 3px rgba(11, 42, 74, .25); }

/* Barras: una sola tinta; el puesto, el nombre y el valor van escritos. */
.barras { list-style: none; margin: 0; display: grid; gap: var(--e3); }
.barras li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.barra-puesto { grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--acento-fondo); color: var(--acento); font-size: .8125rem; font-weight: 700; }
.barra-nombre { font-size: .9375rem; font-weight: 600; overflow-wrap: anywhere; }
.barra-valor { grid-row: span 2; font-size: 1.0625rem; font-weight: 700; color: var(--marino); }
.barra-pista { grid-column: 2; display: block; height: 9px; background: #E3E8EE; border-radius: 999px; }
.barra-pista i { display: block; height: 100%; min-width: 6px; border-radius: 999px; background: linear-gradient(90deg, #1A6BE0, #0F56C4); }

/* Barras por día: columnas con la base alineada; el valor solo se escribe en el día más alto. */
.dias { display: flex; align-items: flex-end; gap: 6px; }
.dias.juntos { gap: 1px; }
.dia-col { flex: 1 1 0; min-width: 0; text-align: center; font-size: .6875rem; line-height: 1.3; color: var(--tinta-suave); }
.dia-col > span { display: block; }
.dia-barra { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 120px; margin-bottom: var(--e1); border-bottom: 1px solid var(--linea-fuerte); }
.dia-barra i { display: block; width: 100%; max-width: 26px; background: linear-gradient(180deg, #2B7BEA, #0F56C4); border-radius: 6px 6px 0 0; }
.dias.juntos .dia-barra i { border-radius: 0; }
/* Cada día lleva su número encima de la barra; los días sin reportes, un cero apagado. */
.dia-barra b { position: absolute; left: 0; right: 0; padding-bottom: 3px; font-size: .75rem; color: var(--marino); }
.dia-barra b.cero { font-weight: 400; color: var(--tinta-suave); }
.dias { padding-top: 18px; }
/* En computadora la gráfica por día ocupa las dos columnas: más alta y con barras más anchas. */
@media (min-width: 900px) {
  .tablero-bloque.ancho { grid-column: 1 / -1; }
  .tablero-bloque.ancho .dia-barra { height: 170px; }
  .tablero-bloque.ancho .dia-barra i { max-width: 64px; }
  .tablero-bloque.ancho .dia-col { font-size: .8125rem; }
  .tablero-bloque.ancho .dia-barra b { font-size: .9375rem; }
}
.dia-col:hover .dia-barra i, .barras li:hover .barra-pista i { background: var(--acento-oscuro); }
.eje { display: flex; justify-content: space-between; gap: var(--e2); font-size: .8125rem; color: var(--tinta-suave); margin-top: var(--e1); }

/* ---------- Usuarios: lista en tarjetas y formularios por secciones ---------- */
.usuarios, .usuario-form { max-width: 820px; margin: 0 auto; }
.usuarios-barra { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.buscador { flex: 1 1 220px; display: flex; align-items: center; gap: var(--e2); min-height: 50px; margin: 0; padding: 0 var(--e3); font-weight: 400;
  background: var(--superficie); border: 1.5px solid #D5DEEB; border-radius: 14px; box-shadow: 0 1px 2px rgba(11, 42, 74, .08); }
.buscador svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--tinta-suave); stroke-width: 2; stroke-linecap: round; }
.buscador input { flex: 1; min-width: 0; min-height: 46px; padding: 0; border: 0; background: none; font-size: 1rem; }
.buscador input:focus-visible { outline: 0; }
.buscador:focus-within { border-color: var(--acento); box-shadow: 0 0 0 4px rgba(21, 96, 189, .18); }
.nuevo-usuario { flex: 1 1 auto; gap: var(--e2); min-height: 50px; border-radius: 14px; background: linear-gradient(180deg, #1A6BE0, #0F56C4); border-color: #0F56C4; box-shadow: var(--tipo-luz), 0 10px 18px -8px var(--acento); }
.nuevo-usuario svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
@media (min-width: 600px) { .nuevo-usuario { flex: none; } }
.usuarios .vacio { margin-top: var(--e4); }
.usuarios-sin { margin: var(--e4) var(--e1) 0; }

.usuarios-lista { list-style: none; margin: var(--e4) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.usuario { display: flex; align-items: center; gap: var(--e3); padding: var(--e3); color: inherit; text-decoration: none; background: var(--superficie); border: 1px solid #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(11, 42, 74, .10), 0 10px 20px -12px rgba(11, 42, 74, .32); }
.usuario:active { background: var(--acento-fondo); }
/* Las iniciales en un círculo azul, como una foto de perfil. */
.usuario-inicial { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; font-size: 1.125rem; font-weight: 700; letter-spacing: .02em;
  background: linear-gradient(160deg, #2B7BEA, #0F4A94); box-shadow: inset 0 2px 2px rgba(255, 255, 255, .30), 0 8px 14px -8px rgba(15, 74, 148, .8); }
.usuario.inactivo .usuario-inicial { background: linear-gradient(160deg, #9AA6B4, #5C6873); box-shadow: none; }
.usuario-inicial.nuevo svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.usuario-datos { flex: 1; min-width: 0; font-size: .875rem; line-height: 1.35; overflow-wrap: anywhere; }
.usuario-datos > * { display: block; }
.usuario-datos b { font-size: 1.0625rem; color: var(--marino); }
.usuario-marcas { flex: none; display: grid; gap: 4px; justify-items: end; }
.sello { padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.sello.activa { background: var(--ok-fondo); color: #1B4F31; box-shadow: inset 0 0 0 1px rgba(44, 122, 75, .28); }
.sello.inactiva { background: #E9EDF2; color: #3C4955; box-shadow: inset 0 0 0 1px rgba(92, 104, 115, .28); }
.sello.falta { background: var(--aviso-fondo); color: #5E3700; box-shadow: inset 0 0 0 1px rgba(154, 90, 0, .28); }
/* Dashboard: usuarios a los que les faltan datos de solicitante (solo quien ve todo). */
.sin-datos { margin-bottom: var(--e4); border-color: var(--pendiente); background: var(--aviso-fondo); }
.sin-datos > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); min-height: 32px; font-family: var(--fuente-titulos, inherit); font-weight: 700; font-size: 1rem; color: #5E3700; cursor: pointer; list-style: none; }
.sin-datos > summary::-webkit-details-marker { display: none; }
.sin-datos-ver { margin-left: auto; font-size: .875rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sin-datos-ver::before { content: "Ver la lista"; }
.sin-datos[open] .sin-datos-ver::before { content: "Esconder"; }
.sin-datos > summary:focus-visible { outline: 3px solid var(--acento); outline-offset: 4px; border-radius: 8px; }
.sin-datos p { margin: var(--e2) 0 var(--e3); font-size: .875rem; }
.sin-datos-lista { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0; padding: 0; list-style: none; }
.sin-datos-lista li { display: flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 10px; background: var(--superficie); box-shadow: inset 0 0 0 1px rgba(154, 90, 0, .22); }
.sin-datos-lista a { font-weight: 600; }
.sin-datos-lista small { color: var(--tinta-suave); }
/* Mi perfil */
.perfil-falta { color: #9A5A00; font-weight: 700; }
.usuario-ir { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--tinta-suave); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 479.98px) { .usuario { flex-wrap: wrap; } .usuario-marcas { order: 4; flex: 1 0 100%; grid-auto-flow: column; justify-content: start; justify-items: start; padding-left: 64px; } .usuario-ir { order: 3; } }
@media (hover: hover) and (pointer: fine) { .usuario:hover { background: #F5F7FA; } }

/* Formulario de usuario: cada sección en su tarjeta, con icono en el título. */
.usuario-cabeza { display: flex; align-items: center; gap: 14px; margin-bottom: var(--e4); padding: 0 var(--e1); }
.usuario-cabeza > div { flex: 1; min-width: 0; }
.usuario-cabeza h1 { font-size: 1.5rem; letter-spacing: -.01em; color: var(--marino); overflow-wrap: anywhere; }
.usuario-cabeza p { font-size: .9375rem; color: var(--tinta-suave); }
.tarjeta-form { margin-top: var(--e3); padding: var(--e4) var(--e3); background: var(--superficie); border: 1px solid #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(11, 42, 74, .10), 0 10px 20px -12px rgba(11, 42, 74, .32); }
@media (min-width: 600px) { .tarjeta-form { padding: var(--e5); } }
.tarjeta-form > h2 { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e4); font-size: 1.0625rem; color: var(--marino); }
.tarjeta-form > h2 i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--acento-fondo); color: var(--acento); }
.tarjeta-form > h2 svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tarjeta-form .nota { margin: calc(-1 * var(--e2)) 0 var(--e4); padding: var(--e2) var(--e3); background: var(--acento-fondo); border-radius: 10px; color: var(--acento-oscuro); }
.tarjeta-form.clave { margin-top: var(--e5); }
.usuario-form input[type=text], .usuario-form input[type=password], .usuario-form input[type=email], .usuario-form input[type=tel], .usuario-form select {
  min-height: 50px; background: #F7F9FC; border: 1.5px solid #D5DEEB; border-radius: 12px; }
.usuario-form input:focus-visible, .usuario-form select:focus-visible { outline: 0; border-color: var(--acento); background: #fff; box-shadow: 0 0 0 4px rgba(21, 96, 189, .18); }
.usuario-form .acciones .boton { min-height: 52px; border-radius: 14px; }
.usuario-form .acciones .principal { background: linear-gradient(180deg, #1A6BE0, #0F56C4); border-color: #0F56C4; box-shadow: var(--tipo-luz), 0 10px 18px -8px var(--acento); }
.usuario-form .mensaje { margin: var(--e3) 0 0; }
/* Interruptor: la casilla de siempre, dibujada como un apagador. */
.pestanas-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--e2); }
.interruptor { gap: var(--e3); min-height: 52px; padding: var(--e2) var(--e3); background: #F7F9FC; border: 1.5px solid #D5DEEB; border-radius: 14px; font-weight: 600; cursor: pointer; }
.interruptor small { display: block; font-size: .8125rem; font-weight: 400; color: var(--tinta-suave); }
.interruptor input[type=checkbox] { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 44px; height: 26px; margin: 0; border-radius: 999px; background: #B8C2CE; cursor: pointer; }
.interruptor input[type=checkbox]::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(4, 14, 28, .35); }
.interruptor input[type=checkbox]:checked { background: var(--resuelto); }
.interruptor input[type=checkbox]:checked::after { left: 21px; }
.interruptor:has(input:checked) { border-color: color-mix(in srgb, var(--resuelto) 45%, #D5DEEB); background: #F2F8F4; }
@media (prefers-reduced-motion: no-preference) { .interruptor input[type=checkbox], .interruptor input[type=checkbox]::after { transition: left 140ms var(--ease-out), background-color 140ms ease; } }

/* ---------- Detalle del reporte ---------- */
.detalle { max-width: 760px; margin: 0 auto; }
.detalle-volver { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 var(--e1); font-weight: 600; text-decoration: none; }
.detalle-volver svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transform: scaleX(-1); }
/* Ficha por bloques: una tarjeta por tema, todas con la misma sombra que las de Consulta. */
.det-cabeza, .det-cifras li, .det-bloque { background: var(--superficie); border: 1px solid #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(11, 42, 74, .10), 0 10px 20px -12px rgba(11, 42, 74, .32); }
/* El tipo con su foto, el número de reporte debajo y el estatus a la derecha. */
.det-cabeza { display: flex; align-items: center; gap: 14px; padding: 14px; }
.det-cabeza > div { flex: 1; min-width: 0; }
.det-cabeza h1 { font-size: 1.375rem; line-height: 1.15; letter-spacing: -.01em; color: var(--marino); overflow-wrap: anywhere; }
.det-cabeza p { margin-top: 2px; font-size: .875rem; color: var(--tinta-suave); }
.det-cabeza .estatus { align-self: flex-start; }
/* Tres cifras de un vistazo; sin folio CIAC son dos y se reparten el ancho. */
.det-cifras { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--e2); }
.det-cifras li { padding: 10px 6px 9px; text-align: center; }
.det-cifras b { display: block; font-size: 1.375rem; font-weight: 800; line-height: 1.15; color: var(--marino); white-space: nowrap; }
.det-cifras span { font-size: .75rem; color: var(--tinta-suave); }
.det-cifras .ciac { background: #0F4A94; border-color: #0F4A94; }
.det-cifras .ciac b, .det-cifras .ciac span { color: #fff; }
.det-cifras .ciac b { font-size: 1.125rem; line-height: 1.4; }
.det-bloque { margin-top: 10px; padding: 14px var(--e4); overflow-wrap: anywhere; }
.det-bloque > h2 { display: flex; align-items: center; gap: var(--e2); margin: 0 0 var(--e2); font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: var(--acento-oscuro); }
.det-bloque > h2 svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.det-bloque p + p { margin-top: 2px; }
.det-calle { font-size: 1.125rem; font-weight: 700; line-height: 1.2; color: var(--marino); }
.det-texto { white-space: pre-line; }
/* El mapa cierra el bloque de Ubicación de orilla a orilla; si la imagen no carga, queda el botón sobre gris. */
.det-mapa { position: relative; min-height: 64px; margin: var(--e3) calc(-1 * var(--e4)) -14px; overflow: hidden; border-radius: 0 0 17px 17px; background: #E4EAF1; }
.det-mapa img { display: block; width: 100%; height: 140px; object-fit: cover; }
.det-mapa a { position: absolute; right: var(--e2); bottom: var(--e2); display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e4); border-radius: 999px; background: var(--superficie); box-shadow: 0 1px 3px rgba(11, 42, 74, .3); font-weight: 700; font-size: .875rem; text-decoration: none; }
.det-mapa a:active { background: var(--acento-fondo); }
@media (min-width: 600px) { .det-mapa img { height: 200px; } }
.det-ciac { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); margin-bottom: var(--e3); font-size: .875rem; color: var(--tinta-suave); }
.det-ciac-quien { margin: calc(-1 * var(--e2)) 0 var(--e3); font-size: .875rem; }
.det-ciac-quien strong { color: var(--tinta); }
.det-bloque .fotos a { border-radius: 12px; box-shadow: none; }
.det-bloque .linea-tiempo { padding: var(--e1) 0 0; border: 0; border-radius: 0; box-shadow: none; }
.det-bloque .linea-tiempo .num { white-space: normal; }
/* minmax(0, 1fr) y overflow-wrap: un comentario largo o las coordenadas no ensanchan la tarjeta. */
.datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--e3) var(--e5); margin: 0; }
.datos dt { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--tinta-suave); }
.datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; white-space: normal; }
@media (max-width: 560px) {
  .datos { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .datos dd { margin-bottom: var(--e3); padding-bottom: var(--e3); border-bottom: 1px solid var(--linea); }
  .datos dd:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
}
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.fotos a { display: block; overflow: hidden; background: #DDE4EC; border: 1px solid #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(11, 42, 74, .10), 0 10px 20px -12px rgba(11, 42, 74, .32); }
.fotos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Una sola foto se ve grande, no en una esquina. */
.fotos a:only-child { grid-column: 1 / -1; }
.fotos a:only-child img { aspect-ratio: 16 / 10; }
.linea-tiempo { list-style: none; margin: 0; padding: var(--e3) var(--e4); display: grid; gap: var(--e4); background: var(--superficie); border: 1px solid #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(11, 42, 74, .10), 0 10px 20px -12px rgba(11, 42, 74, .32); }
.linea-tiempo li { position: relative; padding-left: 22px; }
.linea-tiempo li::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 3px var(--acento-fondo); }
.linea-tiempo li + li::after { content: ""; position: absolute; left: 4px; top: calc(-1 * var(--e4) + 16px); bottom: calc(100% - 4px); width: 2px; background: var(--linea); }
.linea-tiempo .suave { font-size: .875rem; }

/* Historial de cambios de los datos de un usuario (Mi perfil y Usuarios › Editar), plegado. */
.cambios-usuario { margin-top: var(--e5); }
.cambios-usuario > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); min-height: 32px; font-weight: 700; color: var(--marino); cursor: pointer; list-style: none; }
.cambios-usuario > summary::-webkit-details-marker { display: none; }
.cambios-usuario > summary .suave { font-weight: 600; font-size: .875rem; }
.cambios-ver { margin-left: auto; font-size: .875rem; color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
.cambios-ver::before { content: "Ver"; }
.cambios-usuario[open] .cambios-ver::before { content: "Esconder"; }
.cambios-usuario > summary:focus-visible { outline: 3px solid var(--acento); outline-offset: 4px; border-radius: 8px; }
.cambios-usuario .linea-tiempo { margin-top: var(--e3); padding: 0; background: none; border: 0; box-shadow: none; }
.cambio-campos { list-style: none; margin: var(--e2) 0 0; padding: 0; display: grid; gap: 4px; font-size: .9375rem; overflow-wrap: anywhere; }
.cambio-campos li { padding: 0; }
.cambio-campos li::before, .cambio-campos li::after { content: none; }
.cambio-campos b { font-weight: 600; }
.cambio-antes { color: var(--tinta-suave); text-decoration: line-through; }
.cambio-despues { font-weight: 600; }
/* Editar mis datos: el nombre y los apellidos se ven pero no se cambian. */
.persona input[readonly] { background: #EEF1F5; color: var(--tinta-suave); cursor: not-allowed; }
.nombre-fijo { margin-top: calc(-1 * var(--e2)); }
.cambio-vacio { color: var(--tinta-suave); font-style: italic; text-decoration: none; font-weight: 400; }

/* ---------- Acceso y errores ---------- */
/* Login: la foto de la ciudad a toda la pantalla (una para teléfono y otra para computadora), con un velo azul
   noche que asienta el texto blanco de arriba y de abajo. Sin la barra del sitio: la marca va escrita sobre la foto. */
body.con-fondo {
  min-height: 100vh; min-height: 100svh;
  background-color: #0B1E3C;
  background-image: linear-gradient(180deg, rgba(8, 22, 48, .50) 0%, rgba(8, 22, 48, .12) 36%, rgba(8, 22, 48, .34) 70%, rgba(6, 16, 36, .80) 100%), url("../img/fondo-ciudad.svg");
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
@media (min-width: 700px) {
  body.con-fondo { background-image: linear-gradient(180deg, rgba(8, 22, 48, .45) 0%, rgba(8, 22, 48, .14) 40%, rgba(6, 16, 36, .72) 100%), url("../img/fondo-ciudad.svg"); }
}
.con-fondo .enc { display: none; }
.con-fondo .pagina { max-width: 408px; padding-top: max(var(--e5), env(safe-area-inset-top)); padding-bottom: var(--e4); }

.acceso-encabezado { color: #fff; text-shadow: 0 1px 3px rgba(4, 12, 28, .55); }
.acceso-sistema { font-size: clamp(1.125rem, 5.2vw, 1.375rem); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.acceso-municipio { font-size: .875rem; }
/* Franja de la pantalla de entrada: degradado de azules rey, del más profundo al más claro. */
.acceso-colores { height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, #1D4ED8 0%, #2563EB 30%, #4169E1 60%, #6C8EF5 82%, #A5BEFF 100%); }
.acceso-encabezado .acceso-colores { width: min(58%, 250px); margin: var(--e3) 0; }
.acceso-lema { font-size: .6875rem; line-height: 1.6; letter-spacing: .26em; text-transform: uppercase; color: #C9D8EE; }

/* En teléfono la tarjeta se centra en el espacio que queda entre la marca y el pie; el relleno de arriba es el
   sitio del logo, que sobresale de la tarjeta. */
.acceso { margin: auto 0; padding-top: 56px; }
/* Tarjeta de cristal: blanco translúcido que desenfoca la foto de atrás, con filo claro. El blanco va lo bastante
   cargado para que el texto oscuro se lea igual sobre el cielo que sobre la parte oscura de la foto. */
.acceso .panel { position: relative; border: 1px solid rgba(255, 255, 255, .7); border-radius: 20px; padding: 46px 20px 20px; text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .50), rgba(255, 255, 255, .38)); -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 30px 60px -20px rgba(2, 8, 20, .7); }
/* Sin desenfoque (navegadores viejos) el cristal sería ilegible: ahí la tarjeta se queda casi opaca. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .acceso .panel { background: rgba(255, 255, 255, .94); } }
.acceso-marca {
  position: absolute; left: 50%; top: -38px; transform: translateX(-50%);
  display: grid; place-items: center; width: 70px; height: 70px; border-radius: 18px; background: var(--marino);
  box-shadow: var(--tipo-luz), 0 0 0 4px rgba(255, 255, 255, .85), 0 14px 22px -8px rgba(11, 42, 74, .65);
}
.acceso-marca img { width: 38px; height: auto; display: block; }
.acceso h1 { font-size: 1.375rem; letter-spacing: -.01em; margin-bottom: var(--e1); color: #0A1A30; }
.acceso-bajada { color: #2B3846; font-size: .8125rem; line-height: 1.35; text-wrap: balance; }
.acceso .arriba-4 { margin-top: var(--e3); }
.acceso .acciones { margin-top: var(--e4); }

.acceso-pie { margin-top: var(--e5); padding-bottom: var(--e4); text-align: center; color: #fff; text-shadow: 0 1px 3px rgba(4, 12, 28, .6); }
.acceso-pie-nombre { font-size: 1rem; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; }
.acceso-pie-linea { display: flex; align-items: center; justify-content: center; gap: var(--e3); font-size: .6875rem; letter-spacing: .3em; text-transform: uppercase; color: #C9D8EE; }
.acceso-pie-linea::before, .acceso-pie-linea::after { content: ""; width: 34px; height: 1px; background: currentColor; }
.acceso-pie-lema { margin-top: var(--e3); font-size: .6875rem; letter-spacing: .3em; text-transform: uppercase; color: #C9D8EE; }
/* Icono de línea dentro del campo; se enciende al escribir. */
.campo-icono { position: relative; }
.campo-ico { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; color: var(--acento); pointer-events: none; }
.campo-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.acceso .campo-icono input { padding-left: 48px; }
.campo-icono:focus-within .campo-ico { color: var(--acento-oscuro); }
.acceso input::placeholder { color: #5E6B79; opacity: 1; }
.acceso input[type=password] { letter-spacing: .12em; }
/* Ojo para ver la contraseña: a la derecha del campo, del tamaño de un dedo. */
.campo-ojo { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--tinta-suave); cursor: pointer; }
.campo-ojo svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.campo-ojo .ojo-tachado, .campo-ojo.viendo .ojo-abierto { display: none; }
.campo-ojo.viendo .ojo-tachado { display: block; }
.campo-ojo.viendo { color: var(--acento); }
.campo-ojo:active { background: var(--acento-fondo); }
/* Bloq Mayús: el error más común al teclear una contraseña, y los puntitos no dejan verlo. */
.aviso-mayus { display: none; align-items: center; gap: 6px; margin-top: var(--e2); font-size: .875rem; font-weight: 600; color: var(--pendiente); text-align: left; }
.aviso-mayus.visible { display: flex; }
.aviso-mayus svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.acceso .campo-icono input[type=password], .acceso .campo-icono input#Password { padding-right: 56px; }
@media (prefers-reduced-motion: no-preference) { .campo-ico { transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out); } }
.acceso label { text-align: left; font-size: .875rem; margin-bottom: 2px; }
.acceso input[type=text], .acceso input[type=password] { min-height: 48px; border: 1.5px solid rgba(255, 255, 255, .9); border-radius: 12px; background: rgba(255, 255, 255, .72); box-shadow: 0 0 0 1px rgba(20, 60, 120, .16); font-size: 1rem; }
.acceso input:focus-visible { outline: 0; border-color: var(--acento); box-shadow: 0 0 0 4px rgba(21, 96, 189, .22); }
.acceso .mensaje { text-align: left; margin: var(--e4) 0 0; }
/* El botón flota y se hunde al tocarlo, igual que los botones de tipo. */
.acceso .boton {
  width: 100%; min-height: 50px; gap: 8px; border-radius: 12px; font-size: 1.0625rem;
  background: linear-gradient(180deg, #1A6BE0, #0F56C4); border-color: #0F56C4;
  box-shadow: var(--tipo-luz), 0 1px 2px rgba(11, 42, 74, .20), 0 10px 18px -8px var(--acento);
}
.acceso .boton svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.acceso .boton:active { box-shadow: var(--tipo-luz), 0 1px 2px rgba(11, 42, 74, .25); }
@media (prefers-reduced-motion: no-preference) {
  .acceso .boton { transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out), background-color 120ms var(--ease-out); }
  .acceso .boton:active { transform: scale(.97); }
}

/* Login según la pantalla. Teléfono: una columna, con el pie de la organización al fondo. Tableta: la misma columna,
   más ancha y con todo más grande, centrada a lo alto. Computadora: la marca a la izquierda y la tarjeta a la derecha. */
.con-fondo .pagina { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.con-fondo .acceso-pie { margin-top: 0; padding-top: var(--e5); }
@media (min-width: 600px) {
  .con-fondo .pagina { max-width: 520px; justify-content: center; padding-top: var(--e6); padding-bottom: var(--e5); }
  .con-fondo .acceso-pie { margin-top: var(--e6); padding-top: 0; }
  .acceso-sistema { font-size: 1.75rem; }
  .acceso-municipio { font-size: 1.125rem; }
  .acceso-lema { font-size: .8125rem; }
  .acceso { margin: 84px 0 0; padding-top: 0; }
  .acceso .panel { padding: 62px 36px 36px; border-radius: 24px; }
  .acceso-marca { top: -48px; width: 92px; height: 92px; border-radius: 24px; }
  .acceso-marca img { width: 50px; }
  .acceso h1 { font-size: 1.875rem; margin-bottom: var(--e2); }
  .acceso-bajada { font-size: 1rem; }
  .acceso .arriba-4 { margin-top: var(--e4); }
  .acceso label { font-size: 1rem; margin-bottom: var(--e1); }
  .acceso input[type=text], .acceso input[type=password] { min-height: 56px; font-size: 1.0625rem; }
  .acceso .campo-icono input { padding-left: 54px; }
  .campo-ico { left: 8px; }
  .acceso .acciones { margin-top: var(--e5); }
  .acceso .boton { min-height: 58px; font-size: 1.1875rem; }
  .acceso .boton svg { width: 22px; height: 22px; }
  .acceso-pie-nombre { font-size: 1.25rem; }
  .acceso-pie-linea, .acceso-pie-lema { font-size: .75rem; }
}
@media (min-width: 1000px) {
  .con-fondo .pagina { display: grid; grid-template-columns: minmax(0, 1fr) 460px; grid-template-rows: 1fr auto auto 1fr; column-gap: clamp(40px, 7vw, 120px);
    max-width: 1240px; padding: var(--e6) clamp(32px, 5vw, 72px); }
  .acceso-encabezado { grid-column: 1; grid-row: 2; }
  .con-fondo .acceso-pie { grid-column: 1; grid-row: 3; margin-top: var(--e6); text-align: left; }
  .acceso-pie-linea { justify-content: flex-start; }
  .acceso-pie-linea::before { display: none; }
  .acceso { grid-column: 2; grid-row: 1 / -1; align-self: center; margin-top: 48px; }
  .acceso-sistema { font-size: clamp(2.25rem, 3.4vw, 3rem); letter-spacing: -.02em; text-wrap: balance; }
  .acceso-municipio { font-size: clamp(1.25rem, 1.7vw, 1.625rem); margin-top: var(--e1); }
  .acceso-encabezado .acceso-colores { width: min(70%, 420px); height: 6px; margin: var(--e5) 0; }
  .acceso-lema { font-size: 1rem; }
  /* En pantallas anchas el velo se carga a la izquierda, donde va el texto blanco. */
  body.con-fondo { background-image: linear-gradient(90deg, rgba(6, 16, 36, .72) 0%, rgba(8, 22, 48, .30) 55%, rgba(8, 22, 48, .12) 100%), linear-gradient(180deg, rgba(8, 22, 48, .30) 0%, rgba(8, 22, 48, 0) 40%, rgba(6, 16, 36, .55) 100%), url("../img/fondo-ciudad.svg"); }
}

.error-pagina { max-width: 520px; margin: var(--e5) auto; }
.error-pagina h1 { margin-bottom: var(--e2); }

/* Hover solo donde hay puntero fino: en pantallas táctiles se quedaría pegado tras el toque. */
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--acento-oscuro); }
  .boton:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); color: #fff; }
  .boton.secundario:hover { background: var(--acento-fondo); color: var(--acento-oscuro); border-color: var(--linea-fuerte); }
  .salir:hover { background: var(--marino-presion); }
  .nav a:hover, .nav-salir button:hover { color: #fff; }
  .hamb:hover { background: var(--marino-presion); }
  .tipo:hover { color: var(--s); }
  .marca:hover { color: #fff; }
  tbody tr:hover { background: #F8FAFC; }
}

/* Único movimiento: respuesta al toque. */
@media (prefers-reduced-motion: no-preference) {
  .boton, .salir, .hamb, .nav a, .nav-salir button { transition: background-color .12s ease-out, color .12s ease-out, border-color .12s ease-out; }
  .js .nav { transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out), visibility 0s linear 200ms; }
  .js.menu-abierto .nav { transition-delay: 0s; }
  .js .velo { transition: opacity 200ms var(--ease-out); }
  /* Los botones de Captura no se animan al tocarlos: abren de inmediato. En computadora suben un poco al pasar el mouse. */
  .tipo { transition: transform 140ms var(--ease-out); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tipo:hover { transform: translateY(-2px); }
}

/* «Corregir» la ubicación (Captura, paso 1, 2026-10-21): buscar la colonia en el catálogo y tocar el lugar en el mapa. */
.corregir { display: grid; gap: var(--e3); margin-top: var(--e3); padding: var(--e3); background: var(--superficie); border: 1px solid #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(11, 42, 74, .10), 0 10px 20px -12px rgba(11, 42, 74, .32); }
.corregir-elegida { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e1) var(--e3); padding: 10px var(--e3); border-radius: 12px; background: var(--acento-fondo); color: var(--marino); }
.corregir-elegida b { color: var(--acento-oscuro); }
.corregir-link { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--acento); font: inherit; font-size: 1rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.corregir-buscar label { display: block; margin-bottom: var(--e2); font-size: 1.0625rem; font-weight: 700; color: var(--marino); }
.corregir-buscar input { width: 100%; min-height: 56px; padding: 0 var(--e3); border: 2px solid var(--linea-fuerte); border-radius: 12px; font: inherit; font-size: 1.125rem; }
.corregir-buscar input:focus { outline: 3px solid color-mix(in srgb, var(--acento) 35%, transparent); border-color: var(--acento); }
.corregir-lista { list-style: none; margin: var(--e2) 0 0; padding: 0; max-height: 330px; overflow-y: auto; border-radius: 12px; }
.corregir-lista li + li { border-top: 1px solid var(--linea); }
.corregir-lista button { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); width: 100%; min-height: 54px; padding: 8px var(--e3); border: 0; background: transparent; color: var(--marino); font: inherit; font-size: 1.0625rem; font-weight: 600; text-align: left; cursor: pointer; }
.corregir-lista button:hover, .corregir-lista button:focus-visible { background: var(--acento-fondo); }
.corregir-lista button::after { content: "\203A"; flex: none; font-size: 1.5rem; color: var(--acento); }
.corregir-lista mark { background: #FFE58A; color: inherit; border-radius: 3px; }
.corregir-nada { margin-top: var(--e2); color: #5E3700; }
.mapa-instruccion { position: absolute; left: var(--e2); right: 60px; bottom: var(--e2); z-index: 2; margin: 0; padding: 10px var(--e3); border-radius: 14px; background: rgba(15, 39, 72, .92); color: #fff; font-size: 1rem; font-weight: 700; line-height: 1.25; box-shadow: 0 8px 20px -8px rgba(4, 14, 28, .6); pointer-events: none; }
.mapa-pin.pin-mal .pin-gota { border-color: #C62828; box-shadow: 0 0 0 4px rgba(198, 40, 40, .35); animation: pin-sacudir .35s ease-in-out 2; }
@keyframes pin-sacudir { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .mapa-pin.pin-mal .pin-gota { animation: none; } }

/* Ventana de borrar reportes (BorradoController): solo administradores, con su propia contraseña. */
.boton.peligro { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.boton.peligro:active { background: #8C1D17; border-color: #8C1D17; }
.boton.peligro:disabled { opacity: .55; }
.borrado-llave { max-width: 760px; }
.usuarios-borrado { margin-top: var(--e5); text-align: right; font-size: .875rem; }
.usuarios-borrado a { display: inline-flex; align-items: center; gap: 4px; color: var(--peligro); font-weight: 600; }
.usuarios-borrado svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.borrado-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e3); }
.borrado-todos { display: inline-flex; align-items: center; gap: var(--e2); font-weight: 600; cursor: pointer; }
.borrado-todos[hidden] { display: none; }
.borrado-reportes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.borrado-fila { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-control); }
label.borrado-fila { cursor: pointer; }
label.borrado-fila:has(input:checked) { border-color: var(--peligro); background: var(--peligro-fondo); }
.borrado-fila input[type=checkbox], .borrado-todos input { flex: none; width: 22px; height: 22px; accent-color: var(--peligro); }
.borrado-datos { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.borrado-datos span, .borrado-datos small { overflow-wrap: anywhere; }
.borrado-datos small { color: var(--tinta-suave); font-size: .8125rem; }
.borrado-fila .folio-ciac { flex: none; font-size: .9375rem; }
details.tarjeta-form > summary { cursor: pointer; font-weight: 700; color: var(--marino); }
@media (max-width: 560px) {
  .borrado-fila { flex-wrap: wrap; padding: var(--e3); }
  .borrado-fila .folio-ciac { margin-left: 34px; }
}

/* Títulos, botones y el nombre del sistema van en Montserrat. Al final de la hoja a propósito:
   varios de estos controles usan «font: inherit», que más arriba volvería a poner la letra de texto. */
h1, h2, h3, .boton, .salir, .hamb, .rep-pie b, .det-cifras b, .det-calle, .det-mapa a, .municipio b, .sistema b, .tipo b, .banda b, .ult-datos b, .ult-detalle, .mas-filtros summary, .mapa-colonia, .lugar-fila dd, .usuario-datos b, .usuario-inicial, .sello, .acceso-sistema, .acceso-pie-nombre, .rep-arriba b, .contador b, .periodo a, .ficha b, .ficha span, .barra-puesto, .barra-valor, .dia-barra b, .foto-heroe, .lugar-colonia {
  font-family: var(--fuente-titulos, "Segoe UI", system-ui, -apple-system, sans-serif);
}

/* ---------- Versión demo (Visor:Demo = true) ---------- */
.aviso-demo { margin: 0; padding: 6px var(--e4); background: #FFF4D6; color: #6B4A00; border-bottom: 1px solid #F0D58A;
  font-size: .8125rem; line-height: 1.4; text-align: center; }
.aviso-demo b { font-weight: 700; }
.acceso-demo { margin-top: var(--e2); padding: 8px 12px; border-radius: 10px; background: rgba(255, 244, 214, .9); color: #6B4A00;
  font-size: .8125rem; line-height: 1.4; }
.con-fondo .aviso-demo { display: none; }