/* Gestión de Abonados · Agua Potable de Jujuy S.E.
   La estructura es la del sistema que el organismo ya conoce: inicio con las aplicaciones, barra de
   menús arriba, panel de control con migas, listas, formularios con barra de estado e historial.
   Base de 15 px porque lo usa personal de 60 años o más. */
:root {
  --canvas: #f2f3f5;
  --sheet: #ffffff;
  --sheet-2: #f8f9fa;
  --sheet-3: #eef0f2;
  --ink: #212529;
  --ink-2: #454d55;
  --muted: #6c757d;
  --line: #dee2e6;
  --line-2: #c9d0d6;
  --prim: #714b67;
  --prim-700: #5a3b52;
  --prim-100: #eadfe6;
  --prim-50: #f5eff3;
  --teal: #017e84;
  --teal-700: #01666b;
  --teal-100: #cfe9ea;
  --teal-50: #e6f3f4;
  --ok: #1e8449;
  --ok-50: #dff2e6;
  --warn: #9a6b00;
  --warn-2: #e9a80c;
  --warn-50: #fff3cd;
  --bad: #c0392b;
  --bad-50: #f9dedb;
  --info: #2e6fd9;
  --info-50: #e3ecfb;
  --violet: #6a4eb5;
  --violet-50: #ece7f6;
  --agua: #1a7fc1;
  --agua-600: #14679c;
  --agua-100: #d5e8f6;
  --agua-50: #eaf3fb;
  --gray-50: #e9ecef;
  --tierra: #c0532a;
  --r-sm: 3px;
  --r: 4px;
  --r-lg: 8px;
  --font: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --cond: 'Roboto', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Roboto Mono', ui-monospace, Consolas, monospace;
  --ancho: 1440px;
  --sombra: 0 1px 2px rgba(33, 37, 41, 0.06), 0 2px 8px rgba(33, 37, 41, 0.05);
  --sombra-2: 0 12px 40px -12px rgba(33, 37, 41, 0.35);
  --nav-h: 48px;
}
* { box-sizing: border-box; }
/* `clip` y no `hidden`: las tablas de datos se despegan del ancho de `.main` con `100vw` (más abajo) y eso
   puede desbordar unos píxeles donde la barra de desplazamiento ocupa lugar. `overflow-x: hidden` tapa ese
   desborde pero convierte a `html` en contenedor de desplazamiento, y entonces los `position: sticky` de
   adentro se anclan a él en vez de a la ventana: se caerían la barra de navegación, la barra de acciones
   masivas del pre-control, el encabezado de los carteles y el botón de guardar de la app de campo.
   `clip` recorta igual sin crear ese contenedor. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
body.no-scroll { overflow: hidden; }
a { color: var(--teal); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { letter-spacing: 0; font-weight: 500; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.ic { flex: none; vertical-align: middle; }
.grow { flex: 1; }
.eyebrow { display: block; font-size: 13px; color: var(--muted); }
.boot { display: grid; place-items: center; min-height: 60vh; color: var(--muted); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ——— Barra superior ——— */
.o-nav { position: sticky; top: 0; z-index: 40; height: var(--nav-h); background: var(--sheet); border-bottom: 1px solid var(--line); display: flex; flex-wrap: nowrap; align-items: stretch; padding: 0 8px 0 4px; gap: 2px; min-width: 0; }
.o-nav-apps { display: inline-grid; place-items: center; width: 44px; border: 0; background: transparent; color: var(--ink-2); border-radius: var(--r); }
.o-nav-apps:hover { background: var(--sheet-3); }
.o-nav-app { display: inline-flex; align-items: center; gap: 8px; padding: 0 10px 0 6px; font-weight: 700; font-size: 15.5px; color: var(--ink); text-decoration: none; white-space: nowrap; flex: 0 0 auto; }
.o-nav-app span { flex: 0 0 auto; white-space: nowrap; }
.o-nav-app .logo { width: 24px; height: 24px; }
.o-nav-menus { display: flex; align-items: stretch; flex: 0 0 auto; min-width: 0; }
.o-menu { position: relative; display: flex; align-items: stretch; }
.o-menu > button, .o-nav-link { display: inline-flex; align-items: center; gap: 5px; padding: 0 11px; border: 0; background: transparent; color: var(--ink-2); font-weight: 500; font-size: 14.5px; text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
.o-menu > button:hover, .o-nav-link:hover { background: var(--sheet-3); color: var(--ink); }
.o-menu.on > button, .o-nav-link.on { color: var(--ink); border-bottom-color: var(--prim); }
.o-menu > button .badge { margin-left: 2px; }
.o-dd { position: absolute; top: 100%; left: 0; min-width: 240px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sombra-2); padding: 6px 0; display: none; z-index: 50; }
.o-menu.open .o-dd, .o-user.open .o-dd, .o-act.open .o-dd { display: block; }
.o-dd a { display: flex; align-items: center; gap: 9px; padding: 8px 14px; text-decoration: none; color: var(--ink); font-size: 14.5px; }
.o-dd a:hover { background: var(--sheet-2); }
.o-dd a.on { color: var(--prim); font-weight: 500; }
.o-dd a .badge { margin-left: auto; }
.o-dd .sep { height: 1px; background: var(--line); margin: 6px 0; }
.o-dd .tag { margin-left: auto; font-size: 13px; color: var(--warn); background: var(--warn-50); border-radius: var(--r-sm); padding: 1px 6px; font-weight: 500; }
.badge { font-style: normal; font-size: 11.5px; font-weight: 700; background: var(--prim); color: #fff; border-radius: 9px; padding: 1px 6px; min-width: 18px; text-align: center; line-height: 15px; }
.o-nav-right { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; flex: 1 1 auto; }
.o-nav-ib { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; background: transparent; color: var(--ink-2); border-radius: var(--r); text-decoration: none; }
.o-nav-ib:hover { background: var(--sheet-3); }
.o-nav-ib .badge { position: absolute; top: 4px; right: 3px; background: var(--bad); }
.o-nav-ib.hint::after { content: ''; position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn-2); }
.o-empresa { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; padding: 0 6px; flex: 0 0 auto; }
.o-user { position: relative; flex: 0 0 auto; }
.o-user > button { display: inline-flex; align-items: center; gap: 8px; height: 40px; border: 0; background: transparent; padding: 0 6px 0 4px; border-radius: var(--r); color: var(--ink); white-space: nowrap; }
.o-user > button:hover { background: var(--sheet-3); }
.o-user .avatar { width: 30px; height: 30px; border-radius: 8px; font-size: 13px; background: var(--prim); }
.o-user .u-n { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; flex: 0 0 auto; }
.o-user .u-n b, .o-user .u-n small { white-space: nowrap; }
.o-user .u-n b { font-size: 13.5px; font-weight: 500; }
.o-user .u-n small { font-size: 13px; color: var(--muted); }
.o-user .o-dd { left: auto; right: 0; min-width: 300px; padding: 10px 0 6px; }
.o-user .o-dd .u-h { padding: 4px 14px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.o-user .o-dd label { display: flex; flex-direction: column; gap: 4px; padding: 6px 14px 10px; font-size: 13px; color: var(--muted); }
.o-user .o-dd select { height: 38px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 8px; background: #fff; color: var(--ink); }
.o-user .o-dd button.item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 14px; border: 0; background: transparent; color: var(--ink); font-size: 14.5px; }
.o-user .o-dd button.item:hover, .o-user .o-dd a.item:hover { background: var(--sheet-2); }
.o-user .o-dd button.item.salir { color: var(--bad); }
.perfil-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 0 0 16px; }
.perfil-dl div { display: flex; flex-direction: column; gap: 2px; }
.perfil-dl span { font-size: 13px; color: var(--muted); }
.perfil-dl b { font-weight: 500; }
.cuenta-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 600px) { .perfil-dl { grid-template-columns: 1fr; } }
.o-user .o-dd button.item:hover { background: var(--sheet-2); }
.o-act { position: relative; }
.o-act .o-dd { left: auto; right: 0; min-width: 340px; }
.o-act .o-dd .u-h { padding: 4px 14px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-weight: 500; }
.o-act .o-dd a b { margin-left: auto; font-variant-numeric: tabular-nums; }
.o-act .o-dd .vacio-dd { padding: 10px 14px; color: var(--muted); font-size: 14px; }
.o-nav-burger { display: none; }
.prueba { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--warn); background: var(--warn-50); border-radius: var(--r-sm); padding: 2px 8px; margin-right: 4px; white-space: nowrap; font-weight: 500; }

/* ——— Panel de control ——— */
.o-cp { background: var(--sheet); border-bottom: 1px solid var(--line); padding: 10px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.o-cp-l { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.o-bc { display: flex; align-items: center; gap: 4px; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; }
.o-bc a { text-decoration: none; color: var(--muted); }
.o-bc a:hover { color: var(--ink); text-decoration: underline; }
.o-bc .ic { color: var(--line-2); }
.o-cp h1 { margin: 0; font-size: 18px; font-weight: 500; white-space: nowrap; }
.o-cp-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* Los botones de la pantalla no van pegados al título: 24 px de aire y una línea que los separa del bloque
   de migas y título, como pidió la revisión del 15-sep. */
.o-cp-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: 12px; padding-left: 20px; border-left: 1px solid var(--line); min-height: 34px; }
.o-cp-r { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.o-search { display: flex; align-items: center; gap: 8px; height: 38px; min-width: 0; flex: 1 1 140px; border: 1px solid var(--line-2); border-radius: var(--r); background: #fff; padding: 0 10px; color: var(--muted); }
.o-search input { border: 0; outline: 0; width: 100%; background: transparent; color: var(--ink); min-width: 0; }
.o-search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-100); }
.o-search-ico { display: none; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line-2); border-radius: var(--r); background: #fff; color: var(--ink-2); text-decoration: none; }
.o-pager { font-size: 13.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.o-pager .icon-btn { width: 30px; height: 30px; }
.o-views { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.o-views a { display: inline-grid; place-items: center; width: 34px; height: 34px; color: var(--muted); text-decoration: none; }
.o-views a.on { background: var(--sheet-3); color: var(--ink); }
.o-views a + a { border-left: 1px solid var(--line-2); }
.main { max-width: var(--ancho); margin: 0 auto; padding: 20px 24px 64px; }
.main > * + * { margin-top: 16px; }
.pie { max-width: var(--ancho); margin: 0 auto; padding: 0 24px 28px; color: var(--muted); font-size: 13px; display: flex; gap: 8px; align-items: center; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r); border: 1px solid var(--line); background: var(--sheet); color: var(--ink-2); }
.icon-btn:hover { background: var(--sheet-2); }
.banner-planilla { display: flex; align-items: center; gap: 12px; background: var(--warn-50); border: 1px solid #f0dca0; border-left: 4px solid var(--warn-2); color: #5a3a00; padding: 12px 14px; border-radius: var(--r); }
.banner-planilla > div { flex: 1; }
.rol-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 13px; border-radius: var(--r); background: var(--sheet); border: 1px solid var(--line); border-left: 4px solid var(--prim); color: var(--ink-2); font-size: 14px; }
.rol-aviso .ic { margin-top: 2px; color: var(--prim); }
.bloqueado { opacity: 0.45; filter: grayscale(0.5); cursor: not-allowed !important; }
.bloqueado:hover { background: inherit; }

/* ——— Inicio: las aplicaciones sobre la Quebrada ——— */
.o-home { position: relative; min-height: calc(100vh - var(--nav-h)); background: linear-gradient(180deg, #8fb7dc 0%, #c9dcec 46%, #d9c9ad 62%, #a97654 78%, #6d4a3a 100%); overflow: hidden; }
.o-home-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; display: block; }
.o-home-in { position: relative; max-width: 1180px; margin: 0 auto; padding: 46px 24px 60px; }
.o-hola { color: #fff; text-shadow: 0 1px 8px rgba(20, 30, 50, 0.5); margin-bottom: 26px; }
.o-hola h1 { margin: 0; font-size: 28px; font-weight: 500; }
.o-hola p { margin: 4px 0 0; font-size: 15px; opacity: 0.95; }
.o-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 26px 14px; justify-items: center; }
.o-app { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: #fff; width: 124px; text-align: center; background: transparent; border: 0; padding: 0; animation: llegar 0.5s ease both; }
.o-app:nth-child(2) { animation-delay: 0.04s; }
.o-app:nth-child(3) { animation-delay: 0.08s; }
.o-app:nth-child(4) { animation-delay: 0.12s; }
.o-app:nth-child(5) { animation-delay: 0.16s; }
.o-app:nth-child(6) { animation-delay: 0.2s; }
.o-app:nth-child(7) { animation-delay: 0.24s; }
.o-app:nth-child(8) { animation-delay: 0.28s; }
.o-app:nth-child(9) { animation-delay: 0.32s; }
.o-app:nth-child(10) { animation-delay: 0.36s; }
@keyframes llegar { from { opacity: 0; transform: translateY(8px); } }
.o-app-ic { width: 84px; height: 84px; border-radius: 20px; background: #fff; box-shadow: 0 4px 14px rgba(20, 30, 50, 0.28); display: grid; place-items: center; transition: transform 0.15s; }
.o-app:hover .o-app-ic { transform: translateY(-2px); }
.o-app-ic svg { width: 48px; height: 48px; }
.o-app b { font-weight: 500; font-size: 14.5px; text-shadow: 0 1px 6px rgba(20, 30, 50, 0.7); line-height: 1.2; }
.o-app small { font-size: 13px; opacity: 0.9; text-shadow: 0 1px 6px rgba(20, 30, 50, 0.7); }
.o-app.lock .o-app-ic { background: #3d4148; color: #a3a8ae; box-shadow: 0 4px 14px rgba(20, 30, 50, 0.35); position: relative; }
.o-app.lock .o-app-ic svg { opacity: 0.55; }
.o-app.lock .o-app-ic::after { content: ''; position: absolute; right: -6px; bottom: -6px; width: 30px; height: 30px; border-radius: 50%; background: #23262b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2c94c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / 16px no-repeat; border: 2px solid #fff; }
.o-app.lock b { opacity: 0.85; }
.o-hoy { margin-top: 40px; background: rgba(255, 255, 255, 0.92); border-radius: var(--r-lg); padding: 14px 18px; box-shadow: var(--sombra-2); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 18px; align-items: center; }
.o-hoy h2 { margin: 0; font-size: 15px; font-weight: 500; }
.o-hoy p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.o-hoy ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.o-hoy li a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); background: var(--sheet); border: 1px solid var(--line-2); border-radius: var(--r); padding: 7px 11px; font-size: 14px; }
.o-hoy li a:hover { border-color: var(--prim); }
.o-hoy li a b { font-variant-numeric: tabular-nums; }
.o-hoy li a.warn { border-color: var(--warn-2); }
.lock-modal { display: flex; flex-direction: column; gap: 12px; }
.lock-modal .lk { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--sheet-2); border-radius: var(--r); border: 1px solid var(--line); }
.lock-modal .lk .o-app-ic { width: 56px; height: 56px; border-radius: 14px; background: #3d4148; box-shadow: none; }
.lock-modal .lk .o-app-ic svg { width: 32px; height: 32px; opacity: 0.6; }
.lock-modal .lk b { display: block; font-size: 16px; }
.lock-modal .lk span { color: var(--muted); font-size: 13.5px; }
.lock-modal ul { margin: 0; padding-left: 20px; color: var(--ink-2); }
.lock-modal li { margin: 3px 0; }

/* ——— Componentes ——— */
.card { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--sombra); }
.card.flush { padding: 0; overflow: hidden; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.card.flush .card-h { margin: 0; padding: 14px 18px 10px; }
.card-h h2 { margin: 0; font-size: 15.5px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.card-sub { font-size: 13px; font-weight: 500; color: var(--muted); margin: 16px 0 8px; }
.link { font-size: 13.5px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--sheet); color: var(--ink); font-weight: 500; font-size: 14px; text-decoration: none; white-space: nowrap; transition: background 0.15s, border-color 0.15s; }
.btn:hover { background: var(--sheet-2); border-color: var(--ink-2); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { height: 32px; padding: 0 11px; font-size: 13px; }
.btn-primary { background: var(--prim); border-color: var(--prim); color: #fff; }
.btn-primary:hover { background: var(--prim-700); border-color: var(--prim-700); }
.btn-teal { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-700); border-color: var(--teal-700); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--gray-50); border-color: transparent; }
.btn-ghost.t-bad { color: var(--bad); }
.btn-light { background: var(--prim); border-color: var(--prim); color: #fff; }
.btn-light:hover { background: var(--prim-700); border-color: var(--prim-700); }
.btn-ghost-l { background: var(--sheet); color: var(--ink); border-color: var(--line-2); }
.btn-ghost-l:hover { border-color: var(--ink-2); }
.btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-danger:hover { background: #a02e22; border-color: #a02e22; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 15px; border: 1px solid var(--line-2); background: var(--sheet); color: var(--ink-2); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.chip em { font-style: normal; color: var(--muted); font-weight: 500; }
.chip:hover { border-color: var(--prim); color: var(--prim); }
.chip.on { background: var(--prim); border-color: var(--prim); color: #fff; }
.chip.on em { color: #e6d6e1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 10px; font-size: 13px; font-weight: 500; white-space: nowrap; line-height: 1.55; border: 1px solid transparent; }
.pill + .pill { margin-left: 4px; }
.p-ok { background: var(--ok-50); color: var(--ok); }
.p-warn { background: var(--warn-50); color: var(--warn); }
.p-bad { background: var(--bad-50); color: var(--bad); }
.p-info { background: var(--info-50); color: var(--info); }
.p-violet { background: var(--violet-50); color: var(--violet); }
.p-brand { background: var(--prim-100); color: var(--prim-700); }
.p-teal { background: var(--teal-50); color: var(--teal-700); }
/* Celeste sobre el azul del agua, que ya es el color del área: es con lo que la Jefatura pinta la pileta
   en su planilla, y así la fila del pre-control se lee igual que el papel del que salió. */
.p-agua { background: var(--agua-50); color: var(--agua-600); }
.p-muted { background: var(--gray-50); color: var(--ink-2); }
.bar { height: 8px; background: var(--gray-50); border-radius: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--teal); transition: width 0.4s ease; }
.b-ok i { background: var(--ok); }
.b-warn i { background: var(--warn-2); }
.b-brand i { background: var(--teal); }
.b-prim i { background: var(--prim); }
.vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 38px 18px; color: var(--muted); background: var(--sheet); border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
.vacio b { color: var(--ink); font-size: 16px; }
.vacio p { margin: 0; max-width: 460px; }
.note { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: var(--r); background: var(--sheet-2); border: 1px solid var(--line); border-left: 4px solid var(--line-2); color: var(--ink-2); }
.note .ic { margin-top: 2px; }
.note.warn { background: var(--warn-50); border-color: #f0dca0; border-left-color: var(--warn-2); color: #573800; }
.note.info { background: var(--info-50); border-color: #c5d3ef; border-left-color: var(--info); color: #1b3c78; }
.note.bad { background: var(--bad-50); border-color: #ebc0bc; border-left-color: var(--bad); color: #721c18; }
.note.ok { background: var(--ok-50); border-color: #b9dfc6; border-left-color: var(--ok); color: #14532d; }
.note.big { padding: 14px 16px; font-size: 15px; }
.note .check { margin-top: 10px; }
.lead { margin: 0 0 14px; color: var(--ink-2); }
.intro { margin: 0; }
.sec-t { font-size: 16px; font-weight: 500; margin: 24px 0 10px; }
.checks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.checks li { position: relative; padding-left: 28px; color: var(--ink-2); }
.checks li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.checks b { color: var(--ink); }

/* Barra de estado del registro (Borrador ▸ Validada ▸ Facturada) */
.o-status { display: inline-flex; align-items: stretch; }
.o-status span { display: inline-flex; align-items: center; padding: 0 16px 0 24px; height: 34px; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; background: var(--sheet-3); margin-left: -9px; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%); }
.o-status span:first-child { margin-left: 0; padding-left: 14px; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%); border-radius: 4px 0 0 4px; }
.o-status span:last-child { padding-right: 14px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 11px 50%); border-radius: 0 4px 4px 0; }
.o-status span:only-child { clip-path: none; }
.o-status span.done { color: var(--prim-700); background: var(--prim-100); }
.o-status span.on { color: #fff; background: var(--prim); }
.o-status.st-ok span.on { background: var(--ok); }
.o-status.st-ok span.done { color: var(--ok); background: var(--ok-50); }

/* Botones inteligentes arriba del formulario */
.o-smart { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.o-smart a, .o-smart button { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border: 0; border-right: 1px solid var(--line); background: var(--sheet); color: var(--ink); text-decoration: none; text-align: left; min-width: 150px; }
.o-smart a:hover, .o-smart button:hover { background: var(--sheet-2); }
.o-smart .ic { color: var(--prim); }
.o-smart .sb { display: flex; flex-direction: column; line-height: 1.2; }
.o-smart .sb b { font-size: 16px; font-weight: 500; }
.o-smart .sb span { font-size: 13px; color: var(--muted); }
.o-sheet { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sombra); overflow: hidden; }
.o-sheet-b { padding: 20px 24px; }
.o-title { margin: 0 0 4px; font-size: 26px; font-weight: 500; line-height: 1.2; }
.o-title .mono { font-size: 24px; }
.o-subt { color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.o-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 36px; margin-top: 16px; }
.o-fields > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--sheet-3); }
.o-fields span { font-size: 13.5px; color: var(--muted); }
.o-fields b { font-weight: 500; overflow-wrap: anywhere; }
.o-fields .w2 { grid-column: 1 / -1; }
.o-group-t { grid-column: 1 / -1; font-size: 13px; font-weight: 500; color: var(--prim); margin: 10px 0 0; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.o-form-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.o-form-col > * + * { margin-top: 16px; }
.o-chatter { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sombra); padding: 14px 16px; }
.o-chatter-h { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.o-chatter-h .btn { height: 34px; font-size: 13.5px; }
.o-msg-f { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.o-msg-f textarea { border: 1px solid var(--line-2); border-radius: var(--r); padding: 9px 11px; min-height: 66px; resize: vertical; outline: 0; }
.o-msg-f textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-100); }
.o-msg-f .fila { display: flex; gap: 6px; justify-content: flex-end; }
.o-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 620px; overflow: auto; }
.o-thread li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
.o-thread li.muted { display: block; font-size: 14px; }
.o-thread .avatar { width: 34px; height: 34px; border-radius: 8px; font-size: 13px; }
.o-thread .avatar.sys { background: var(--sheet-3); color: var(--ink-2); }
.o-thread .avatar.nota { background: var(--warn-2); color: #2b1b00; }
.o-th-h { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 13px; color: var(--muted); }
.o-th-h b { color: var(--ink); font-weight: 500; font-size: 14px; }
.o-th-b { font-size: 14px; color: var(--ink-2); margin-top: 2px; overflow-wrap: anywhere; }
.o-th-b s { color: var(--muted); }
.o-th-b .arr { color: var(--muted); margin: 0 4px; }
.o-th-b.nota { background: var(--warn-50); border-radius: var(--r); padding: 6px 9px; }

/* El registro del medidor: las cifras en celdas, como se leen en la vereda. */
.odo { display: inline-flex; align-items: stretch; gap: 2px; font: 600 1em/1 var(--mono); padding: 4px; background: #30363d; border-radius: var(--r); box-shadow: inset 0 0 0 1px #0b0d10, 0 1px 0 rgba(255, 255, 255, 0.4); vertical-align: middle; }
.odo i { font-style: normal; display: grid; place-items: center; min-width: 0.8em; padding: 0.2em 0.14em; background: linear-gradient(180deg, #0c0f12 0%, #272d33 42%, #272d33 58%, #0c0f12 100%); color: #f3f0e8; border-radius: 2px; }
.odo em { font-style: normal; display: grid; place-items: center; padding: 0 0.4em; background: var(--teal); color: #fff; font: 700 0.5em var(--font); border-radius: 2px; }

/* Tablas: la vista de lista */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--sheet); }
.tbl th { text-align: left; font-size: 13px; font-weight: 500; color: var(--ink-2); padding: 10px 14px; background: var(--sheet-2); border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; }
/* Encabezado que ordena: el enlace ocupa toda la celda para que se toque cómodo. */
.tbl th.th-ord { padding: 0; }
.tbl th.th-ord > a { display: block; padding: 10px 14px; color: inherit; text-decoration: none; cursor: pointer; }
.tbl th.th-ord.num > a { text-align: right; }
.tbl th.th-ord > a:hover { background: var(--line); }
.tbl th.th-ord.on > a { color: var(--brand); font-weight: 600; }
.tbl td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl .motor-explicacion { min-width: 280px; max-width: 360px; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr[data-go], .tbl tbody tr[data-act] { cursor: pointer; }
.tbl tbody tr[data-go]:hover, .tbl tbody tr[data-act]:hover { background: var(--prim-50); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .neg { color: var(--bad); }
/* `.chk` nació para las etiquetas de los meses de pileta, que son inline-flex, pero la misma clase marca la
   celda del casillero en las tablas: sin reponer `table-cell` el `<td>` sale del renglón y el casillero queda
   más arriba que su fila. */
.tbl .chk { width: 40px; display: table-cell; vertical-align: middle; }
.tbl .chk input { width: 17px; height: 17px; accent-color: var(--prim); cursor: pointer; }
.tbl.small td, .tbl.small th { padding: 7px 10px; font-size: 13px; }
.bit-det { display: grid; gap: 4px; min-width: 0; max-width: 100%; padding-top: 6px; }
.bit-det-line { overflow-wrap: anywhere; white-space: normal; }
.bit-det-line b { font-weight: 500; }
.tbl-rutas { min-width: 880px; }
.tbl-pc { min-width: 900px; }
/* Tabla del pre-control automático (19-sep): clase propia y no `.tbl-pc`, que ya tiene otros usos en el
   pre-control de la Jefatura. Mismo ancho mínimo, para que el reclamo del organismo del ancho completo
   valga también acá. */
.tbl-motor { min-width: 900px; }
/* Tablas de datos a ancho completo (pedido de la jefa de Medidores: aprovechar el ancho de la pantalla y
   sacar los espacios a los costados). Se despega del ancho de `.main` la tarjeta que envuelve la tabla
   de pre-control (`.tbl-pc`), la de control de lecturas (`.tbl-control`) y, desde el 19-sep, la de cada
   grupo del pre-control automático (`.tbl-motor`, adentro de un `<details class="card">` y no de
   `.card.flush`: por eso va con su propio selector). Se aplica siempre, esté el grupo abierto o cerrado,
   para que la tarjeta no cambie de ancho al desplegarse. El resto del sitio —formularios, paneles de
   lectura, textos— sigue con el ancho de `.main` sin tocar. */
.card.tabla-ancha {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* `.card.flush` recorta con `overflow: hidden`, que convierte a la tarjeta en contenedor de desplazamiento y
     deja la barra de abajo (`position: sticky`) clavada al pie de la tabla en vez de al borde de la ventana. Con
     `clip` el recorte de las esquinas es el mismo y el sticky se ancla a la ventana. (5-oct) */
  overflow: clip;
}
/* La barra de desplazamiento horizontal de arriba, que arma `barrasEspejo()` en `js/app.js`. Es un div
   vacío con el mismo ancho que la tabla: se ve la barra y nada más. Queda oculto cuando la tabla entra
   entera en la pantalla, y `barrasEspejo` lo esconde midiendo, no sólo con CSS. */
/* La altura no es decorativa: con el alto del contenido (1px) el navegador no le da área de desplazamiento
   al espejo y `scrollLeft` queda clavado en cero, así que la barra se ve pero no arrastra la tabla. Lo
   encontró `herramientas/verificar_tanda_pantalla_19sep.cjs` moviéndola de verdad. */
.tbl-espejo { height: 15px; overflow-x: auto; overflow-y: hidden; }
.tbl-espejo > div { height: 1px; }
.tbl-espejo[hidden] { display: none; }
/* La barra de abajo (pedido del organismo: «hay que bajar al fondo, ir a la derecha y volver a subir»),
   pegada al borde inferior de la ventana mientras la tabla está a la vista. La línea de arriba es lo único
   que la distingue de un borde común: sin ella se confunde con el fondo de la página. */
.tbl-espejo-pie { position: sticky; bottom: 0; z-index: 5; background: var(--sheet); border-top: 1px solid var(--line); }
/* Con la barra de abajo a la vista, se apaga la barra nativa de la caja para que no queden dos pegadas al
   final de la tabla: esto sólo esconde el dibujo de la barra, el desplazamiento con rueda, trackpad o dedo
   sobre la tabla sigue andando igual. */
.tbl-wrap.con-espejo-pie { scrollbar-width: none; }
.tbl-wrap.con-espejo-pie::-webkit-scrollbar { display: none; }
.tr-act td { background: var(--teal-50); }
/* Calendario de remesas (5-oct): en la lista de próximas fechas, la de hoy en ámbar y las vencidas en rojo suave. */
.tbl tr.cal-hoy td { background: var(--warn-50); font-weight: 500; }
.tbl tr.cal-vencida td { background: var(--bad-50); }
/* Fila resaltada con reclamo abierto (24-sep, Reclamos): tono suave, no tapa la alerta de la última
   columna ni la selección con casilla. */
.tr-reclamo td { background: var(--bad-50); }
.tbl tr.grupo td { background: var(--sheet-3); font-weight: 500; }
.tbl tfoot td { font-weight: 500; background: var(--sheet-2); border-top: 2px solid var(--line-2); }
/* 24-sep (la Jefatura de Medidores): con «Remesa 01 · Ruta 9» el rótulo es más largo que el redondel pensado para un número
   solo. Sin `white-space:nowrap` el texto partía a una segunda línea que la altura fija (26px) dejaba
   afuera de la placa azul: quedaba escrita en blanco sobre el fondo blanco de la página, invisible. Ahora
   el redondel crece a lo ancho y nunca envuelve. */
.rnum { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 26px; padding: 0 8px; white-space: nowrap; border-radius: var(--r-sm); background: var(--prim); color: #fff; font-weight: 700; font-size: 14px; }
a.rnum { text-decoration: none; }
.td-av { min-width: 160px; }
.td-av small { display: block; color: var(--muted); margin-top: 3px; }
.td-act { white-space: nowrap; text-align: right; }
.td-act .btn + .btn { margin-left: 4px; }
.more { padding: 12px; text-align: center; border-top: 1px solid var(--line); }
/* Botón «Validar todo» por grupo del pre-control automático (js/vistas-motor.js). */
.grupo-acciones { margin: 4px 0 10px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--line-2); }
.d-ok { background: var(--ok); }
.d-warn { background: var(--warn-2); }
.d-bad { background: var(--bad); }
.d-res { background: var(--info); }
.d-pend { background: #c9cfd5; }
.d-libre { background: var(--teal); }

/* Formularios y ventanas */
.form { display: flex; flex-direction: column; gap: 12px; }
.form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.form input:not([type='checkbox']):not([type='radio']):not([type='file']), .form select, .form textarea { height: 40px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 11px; background: #fff; font-size: 15px; font-weight: 400; color: var(--ink); outline: 0; width: 100%; }
.form textarea { height: auto; padding: 9px 11px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-100); }
.form input.err, .form select.err { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-50); }
.form .check, label.check { flex-direction: row; align-items: center; gap: 9px; font-weight: 400; font-size: 14px; color: var(--ink); display: flex; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--prim); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.form .ayuda { font-size: 13px; color: var(--muted); font-weight: 400; }
.form-ctx { background: var(--sheet-2); border: 1px solid var(--line); border-left: 4px solid var(--prim); border-radius: var(--r); padding: 9px 12px; font-size: 13.5px; color: var(--ink-2); }
.drop { flex-direction: row !important; align-items: center; justify-content: center; gap: 10px !important; border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); padding: 22px 14px; text-align: center; color: var(--muted) !important; cursor: pointer; position: relative; background: var(--sheet-2); }
.drop.ok { border-color: var(--ok); color: var(--ok) !important; background: var(--ok-50); }
.drop input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; opacity: 0; cursor: pointer; }
.inp-u { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: #fff; }
.inp-u input { border: 0 !important; box-shadow: none !important; }
.inp-u em { font-style: normal; padding: 0 11px; color: var(--muted); background: var(--sheet-2); height: 40px; display: grid; place-items: center; border-left: 1px solid var(--line); }
.radios { display: grid; gap: 8px; }
.radios label { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--line-2); border-radius: var(--r); padding: 11px 12px; cursor: pointer; font-weight: 400; color: var(--ink); }
.radios label.on { border-color: var(--prim); background: var(--prim-50); }
.radios input { margin-top: 3px; accent-color: var(--prim); width: 17px; height: 17px; flex: none; }
.radios label b { display: block; font-weight: 500; }
.radios label span { color: var(--muted); font-size: 13px; }
.radios.h { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
#modal-root { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 80; display: none; }
#modal-root.open { display: block; }
.modal-back { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: rgba(33, 37, 41, 0.5); animation: fade 0.18s ease; }
.modal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(600px, calc(100vw - 28px)); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: auto; background: var(--sheet); border-radius: var(--r-lg); box-shadow: var(--sombra-2); animation: pop 0.18s ease; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 10px; position: sticky; top: 0; background: var(--sheet); z-index: 2; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 17px; font-weight: 500; }
.modal-body { padding: 14px 18px 18px; }
.modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.modal-foot .muted { margin-right: auto; display: inline-flex; align-items: center; gap: 5px; }
.modal .lista-previa { max-height: 36vh; overflow: auto; margin: 6px 0 0; padding-left: 22px; }
.modal.drawer { left: auto; right: 0; top: 0; bottom: 0; transform: none; width: min(640px, 100vw); max-height: none; height: 100vh; height: 100dvh; border-radius: 0; animation: slide 0.22s ease; }
.modal.revision { width: min(1120px, 96vw); max-height: 94vh; overflow: auto; animation: none; font-size: 16px; }
.revision-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.revision-grid > div { min-width: 0; overflow-wrap: anywhere; }
.revision-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.revision .btn, .revision .est-b, .revision .icon-btn { min-height: 44px; white-space: normal; font-size: 16px; }
.revision .dw-reading { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.revision .dw-reading b, .revision .dw-reading .odo { font-size: 28px; }
.revision .dw-reading .odo { flex-wrap: wrap; max-width: 100%; }
.revision .pill { font-size: 14px; white-space: normal; }
.revision .dw-form label, .revision .dw-origin, .revision .dw-sub, .revision .dw-expl, .revision .dw-auto li { font-size: 16px; }
.revision .small, .revision .dw-reading > div > span:not(.odo), .revision .dw-reading small { font-size: 16px; }
.revision .row2, .revision .est { grid-template-columns: minmax(0, 1fr); }
.revision .dw-res { flex-wrap: wrap; }
.acta { border: 1px solid var(--teal); background: var(--teal-100); padding: 16px; border-radius: var(--r); overflow-wrap: anywhere; }
.lect-num { display: none; }
.lect-nombre { white-space: normal; overflow-wrap: anywhere; }
.tbl-control td, .tbl-pc td { white-space: normal; }
.informe-lectura .doc-head { display: flex; align-items: center; gap: 16px; }
.informe-lectura .doc-head svg { width: 70px; flex: 0 0 70px; }
.informe-lectura { overflow-wrap: anywhere; }
@media (min-width: 900px) { .revision-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1279px) { .lect-nombre { display: none; } .lect-num { display: inline; white-space: nowrap; } }
@media (max-width: 699px) {
  .modal.revision { top: 0; right: 0; bottom: 0; left: 0; inset: 0; transform: none; width: 100vw; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; }
  .revision .dw-reading { grid-template-columns: minmax(0, 1fr); }
}
.modal.modal-doc { width: min(760px, calc(100vw - 28px)); }
.modal.modal-lg { width: min(900px, calc(100vw - 28px)); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -48%); } }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
/* Cartel de «guardando»: operaciones lentas (SIMECOM, generar facturas, calcular una remesa) tardan
   hasta un minuto con el padrón grande y sin esto la pantalla se ve igual que si no hubiera pasado
   nada (21-sep). Va por ENCIMA de los modales: bloquea clics en la pantalla y en cualquier cartel
   abierto detrás. La caja NO lleva animación de entrada: a los dos cuadros de aparecer arranca un
   cálculo que ocupa al navegador entero, y una entrada a medio hacer quedaría congelada —corrida de
   lugar y semitransparente— durante todo lo que dure. `pop` además es de los modales, que se centran
   con transform: acá, centrada con flex, la hacía entrar desde medio cuerpo arriba y a la izquierda. */
#ocupado-root { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 95; display: none; background: rgba(33, 37, 41, 0.55); align-items: center; justify-content: center; }
#ocupado-root.open { display: flex; }
.ocupado-caja { background: var(--sheet); border-radius: var(--r-lg); box-shadow: var(--sombra-2); padding: 28px 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; max-width: min(360px, calc(100vw - 40px)); }
.ocupado-caja b { font-size: 16px; font-weight: 500; color: var(--ink); }
.ocupado-caja p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
#toasts { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 9px; max-width: min(440px, calc(100vw - 36px)); background: #2b3036; color: #fff; border-left: 4px solid var(--ok); border-radius: var(--r); padding: 11px 14px; font-weight: 400; opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s; box-shadow: var(--sombra-2); }
.toast.in { opacity: 1; transform: none; }
.toast.t-bad { border-left-color: #f08a7e; }
.toast.t-info { border-left-color: #8fb4f0; }

/* Gráficos */
.svbar { width: 100%; height: auto; display: block; overflow: visible; }
.sv-axis { stroke: var(--line-2); stroke-width: 1; }
.sv-b { fill: #c7dced; }
.sv-act { fill: var(--teal); }
.sv-warn { fill: var(--warn-2); }
.sv-bad { fill: var(--bad); }
.sv-pend { fill: #dfe3e7; }
.sv-prim { fill: var(--prim); }
.sv-l { font-size: 10.5px; fill: var(--muted); text-anchor: middle; font-family: var(--font); }
.sv-v { font-size: 12px; fill: var(--ink); text-anchor: middle; font-weight: 500; font-family: var(--font); }
.ring { display: block; }
.nv-bg { fill: #f3f6f9; }
.nv-agua { fill: #cde3f4; }
.nv-ola { fill: none; stroke: #8fbde3; stroke-width: 1.5; }
.nv-borde { fill: none; stroke: var(--agua); stroke-width: 2.5; }
.rg-ok .nv-agua { fill: #d2eadb; }
.rg-ok .nv-ola { stroke: #8fc5a0; }
.rg-ok .nv-borde { stroke: var(--ok); }
.rg-warn .nv-agua { fill: #f6e0b8; }
.rg-warn .nv-ola { stroke: #e3b56a; }
.rg-warn .nv-borde { stroke: var(--warn); }
.stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--gray-50); gap: 2px; }
.stack i { display: block; height: 100%; }
.s-ok { background: #3b9061; }
.s-info { background: #4f7fcf; }
.s-warn { background: var(--warn-2); }
.s-bad { background: #c9463f; }
.s-muted { background: #a0a7ae; }
.s-violet { background: #8468cc; }
.s-teal { background: var(--teal); }
.s-prim { background: var(--prim); }
.linea { width: 100%; height: auto; display: block; }
.ln-path { fill: none; stroke: var(--prim); stroke-width: 2.5; stroke-linejoin: round; }
.ln-area { fill: var(--prim-100); opacity: 0.7; }
.ln-path.teal { stroke: var(--teal); }
.ln-area.teal { fill: var(--teal-100); }
.ln-dot { fill: #fff; stroke: var(--prim); stroke-width: 2; }
.ln-g { stroke: var(--line); stroke-width: 1; }

/* ——— Panel del período (Operaciones) ——— */
.panel-alcance { margin: 0; padding: 10px 14px; border: 1px solid #b7d8c2; border-radius: var(--r); background: #edf7f0; color: var(--ink-2); }
.panel-alcance b { color: var(--ink); font-weight: 600; }
.ciclo { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 24px 22px; box-shadow: var(--sombra); }
.ciclo-h { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-end; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ciclo-h h2 { font-size: 28px; font-weight: 500; margin: 2px 0; }
.ciclo-h p { margin: 0; color: var(--ink-2); }
.ciclo-m3 { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.ciclo-m3 .odo { font-size: 26px; }
.ciclo-m3 small { color: var(--muted); font-size: 13px; }
.etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.et { position: relative; padding: 18px 22px 4px 0; cursor: pointer; }
.et + .et { padding-left: 24px; border-left: 1px solid var(--line); }
.et-top { display: flex; align-items: center; gap: 10px; }
.et-n { width: 28px; height: 28px; border-radius: 50%; background: var(--prim); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.et-top b { font-size: 15px; font-weight: 500; }
.et-v { font-size: 40px; font-weight: 500; line-height: 1; margin: 12px 0 10px; font-variant-numeric: tabular-nums; }
.et-v small { font-size: 15px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.et-bar { height: 8px; background: var(--gray-50); border-radius: 4px; overflow: hidden; }
.et-bar i { display: block; height: 100%; background: var(--teal); }
.et-warn .et-n { background: var(--warn-2); color: #2b1b00; }
.et-warn .et-v { color: var(--warn); }
.et-warn .et-bar i { background: var(--warn-2); }
.et p { margin: 9px 0 0; color: var(--ink-2); font-size: 14px; }
.et:hover .et-top b { color: var(--prim); }
.grid-main { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tanks { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 9px; }
.tank { position: relative; height: 78px; border: 1.5px solid var(--line-2); border-radius: 4px 4px 12px 12px; background: linear-gradient(to top, var(--tk) var(--p), var(--sheet) var(--p)); display: flex; flex-direction: column; justify-content: space-between; padding: 7px 8px; text-decoration: none; color: var(--ink); overflow: hidden; transition: border-color 0.12s, transform 0.12s; }
.tank:hover { border-color: var(--prim); transform: translateY(-1px); }
.tank b { font-size: 20px; font-weight: 500; line-height: 1; }
.tank small { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.tank em { position: absolute; top: 6px; right: 6px; font-style: normal; font-size: 13px; font-weight: 700; background: var(--warn-2); color: #2b1b00; border-radius: 2px; padding: 0 5px; }
.tk-ok { --tk: #d4eadb; border-color: #9fcaad; }
.tk-warn { --tk: #d2e4f4; border-color: #e0b57a; }
.tk-campo { --tk: #bcd9f1; border-color: #7eb1db; }
.tk-pendiente { --tk: transparent; border-style: dashed; }
.tk-enviada { --tk: #e4ebf7; border-color: #aec2ea; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend span::before { content: ''; width: 11px; height: 11px; border-radius: 3px; }
.lg-ok::before { background: #9fcaad; }
.lg-warn::before { background: var(--warn-2); }
.lg-campo::before { background: #7eb1db; }
.lg-pendiente::before { background: transparent; border: 1.5px dashed var(--line-2); }
.lg-bad::before { background: var(--bad); }
.lg-res::before { background: var(--info); }
.catlist { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.catlist li { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.catlist span { flex: 1; color: var(--ink-2); }
.catlist small { color: var(--muted); width: 38px; text-align: right; }
.dotc { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.codlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.codlist li { display: grid; grid-template-columns: 38px minmax(0, 1fr) 90px 46px; align-items: center; gap: 10px; font-size: 14px; }
.codlist .mono { background: var(--ink-2); color: #fff; text-align: center; border-radius: 3px; font-size: 13px; padding: 1px 0; }
.cl-t { white-space: normal; overflow: visible; overflow-wrap: anywhere; color: var(--ink-2); }
.cl-bar { height: 7px; border-radius: 4px; background: var(--gray-50); overflow: hidden; }
.cl-bar i { display: block; height: 100%; }
.codlist b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.fieldlist, .feed { list-style: none; margin: 0; padding: 0; }
.fieldlist li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.fieldlist li:last-child { border-bottom: 0; }
.fl-a { width: 38px; height: 38px; border-radius: 50%; background: var(--teal-50); color: var(--teal); display: grid; place-items: center; }
.fl-b { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fl-b span { color: var(--muted); font-size: 13px; }
.fl-c { text-align: right; display: flex; flex-direction: column; }
.fl-c b { font-size: 18px; font-weight: 500; }
.fl-c span { color: var(--muted); font-size: 13px; }
.feed li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--sheet-3); }
.feed li:last-child { border-bottom: 0; }
/* Filas sin ícono (actividad reciente): dos columnas, texto y hora. Con las tres columnas, el texto caía en la
   del ícono, de 30 px, y se partía palabra por palabra. */
.feed-simple li { grid-template-columns: minmax(0, 1fr) auto; }
.feed li[data-go] { cursor: pointer; }
.fd-ic { width: 30px; height: 30px; border-radius: 50%; background: var(--sheet-3); display: grid; place-items: center; color: var(--ink-2); }
.fd-t { font-size: 14px; }
.feed small { color: var(--muted); white-space: nowrap; font-size: 13px; }

/* ——— Abonados y buscador ——— */
.search-hero { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px 20px; box-shadow: var(--sombra); }
.sh-text h2 { margin: 0 0 4px; font-size: 20px; font-weight: 500; }
.sh-text p { margin: 0; color: var(--ink-2); max-width: 760px; }
.big-search { display: flex; align-items: center; gap: 12px; background: #fff; color: var(--muted); border: 1.5px solid var(--line-2); border-radius: var(--r); padding: 0 16px; height: 54px; margin-top: 16px; }
.big-search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-100); }
.big-search input { border: 0; outline: 0; width: 100%; font-size: 18px; color: var(--ink); background: transparent; min-width: 0; }
.hint-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.hint-chips .chip { font-family: var(--mono); font-weight: 500; }
.res-head { color: var(--ink-2); font-size: 14px; }
#resultados > * + * { margin-top: 14px; }
.pcard { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sombra); }
.pcard header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.pcard h3 { margin: 0; font-size: 17px; font-weight: 500; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--prim); color: #fff; display: grid; place-items: center; font-weight: 500; font-size: 15px; flex: none; letter-spacing: 0.02em; }
.avatar.sm { width: 34px; height: 34px; font-size: 13px; }
.avatar.jur { background: var(--teal); border-radius: 8px; }
.dup { display: flex; align-items: center; gap: 12px; margin: 0 16px 12px; padding: 11px 13px; border-radius: var(--r); background: var(--violet-50); color: #3b2983; border: 1px solid #d5cbee; border-left: 4px solid var(--violet); }
.dup > div { flex: 1; font-size: 14px; }
.ctable { border-top: 1px solid var(--line); }
.crow { display: grid; grid-template-columns: minmax(0, 1fr) auto 22px; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.crow:last-child { border-bottom: 0; }
.crow:hover { background: var(--prim-50); }
.cr-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cr-main .mono { font-weight: 500; font-size: 15px; color: var(--prim); }
.cr-dir { color: var(--ink-2); font-size: 14px; }
.cr-rol { color: var(--violet); font-size: 13px; display: inline-flex; gap: 4px; align-items: center; }
.cr-tags { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.cr-go { color: var(--muted); }
.dcards { display: grid; gap: 10px; }
.dcard { text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 13px 14px; border-radius: var(--r); border: 1px solid var(--line); border-left: 4px solid var(--teal); background: var(--sheet-2); }
.dcard:hover { border-color: var(--teal); background: #fff; }
.dcard b { font-size: 15px; font-weight: 500; }
.dcard span { color: var(--ink-2); font-size: 14px; }
.dcard em { font-style: normal; color: var(--teal); font-weight: 500; font-size: 13px; display: inline-flex; gap: 4px; align-items: center; margin-top: 4px; }
.normas { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 9px; }
.normas li { display: grid; grid-template-columns: 124px 18px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 14px; }
.normas li span:first-child { font-family: var(--mono); background: var(--sheet-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px 8px; font-size: 13px; }
.normas .ic { color: var(--muted); }

/* ——— Ficha de cuenta ——— */
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); }
.crumbs a { text-decoration: none; font-weight: 500; }
.acct { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--sombra); }
.acct-top { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.acct-k { font-size: 13px; color: var(--muted); }
.acct-n { font-size: 28px; font-weight: 500; letter-spacing: 0.01em; margin: 2px 0 10px; color: var(--ink); }
.acct-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-d { font-size: 13px; font-weight: 500; background: var(--sheet-2); border: 1px solid var(--line); border-radius: 10px; padding: 2px 9px; color: var(--ink-2); }
.chip-d.c-ok { background: var(--ok-50); border-color: #bcdcc5; color: var(--ok); }
.chip-d.c-warn { background: var(--warn-50); border-color: #f0dca0; color: var(--warn); }
.chip-d.c-teal { background: var(--teal-50); border-color: var(--teal-100); color: var(--teal-700); }
.acct-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; align-content: flex-start; }
.acct-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.acct-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.acct-grid .w2 { grid-column: span 2; }
.acct-grid span { font-size: 13px; color: var(--muted); }
.acct-grid b { font-weight: 500; overflow-wrap: anywhere; }
.acct-verif { margin-top: 12px; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tiles4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tile { border-radius: var(--r-lg); padding: 16px 18px; border: 1px solid var(--line); border-top: 4px solid var(--line-2); background: var(--sheet); display: flex; flex-direction: column; gap: 6px; box-shadow: var(--sombra); }
.tile-h { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--muted); flex-wrap: wrap; }
.tile-h .pill { margin-left: auto; }
.tile-h .mono { color: var(--ink); font-size: 14px; }
.tile-k { font-weight: 500; font-size: 15px; }
.tile-big { font-size: 30px; font-weight: 500; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tile-list { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 4px; }
.tile-list li { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; font-size: 13.5px; padding-bottom: 3px; border-bottom: 1px solid var(--sheet-3); }
.tile-list b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.tile .btn { align-self: flex-start; }
.tile p { margin: 0; }
.t-ok { border-top-color: var(--ok); }
.t-ok .tile-k, .t-ok .tile-big { color: var(--ok); }
.t-bad { border-top-color: var(--bad); }
.t-bad .tile-k, .t-bad .tile-big { color: var(--bad); }
.t-warn { border-top-color: var(--warn-2); }
.tile-med { border-top-color: var(--teal); }
.tile-med .svbar { margin: 6px 0 2px; max-height: 150px; }
.med-lect { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--sheet-2); border: 1px solid var(--line); border-radius: var(--r); }
.med-lect span { font-size: 13px; color: var(--muted); }
.med-lect .odo { font-size: 18px; }
.tile-foot { display: flex; flex-wrap: wrap; gap: 4px; }
.rec { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--sheet-3); }
.rec:last-child { border-bottom: 0; }
.rec-t { font-size: 14px; font-weight: 500; display: flex; flex-direction: column; }
.rec-t small { color: var(--muted); font-weight: 400; }
.card-tabs { padding: 0; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding: 0 12px; overflow-x: auto; background: var(--sheet); }
.tabs a { padding: 13px 12px 10px; text-decoration: none; color: var(--muted); font-weight: 500; font-size: 14px; border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs a.on { color: var(--prim); border-color: var(--prim); }
.tabs a[aria-disabled="true"] { opacity: .6; cursor: default; }
.tab-body { padding: 18px; }
.tab-tools { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.tab-tools p { margin: 0; }
.roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.rcard { border: 1px solid var(--line); border-top: 3px solid var(--prim); border-radius: var(--r); padding: 14px; background: var(--sheet-2); display: flex; flex-direction: column; gap: 6px; }
.rc-h { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.rc-h b { font-size: 14.5px; font-weight: 500; }
.rcard p { margin: 0; }
.rc-p { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 10px; margin-top: 4px; min-height: 58px; }
.rc-p > div:last-child { display: flex; flex-direction: column; min-width: 0; }
.rc-p span { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 14px; padding: 6px 0 12px; position: relative; }
.tl-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--sheet); border: 3px solid var(--prim); margin-top: 2px; z-index: 1; }
.tl-h { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.tl-h small { color: var(--muted); }
.tl-d { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 3px; font-size: 14px; color: var(--ink-2); }
.tl-d s { color: var(--muted); }
.ld-block { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 4px 0; color: var(--bad); }
.ld-block h4 { margin: 0; color: var(--ink); font-size: 18px; font-weight: 500; }
.ld-block ul { margin: 4px 0; padding: 0; list-style: none; color: var(--ink); }
.ld-block li { background: var(--bad-50); border-radius: var(--r); padding: 8px 12px; margin: 4px 0; }
.ld-block p { margin: 6px 0 0; }
.doc { border: 1px solid var(--line); border-radius: var(--r); padding: 24px 26px; background: #fff; line-height: 1.6; }
.doc-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 3px double var(--ink); }
.doc-logo { display: flex; align-items: center; gap: 10px; }
.doc-logo .logo { width: 40px; height: 40px; }
.doc-logo b { display: block; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; }
.doc-logo span { font-size: 13px; color: var(--muted); }
.doc-t { text-align: right; display: flex; flex-direction: column; }
.doc-t b { font-size: 16px; font-weight: 700; letter-spacing: 0.06em; }
.doc-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 18px 0 0; }
.doc-dl div { background: var(--sheet-2); border-radius: var(--r); padding: 9px 12px; border: 1px solid var(--line); }
.doc-dl dt { font-size: 13px; color: var(--muted); }
.doc-dl dd { margin: 2px 0 0; font-weight: 500; }
.doc-pie { margin: 18px 0 0; font-size: 13px; color: var(--muted); border-top: 1px dashed var(--line-2); padding-top: 10px; }
.doc-tbl { margin-top: 12px; }
.doc-tbl tfoot td { font-weight: 700; border-top: 2px solid var(--line-2); }
.doc-prev { width: 100%; max-height: 60vh; object-fit: contain; border-radius: var(--r); border: 1px solid var(--line); background: var(--sheet-2); display: block; }
.doc-prev.pdf { height: 60vh; }
.doc-fake { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 16px; background: var(--sheet-2); border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--muted); text-align: center; }
.doc-fake b { color: var(--ink); }

/* ——— Lecturas y rutas ——— */
.lec-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 26px; align-items: center; }
.lh-ring, .pc-ring { position: relative; display: grid; place-items: center; }
.lh-ring-t { position: absolute; text-align: center; display: flex; flex-direction: column; }
.lh-ring-t b { font-size: 28px; font-weight: 500; line-height: 1; }
.lh-ring-t span { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.lh-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lh-stats div { display: flex; flex-direction: column; padding: 2px 14px; border-left: 1px solid var(--line); }
.lh-stats b { font-size: 26px; font-weight: 500; line-height: 1.15; font-variant-numeric: tabular-nums; }
.lh-stats span { color: var(--muted); font-size: 13px; }
.lh-act { display: flex; flex-direction: column; gap: 8px; }
/* «Tu día» del Lecturista: cuatro datos, y el botón de abrir la app se ve primero que todo. (23-sep) */
#main .lh-stats.lh-stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.btn-lg { height: 52px; padding: 0 22px; font-size: 16px; font-weight: 600; }
.lh-act button.link { align-self: flex-start; background: none; border: none; padding: 0; cursor: pointer; }
.lead-hola { margin: 0 0 16px; }
.lead-hola h1 { margin: 0; font-size: 22px; font-weight: 500; color: var(--ink); }
.lead-hola p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.lec-volver { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0 0 4px -10px; color: var(--ink); border-radius: 50%; text-decoration: none; }
.lec-volver:active { background: var(--line, rgba(0,0,0,.08)); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters.in { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ruta-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 320px) auto; gap: 20px; align-items: center; }
.ruta-head h2 { margin: 2px 0; font-size: 24px; font-weight: 500; }
.ruta-head p { margin: 0; }
.rh-av { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.rh-st { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.ruta-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 16px; align-items: start; }
.mapa-wrap { background: var(--sheet-2); border-radius: var(--r); padding: 10px; border: 1px solid var(--line); }
.mapa { width: 100%; height: auto; display: block; }
.m-path { fill: none; stroke: #c3d4e4; stroke-width: 3; stroke-linecap: round; }
.mapa circle { stroke: #fff; stroke-width: 1.5; cursor: pointer; }
.m-ok { fill: var(--ok); }
.m-warn { fill: var(--warn-2); }
.m-bad { fill: var(--bad); }
.m-res { fill: var(--info); }
.m-pend { fill: #cbd1d7; }

/* ——— Pre-control ——— */
.pc-intro { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; position: relative; }
.pc-ring > div { position: absolute; text-align: center; display: flex; flex-direction: column; }
.pc-ring b { font-size: 26px; font-weight: 500; line-height: 1; }
.pc-ring span { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.pc-txt h2 { margin: 0 0 4px; font-size: 19px; font-weight: 500; }
.pc-txt p { margin: 0; color: var(--ink-2); max-width: 760px; }
.reglas { align-self: start; }
.reglas summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-weight: 500; font-size: 14px; color: var(--prim); border: 1px solid var(--line-2); border-radius: var(--r); padding: 8px 12px; white-space: nowrap; background: var(--sheet); }
.reglas summary::-webkit-details-marker { display: none; }
.reglas[open] summary { background: var(--prim-50); border-color: var(--prim-100); }
.reglas-f { position: absolute; right: 18px; margin-top: 8px; width: min(340px, calc(100vw - 60px)); background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; box-shadow: var(--sombra-2); z-index: 5; }
.reglas-b { display: flex; gap: 6px; }
.pc-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
/* 5-oct: el pre-control automático dibuja dos filas de tarjetas (por alerta y por grupo): se separan como las demás cajas. */
.pc-cards + .pc-cards { margin-top: 10px; }
.pc-card { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r-lg); border: 1px solid var(--line); border-top: 4px solid var(--line-2); background: var(--sheet); text-decoration: none; color: var(--ink); box-shadow: var(--sombra); }
.pc-card b { font-size: 28px; font-weight: 500; line-height: 1.05; font-variant-numeric: tabular-nums; }
.pc-card span { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.pc-card:hover { border-color: var(--ink-2); }
.pc-card.on { outline: 2px solid var(--prim); outline-offset: -2px; }
.pc-card.t-bad { border-top-color: var(--bad); }
.pc-card.t-warn { border-top-color: var(--warn-2); }
.pc-card.t-info { border-top-color: var(--info); }
.pc-card.t-violet { border-top-color: var(--violet); }
.pc-card.t-muted { border-top-color: #a0a7ae; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.seg { display: inline-flex; background: var(--sheet); border: 1px solid var(--line-2); border-radius: var(--r); padding: 3px; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg a { padding: 6px 12px; border-radius: var(--r-sm); text-decoration: none; color: var(--ink-2); font-weight: 500; font-size: 14px; white-space: nowrap; }
.seg a em { font-style: normal; color: var(--muted); margin-left: 3px; }
.seg a.on { background: var(--prim); color: #fff; }
.seg a.on em { color: #e6d6e1; }
.sel-ruta { display: inline-flex; align-items: center; gap: 6px; height: 38px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 10px; background: var(--sheet); color: var(--muted); }
.sel-ruta select { border: 0; outline: 0; background: transparent; font-weight: 500; color: var(--ink); }
.bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #2b3036; color: #fff; border-radius: var(--r); padding: 9px 12px; position: sticky; top: calc(var(--nav-h) + 6px); z-index: 6; border-left: 4px solid var(--teal); }
.bulk .btn { border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: #fff; }
.bulk .btn-primary { background: var(--teal); border-color: var(--teal); }
.dw { display: flex; flex-direction: column; gap: 14px; }
.dw-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.dw-n { font-size: 20px; font-weight: 500; color: var(--prim); }
.dw-t { font-weight: 500; font-size: 16px; }
.dw-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.dw-reading { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dw-reading > div { background: var(--sheet-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.dw-reading span { font-size: 13px; color: var(--muted); }
.dw-reading b { font-size: 22px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dw-reading .odo { font-size: 14px; align-self: flex-start; }
.dw-reading small { color: var(--muted); font-size: 13px; line-height: 1.3; }
.dw-reading .neg { color: var(--bad); }
/* T5 (24-sep, edición): la tabla «Lecturas» del modal de revisión, con las celdas que se corrigen con
   doble clic marcadas con un subrayado punteado -- el mismo gesto que el resto del sistema usa para «esto
   se puede tocar», sin agregar un ícono nuevo por celda. */
.dw-hist table { width: 100%; }
.dw-hist th { text-align: left; font-weight: 400; color: var(--muted); }
.hist-ed { cursor: pointer; border-bottom: 1px dashed var(--line); }
.hist-ed:hover { background: var(--sheet-2); }
/* Lo anterior de la cuenta, para decidir la lectura: códigos, consumos facturados y promedio estacional. */
.dw-ref { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dw-ref > div { background: var(--sheet-2); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dw-ref span { font-size: 13px; color: var(--muted); }
.dw-ref b { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dw-ref small { color: var(--muted); font-size: 13px; }
@media (max-width: 680px) { .dw-ref { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Filtros de la Jefatura: por código, por el código anterior y por m³, con la exportación al lado. */
.pc-jefatura label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.pc-jefatura select, .pc-jefatura input { max-width: 260px; }
/* Desplegable con casillas de los filtros combinables (B1): un botón que resume la elección y un panel
   de casillas para marcar varios valores del mismo campo (Código, Viene de, Ruta). */
.ms-drop { position: relative; }
.ms-drop .ms-btn { max-width: 260px; justify-content: space-between; }
.ms-drop .ms-btn-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-panel { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 220px; max-width: 320px; max-height: 280px; overflow-y: auto; background: var(--sheet); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--sombra-2); padding: 6px; }
.ms-drop.open .ms-panel { display: block; }
.ms-opt { display: flex; align-items: flex-start; gap: 8px; padding: 7px 8px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--ink); cursor: pointer; }
.ms-opt:hover { background: var(--sheet-2); }
.ms-opt input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--prim); flex: 0 0 auto; }
@media (max-width: 480px) {
  .ms-drop .ms-btn { max-width: 100%; }
  .ms-panel { left: 0; right: 0; max-width: none; }
}
/* B5 (filtros combinables): la caja de «Buscar» y el rango de fecha de lectura, en las tres pantallas de
   filtros (Pre-control, Control y Pre-control automático). Mismo look que los demás campos de la barra. */
.flt-buscar, .flt-fecha, .flt-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.flt-buscar input, .flt-fecha input { height: 38px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 10px; background: #fff; font-size: 14px; color: var(--ink); outline: 0; }
.flt-buscar input { width: 280px; max-width: 100%; }
.flt-fecha input { width: 150px; max-width: 100%; }
@media (max-width: 480px) {
  .flt-buscar input, .flt-fecha input { width: 100%; }
}
.dw-origin { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dw-foto { width: 100%; max-height: 240px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); }
/* Mientras se pide la dirección firmada, o cuando la imagen todavía está en el teléfono (A2). */
.dw-foto.esperando { display: flex; align-items: center; gap: 8px; max-height: none; padding: 12px; border-style: dashed; color: var(--muted); font-size: 13px; }
.dw-chart { background: var(--sheet-2); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 12px 6px; }
.dw-expl p { margin: 0 0 6px; color: var(--ink-2); }
.dw-form { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.dw-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.dw-form input, .dw-form select { height: 40px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 11px; font-size: 16px; outline: 0; background: #fff; }
.dw-form input:focus, .dw-form select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-100); }
.dw-sub { font-size: 13px; font-weight: 500; color: var(--muted); }
.est { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.est-b { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 10px 11px; border-radius: var(--r); border: 1px solid var(--line-2); background: #fff; text-align: left; }
.est-b span { font-size: 13px; color: var(--muted); font-weight: 500; line-height: 1.3; }
.est-b b { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.est-b:hover:not(:disabled) { border-color: var(--prim); }
.est-b.sel { border-color: var(--prim); background: var(--prim-50); box-shadow: inset 0 0 0 1px var(--prim); }
.est-b:disabled { opacity: 0.55; cursor: not-allowed; }
.dw-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.dw-actions.sec { justify-content: flex-start; border-top: 1px dashed var(--line-2); padding-top: 10px; }
.dw-res { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--r); background: var(--info-50); border: 1px solid #c5d3ef; border-left: 4px solid var(--info); color: #1b3c78; }
.dw-res > div { flex: 1; display: flex; flex-direction: column; }
.dw-res span { font-size: 14px; }
.dw-res small { color: #4a67a0; }
/* C3: propuesta del motor dentro de la revisión de lectura, y el panel de parámetros. */
.dw-motor { border: 1px solid var(--line-2); border-left: 4px solid var(--brand); border-radius: var(--r); padding: 10px 12px; margin-bottom: 10px; }
.chk-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.chk { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.dw-auto { display: flex; flex-direction: column; gap: 6px; }
.dw-auto li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.dw-auto ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dw-auto .ic { color: var(--teal); margin-top: 2px; }

/* ——— Órdenes: tablero kanban ——— */
.kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: start; }
.kcol { background: var(--sheet-3); border-radius: var(--r-lg); padding: 10px; }
.kcol-h { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px; margin-bottom: 8px; }
.kcol-h b { font-size: 14.5px; font-weight: 500; }
.kcol-h em { font-style: normal; font-weight: 500; font-size: 13px; background: var(--sheet); color: var(--ink-2); border-radius: 10px; padding: 0 8px; }
.kcol-sel { display: inline-flex; align-items: center; gap: 7px; min-width: 0; cursor: pointer; }
.kcol-sel input { width: 17px; height: 17px; flex: 0 0 auto; margin: 0; accent-color: var(--prim); }
.kcol-sel input:disabled { opacity: .5; cursor: default; }
.k-completada .kcol-h b { color: var(--ok); }
.kcol-b { display: flex; flex-direction: column; gap: 8px; }
.kempty { color: var(--muted); font-size: 13px; text-align: center; margin: 8px 0; }
.ot { background: var(--sheet); border-radius: var(--r); padding: 12px; border: 1px solid var(--line); border-left: 4px solid #a0a7ae; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--sombra); }
.ot.p-urgente { border-left-color: var(--bad); }
.ot.p-alta { border-left-color: var(--warn-2); }
.ot.p-normal { border-left-color: var(--info); }
.ot header { display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
.ot h4 { margin: 0; font-size: 15.5px; font-weight: 500; }
.ot-c { display: flex; flex-direction: column; text-decoration: none; color: var(--ink-2); font-size: 14px; }
.ot-c small { color: var(--muted); }
.ot-d { margin: 0; font-size: 13px; color: var(--muted); }
.ot-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); }
.ot-q { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 5px; }
.ot-q.ok { color: var(--ok); }
.ot footer { display: flex; justify-content: flex-end; }

/* ——— Envío y cierre ——— */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sombra); }
.step { display: flex; gap: 12px; padding: 16px 18px; }
.step + .step { border-left: 1px solid var(--line); }
.st-n { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: var(--warn-50); color: var(--warn); border: 2px solid var(--warn-2); }
.s-ok .st-n { background: var(--ok); color: #fff; border-color: var(--ok); }
.st-b h3 { margin: 4px 0 6px; font-size: 15.5px; font-weight: 500; }
.st-b p { margin: 0 0 6px; color: var(--ink-2); font-size: 14px; }
.ropts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ropt { display: flex; gap: 11px; align-items: flex-start; border: 1.5px solid var(--line-2); border-radius: var(--r); padding: 13px; cursor: pointer; }
.ropt input { margin-top: 3px; accent-color: var(--prim); width: 17px; height: 17px; }
.ropt div { display: flex; flex-direction: column; }
.ropt span { color: var(--muted); font-size: 13px; }
.ropt.on { border-color: var(--prim); background: var(--prim-50); }
.ropt.dis { opacity: 0.6; cursor: not-allowed; }
.envio-k { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.envio-k div { background: var(--sheet-2); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; }
.envio-k b { font-size: 28px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.envio-k span { color: var(--muted); font-size: 13px; }
.preview { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.pv-h { display: flex; align-items: center; gap: 7px; padding: 9px 12px; background: var(--sheet-2); border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.preview pre { margin: 0; padding: 12px; font: 12.5px/1.6 var(--mono); overflow-x: auto; color: var(--ink); background: #fbfbfc; }
.envio-f { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.envio-f p { margin: 0; max-width: 620px; }

/* ——— Cargar remesa ——— */
.imp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: stretch; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sombra); }
.imp-t h2 { margin: 0 0 8px; font-size: 21px; font-weight: 500; line-height: 1.2; }
.imp-t p { margin: 0; color: var(--ink-2); }
.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; border: 2px dashed var(--teal-100); border-radius: var(--r-lg); background: var(--teal-50); color: var(--teal-700); padding: 30px 18px; cursor: pointer; min-height: 220px; transition: background-color 0.15s, border-color 0.15s; }
.dropzone:hover, .dropzone.over { border-color: var(--teal); background-color: #d9edee; }
.dropzone b { font-size: 16px; color: var(--ink); font-weight: 500; }
.dropzone span { color: var(--muted); font-size: 13px; }
.dropzone input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; opacity: 0; cursor: pointer; }
.dropzone.busy { cursor: progress; }
.spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--teal-100); border-top-color: var(--teal); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.rep-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rh-file { display: flex; align-items: center; gap: 12px; color: var(--ok); min-width: 0; }
.rh-file > div { display: flex; flex-direction: column; min-width: 0; }
.rh-file b { color: var(--ink); font-size: 16px; overflow-wrap: anywhere; font-weight: 500; }
.rh-file span { color: var(--muted); font-size: 13px; }
.rh-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.rep-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sombra); }
.rep-card { display: flex; flex-direction: column; padding: 16px 20px; }
.rep-card + .rep-card { border-left: 1px solid var(--line); }
.rep-card b { font-size: 36px; font-weight: 500; line-height: 1.05; font-variant-numeric: tabular-nums; }
.rep-card span { font-weight: 500; }
.rep-card small { color: var(--muted); }
.rep-card.t-ok b { color: var(--ok); }
.rep-card.t-warn b { color: var(--warn); }
.rep-card.t-bad b { color: var(--bad); }
.hallazgos { display: grid; gap: 8px; }
.hall { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); border-left: 4px solid var(--line-2); overflow: hidden; }
.hall.t-bad { border-left-color: var(--bad); }
.hall.t-warn { border-left-color: var(--warn-2); }
.hall.t-info { border-left-color: var(--info); }
.hall summary { list-style: none; display: grid; grid-template-columns: 96px minmax(0, 1fr) 18px; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; }
.hall summary::-webkit-details-marker { display: none; }
.hall summary b { font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.hall summary span { font-weight: 500; }
.hall summary .ic { transition: transform 0.15s; color: var(--muted); }
.hall[open] summary .ic { transform: rotate(90deg); }
.hall-b { padding: 0 16px 14px; }
.hall-b > p { margin: 0 0 8px; color: var(--ink-2); }

/* ——— Alta guiada ——— */
.wiz { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sombra); overflow: hidden; min-height: 520px; }
.wiz-steps { background: var(--sheet-2); border-right: 1px solid var(--line); padding: 18px 0; display: flex; flex-direction: column; }
.wiz-steps a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 18px; text-decoration: none; color: var(--muted); font-size: 14px; }
.wiz-steps a em { font-style: normal; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--sheet); }
.wiz-steps a.done { color: var(--ink-2); }
.wiz-steps a.done em { background: var(--ok); border-color: var(--ok); color: #fff; }
.wiz-steps a.on { color: var(--ink); font-weight: 500; background: var(--sheet); border-left: 3px solid var(--prim); padding-left: 15px; }
.wiz-steps a.on em { border-color: var(--prim); color: var(--prim); }
.wiz-steps a.dis { pointer-events: none; }
.wiz-body { padding: 22px 26px 24px; display: flex; flex-direction: column; gap: 14px; }
.wiz-body h2 { margin: 0; font-size: 20px; font-weight: 500; }
.wiz-body > p.lead { margin: -6px 0 4px; }
.wiz-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.wiz-foot .der { display: flex; gap: 8px; margin-left: auto; }
.existe { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r); background: var(--warn-50); border: 1px solid #f0dca0; border-left: 4px solid var(--warn-2); color: #573800; }
.existe > div { flex: 1; font-size: 14px; }
.existe b { display: block; }
.sug-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--prim-50); border: 1px solid var(--prim-100); border-radius: var(--r); padding: 14px 16px; }
.sug-cta .n { font: 500 30px/1 var(--mono); color: var(--prim); letter-spacing: 0.02em; }
.sug-cta .partes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sug-cta .partes span { font-size: 13px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px 8px; color: var(--ink-2); }
.sug-cta .partes span b { font-family: var(--mono); color: var(--prim); }
.resumen-alta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.resumen-alta div { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid var(--sheet-3); }
.resumen-alta span { font-size: 13px; color: var(--muted); }
.resumen-alta b { font-weight: 500; }
.hecho { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 26px 10px 10px; }
.hecho .ok-ring { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-50); color: var(--ok); display: grid; place-items: center; }
.hecho h2 { margin: 6px 0 0; }
.hecho p { margin: 0; color: var(--ink-2); max-width: 520px; }
.hecho .acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.lotes-prev { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.lotes-prev span { display: grid; place-items: center; height: 40px; border: 1px dashed var(--teal); border-radius: var(--r-sm); background: var(--teal-50); color: var(--teal-700); font-size: 13px; font-weight: 500; }
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.doc-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; background: var(--sheet); }
.doc-list li .ic { color: var(--muted); }
.doc-list li.ok .ic { color: var(--ok); }
.doc-list li b { font-weight: 500; display: block; }
.doc-list li span { font-size: 13px; color: var(--muted); }
.doc-list label { position: relative; overflow: hidden; }
.doc-list label input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; opacity: 0; cursor: pointer; }

/* ——— Facturación ——— */
.rem-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.rem-k { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rem-k div { background: var(--sheet-2); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; }
.rem-k b { font-size: 24px; font-weight: 500; line-height: 1.15; font-variant-numeric: tabular-nums; }
.rem-k span { color: var(--muted); font-size: 13px; }
.pasos-rem { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.paso-rem { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--sheet-2); }
.paso-rem em { font-style: normal; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--sheet); border: 2px solid var(--line-2); color: var(--muted); }
.paso-rem b { font-size: 13.5px; font-weight: 500; }
.paso-rem span { font-size: 13px; color: var(--muted); }
.paso-rem.done { background: var(--ok-50); border-color: #b9dfc6; }
.paso-rem.done em { background: var(--ok); border-color: var(--ok); color: #fff; }
.paso-rem.on { background: var(--sheet); border-color: var(--prim); box-shadow: inset 0 0 0 1px var(--prim); }
.paso-rem.on em { border-color: var(--prim); color: var(--prim); }
.paso-rem .btn { margin-top: auto; }
.fact-lineas { list-style: none; margin: 6px 0 0; padding: 0; }
.fact-lineas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--sheet-3); font-size: 14px; }
.fact-lineas li b { font-variant-numeric: tabular-nums; font-weight: 500; }
.fact-lineas li.tot { border-top: 2px solid var(--line-2); border-bottom: 0; font-weight: 500; }
.tarifa-tramos { display: grid; gap: 6px; }
.tramo { display: grid; grid-template-columns: 110px minmax(0, 1fr) 90px; gap: 10px; align-items: center; font-size: 14px; }
.tramo .tb { height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--teal-100), var(--teal)); }
.tramo b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }

/* ——— Contactos y conversaciones ——— */
.conv { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sombra); overflow: hidden; min-height: 560px; }
.conv-side { border-right: 1px solid var(--line); background: var(--sheet-2); display: flex; flex-direction: column; }
.conv-side h3 { margin: 0; padding: 12px 14px 6px; font-size: 13px; color: var(--muted); font-weight: 500; }
.conv-side a { display: flex; align-items: center; gap: 9px; padding: 9px 14px; text-decoration: none; color: var(--ink); font-size: 14.5px; }
.conv-side a:hover { background: var(--sheet-3); }
.conv-side a.on { background: var(--sheet); font-weight: 500; border-left: 3px solid var(--prim); padding-left: 11px; }
.conv-side a .badge { margin-left: auto; }
.conv-side .hash { color: var(--muted); font-weight: 500; }
.conv-main { display: flex; flex-direction: column; min-width: 0; }
.conv-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.conv-h b { font-size: 16px; font-weight: 500; }
.conv-h span { color: var(--muted); font-size: 13px; }
.conv-msgs { flex: 1; overflow: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; max-height: 560px; }
.msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; }
.msg .avatar { width: 36px; height: 36px; border-radius: 8px; font-size: 13px; }
.msg-h { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 13px; color: var(--muted); }
.msg-h b { color: var(--ink); font-weight: 500; font-size: 14.5px; }
.msg-b { font-size: 14.5px; color: var(--ink); margin-top: 2px; overflow-wrap: anywhere; }
.msg-ref { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 13px; text-decoration: none; color: var(--prim); background: var(--prim-50); border-radius: var(--r-sm); padding: 2px 8px; }
.msg-leido { font-size: 13px; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.msg-leido.ok { color: var(--ok); }
.conv-f { border-top: 1px solid var(--line); padding: 12px 18px; display: flex; flex-direction: column; gap: 8px; }
.conv-f textarea { border: 1px solid var(--line-2); border-radius: var(--r); padding: 9px 11px; min-height: 60px; resize: vertical; outline: 0; }
.conv-f textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-100); }
.conv-f .fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.conv-f .fila select { height: 36px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 8px; background: #fff; }
.conv-f .fila .btn { margin-left: auto; }

/* ——— Tablero de gerencia ——— */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sombra); text-decoration: none; color: var(--ink); }
.kpi-top { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; }
.kpi-ic { color: var(--prim); }
.kpi-v { font-size: 30px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 13px; color: var(--muted); }
.kpi-links { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; }
.kpi-links a { color: var(--prim); font-weight: 500; text-decoration: none; }
.kpi-links a:hover { text-decoration: underline; }
.kpi.k-ok .kpi-v { color: var(--ok); }
.kpi.k-warn .kpi-v { color: var(--warn); }
.kpi.k-bad .kpi-v { color: var(--bad); }
.kpi.k-teal .kpi-v { color: var(--teal); }
.hbar { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hbar li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 90px; gap: 10px; align-items: center; font-size: 14px; }
.hbar .hb { height: 12px; border-radius: 6px; background: var(--gray-50); overflow: hidden; }
.hbar .hb i { display: block; height: 100%; background: var(--teal); }
.hbar b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.hbar .prim i { background: var(--prim); }
.autoriz { display: grid; gap: 8px; }
.autoriz-i { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--sheet); border-left: 4px solid var(--warn-2); }
.autoriz-i.ok { border-left-color: var(--ok); }
.autoriz-i.no { border-left-color: var(--bad); }
.autoriz-i b { font-weight: 500; }
.autoriz-i p { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-2); }
.autoriz-i small { color: var(--muted); font-size: 13px; }
.autoriz-i .acts { display: flex; gap: 6px; }

/* ——— Configuración ——— */
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cfg-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none; color: var(--ink); box-shadow: var(--sombra); }
.cfg-card:hover { border-color: var(--prim); }
.cfg-card .ic { color: var(--prim); margin-top: 2px; }
.cfg-card b { display: block; font-weight: 500; }
.cfg-card span { font-size: 13.5px; color: var(--muted); }
.acc-cod { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.tbl .cod-n { font-family: var(--mono); font-weight: 500; background: var(--sheet-3); border-radius: var(--r-sm); padding: 1px 7px; }
.periodo-lista li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.periodo-lista { list-style: none; margin: 0; padding: 0; }
.periodo-lista li:last-child { border-bottom: 0; }
.periodo-lista b { font-weight: 500; }

/* ——— App de campo ——— */
.campo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }
.phone-wrap { position: sticky; top: calc(var(--nav-h) + 16px); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.phone { width: 372px; height: min(780px, calc(100vh - 110px)); min-height: 600px; background: #1c2228; border-radius: 48px; padding: 11px; box-shadow: 0 0 0 2px #3a434c inset, 0 30px 60px -24px rgba(19, 33, 46, 0.55); position: relative; }
.phone-notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; background: #1c2228; border-radius: 20px; z-index: 3; }
.phone-screen { width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: var(--canvas); position: relative; }
.phone-cap { color: var(--muted); font-size: 13px; display: flex; gap: 6px; align-items: center; margin: 0; }
.campo-info { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ci h2 { margin: 0 0 6px; font-size: 20px; font-weight: 500; line-height: 1.2; }
.ci p { margin: 0; color: var(--ink-2); }
.anticipo { display: flex; align-items: center; gap: 10px; background: #3d4148; color: #fff; border-radius: var(--r); padding: 10px 14px; font-size: 14px; }
.anticipo .ic { color: #f2c94c; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #2fa865; box-shadow: 0 0 0 0 rgba(47, 168, 101, 0.6); animation: pulse 1.8s infinite; display: inline-block; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(47, 168, 101, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 168, 101, 0); } }
.vv-av { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-2); margin-bottom: 12px; }
.vv-list { list-style: none; margin: 10px 0 0; padding: 0; }
.vv-list li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--sheet-3); cursor: pointer; animation: fade 0.4s ease; }
.vv-t { font-size: 13px; color: var(--muted); }
.vv-d { display: flex; flex-direction: column; min-width: 0; }
.vv-d b { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vv-d small { color: var(--muted); font-size: 13px; }
.vv-k { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.vv-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 14px; color: var(--ink-2); flex-wrap: wrap; }

body.app-full { background: var(--canvas); overflow: hidden; }
.app-solo { height: 100vh; height: 100dvh; }
.ap { height: 100%; display: flex; flex-direction: column; position: relative; background: var(--canvas); color: var(--ink); font-size: 15.5px; overflow: hidden; }
.ap-bar { flex: none; display: flex; align-items: center; gap: 9px; padding: 50px 14px 12px; background: var(--prim); color: #fff; }
.app-solo .ap-bar { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }
.ap-ib { background: rgba(255, 255, 255, 0.16); border: 0; color: #fff; width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; }
.ap-logo .logo { width: 30px; height: 30px; display: block; }
.ap-title { font-size: 17px; font-weight: 500; flex: 1; }
.ap-net { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: var(--r); padding: 7px 10px; font-weight: 500; font-size: 13px; white-space: nowrap; }
.ap-net.on { background: rgba(255, 255, 255, 0.18); color: #fff; }
.ap-net.off { background: var(--warn-2); color: #2b1b00; }
.ap-net.sync { background: rgba(255, 255, 255, 0.28); color: #fff; }
.ap-net em { font-style: normal; background: #fff; color: #2b1b00; border-radius: 2px; padding: 0 6px; font-size: 13px; }
.ap-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.ap-pad { padding: 16px 14px 22px; display: flex; flex-direction: column; gap: 12px; }
/* Baja 10 (revisión): el gap chico es sólo de la pantalla de inicio con la tarjeta «Mi día» arriba
   (`.ap-pad-inicio`, agregado por `js/campo.js` únicamente ahí) — el resto de la aplicación (cuenta,
   lista, terminar el día) usa la separación de siempre. */
.ap-pad-inicio { gap: 6px; }
.ap-hello small { color: var(--muted); font-size: 13px; font-weight: 500; }
.ap-hello h2 { margin: 2px 0 0; font-size: 30px; font-weight: 500; line-height: 1; }
.ap-hello p { margin: 2px 0 0; color: var(--ink-2); }
.ap-ring { position: relative; display: grid; place-items: center; margin: 4px 0; }
.ap-ring-t { position: absolute; text-align: center; display: flex; flex-direction: column; }
.ap-ring-t b { font-size: 38px; font-weight: 500; line-height: 1; }
.ap-ring-t span { color: var(--ink-2); font-size: 13.5px; font-weight: 500; }
.ap-stats { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); }
.ap-stats div { padding: 10px; text-align: center; display: flex; flex-direction: column; }
.ap-stats div + div { border-left: 1px solid var(--line); }
.ap-stats b { font-size: 24px; font-weight: 500; line-height: 1.1; }
.ap-stats span { font-size: 13px; color: var(--muted); }
.ap-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; border-radius: var(--r); border: 1.5px solid var(--prim); background: var(--sheet); font-weight: 500; font-size: 16px; color: var(--prim); width: 100%; text-decoration: none; }
.ap-btn.primary { background: var(--prim); border-color: var(--prim); color: #fff; }
.ap-btn.dis { background: #b9a9b4; border-color: #b9a9b4; }
.ap-btn.shake { animation: shake 0.35s; }
@keyframes shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.ap-done { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; border-radius: var(--r); background: var(--ok-50); color: var(--ok); font-weight: 500; font-size: 16px; }
.ap-sync { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border-radius: var(--r); font-size: 14px; border-left: 4px solid transparent; }
.ap-sync .ic { margin-top: 1px; }
.ap-sync.ok { background: var(--ok-50); color: var(--ok); border-left-color: var(--ok); }
.ap-sync.off { background: var(--warn-50); color: #573800; border-left-color: var(--warn-2); }
.ap-sync.on { background: var(--info-50); color: var(--info); border-left-color: var(--info); }
/* «Mi día» (Etapa 2): tarjeta compacta arriba de todo lo demás, así entra en un teléfono de 360×640
   junto con el botón principal sin desplazar (medido: sin achicar, el anillo de la ruta y esta tarjeta
   juntos empujaban el botón fuera de la pantalla). */
.dia-card { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.dia-card .ap-hello { margin: 0; }
.dia-card .ap-hello small { font-size: 13px; }
.dia-card .ap-hello h2 { font-size: 18px; margin-top: 1px; }
.dia-card .ap-hello p { margin-top: 1px; font-size: 13px; }
.dia-pend { align-items: center; padding: 9px 10px; }
.dia-pend > div { display: flex; flex-direction: column; gap: 1px; }
.dia-pend small { color: inherit; opacity: 0.8; font-size: 13px; }
.dia-n { font-size: 24px; font-weight: 500; line-height: 1; }
.dia-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dia-stats div { padding: 6px 4px; flex-direction: row; align-items: center; gap: 4px; }
.dia-stats b { font-size: 16px; flex: 0 0 auto; min-width: 30px; white-space: nowrap; }
.dia-stats span { font-size: 13px; line-height: 1.15; flex: 1; }
/* Con la tarjeta arriba, el saludo de la ruta (nombre, barrio) pasa a ser información secundaria: se
   achica sólo cuando la precede «Mi día», sin tocar esa misma pantalla en las demás rutas. */
.dia-card ~ .ap-hello h2 { font-size: 24px; }
.dia-card ~ .ap-hello p { margin-top: 0; }
.dia-card ~ .ap-ring .ap-ring-t b { font-size: 26px; }
.dia-card ~ .ap-ring .ap-ring-t span { font-size: 13px; }
.ap-rutas small { color: var(--muted); font-weight: 500; font-size: 13px; }
.ap-rutas div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ap-rutas button { border: 1px solid var(--line-2); background: var(--sheet); border-radius: var(--r); padding: 6px 12px; font-weight: 500; font-size: 14px; }
.ap-rutas button.on { background: var(--prim); color: #fff; border-color: var(--prim); }
.ap-link { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--prim); font-weight: 500; text-decoration: none; padding: 8px; }
.ap-empty { text-align: center; color: var(--muted); font-size: 14px; padding: 16px; margin: 0; }
.ap-empty-big { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 14px; color: var(--muted); }
.ap-empty-big b { color: var(--ink); font-size: 17px; }
.ap-search { display: flex; align-items: center; gap: 8px; margin: 12px 14px 8px; background: var(--sheet); border: 1.5px solid var(--line-2); border-radius: var(--r); padding: 0 12px; height: 46px; color: var(--muted); }
.ap-search input { border: 0; outline: 0; width: 100%; font-size: 16px; background: transparent; min-width: 0; }
.ap-tabs { display: flex; gap: 6px; margin: 0 14px 8px; }
.ap-tabs button { flex: 1; border: 1px solid var(--line-2); background: var(--sheet); border-radius: var(--r); padding: 8px 4px; font-weight: 500; font-size: 14px; }
.ap-tabs button em { font-style: normal; color: var(--muted); }
.ap-tabs button.on { background: var(--prim); color: #fff; border-color: var(--prim); }
.ap-tabs button.on em { color: #e6d6e1; }
.ap-list { display: flex; flex-direction: column; padding: 0 14px 18px; gap: 6px; }
.ap-ots h3 { margin: 14px 14px 8px; font-size: 16px; }
.ap-ot { display: flex; flex-direction: column; gap: 4px; background: var(--sheet); border: 1px solid var(--line); border-left: 4px solid var(--info); border-radius: var(--r); padding: 10px 12px; }
.ap-ot > b { font-size: 16px; }
.ap-ot-estado { align-self: flex-start; color: var(--prim); background: var(--prim-50); border-radius: 999px; padding: 2px 8px; font-size: 13px; font-weight: 500; }
.ap-ot .ap-btn { margin-top: 6px; }
.ap-item { display: grid; grid-template-columns: 54px minmax(0, 1fr) 14px; align-items: center; gap: 10px; background: var(--sheet); border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: var(--r); padding: 10px 12px; text-align: left; }
.ap-sec { font-size: 15px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.ap-it { display: flex; flex-direction: column; min-width: 0; }
.ap-it b { font-size: 17px; }
.ap-it span { color: var(--ink-2); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-item .dot { margin: 0; width: 11px; height: 11px; }
.ap-card { background: var(--sheet); border: 1px solid var(--line); border-top: 4px solid var(--teal); border-radius: var(--r); padding: 12px 14px; }
.ap-c1 { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); font-weight: 500; }
.ap-med { margin: 4px 0; }
.ap-med small { display: block; color: var(--muted); font-size: 13px; font-weight: 500; }
.ap-med b { font-size: 28px; font-weight: 500; letter-spacing: 0.02em; color: var(--prim); }
.ap-dir { font-weight: 500; font-size: 17px; }
.ap-nom { color: var(--muted); font-size: 14px; }
.ap-info { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r); background: var(--sheet); }
.ap-info div { padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; border-bottom: 1px solid var(--line); }
.ap-info div:nth-child(odd) { border-right: 1px solid var(--line); }
.ap-info div:nth-last-child(-n + 2) { border-bottom: 0; }
.ap-info span { font-size: 13px; color: var(--muted); font-weight: 500; }
.ap-info b { font-size: 19px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ap-info .odo { font-size: 15px; align-self: flex-start; }
/* Últimos 6 períodos de la ficha: filas de texto con una barra de CSS, sin imágenes ni librerías. */
.ap-hist { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); padding: 0 10px; }
.ap-pad-cuenta { gap: 8px; }
.ap-pad-cuenta > .ap-card { padding: 8px 12px; }
.ap-pad-cuenta > .ap-info { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ap-pad-cuenta > .ap-info > div { padding: 8px 6px; border-bottom: 0; border-right: 1px solid var(--line); }
.ap-pad-cuenta > .ap-info > div:last-child { border-right: 0; }
.ap-hist summary { cursor: pointer; font-size: 13px; min-height: 40px; align-content: center; overflow-wrap: anywhere; }
.ap-ot-propia > summary { cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-height: 44px; }
.ap-ot-abrir { color: var(--prim); text-decoration: underline; }
.ap-ot-propia[open] > summary .ap-ot-abrir { display: none; }
.ap-ot-datos { display: grid; gap: 8px; overflow-wrap: anywhere; }
.ap-ot-datos span { font-size: 13px; color: var(--muted); }
.ap-ot-datos p { margin: 0; white-space: pre-wrap; }
.ap-aviso-orden { border: 1px solid var(--warn); border-left: 4px solid var(--warn); border-radius: var(--r); padding: 10px; background: var(--warn-50); }
.ap-aviso-orden > b { display: block; margin-bottom: 8px; }
.ap-marca-orden { color: var(--warn); font-weight: 600; }
.ap-hist ul { list-style: none; margin: 4px 0 0; padding: 0; }
.ap-hist li { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); }
.ap-hist li:last-child { border-bottom: 0; }
.ap-hist-p { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ap-hist-b { display: block; height: 8px; background: var(--sheet-2); border-radius: 4px; overflow: hidden; }
.ap-hist-b i { display: block; height: 100%; background: var(--muted); }
.ap-hist li.hoy .ap-hist-b i { background: var(--ok); }
.ap-hist li.hoy { font-weight: 600; }
.ap-hist b { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.ap-hist small { grid-column: 1 / -1; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.ap-hist-vacio { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.ap-input { display: flex; flex-direction: column; gap: 4px; }
.ap-input span, .ap-obs span, .ap-sub { font-size: 13px; font-weight: 500; color: var(--muted); }
.ap-input input { height: 72px; border: 4px solid #30363d; border-radius: var(--r); background: linear-gradient(180deg, #0c0f12 0%, #272d33 45%, #272d33 55%, #0c0f12 100%); font: 600 38px/1 var(--mono); text-align: center; letter-spacing: 0.3em; outline: 0; color: #f3f0e8; width: 100%; caret-color: var(--teal); }
.ap-input input::placeholder { color: #5a6470; }
.ap-input input:focus { border-color: var(--teal); }
.ap-res { border-radius: var(--r); padding: 11px 13px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; border: 1px solid transparent; border-left-width: 4px; }
.ap-res-k { font-size: 30px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.ap-res-k small { font-size: 15px; font-weight: 500; }
.ap-res-t { font-size: 14px; font-weight: 500; line-height: 1.35; }
.ap-res .ap-check { grid-column: 1 / -1; }
/* «Dígito de más»: dos botones, uno al lado del otro, en vez del número de consumo. */
.ap-digito { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 4px; }
.ap-digito .ap-btn { min-height: 46px; font-size: 14.5px; }
.r-ok { background: var(--ok-50); color: var(--ok); border-color: #bcdcc5; }
.r-warn { background: var(--warn-50); color: #5f3c00; border-color: #f0dca0; }
.r-bad { background: var(--bad-50); color: var(--bad); border-color: #ebc0bc; }
.r-info { background: var(--info-50); color: var(--info); border-color: #c5d3ef; }
.r-violet { background: var(--violet-50); color: var(--violet); border-color: #d5cbee; }
.r-muted { background: var(--sheet); color: var(--muted); border-color: var(--line); }
.ap-check { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; color: var(--ink); background: #fff; border-radius: var(--r); padding: 9px 10px; margin-top: 4px; }
.ap-check input { width: 20px; height: 20px; accent-color: var(--prim); flex: none; }
.ap-cods { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ap-cod { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); background: var(--sheet); border-radius: var(--r); padding: 7px 9px; text-align: left; min-height: 48px; }
.ap-cod b { font: 500 14px var(--mono); background: var(--ink-2); color: #fff; min-width: 38px; text-align: center; border-radius: 3px; padding: 2px 0; }
.ap-cod span { font-size: 13px; line-height: 1.25; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ap-cod.sug { border-style: dashed; border-color: var(--teal); }
.ap-cod.on { background: var(--teal-50); border-color: var(--teal); border-style: solid; box-shadow: inset 0 0 0 1px var(--teal); }
.ap-cod.on b { background: var(--teal); }
.ap-cod.more { grid-column: 1 / -1; justify-content: center; font-weight: 500; color: var(--prim); font-size: 14px; }
.ap-obs { display: flex; flex-direction: column; gap: 4px; }
.ap-obs textarea { border: 1px solid var(--line-2); border-radius: var(--r); padding: 10px; font-size: 16px; resize: none; outline: 0; background: var(--sheet); }
.ap-obs textarea:focus { border-color: var(--teal); }
.ap-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ap-foto { position: relative; display: flex; align-items: center; gap: 8px; background: var(--sheet); border: 1.5px dashed var(--line-2); border-radius: var(--r); padding: 8px 10px; font-weight: 500; font-size: 14px; color: var(--prim); min-height: 58px; cursor: pointer; overflow: hidden; }
.ap-foto img { width: 40px; height: 40px; border-radius: 2px; object-fit: cover; }
/* La fotografía que ya subió y salió del teléfono: la casilla dice dónde está en vez de
   quedar vacía, y sigue sirviendo para sacar otra (A2). */
.ap-foto-of { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 40px; color: var(--muted); text-align: center; }
.ap-foto-of small { font-size: 9px; line-height: 1.15; }
.ap-foto input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; opacity: 0; cursor: pointer; }
.ap-gps { display: flex; align-items: center; gap: 8px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; font-size: 13px; font-weight: 500; color: var(--ok); min-height: 58px; }
.ap-gps span { display: flex; flex-direction: column; line-height: 1.25; }
.ap-gps small { color: var(--muted); font-weight: 400; font-size: 13px; }
.ap-save { position: sticky; bottom: 0; padding: 10px 0 2px; background: linear-gradient(180deg, rgba(242, 243, 245, 0), var(--canvas) 30%); }
.ap-hecha { background: var(--sheet); border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ap-h1 { color: var(--ok); font-weight: 500; display: flex; align-items: center; gap: 6px; font-size: 15px; }
.ap-h2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ap-h2 div { display: flex; flex-direction: column; background: var(--sheet-2); border-radius: var(--r-sm); padding: 7px 9px; }
.ap-h2 span { font-size: 13px; color: var(--muted); }
.ap-h2 b { font-size: 19px; font-weight: 500; }
.ap-alerts { display: flex; flex-wrap: wrap; gap: 4px; }
.ap-thumb.big { width: 100%; max-height: 180px; object-fit: cover; border-radius: var(--r); }
.ap-o { margin: 0; color: var(--ink-2); font-style: italic; }
.ap-toast { position: absolute; left: 14px; right: 14px; bottom: 16px; display: flex; align-items: center; gap: 8px; background: #2b3036; color: #fff; border-left: 4px solid var(--ok); border-radius: var(--r); padding: 12px 14px; font-weight: 500; font-size: 15px; animation: fade 0.2s ease; transition: opacity 0.3s; z-index: 10; }
.ap-toast.t-bad { border-left-color: #f08a7e; }
.ap-toast.t-info { border-left-color: #8fb4f0; }
.ap-toast.out { opacity: 0; }
/* Lo que falta para poder guardar, y la foto que el código exige: mismos tokens que el resto de la app. */
.ap-falta { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border-radius: var(--r); background: var(--warn-50); color: #573800; border-left: 4px solid var(--warn-2); font-size: 14px; }
.ap-falta.lock { background: var(--sheet-3); color: var(--ink-2); border-left-color: var(--muted); }
.ap-falta b { display: block; font-weight: 500; }
.ap-falta ul { margin: 4px 0 0; padding-left: 18px; }
.ap-falta li + li { margin-top: 3px; }
.ap-foto.req { border-color: var(--warn-2); border-style: solid; color: var(--warn); background: var(--warn-50); }
/* Aviso de versión nueva del cascarón: se aplica cuando el lecturista quiere, nunca a mitad de una lectura. */
.ap-nueva { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: var(--r); background: var(--info-50); color: var(--info); border-left: 4px solid var(--info); font-size: 14px; }
.ap-nueva b { font-weight: 500; }
.ap-nueva button { flex: none; border: 1px solid var(--info); background: var(--info); color: #fff; border-radius: var(--r); padding: 8px 12px; font-weight: 500; font-size: 14px; }
/* Salto a una secuencia del recorrido: la «Posición» de la aplicación del organismo. */
.ap-salto { display: flex; align-items: center; gap: 8px; margin: 0 14px 8px; color: var(--muted); }
.ap-salto input { flex: 1; min-width: 0; height: 42px; border: 1.5px solid var(--line-2); border-radius: var(--r); background: var(--sheet); padding: 0 10px; font: 500 15px var(--mono); outline: 0; }
.ap-salto input:focus { border-color: var(--teal); }
.ap-salto button { flex: none; height: 42px; padding: 0 18px; border: 1.5px solid var(--prim); background: var(--prim); color: #fff; border-radius: var(--r); font-weight: 500; font-size: 15px; }
/* Fotos de la jornada, con hora y medidor, y el envío de a una. */
.ap-gal { display: flex; flex-direction: column; gap: 8px; }
.ap-gal-h { margin: 0; color: var(--muted); font-size: 13px; font-weight: 500; }
.ap-gal-i { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-auto-rows: min-content; gap: 6px 10px; align-items: start; background: var(--sheet); border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: var(--r); padding: 8px 10px; }
.ap-gal-i img { grid-column: 1; width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); }
/* La fotografía que quedó en la oficina: el lugar de la imagen dice dónde está, en vez de un recuadro
   vacío o una imagen rota (A1, el teléfono ya no baja las fotos). */
.ap-gal-sin { grid-column: 1; width: 72px; min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r-sm); background: var(--sheet-2); color: var(--muted); padding: 6px 4px; }
.ap-gal-sin span { display: block; font-size: 13px; font-weight: 500; line-height: 1.25; }
.ap-gal-sin small { display: block; font-size: 13px; font-weight: 400; opacity: .85; }
/* Corrección pedida a la Jefatura (5-oct-2026): el estado se lee de un vistazo, con color y con palabras. */
.ap-pedido { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: var(--r); background: var(--warn-50); border-left: 4px solid var(--warn-2); font-size: 14px; }
.ap-pedido.p-aprobada { background: var(--ok-50, #e8f5ec); border-left-color: var(--ok); }
.ap-pedido.p-rechazada { background: var(--bad-50, #fdecea); border-left-color: var(--bad, #c0392b); }
.ap-pedido small { opacity: .8; }
.ap-hecha .ap-gal-sin { width: auto; margin-top: 8px; flex-direction: row; justify-content: flex-start; gap: 8px; text-align: left; padding: 8px 10px; }
.ap-gal-d { grid-column: 2; grid-row: 1 / -1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ap-gal-d b { font-size: 17px; font-weight: 500; }
.ap-gal-d small { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-gal-d span { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; }
.ap-gal-d span.ok { color: var(--ok); }
.ap-gal-d span.esp { color: var(--warn); }
.ap-gal-d span.sub { color: var(--info); }
.ap-gal-d button { align-self: flex-start; margin-top: 4px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line-2); background: var(--sheet-2); color: var(--prim); border-radius: var(--r); padding: 7px 11px; font-weight: 500; font-size: 13.5px; }
/* Cambio de lecturista en el mismo teléfono. */
.ap-salir { background: var(--sheet); border: 1px solid var(--line); border-left: 4px solid var(--prim); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ap-salir b { font-weight: 500; font-size: 16px; }
.ap-salir p { margin: 0; color: var(--ink-2); font-size: 14px; }
.ap-salir div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nube-badge, .nube-ind { flex: 0 0 auto; }
.nube-badge .nb-med, .nube-badge .nb-short { display: none; }

/* ——— Pantallas angostas ——— */
@media (max-width: 1599px) {
  .o-empresa { display: none; }
}
@media (max-width: 1499px) {
  .nube-badge .nb-full { display: none; }
  .nube-badge .nb-med { display: inline; }
}
@media (max-width: 1399px) {
  .nube-ind span { display: none; }
  .nube-ind { padding: 4px; }
}
@media (max-width: 1280px) {
  .pc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lh-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; }
  .pasos-rem { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1279px) {
  .nube-badge .nb-med { display: none; }
  .nube-badge .nb-short { display: inline; }
  .o-cp .o-search { display: none; }
  .o-search-ico { display: inline-grid; flex: 0 0 auto; }
}
@media (max-width: 1100px) {
  .grid-main, .grid-2, .grid-3, .ruta-grid, .o-form-wrap { grid-template-columns: minmax(0, 1fr); }
  .campo { grid-template-columns: minmax(0, 1fr); }
  .phone-wrap { position: static; }
  .o-menu > button, .o-nav-link { padding: 0 8px; font-size: 14px; }
  .kanban { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); overflow-x: visible; padding-bottom: 0; scroll-snap-type: none; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step + .step { border-left: 0; border-top: 1px solid var(--line); }
  .imp-hero { grid-template-columns: minmax(0, 1fr); }
  .roles { grid-template-columns: minmax(0, 1fr); }
  .acct-grid { grid-template-columns: minmax(0, 1fr); }
  .acct-grid .w2 { grid-column: auto; }
  .o-fields { grid-template-columns: minmax(0, 1fr); }
  .wiz { grid-template-columns: minmax(0, 1fr); }
  .wiz-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px; gap: 4px; }
  .wiz-steps a { grid-template-columns: 26px minmax(0, 1fr); padding: 8px 10px; white-space: normal; border-radius: var(--r); }
  .wiz-steps a.on { border-left: 0; padding-left: 10px; background: var(--prim-50); }
  .wiz-steps a em { width: 24px; height: 24px; font-size: 13px; }
  .conv { grid-template-columns: minmax(0, 1fr); }
  .conv-side { border-right: 0; border-bottom: 1px solid var(--line); }
  .conv-side a { display: inline-flex; }
  .conv-side .lista { display: flex; flex-wrap: wrap; }
  .rem-k { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .o-nav-menus { display: none; }
  .o-nav-burger { display: inline-grid; }
  .o-nav.menu-open .o-nav-menus { display: flex; position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; background: var(--sheet); border-bottom: 1px solid var(--line); box-shadow: var(--sombra-2); padding: 8px 0; z-index: 45; max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h)); overflow: auto; }
  .o-nav.menu-open .o-menu { flex-direction: column; }
  .o-nav.menu-open .o-menu > button, .o-nav.menu-open .o-nav-link { padding: 11px 18px; justify-content: flex-start; border-bottom: 0; }
  .o-nav.menu-open .o-menu.on > button { color: var(--prim); }
  .o-nav.menu-open .o-dd { position: static; display: block; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 6px 18px; }
  .o-cp { padding: 10px 16px; }
  .o-cp-r { margin-left: 0; width: 100%; }
  .o-search { min-width: 0; flex: 1; }
  .main { padding: 16px 16px 56px; }
  .pie { padding: 0 16px 24px; }
  .lec-head, .pc-intro, .ruta-head, .rem-head { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lh-act { flex-direction: row; flex-wrap: wrap; }
  .rh-st { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .reglas-f { position: static; width: auto; margin-top: 10px; box-shadow: none; }
  .etapas { grid-template-columns: minmax(0, 1fr); }
  .et, .et + .et { padding: 16px 0 12px; border-left: 0; }
  .et + .et { border-top: 1px solid var(--line); }
  .ciclo-m3 { align-items: flex-start; }
  .o-home-in { padding: 30px 16px 40px; }
  .o-apps { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 20px 8px; }
  .o-app { width: 96px; }
  .o-app-ic { width: 68px; height: 68px; border-radius: 16px; }
  .o-app-ic svg { width: 38px; height: 38px; }
  .o-hoy { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1099px) and (min-width: 981px) {
  .o-nav-right .nube-badge, .o-nav-right .o-nav-ib, .o-nav-right .o-act { display: none; }
}
@media (max-width: 720px) {
  .o-user .u-n { display: none; }
  .prueba span { display: none; }
  .pc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles4, .envio-k, .ropts, .kpis, .rem-k { grid-template-columns: minmax(0, 1fr); }
  .rep-cards { grid-template-columns: minmax(0, 1fr); }
  .rep-card + .rep-card { border-left: 0; border-top: 1px solid var(--line); }
  .lh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row2, .row3, .doc-dl, .est, .resumen-alta { grid-template-columns: minmax(0, 1fr); }
  .dw-reading { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ciclo { padding: 16px; }
  .ciclo-h h2 { font-size: 24px; }
  .ciclo-m3 .odo { font-size: 20px; }
  .et-v { font-size: 34px; }
  .acct { padding: 16px; }
  .acct-n { font-size: 22px; }
  .acct-actions { width: 100%; }
  .acct-actions .btn { flex: 1 1 calc(50% - 8px); }
  .crow { grid-template-columns: minmax(0, 1fr) 18px; }
  .cr-tags { grid-column: 1; justify-content: flex-start; }
  .cr-go { grid-row: 1 / span 2; grid-column: 2; }
  .search-hero { padding: 18px 16px 16px; }
  .sh-text h2 { font-size: 19px; }
  .big-search { height: 50px; }
  .big-search input { font-size: 16px; }
  .normas li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .normas .ic { display: none; }
  .codlist li { grid-template-columns: 36px minmax(0, 1fr) 44px; }
  .cl-bar { display: none; }
  .catlist { grid-template-columns: minmax(0, 1fr); }
  .banner-planilla { flex-wrap: wrap; }
  .phone { width: min(372px, 100%); }
  .dup, .existe, .sug-cta { flex-wrap: wrap; grid-template-columns: minmax(0, 1fr); }
  .hall summary { grid-template-columns: 74px minmax(0, 1fr) 18px; }
  .vv-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .vv-t { grid-column: 1 / -1; }
  .doc { padding: 18px 16px; }
  .doc-h { flex-direction: column; }
  .doc-t { text-align: left; }
  #toasts { left: 16px; right: 16px; align-items: stretch; }
  .o-smart a, .o-smart button { min-width: 0; flex: 1 1 45%; }
  .o-fields > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .o-status span { padding: 0 10px 0 16px; font-size: 13px; }
  .pasos-rem { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hbar li { grid-template-columns: minmax(0, 1fr) 70px; }
  .hbar li .hb { grid-column: 1 / -1; }
  .autoriz-i { grid-template-columns: minmax(0, 1fr); }
  .wiz-body { padding: 16px; }
}
@media (max-width: 480px) {
  .acct-grid { grid-template-columns: minmax(0, 1fr); }
  .acct-grid .w2 { grid-column: auto; }
  .lh-ring { justify-self: center; }
  .med-lect { flex-direction: column; align-items: flex-start; }
  .o-nav-app span { display: none; }
  .o-cp h1 { white-space: normal; font-size: 17px; }
}

/* ——— Informe interno a sectores (21-sep) ——— */
.informe-alcance { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #f6f8fa; }
.informe-alcance b { font-size: 18px; color: var(--prim); }
.informe-alcance span { color: var(--muted); line-height: 1.45; }
.informe-papel { max-width: 1180px; margin: 0 auto; }
.informe-documento { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 30px; }
.informe-documento > header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-end; border-bottom: 2px solid var(--prim); padding-bottom: 14px; margin-bottom: 18px; }
.informe-documento > header b { font-size: 19px; }
.informe-documento > header span { font-weight: 600; color: var(--prim); text-align: right; }
.informe-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.informe-meta div { display: grid; gap: 3px; }
.informe-meta small { color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.informe-documento h2 { font-size: 13px; letter-spacing: .08em; color: var(--muted); margin: 22px 0 8px; }
.informe-motivo { white-space: pre-wrap; line-height: 1.55; }
.informe-cuentas { max-height: none; }
.informe-cuentas .tbl { min-width: 920px; font-size: 13px; }
.informe-mas { font-weight: 600; color: var(--muted); }
.informe-documento > footer { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 12px; font-size: 13px; }
.informe-documento > footer p { margin: 5px 0; }
.informe-respuesta { margin-top: 16px; }
.informe-acciones { max-width: 1180px; margin: 14px auto 0; justify-content: flex-end; }

@media (max-width: 720px) {
  .informe-documento { padding: 18px; }
  .informe-documento > header { align-items: flex-start; flex-direction: column; }
  .informe-documento > header span { text-align: left; }
  .informe-meta { grid-template-columns: 1fr; }
}

/* ——— Impresión: sólo el documento abierto ——— */
@page { size: A4; margin: 16mm 15mm; }
@media print {
  body { background: #fff; }
  body:not(.imprimiendo-informe) > *:not(#modal-root) { display: none !important; }
  #modal-root, #modal-root.open { display: block !important; position: static; }
  body.imprimiendo-informe > *:not(#app) { display: none !important; }
  body.imprimiendo-informe #app > .o-nav, body.imprimiendo-informe #app > .o-cp,
  body.imprimiendo-informe #app .o-nav, body.imprimiendo-informe #app .o-cp,
  body.imprimiendo-informe #app .banner, body.imprimiendo-informe #app .pie { display: none !important; }
  body.imprimiendo-informe .main { padding: 0 !important; max-width: none; }
  body.imprimiendo-informe .informe-documento { border: 0; border-radius: 0; padding: 0; }
  body.imprimiendo-informe .informe-respuesta { border: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
  .modal-back, .modal-head, .no-print { display: none !important; }
  .modal { position: static; transform: none; width: auto; max-height: none; box-shadow: none; border: 0; border-radius: 0; animation: none; overflow: visible; }
  .modal-body { padding: 0; }
  .doc { border: 0; padding: 0; }
  .informe-cuentas { overflow: visible; }
  .informe-cuentas .tbl { min-width: 0; font-size: 8pt; }
  .informe-cuentas tr { break-inside: avoid; }
  .informe-lectura { font-size: 10pt; page: lectura; }
  .informe-lectura h2, .informe-lectura h3 { break-after: avoid; }
  .informe-lectura tr, .informe-lectura .acta, .informe-lectura svg { break-inside: avoid; }
  @page lectura { size: A4; margin: 15mm; }
  .cc-certificado { break-inside: avoid; font-size: 11pt; line-height: 1.5; overflow-wrap: anywhere; }
}

/* ——— Acceso y modo compartido ——— */
.acceso { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; background: linear-gradient(180deg, #f2f3f5, #e9ecef); }
.acceso-card { width: 100%; max-width: 560px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); padding: 24px 26px 20px; }
.acceso-card h1 { font-size: 22px; font-weight: 500; margin: 14px 0 6px; }
.acceso-card .lead { margin: 0 0 14px; }
.acceso-h { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.acceso-h .logo { width: 40px; height: 40px; }
.acceso-h b { display: block; font-size: 16px; font-weight: 500; }
.acceso-h span { color: var(--muted); font-size: 13px; }
.acceso-esp { display: flex; align-items: center; gap: 12px; padding: 28px 4px; color: var(--muted); font-size: 15px; }
.acceso-alt { text-align: center; color: var(--muted); font-size: 14px; margin: 10px 0 0; }
.acceso-alt a { color: var(--prim); font-weight: 500; }
.acceso-pie { color: var(--muted); font-size: 13px; text-align: center; max-width: 560px; margin: 14px 0 0; }
/* B1: ingreso del lecturista, en el registro de la app del teléfono — letra grande, una sola columna. */
.acceso-campo label { font-size: 16px; gap: 8px; }
.acceso-campo input { height: 52px; font-size: 20px; text-align: left; }
.acceso-campo .btn { height: 52px; font-size: 17px; }
.btn-ancho { width: 100%; justify-content: center; }
.nube-badge, .nube-ind { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; border-radius: var(--r-sm); padding: 2px 8px; margin-right: 4px; white-space: nowrap; font-weight: 500; }
.nube-badge { color: var(--teal); background: #e3f3f4; }
.nube-ind.ok { color: var(--ok); background: var(--ok-50, #e6f4ea); }
.nube-ind.guardando { color: var(--warn); background: var(--warn-50); }
.nube-ind.error { color: var(--bad); background: var(--bad-50, #fdecea); }
@media (max-width: 900px) { .nube-badge, .nube-ind { padding: 4px; } }

/* Módulos de la primera etapa. */
.etapa1 { margin: 0 0 30px; }
.etapa1 > h2 { margin: 0 0 18px; color: #172c40; }
.etapa1-modulos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.etapa1-modulo { display: flex; flex-direction: column; min-width: 0; }
.etapa1-modulo h2, .etapa1-modulo h3 { margin: 0 0 10px; font-size: 19px; }
.etapa1-modulo ul { margin: 0 0 18px; padding-left: 20px; line-height: 1.6; }
.etapa1-enlaces { display: flex; flex-wrap: wrap; gap: 8px; }
.etapa1-modulo .etapa1-enlaces { margin-top: auto; }
.etapa1-enlaces .btn { white-space: normal; text-align: left; }
.etapa1 ~ .o-apps { margin-top: 28px; }
@media (max-width: 1000px) { .etapa1-modulos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .etapa1-modulos { grid-template-columns: 1fr; } }

/* Inicio y paneles de las aplicaciones por sector. */
.o-app.propia .o-app-ic { outline: 3px solid #fff; outline-offset: 5px; }
.o-app .su-modulo { padding: 3px 9px; border-radius: 12px; background: var(--prim); opacity: 1; text-shadow: none; font-weight: 600; }
.panel-periodo h2 { margin: 4px 0; }
.panel-periodo p { margin: 0; color: var(--muted); }
.panel-facturacion-titulo { margin-top: 24px; }
.sector-kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.sector-kpis .kpi-v { overflow-wrap: anywhere; }

/* Referencia del medidor y discrepancia de asignación en tablas y ficha. */
.med-ubic { margin: 10px 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); overflow-wrap: anywhere; }
.med-ubic p { margin: 4px 0; white-space: pre-wrap; }
.rl-aviso { display: block; width: fit-content; white-space: normal; margin-top: 4px; }

/* Controles de campo utilizables con pantalla chica y navegadores sin unidades dinámicas. */
.ap-net, .ap-tabs button, .ap-rutas button, .ap-gal-d button, .ap-nueva button, .ap .btn-sm { min-height: 40px; }
.ap-title { min-width: 0; }
.ap-cods, .ap-row, .ap-info { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ap-marca-pos { color: var(--warn); font-size: 14px; }
.ap-medidor-nuevo { color: var(--ok); font-size: 14px; font-weight: 600; }
.campo-info a { overflow-wrap: anywhere; }
.ap-foto input { top: 0; right: 0; bottom: 0; left: 0; }
/* Aplicación para usuarios del servicio: ingreso con candado y vista previa. Pensada para el teléfono
   (320 px en adelante): letra de 16 px o más, botones de 52 px de alto, la franja de «datos de ejemplo»
   siempre a la vista y la barra de secciones abajo, al alcance del pulgar. */
.sv-actual { fill: var(--agua); }
.usr { min-height: 100vh; min-height: 100dvh; background: var(--canvas); color: var(--ink); font-size: 16px; line-height: 1.45; }
.usr a:focus-visible, .usr button:focus-visible, .usr input:focus-visible, .usr select:focus-visible, .usr textarea:focus-visible { outline: 3px solid var(--agua); outline-offset: 2px; }
.usr-marca { display: flex; align-items: center; gap: 12px; }
.usr-marca .logo { width: 44px; height: 44px; flex: none; }
.usr-marca b { display: block; font-size: 17px; font-weight: 500; line-height: 1.2; }
.usr-marca span { display: block; color: var(--ink-2); font-size: 14px; }
.usr-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 10px 16px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: #fff; color: var(--ink); font-size: 17px; font-weight: 500; text-align: center; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.usr-btn-primario { background: var(--agua-600); border-color: var(--agua-600); color: #fff; }
.usr-btn-previa { border-color: var(--agua-600); color: var(--agua-600); margin-top: 12px; }
.usr-btn-borde { margin-top: 12px; }
.usr-btn[aria-disabled="true"] { background: var(--gray-50); border-color: var(--line-2); color: var(--ink-2); }
.usr-ingreso { display: flex; justify-content: center; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, var(--agua-50), var(--canvas)); box-sizing: border-box; }
.usr-hoja { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 18px; }
.usr-ingreso h1 { font-size: 26px; font-weight: 500; margin: 6px 0 4px; line-height: 1.2; }
.usr-lead { margin: 0 0 14px; color: var(--ink-2); font-size: 17px; }
.usr-candado { display: flex; gap: 12px; align-items: flex-start; padding: 14px; margin: 0 0 16px; border-radius: var(--r-lg); background: var(--warn-50); border: 1px solid #f0dca0; border-left: 5px solid var(--warn-2); color: #573800; }
.usr-candado .ic { flex: none; margin-top: 2px; }
.usr-candado b, .usr-candado span { display: block; }
.usr-form { display: flex; flex-direction: column; gap: 14px; }
.usr-form label { display: flex; flex-direction: column; gap: 6px; font-size: 16px; font-weight: 500; color: var(--ink-2); }
.usr-form input:not([type="file"]), .usr-form select, .usr-form textarea { width: 100%; min-height: 52px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: #fff; font-size: 17px; font-weight: 400; color: var(--ink); box-sizing: border-box; }
.usr-form textarea { min-height: 110px; resize: vertical; }
.usr-form input[type="file"] { font-size: 16px; padding: 8px 0; }
.usr-form input:disabled { background: var(--gray-50); color: var(--muted); }
.usr-form.usr-card { padding: 14px; }
.usr-aviso { margin: 0; font-weight: 500; color: var(--warn); }
.usr-aviso:empty { display: none; }
.usr-pie { text-align: center; padding-top: 6px; }
.usr-personal { display: inline-block; padding: 10px 8px; color: var(--muted); font-size: 14px; text-decoration: underline; }
.usr-franja { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px; background: var(--warn-2); color: #2b1c00; font-size: 15px; text-align: center; }
.usr-bar { padding: 14px 16px 10px; background: #fff; border-bottom: 1px solid var(--line); }
.usr-bar-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.usr-bar h1 { font-size: 22px; font-weight: 500; margin: 0; line-height: 1.2; }
.usr-salir { flex: none; padding: 10px 4px; color: var(--agua-600); font-size: 14px; font-weight: 500; }
.usr-cuerpo { padding: 16px 16px calc(96px + env(safe-area-inset-bottom, 0px)); max-width: 640px; margin: 0 auto; box-sizing: border-box; }
.usr-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; margin: 0 0 14px; }
.usr-card > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.usr-card h2 { font-size: 18px; font-weight: 500; margin: 0; overflow-wrap: anywhere; }
.usr-card dl { margin: 0 0 4px; }
.usr-card dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--sheet-3); }
.usr-card dt { color: var(--ink-2); flex: none; }
.usr-card dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.usr-acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.usr-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.usr-pill.usr-ok { background: var(--ok-50); color: #14532d; }
.usr-pill.usr-deuda { background: var(--bad-50); color: #721c18; }
.usr-pill.usr-ej { background: var(--warn-50); color: #573800; }
.usr-chips { display: flex; gap: 10px; margin: 0 0 14px; }
.usr-chip { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; padding: 6px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: #fff; color: var(--ink); text-decoration: none; font-weight: 500; }
.usr-chip small { color: var(--ink-2); font-weight: 400; font-size: 13px; }
.usr-chip[aria-current="true"] { border-color: var(--agua-600); background: var(--agua-50); box-shadow: inset 0 0 0 1px var(--agua-600); }
.usr-grafico { margin: 0 0 12px; }
.usr-tabla { width: 100%; border-collapse: collapse; font-size: 16px; }
.usr-tabla th, .usr-tabla td { padding: 8px 6px; border-top: 1px solid var(--sheet-3); text-align: right; }
.usr-tabla th:first-child { text-align: left; font-weight: 500; }
.usr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.usr-lista { list-style: none; margin: 0; padding: 0; }
.usr-lista li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--sheet-3); }
.usr-lista li:first-child { border-top: 0; }
.usr-lista li div > span { display: block; color: var(--ink-2); font-size: 14px; }
.usr-lista li p { margin: 4px 0 0; }
.usr-der { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; text-align: right; }
section.usr-saldo { display: flex; flex-direction: column; gap: 2px; }
section.usr-saldo b { font-size: 28px; font-weight: 500; }
section.usr-saldo.con { border-left: 5px solid var(--bad); }
section.usr-saldo.sin { border-left: 5px solid var(--ok); }
.usr-barras { display: flex; align-items: center; justify-content: center; min-height: 84px; padding: 8px; margin: 10px 0; border: 2px dashed var(--line-2); border-radius: var(--r); background: repeating-linear-gradient(90deg, var(--sheet-3) 0 4px, #fff 4px 9px); color: var(--ink-2); font-size: 14px; text-align: center; }
.usr-barras span { background: #fff; padding: 2px 8px; border-radius: var(--r-sm); }
.usr-nota { margin: 0; color: var(--ink-2); font-size: 15px; }
.usr-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; background: #fff; border-top: 1px solid var(--line-2); padding-bottom: env(safe-area-inset-bottom, 0px); }
.usr-nav a { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; padding: 6px 2px; color: var(--ink-2); font-size: 12px; font-weight: 500; text-decoration: none; }
.usr-nav a[aria-current="page"] { color: var(--agua-600); box-shadow: inset 0 3px 0 var(--agua-600); background: var(--agua-50); }
@media (max-width: 340px) { .usr-nav a { font-size: 11px; } .usr-ingreso h1 { font-size: 23px; } }

/* ——— Ficha de cuenta como panel de atención (5-oct) ———
   Cabecera con la cuenta y la persona, cuatro bloques de semáforo, menú de operaciones a un costado y solapas.
   Los colores del semáforo son los del sistema: verde = dato confirmado y sin problema; neutro = no se sabe (nunca verde por falta de dato). */
.fp-cab { background: linear-gradient(135deg, var(--agua-600), #1b5f8f); color: #fff; border-radius: var(--r-lg); padding: 18px 22px; box-shadow: var(--sombra); }
.fp-cab-t { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.fp-k { font-size: 13px; opacity: .85; }
.fp-cuenta { margin: 2px 0 4px; font-size: 28px; font-weight: 500; letter-spacing: .02em; }
.fp-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.fp-chip, .fp-cab .chip-d { font-size: 13px; font-weight: 500; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .32); padding: 2px 10px; border-radius: 10px; color: #fff; }
.fp-chip-alerta { background: var(--warn-50); color: #573800; border-color: #f0dca0; }
.fp-cab .muted, .fp-cab .small { color: rgba(255, 255, 255, .88); }
.fp-cab .btn { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .4); }
.fp-cab-d { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 22px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .28); }
.fp-cab-d > div { display: flex; flex-direction: column; min-width: 0; }
.fp-cab-d span { font-size: 13px; opacity: .8; }
.fp-cab-d b { font-weight: 500; font-size: 16px; overflow-wrap: anywhere; }
.fp-cab-d .w2 { grid-column: 1 / -1; }

.fp-sem { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.fp-bloque { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 10px; background: var(--sheet); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sombra); cursor: pointer; min-width: 0; }
.fp-bloque:hover, .fp-bloque:focus-visible { border-color: var(--agua); box-shadow: 0 0 0 2px var(--agua-100), var(--sombra); outline: 0; }
.fp-b-h { display: flex; align-items: center; gap: 7px; padding: 7px 10px; background: var(--warn-50); border: 1px solid #f0dca0; border-radius: 10px; color: #573800; font-weight: 500; font-size: 14px; text-decoration: none; }
.fp-b-h .ic:last-child { margin-left: auto; }
.fp-b-c { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.35; }
.fp-b-c.fp-llena { flex: 1; }
.fp-b-c b { font-size: 15px; font-weight: 500; }
.fp-imp { font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.fp-ok { background: var(--ok); color: #fff; }
.fp-bad { background: var(--bad); color: #fff; }
.fp-warn { background: var(--warn-2); color: #2f2000; }
.fp-info { background: var(--info); color: #fff; }
.fp-neutro { background: var(--sheet-3); color: var(--ink-2); border: 1px dashed var(--line-2); }
.fp-barras { padding: 4px 4px 0; }
.fp-barras .svbar { max-height: 110px; }
.fp-sin-barras { margin: 6px 0; text-align: center; }
.fp-pie { color: var(--muted); font-size: 13px; }

.fp-cuerpo { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 16px; }
.fp-cuerpo.fp-sin-ops { grid-template-columns: minmax(0, 1fr); }
.fp-ops { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sombra); overflow: hidden; }
.fp-ops-g + .fp-ops-g { border-top: 1px solid var(--line); }
.fp-ops h3 { margin: 0; padding: 9px 12px; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--sheet-2); }
.fp-op { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--sheet-3); background: var(--sheet); color: var(--ink); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
.fp-op:hover { background: var(--agua-50); color: var(--agua-600); }
.fp-op .ic { color: var(--agua-600); flex: none; }
.fp-op.bloqueado { opacity: .5; }
.fp-tabs .tabs { flex-wrap: wrap; overflow-x: visible; }
.fp-aconfirmar { margin-top: 14px; }
.fp-pedidos td { vertical-align: top; }
.fp-fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.fp-fotos figure { margin: 0; }
.fp-fotos figcaption { margin-top: 4px; }
.ot-link { font-weight: 500; }

/* Avance de un alta: pedida → orden de instalación → instalada → en ruta */
.fp-alta { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sombra); padding: 14px 18px; }
.fp-alta-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fp-alta-h h2 { margin: 0; font-size: 15px; font-weight: 500; }
.fp-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: paso; }
.fp-paso { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 10px 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--sheet-2); min-width: 0; counter-increment: paso; }
.fp-paso::before { content: counter(paso); position: absolute; left: 10px; top: 10px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 500; background: var(--line-2); color: #fff; }
.fp-paso b { font-size: 14px; font-weight: 500; }
.fp-paso span { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.fp-paso.hecho { background: var(--ok-50); border-color: #b9dfc6; }
.fp-paso.hecho::before { content: '✓'; background: var(--ok); }
.fp-paso.actual { background: var(--warn-50); border-color: #f0dca0; }
.fp-paso.actual::before { background: var(--warn-2); color: #2f2000; }
.fp-paso.noaplica { opacity: .65; }

/* Mostrador del agente y panel de la jefatura */
.mo-buscar { background: linear-gradient(135deg, var(--agua-600), #1b5f8f); color: #fff; border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--sombra); }
.mo-buscar h2 { margin: 0 0 4px; font-size: 20px; font-weight: 500; }
.mo-buscar p { margin: 0 0 12px; opacity: .9; }
.mo-buscar .big-search { background: #fff; color: var(--ink); }
.mo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.mo-lista { list-style: none; margin: 0; padding: 0; }
.mo-lista li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--sheet-3); font-size: 14px; }
.mo-lista li:last-child { border-bottom: 0; }
.mo-lista a { color: var(--ink); text-decoration: none; font-weight: 500; }
.mo-lista small { color: var(--muted); display: block; font-weight: 400; }
.mo-vacio { margin: 0; color: var(--muted); font-size: 14px; }

@media (max-width: 1100px) {
  .fp-cab-d { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .fp-ops { display: flex; flex-wrap: wrap; }
  .fp-ops-g { display: flex; flex-wrap: wrap; flex: 1 1 100%; }
  .fp-ops h3 { flex: 1 1 100%; }
  .fp-op { width: auto; flex: 1 1 200px; border-right: 1px solid var(--sheet-3); }
  .fp-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mo-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .fp-cab { padding: 14px 14px; }
  .fp-cuenta { font-size: 22px; }
  .fp-cab-d { grid-template-columns: minmax(0, 1fr); }
  .fp-chips { justify-content: flex-start; }
  .fp-sem { grid-template-columns: minmax(0, 1fr); }
  .fp-pasos { grid-template-columns: minmax(0, 1fr); }
  .fp-op { flex-basis: 100%; }
}
/* ——— Servicio por distrito, jefaturas y «Mi trabajo» (Gerencia y puestos de oficina) ——— */
.sd-miga { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.sd-miga a { color: var(--prim); text-decoration: none; font-weight: 500; }
.sd-miga a:hover { text-decoration: underline; }
.sd-miga b { color: var(--ink); font-weight: 600; }
.sd-sub-h { margin: 16px 0 8px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.sd-capital { border: 1px solid var(--prim-100); border-left: 5px solid var(--prim); border-radius: var(--r-lg); background: var(--prim-50); padding: 14px 16px; }
.sd-cap-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sd-cap-h h3 { margin: 0; font-size: 22px; font-weight: 500; }
.sd-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.sd-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.sd-tile span { font-size: 13px; color: var(--muted); }
.sd-tile b { font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.15; }
.sd-tile small { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.sd-sub { display: block; font-size: 13px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.sd-tabla tr.sd-vacia td { color: var(--muted); }
.sd-tabla tfoot td { font-weight: 600; border-top: 2px solid var(--line-2); background: var(--sheet-2); }
.sd-pie { margin: 10px 0 0; }
.sd-nota { font-size: 13px; font-style: italic; }
.sd-cuentas li { grid-template-columns: 30px minmax(0, 1fr) auto; }
.jef-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.jef { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.jef-t { display: flex; align-items: center; gap: 8px; color: var(--prim); }
.jef-t b { color: var(--ink); font-weight: 500; }
.jef-c { display: flex; flex-direction: column; }
.jef-c b { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.15; overflow-wrap: anywhere; }
.jef-c span { font-size: 13px; color: var(--muted); }
.jef .link { margin-top: auto; padding-top: 6px; }
.mt { display: grid; gap: 16px; }
.mt-saludo h2 { margin: 0 0 4px; font-size: 20px; font-weight: 500; }
.mt-saludo p { margin: 0; }
@media (max-width: 1100px) { .jef-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sd-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .jef-grid { grid-template-columns: minmax(0, 1fr); } .sd-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sd-cap-h h3 { font-size: 19px; } }

/* ——— Legibilidad (6-oct) ———
   Lo usa personal de 60 años o más: pisos de tamaño de letra y de alto de clic, y botones que quedan enteros.
   Una fila con botones los deja con su texto en una línea y, si no entran, los baja a una segunda; ninguna
   palabra se corta por la mitad. */
small { font-size: 13px; }
button, .btn, .chip, .pill, .tabs a, th, label { overflow-wrap: normal; word-break: normal; }
.o-cp-r .o-search { flex: 0 1 460px; width: 460px; }
.dw-head { flex-wrap: wrap; }
.dw-head > div:first-child { flex: 1 1 260px; min-width: 0; }
.dw-head > .btn, .revision .dw-head > .btn { flex: 0 0 auto; white-space: nowrap; }
.revision .dw-head > div:first-child { flex-basis: 100%; }
.chip { height: auto; min-height: 34px; }
select { min-height: 34px; }
.check, .flt-check, .kcol-sel { min-height: 34px; }
button.link { min-height: 32px; }
.tbl td:where(:not(.chk):not(.num)) { min-width: 118px; }
/* También las casillas y radios sin una clase en su rótulo conservan un alto cómodo de clic. */
label input[type='checkbox'], label input[type='radio'] { min-height: 32px; vertical-align: middle; }
/* Casillas sueltas (columna de selección de las tablas y tarjetas de órdenes): el cuadro se ve de 22 px y el
   área de clic es de 32 px, igual que la de un botón chico. */
.tbl .chk input, .ot-chk { appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto; width: 32px; height: 32px; margin: -6px -4px; padding: 0; background: transparent; border: 0; cursor: pointer; vertical-align: middle; }
.tbl .chk input::before, .ot-chk::before { content: ''; position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; box-sizing: border-box; border: 2px solid var(--ink-2); border-radius: 3px; background: #fff; }
.tbl .chk input:checked::before, .ot-chk:checked::before, .tbl .chk input:indeterminate::before, .ot-chk:indeterminate::before { background: var(--prim); border-color: var(--prim); }
.tbl .chk input:checked::after, .ot-chk:checked::after { content: ''; position: absolute; left: 12px; top: 7px; width: 6px; height: 12px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.tbl .chk input:indeterminate::after, .ot-chk:indeterminate::after { content: ''; position: absolute; left: 9px; top: 14px; width: 14px; border-top: 3px solid #fff; }
.tbl .chk input:disabled, .ot-chk:disabled { opacity: .5; cursor: default; }
.tbl .chk input:focus-visible, .ot-chk:focus-visible { outline: 3px solid var(--teal-100); outline-offset: -4px; border-radius: var(--r); }
/* Un número de cuenta no se parte en el guion al caer de línea. */
.tbl td.mono, .tbl .mono { white-space: nowrap; }
/* Calendario: solo la presentación a Facturación (el plazo de Medidores) se destaca (hoy / vencida). */
.tbl .cal-pres-hoy { background: var(--warn-50); font-weight: 500; }
.tbl .cal-pres-vencida { background: var(--bad-50); }
/* Atención al Público (6-oct): informe de deuda y formularios en el menú, gestiones entre sectores en la ficha y reclamos de la Jefatura por antigüedad. */
.fp-gestiones { margin-top: 18px; }
.fp-g-lead { margin: 4px 0 10px; font-size: 16px; line-height: 1.45; }
.fp-g-est { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.fp-g-warn { background: var(--warn-50); color: var(--warn); }
.fp-g-ok { background: var(--ok-50); color: var(--ok); }
.fp-g-muted { background: var(--sheet-3); color: var(--ink-2); }
.fp-forms h3 { margin: 14px 0 6px; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.fp-forms h3:first-child { margin-top: 0; }
.fp-forms-l { list-style: none; margin: 0; padding: 0; }
.fp-forms-l li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--sheet-3); }
.fp-forms-l li > div { display: grid; gap: 3px; min-width: 0; }
.fp-forms-l b { font-size: 17px; font-weight: 500; }
.fp-forms-l span { font-size: 15px; color: var(--ink-2); line-height: 1.4; }
.fp-forms-l .btn { flex: none; min-height: 44px; font-size: 15px; text-decoration: none; }
.pa-reclamos { font-size: 16px; }
.pa-reclamos td, .pa-reclamos th { padding: 10px 12px; }
.pa-reclamos td a { font-weight: 500; font-size: 17px; }
.pa-reclamos tfoot th { background: var(--sheet-2); border-top: 2px solid var(--line-2); }
@media (max-width: 720px) { .fp-forms-l li { flex-direction: column; align-items: stretch; } .fp-forms-l .btn { justify-content: center; } }