/* App del aforador — Visitas PQR LIME. Paleta LIME (web/styles.css) con contraste reforzado para uso a pleno sol.
   Pensado para pantallas de 360–412 px, una mano y botones de al menos 44–48 px. Sin estilos en línea (CSP). */
:root {
  --fondo: #EFEBE3;
  --tarjeta: #FFFFFF;
  --borde: #CFC6B5;
  --tinta: #1A1916;
  --apagado: #575248;
  --azul: #1B5FA8;
  --azul-h: #154C88;
  --azul-claro: #DCE8F6;
  --verde: #3F7A16;       /* más oscuro que el verde de marca para texto blanco legible */
  --verde-marca: #5FA32B;
  --rojo: #B3362F;
  --ambar: #8A5A00;
  --t-ok: #E1F0D3;
  --t-aviso: #FBE8BF;
  --t-error: #F8D9D5;
  --t-info: #E9E3D6;
  --morado: #5A3E8C;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --radio: 10px;
  --barra-alto: 52px;
  --nav-alto: 62px;
  --sa-arriba: env(safe-area-inset-top, 0px);
  --sa-abajo: env(safe-area-inset-bottom, 0px);
  --sa-izq: env(safe-area-inset-left, 0px);
  --sa-der: env(safe-area-inset-right, 0px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body { font: 16px/1.45 var(--fuente); color: var(--tinta); background: var(--fondo); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(27, 95, 168, 0.15); overscroll-behavior-y: contain; }
body.con-marco { padding-top: calc(var(--barra-alto) + var(--sa-arriba)); padding-bottom: calc(var(--nav-alto) + var(--sa-abajo)); }
[hidden] { display: none !important; }
h1 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 0; letter-spacing: -0.01em; }
h2, h3 { margin: 0; }
.h-sec { font-size: 17px; font-weight: 700; margin: 0 0 10px; }
.h-form { font-size: 16px; font-weight: 700; margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--borde); }
p { margin: 0 0 8px; }
a { color: var(--azul); }
.tenue { color: var(--apagado); font-weight: 400; }
.rojo { color: var(--rojo); }
.nota { color: var(--apagado); font-size: 14px; margin: 6px 0; }
.centro { text-align: center; }
.vacio { color: var(--apagado); text-align: center; padding: 28px 8px; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.oculto-visual { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.noscript { padding: 20px; }

/* ------------------------------------------------------------ marca */
.marca { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; color: inherit; white-space: nowrap; }
.marca-lime { font-weight: 800; font-size: 17px; letter-spacing: 0.02em; color: var(--azul); position: relative; padding-right: 10px; }
.marca-lime::after { content: ""; position: absolute; right: 0; top: 3px; bottom: 2px; width: 3px; border-radius: 2px; background: var(--verde-marca); }
.marca-app { font-family: var(--serif); font-size: 17px; color: var(--tinta); }
.marca-grande .marca-lime { font-size: 30px; }
.marca-grande .marca-app { font-size: 27px; }
.cargando-inicial { min-height: 70vh; display: grid; place-content: center; text-align: center; gap: 10px; color: var(--apagado); }

/* ------------------------------------------------------------ barra superior */
.barra { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: calc(var(--barra-alto) + var(--sa-arriba)); padding: var(--sa-arriba) calc(12px + var(--sa-der)) 0 calc(12px + var(--sa-izq)); display: flex; align-items: center; gap: 10px; background: var(--tarjeta); border-bottom: 1px solid var(--borde); }
.insignia-demo { background: var(--t-aviso); color: #5E3D00; border: 1px solid #E6C77A; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.indicador { margin-left: auto; appearance: none; font: inherit; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borde); background: var(--tarjeta); color: var(--tinta); cursor: pointer; max-width: 58vw; }
.indicador-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.indicador-punto { width: 11px; height: 11px; border-radius: 50%; background: var(--verde-marca); flex: none; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08); }
.indicador-pendiente { background: var(--t-aviso); border-color: #E6C77A; }
.indicador-pendiente .indicador-punto { background: #D08A00; }
.indicador-sinred { background: #ECE8E0; }
.indicador-sinred .indicador-punto { background: #8A847A; }
.indicador-error { background: var(--t-error); border-color: #E3A39C; color: #7D211B; }
.indicador-error .indicador-punto { background: var(--rojo); }
.indicador-enviando .indicador-punto { background: var(--azul); animation: latido 1s ease-in-out infinite; }
@keyframes latido { 50% { transform: scale(0.6); opacity: 0.5; } }
.aviso-actualizar { position: fixed; z-index: 1001; left: 10px; right: 10px; top: calc(var(--barra-alto) + var(--sa-arriba) + 8px); background: var(--tarjeta); border: 1px solid var(--borde); border-left: 5px solid var(--azul); border-radius: var(--radio); padding: 10px 12px; display: flex; gap: 10px; align-items: center; justify-content: space-between; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); }

/* ------------------------------------------------------------ navegación inferior */
.nav-inferior { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; height: calc(var(--nav-alto) + var(--sa-abajo)); padding: 0 var(--sa-der) var(--sa-abajo) var(--sa-izq); display: grid; grid-template-columns: repeat(4, 1fr); background: var(--tarjeta); border-top: 1px solid var(--borde); }
.nav-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--apagado); font-size: 13px; font-weight: 600; min-height: 48px; }
.nav-item.activo { color: var(--azul); }
.nav-item.activo::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--azul); }
.nav-icono { width: 26px; height: 26px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ico-dia { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h3v3H4zm5 0.5h11v2H9zM4 10.5h3v3H4zm5 .5h11v2H9zM4 17h3v3H4zm5 .5h11v2H9z'/%3E%3C/svg%3E"); }
.ico-mapa { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.6A2.6 2.6 0 1 1 12 6.4a2.6 2.6 0 0 1 0 5.2z'/%3E%3C/svg%3E"); }
.ico-cola { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l6 6h-4v6.5h-4V8.5H6zM4 17h16v4H4z'/%3E%3C/svg%3E"); }
.ico-cuenta { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9zm0 2c-4.4 0-8 2.3-8 5.5V21h16v-1.5c0-3.2-3.6-5.5-8-5.5z'/%3E%3C/svg%3E"); }
.nav-insignia { position: absolute; top: 5px; left: calc(50% + 8px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #D08A00; color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.nav-insignia-error { background: var(--rojo); }

/* ------------------------------------------------------------ pantallas */
.vista { outline: none; }
.pantalla { padding: 14px calc(12px + var(--sa-der)) 24px calc(12px + var(--sa-izq)); max-width: 640px; margin: 0 auto; }
.cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sub { margin: 0; color: var(--apagado); text-transform: capitalize; }
.bloque { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; margin-bottom: 12px; }
.bloque .bloque { border: 0; padding: 0; margin: 0; }
.bloque-ok { border-left: 5px solid var(--verde); }
.bloque-aviso { border-left: 5px solid #D08A00; }
.bloque-error { border-left: 5px solid var(--rojo); }
.bloque-demo { border-style: dashed; }
.pila { display: grid; gap: 8px; margin-top: 10px; }

/* ------------------------------------------------------------ avisos */
.aviso { border-radius: 8px; padding: 10px 12px; margin: 0 0 10px; font-size: 15px; }
.aviso ul { margin: 6px 0 4px; padding-left: 20px; }
.aviso-info { background: var(--t-info); }
.aviso-ok { background: var(--t-ok); color: #24480B; }
.aviso-error { background: var(--t-error); color: #6E1D18; }
.aviso-pendiente { background: var(--t-aviso); color: #4D3300; }
.aviso-sinred { background: #E4E0D8; color: #2E2B26; border-left: 5px solid #8A847A; }
.aviso-demo { background: var(--t-aviso); color: #4D3300; font-size: 14px; }

/* ------------------------------------------------------------ botones */
.btn { appearance: none; font: inherit; font-weight: 700; font-size: 16px; border: 1px solid transparent; border-radius: 9px; min-height: 48px; padding: 10px 16px; cursor: pointer; line-height: 1.2; background: #E2DCCF; color: var(--tinta); display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; text-decoration: none; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(0.94); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-bloque { width: 100%; }
.btn-grande { min-height: 58px; font-size: 18px; }
.btn-chico { min-height: 44px; padding: 6px 12px; font-size: 15px; }
.btn-primario { background: var(--azul); color: #fff; }
.btn-exito { background: var(--verde); color: #fff; }
.btn-peligro { background: var(--rojo); color: #fff; }
.btn-peligro-suave { background: var(--t-error); color: #6E1D18; border-color: #E3A39C; }
.btn-suave { background: #E2DCCF; color: var(--tinta); border-color: #CDC3AF; }
.btn-texto { background: none; color: var(--azul); padding-left: 8px; padding-right: 8px; }
.btn-navegar { background: #0E7A5A; color: #fff; }
.btn-mapa { background: var(--tarjeta); border-color: rgba(0, 0, 0, 0.25); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); min-height: 44px; font-size: 15px; }
.btn-mapa.activo { background: var(--azul); color: #fff; }
.btn.ocupado { opacity: 0.7; pointer-events: none; }
.btn-enlace { appearance: none; background: none; border: 0; padding: 4px 0; font: inherit; color: inherit; text-decoration: underline; text-align: left; cursor: pointer; min-height: 32px; }
.volver { margin: -6px 0 4px -8px; }

/* ------------------------------------------------------------ chips */
.chip { display: inline-block; font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 999px; line-height: 1.4; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip-p-vencida { background: var(--rojo); color: #fff; }
.chip-p-critica { background: #C25A0F; color: #fff; }
.chip-p-alta { background: #F0C230; color: #3A2D00; }
.chip-p-normal { background: #DDE3EB; color: #2C3A4D; }
.chip-e { background: var(--t-info); color: var(--tinta); }
.chip-e-asignada { background: var(--azul-claro); color: var(--azul-h); }
.chip-e-en_curso { background: #FFE3B3; color: #5B3A00; }
.chip-e-realizada { background: var(--t-ok); color: #24480B; }
.chip-e-no_efectiva { background: #E6DDF3; color: #42296E; }
.chip-e-anulada, .chip-e-cerrada_sigab { background: #E4E0D8; color: var(--apagado); }
.chip-pendiente { background: var(--t-aviso); color: #4D3300; border: 1px solid #E6C77A; }
.chip-error { background: var(--rojo); color: #fff; }
.chip-alerta { background: #FFE3B3; color: #5B3A00; }
.chip-orden { background: var(--tinta); color: #fff; }

/* ------------------------------------------------------------ login */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: calc(20px + var(--sa-arriba)) 16px calc(20px + var(--sa-abajo)); background: linear-gradient(180deg, rgba(27, 95, 168, 0.10), transparent 45%), var(--fondo); }
.login-tarjeta { width: 100%; max-width: 400px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px; padding: 24px 20px 18px; display: grid; gap: 14px; }
.login-sub { color: var(--apagado); margin: -6px 0 0; }
.fila-clave { display: flex; gap: 6px; }
.fila-clave input { flex: 1; }

/* ------------------------------------------------------------ verificación en dos pasos (MFA) */
.mfa { display: grid; gap: 10px; }
.mfa form { display: grid; gap: 10px; }
.mfa-secreto { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 19px; font-weight: 700; letter-spacing: 1px; word-break: break-all; user-select: all; -webkit-user-select: all; background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px; padding: 10px; margin: 0; }
.mfa-codigos { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 17px; columns: 2; padding-left: 28px; margin: 0; }
.mfa-detalles summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--azul); font-weight: 700; }

/* ------------------------------------------------------------ campos */
.campo { display: grid; gap: 6px; margin: 0 0 14px; }
.campo-etiqueta { font-weight: 700; font-size: 15px; }
.campo-ayuda { color: var(--apagado); font-size: 14px; margin: -2px 0 0; }
.req { color: var(--rojo); font-weight: 700; }
input[type="text"], input[type="password"], input[type="date"], input:not([type]), select, textarea {
  font: inherit; font-size: 17px; color: var(--tinta); background: #fff; border: 1.5px solid #A79E8C; border-radius: 8px; padding: 10px 12px; min-height: 50px; width: 100%; min-width: 0;
}
textarea { min-height: 110px; resize: vertical; }
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231A1916' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 10px; padding-right: 36px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(27, 95, 168, 0.25); }
.campo-con-error input, .campo-con-error select, .campo-con-error textarea, .campo-con-error .opciones, .campo-con-error .segmentado { border-color: var(--rojo) !important; box-shadow: 0 0 0 2px rgba(179, 54, 47, 0.25); }
.campo-con-error > .campo-etiqueta, .campo-con-error > .lista-cabeza .campo-etiqueta { color: var(--rojo); }
.fila-num { display: flex; align-items: center; gap: 10px; }
.fila-num .inp-num { max-width: 170px; }
.campo-eco { color: var(--apagado); font-size: 15px; font-variant-numeric: tabular-nums; }

/* opciones (radio/checkbox) grandes */
.opciones { display: grid; gap: 6px; border-radius: 9px; }
.opcion { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 10px 12px; border: 1.5px solid #CDC3AF; border-radius: 9px; background: #fff; cursor: pointer; font-size: 16px; }
.opcion input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--azul); }
.opcion:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); font-weight: 700; }
.opcion-clara { background: transparent; border-color: transparent; padding-left: 0; min-height: 44px; }
.segmentado { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: 9px; }
.opcion-seg { position: relative; display: flex; align-items: center; justify-content: center; min-height: 52px; border: 1.5px solid #CDC3AF; border-radius: 9px; background: #fff; font-weight: 700; cursor: pointer; text-align: center; padding: 8px; }
.opcion-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* El texto (span) cubre toda la celda: el estado marcado se ve sin depender de :has(). */
.opcion-seg span { position: absolute; inset: -1.5px; display: grid; place-items: center; border-radius: 9px; padding: 6px; }
.opcion-seg input:checked + span { background: var(--azul); color: #fff; }
.opcion-seg input:focus-visible + span { outline: 3px solid var(--azul); outline-offset: 2px; }
.segmentado-grande .opcion-seg { min-height: 60px; font-size: 17px; }
.segmentado-grande .seg-si input:checked + span { background: var(--verde); }
.segmentado-grande .seg-no input:checked + span { background: #7A3B2E; }

/* lista de filas repetibles */
.lista-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lista-contador { color: var(--apagado); font-size: 14px; }
.lista-filas { display: grid; gap: 10px; }
.lista-fila { border: 1.5px solid #CDC3AF; border-radius: 10px; padding: 8px 12px 4px; margin: 0; background: #FBF9F5; min-width: 0; }
.lista-fila legend { font-weight: 800; padding: 0 6px; }
.lista-fila .campo { margin-bottom: 10px; }
.lista-acciones { display: flex; justify-content: flex-end; gap: 8px; padding-bottom: 8px; }
/* varios valores con "+" (cuentas contrato, cuentas Enel, cuentas de acueducto) */
.valores-filas { display: grid; gap: 8px; }
.valor-fila { display: flex; gap: 8px; align-items: center; min-width: 0; }
.valor-fila input { flex: 1 1 auto; min-width: 0; }
.campo-valores .btn-mas { margin-top: 8px; }
.campo-error-vivo { color: var(--rojo); font-size: 14px; font-weight: 600; margin: 4px 0 0; }
.campo-error-vivo:empty { display: none; }

/* ------------------------------------------------------------ Mi día */
.segmentado-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1.5px solid var(--azul); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.seg-btn { appearance: none; font: inherit; font-weight: 700; min-height: 46px; border: 0; background: #fff; color: var(--azul); cursor: pointer; }
.seg-btn.activo { background: var(--azul); color: #fff; }
.bloque-progreso { padding: 12px 14px; }
.progreso-texto { margin: 0 0 8px; }
progress.progreso { width: 100%; height: 12px; border: 0; border-radius: 6px; overflow: hidden; background: #E2DCCF; accent-color: var(--verde); -webkit-appearance: none; appearance: none; }
progress.progreso::-webkit-progress-bar { background: #E2DCCF; border-radius: 6px; }
progress.progreso::-webkit-progress-value { background: var(--verde); border-radius: 6px; }
progress.progreso::-moz-progress-bar { background: var(--verde); }
.bloque-ruta summary { font-weight: 700; cursor: pointer; min-height: 40px; display: flex; align-items: center; }
.tramos { display: grid; gap: 8px; }
.bloque-instalar { background: var(--azul-claro) !important; border: 1px solid #A9C4E6 !important; border-radius: var(--radio) !important; padding: 12px 14px !important; margin-bottom: 12px !important; display: grid; gap: 6px; }
.bloque-instalar .pasos { margin: 0; padding-left: 20px; }
.lista-visitas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tarjeta-visita { background: var(--tarjeta); border: 1px solid var(--borde); border-left: 6px solid #7D8FA8; border-radius: var(--radio); padding: 12px 12px 10px; cursor: pointer; }
.tarjeta-visita.prio-vencida { border-left-color: var(--rojo); }
.tarjeta-visita.prio-critica { border-left-color: #C25A0F; }
.tarjeta-visita.prio-alta { border-left-color: #E0AE12; }
.tarjeta-visita.finalizada { background: #F6F3EE; }
.tarjeta-visita.finalizada .tv-dir { color: var(--apagado); }
.tv-l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.orden { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 15px; background: var(--azul); color: #fff; font-weight: 800; font-size: 15px; padding: 0 6px; }
.orden-en_curso { background: #C27B00; }
.orden-realizada { background: var(--verde); }
.orden-no_efectiva { background: var(--morado); }
.orden-anulada, .orden-cerrada_sigab { background: #8A847A; }
.tv-rad { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; margin-right: 2px; }
.tv-dir { font-size: 18px; font-weight: 700; margin: 8px 0 2px; overflow-wrap: anywhere; }
.tv-l3 { color: var(--apagado); margin: 0; font-size: 15px; }
.tv-det { margin: 2px 0 0; font-size: 15px; }
.tv-limite { margin: 2px 0 0; font-size: 14px; color: var(--apagado); }
.tv-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tv-acciones .btn { flex: 1 1 120px; }

/* ------------------------------------------------------------ visita */
.visita-cabeza { margin-bottom: 12px; }
.visita-cabeza h1 { font-size: 23px; }
.datos { display: grid; grid-template-columns: minmax(96px, 34%) 1fr; gap: 6px 10px; margin: 0 0 12px; }
.datos dt { color: var(--apagado); font-size: 14px; }
.datos dd { margin: 0; overflow-wrap: anywhere; }
.dir-grande { font-size: 18px; }
.tel { font-weight: 700; font-size: 17px; display: inline-block; padding: 4px 0; }
.obs-pqr { background: #F6F3EE; border-radius: 8px; padding: 10px 12px; margin: 0 0 8px; font-size: 15px; overflow-wrap: anywhere; }
.obs-pqr summary { cursor: pointer; }
.obs-pqr p { margin: 8px 0 0; }
.llegada-hora { font-weight: 700; font-size: 17px; }
.geocerca { border-radius: 8px; padding: 10px 12px; font-weight: 600; }
.geocerca-ok { background: var(--t-ok); color: #24480B; }
.geocerca-fuera { background: var(--t-aviso); color: #4D3300; border-left: 5px solid #D08A00; }
.estado-gps { margin-top: 8px; }
.fotos-cuenta { font-weight: 700; margin: 0 0 8px; }
.fotos-faltan { color: #7D4A00; }
.fotos-ok { color: #24480B; }
.fotos-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.foto { margin: 0; background: #F6F3EE; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; display: grid; }
.foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #ddd; }
.foto figcaption { display: flex; justify-content: space-between; gap: 6px; padding: 6px 8px 2px; font-size: 13px; font-weight: 600; }
.foto .btn { margin: 4px 8px 8px; }
.firma-caja { display: grid; gap: 6px; }
.firma-marco { position: relative; border: 2px dashed #8E8574; border-radius: 10px; background: #fff; }
.firma-lienzo { display: block; width: 100%; height: 210px; touch-action: none; cursor: crosshair; border-radius: 8px; }
.firma-linea { position: absolute; left: 16px; right: 16px; bottom: 44px; border-top: 1px solid #B9B0A0; pointer-events: none; }
.firma-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.bloque-acciones { border-left: 5px solid var(--azul); }
.bloque-resumen { border-left-color: var(--verde); }
.datos-resumen dd { font-weight: 600; }
.lista-errores { margin: 6px 0 0; padding-left: 18px; }
.lista-ops { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.lista-ops > li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; align-items: center; }

/* ------------------------------------------------------------ envíos */
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 10px; }
.cifras div { background: #F6F3EE; border-radius: 8px; padding: 8px 10px; }
.cifras dt { font-size: 13px; color: var(--apagado); }
.cifras dd { margin: 0; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cifras dd small { display: block; font-size: 12px; font-weight: 400; color: var(--apagado); }
.estado-red { font-weight: 700; }
.red-si { color: #24480B; }
.red-no { color: #4D3300; }
.grupo-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.op { display: block !important; border-top: 1px solid #EAE4D8; padding-top: 8px; }
.op-l1 { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-weight: 600; }
.op-error { background: #FFF6F5; border-radius: 6px; padding: 8px; }
.op-detalle { color: #6E1D18; font-size: 15px; overflow-wrap: anywhere; }
.op-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.descartar { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.confirmar-texto { font-weight: 700; color: #6E1D18; }

/* ------------------------------------------------------------ cuenta */
.usuario-nombre { font-size: 20px; font-weight: 800; margin: 0; }
.confirmacion { display: grid; gap: 10px; }
.confirmacion-peligro { border-left: 5px solid var(--rojo); padding-left: 10px; }

/* ------------------------------------------------------------ mapa */
body[data-pantalla="mapa"] .vista { position: fixed; top: calc(var(--barra-alto) + var(--sa-arriba)); bottom: calc(var(--nav-alto) + var(--sa-abajo)); left: 0; right: 0; }
.pantalla-mapa { position: absolute; inset: 0; }
.mapa { position: absolute; inset: 0; background: #E9E5DD; }
.mapa-herramientas { position: absolute; top: 10px; right: calc(10px + var(--sa-der)); z-index: 900; display: flex; gap: 8px; }
.mapa-titulo { position: absolute; left: 10px; bottom: 8px; z-index: 900; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--borde); border-radius: 8px; padding: 4px 8px; font-size: 13px; font-weight: 700; max-width: calc(100% - 150px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.panel-yo { z-index: 650; pointer-events: none; }
.aviso-mapa { position: absolute; left: 10px; right: 10px; bottom: 28px; z-index: 900; background: var(--t-aviso); border: 1px solid #E6C77A; color: #4D3300; padding: 8px 10px; border-radius: 8px; font-size: 14px; margin: 0; }
.pin-envoltura { background: none; border: 0; }
.pin { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--azul); color: #fff; font: 800 14px/1 var(--fuente); border: 3px solid #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45); }
.pin-en_curso { background: #C27B00; }
.pin-realizada { background: var(--verde); }
.pin-no_efectiva { background: var(--morado); }
.pin-anulada, .pin-cerrada_sigab { background: #8A847A; }
.pin-por-enviar { border-color: #F0C230; }
.popup { display: grid; gap: 4px; font: 14px/1.4 var(--fuente); min-width: 190px; }
.popup p { margin: 0; }
.popup-acciones { display: flex; gap: 6px; margin-top: 6px; }
.popup-acciones .btn { flex: 1; }
.leaflet-container { font-family: var(--fuente); }
.leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; }
.leaflet-popup-content { margin: 12px 14px; }

/* ------------------------------------------------------------ toasts */
.toasts { position: fixed; z-index: 2000; left: 10px; right: 10px; top: calc(var(--barra-alto) + var(--sa-arriba) + 8px); display: grid; gap: 6px; pointer-events: none; }
.toast { background: var(--tinta); color: #fff; border-radius: 10px; padding: 12px 14px; font-size: 15px; font-weight: 600; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); animation: entra 0.18s ease-out; pointer-events: auto; }
.toast-ok { background: #24480B; }
.toast-error { background: #7D211B; }
.toast-aviso { background: #5E3D00; }
.toast.saliendo { opacity: 0; transition: opacity 0.25s; }
@keyframes entra { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

@media (min-width: 560px) {
  .fotos-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 370px) {
  .datos { grid-template-columns: 1fr; gap: 0; }
  .datos dd { margin-bottom: 6px; }
  .cifras dd { font-size: 19px; }
  .mapa-titulo { display: none; }
}

/* ------------------------------------------------------------ aviso de privacidad (Ley 1581 de 2012) */
.aviso-privacidad { margin-bottom: 6px; }
.aviso-texto { max-height: 190px; overflow-y: auto; background: #F6F3EE; border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; margin: 0 0 10px; font-size: 15px; white-space: pre-line; overflow-wrap: anywhere; }
.aviso-version { font-size: 12px; color: var(--apagado); margin: 6px 0 0; }
select option:disabled { color: #9A948A; }

/* ------------------------------------------------------------ versión mínima (R14) */
.aviso-version { margin: 10px calc(12px + var(--sa-der)) 0 calc(12px + var(--sa-izq)); background: var(--t-error); color: #6E1D18; border: 1px solid #E3A39C; border-left: 6px solid var(--rojo); border-radius: var(--radio); padding: 12px 14px; display: grid; gap: 8px; }
.aviso-version p { margin: 0; }

/* ------------------------------------------------------------ sin conexión, diálogo y versión (PWA-05) */
.franja-sinred { position: fixed; z-index: 999; left: 0; right: 0; top: calc(var(--barra-alto) + var(--sa-arriba)); min-height: 36px; padding: 7px calc(12px + var(--sa-der)) 7px calc(12px + var(--sa-izq)); background: #2E2B26; color: #fff; font-size: 14px; line-height: 1.35; }
body.sin-red.con-marco { padding-top: calc(var(--barra-alto) + var(--sa-arriba) + 52px); }
body.sin-red[data-pantalla="mapa"] .vista, body.sin-red[data-pantalla="smapa"] .vista { top: calc(var(--barra-alto) + var(--sa-arriba) + 52px); }
.dialogo { border: 0; border-radius: 14px; padding: 18px 16px 14px; width: min(92vw, 420px); max-width: calc(100vw - 24px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); color: var(--tinta); background: var(--tarjeta); }
.dialogo::backdrop { background: rgba(0, 0, 0, 0.5); }
.dialogo p { font-size: 16px; }
.version-app { font-size: 13px; }

/* ------------------------------------------------------------ modo supervisor (PWA-02) */
.ico-equipo { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zm8 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM8 13c-3.3 0-6 1.8-6 4.2V20h12v-2.8C14 14.8 11.3 13 8 13zm8 0c-.6 0-1.2.1-1.8.2 1.1.9 1.8 2.1 1.8 3.5V20h6v-2.6c0-2.4-2.6-4.4-6-4.4z'/%3E%3C/svg%3E"); }
.ico-alerta { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2zm1 15h-2v-2h2v2zm0-4h-2V9h2v4z'/%3E%3C/svg%3E"); }
.filtros-sup { display: grid; gap: 8px; margin-bottom: 10px; }
.filtros-sup .segmentado-fechas { margin-bottom: 0; }
.filtros-sup .seg-btn { min-height: 48px; padding: 4px 6px; }
.muestra-color { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--c, #575248); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); vertical-align: middle; margin-right: 6px; }
.lista-af { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tarjeta-af { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px; }
.af-cabeza { display: flex; align-items: center; gap: 4px; }
.af-nombre { font-size: 18px; font-weight: 800; margin: 0; overflow-wrap: anywhere; }
.af-progreso { margin: 6px 0; }
.cifras-af { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); margin-top: 10px; }
.cifras-af dd { font-size: 20px; }
.cifra-alerta { background: #FFE3B3 !important; }
.mapa-sup { position: relative; height: min(58vh, 460px); min-height: 240px; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); background: #E9E5DD; margin-bottom: 8px; }
.pin.pin-sup { background: var(--c, #575248); font-size: 16px; }
.pin-sup.pin-pendiente { border-style: dashed; }
.leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0; margin: 0 0 6px; font-size: 14px; }
.leyenda-sim { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tinta); color: #fff; font-size: 13px; margin-right: 5px; }
.lista-alertas { margin: 6px 0; padding-left: 20px; }
.tarjeta-alerta { border-left-color: #D08A00; cursor: default; }
.firma-sup { width: 100%; max-width: 480px; background: #fff; border: 1px solid var(--borde); border-radius: 8px; }
.dialogo-ancho { width: min(96vw, 520px); }
.dialogo-foto { width: min(98vw, 900px); padding: 10px; }
.dialogo-foto img { width: 100%; height: auto; display: block; margin-bottom: 8px; }
body.modo-supervisor .barra { border-bottom: 3px solid var(--morado); }
.sub-libre { text-transform: none; }
.sub-libre::first-letter { text-transform: uppercase; }

/* ------------------------------------------------------------ áreas táctiles de 44 px o más (PWA-06, WCAG 2.5.8) */
.indicador { min-height: 44px; }
.btn-enlace { min-height: 44px; }
.bloque-ruta summary { min-height: 44px; }
.leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }
.marca { min-height: 44px; align-items: center; }
/* Contraste AA 4,5:1 con texto blanco (PWA-06, WCAG 1.4.3) */
.chip-p-critica { background: #B5520D; }
.orden-en_curso, .pin-en_curso { background: #9A6200; }
.nav-insignia { background: #9A6200; }
.bloque-calculados { background: #F6F3EE; border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; margin: 6px 0 14px; }
.h-calc { font-size: 15px; margin: 0 0 4px; }
.calculados { margin: 6px 0 0; }
.calculados dd { font-weight: 800; font-variant-numeric: tabular-nums; }
.calc-fila { background: #F6F3EE; border-radius: 6px; padding: 6px 8px; font-weight: 700; font-size: 15px; }