:root {
  --fondo: #F3F4F1;
  --tarjeta: #FFFFFF;
  --borde: #DDE1E6;
  --borde-campo: #C4CAD2;
  --linea: #EEF0F2;
  --tinta: #1B2430;
  --tinta-2: #3A4350;
  --tenue: #4A5462;
  --tenue-2: #5B6472;
  --acento: #17603D;
  --acento-oscuro: #0F4429;
  --acento-suave: #E3F1E8;
  --acento-texto: #12432B;
  --cabecera: #1B2430;
  --cabecera-texto: #C9D2DC;
  --cabecera-marca: #8FD1AE;
  --rojo: #8C1D18;
  --rojo-fondo: #FBE4E2;
  --rojo-borde: #B3261E;
  --ambar: #6B4200;
  --ambar-fondo: #FCEFD2;
  --gris-fondo: #E7EAEE;
  --titulos: 'Archivo', system-ui, sans-serif;
  --texto: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--texto); }
body { min-height: 100vh; }
a { color: var(--acento); }
a:hover { color: var(--acento-oscuro); }
button, input, select, textarea { font: inherit; color: inherit; }

#app { max-width: 560px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.cargando { padding: 48px 24px; text-align: center; color: var(--tenue); }

/* Cabecera */
.cabecera { background: var(--cabecera); color: #FFF; padding: 24px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.cabecera .volver { display: inline-flex; align-items: center; gap: 6px; color: var(--cabecera-texto); text-decoration: none; font-size: 14px; min-height: 32px; align-self: flex-start; }
.cabecera .pantalla { font-family: var(--titulos); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cabecera-marca); }
.cabecera h1 { margin: 0; font-family: var(--titulos); font-weight: 700; font-size: 24px; line-height: 1.2; }
.cabecera .sub { font-size: 14px; color: var(--cabecera-texto); }
.cabecera .marca { display: flex; align-items: center; gap: 10px; font-family: var(--titulos); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--cabecera-texto); }
.cabecera .marca img.logo { border-radius: 8px; }
.cabecera .marca span.logo { width: 36px; height: 36px; border-radius: 8px; background: var(--acento); display: flex; align-items: center; justify-content: center; }

/* Cuerpo */
.cuerpo { padding: 20px; display: flex; flex-direction: column; gap: 22px; flex: 1; }
.seccion { display: flex; flex-direction: column; gap: 10px; }
.seccion > h2, .tarjeta h2 { margin: 0; font-family: var(--titulos); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.tarjeta.sin-relleno { padding: 0; gap: 0; overflow: hidden; }
.fila-titulo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.nota { font-size: 13px; line-height: 1.45; color: var(--tenue-2); margin: 0; }
.texto { font-size: 14px; line-height: 1.45; margin: 0; }
.vacio { padding: 20px 16px; text-align: center; color: var(--tenue); font-size: 14px; }

dl.datos { margin: 0; display: grid; grid-template-columns: 110px 1fr; row-gap: 10px; column-gap: 12px; font-size: 14px; }
dl.datos dt { color: var(--tenue-2); }
dl.datos dd { margin: 0; overflow-wrap: anywhere; }

/* Formularios */
form.formulario { display: flex; flex-direction: column; gap: 24px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label, .etiqueta { font-size: 14px; font-weight: 600; }
.campo .opcional { font-weight: 400; color: var(--tenue-2); }
.campo input, .campo select, .campo textarea {
  min-height: 48px; padding: 0 14px; border: 1.5px solid var(--borde-campo); border-radius: 10px;
  background: #FFF; font-size: 16px; width: 100%;
}
.campo textarea { padding: 12px 14px; resize: vertical; min-height: 88px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }
.campo .ayuda { font-size: 13px; color: var(--tenue-2); }
.campo .error-campo { font-size: 13px; color: var(--rojo); font-weight: 600; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dos-columnas > .campo { min-width: 0; }
.tres-columnas { display: grid; grid-template-columns: 1.2fr .7fr 1.3fr; gap: 8px; }
.tres-columnas input { padding: 0 8px; }
.casilla { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.4; cursor: pointer; }
.casilla input { width: 22px; height: 22px; margin: 0; accent-color: var(--acento); flex: none; }
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcion span { display: flex; align-items: center; justify-content: center; min-height: 52px; border: 1.5px solid var(--borde-campo); border-radius: 10px; background: #FFF; font-weight: 700; font-size: 15px; text-align: center; padding: 4px 8px; }
.opcion input:checked + span { border: 2px solid var(--acento); background: var(--acento-suave); color: var(--acento-texto); }
.opcion input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Botones */
.boton { min-height: 54px; border: none; border-radius: 12px; background: var(--acento); color: #FFF; font-family: var(--titulos); font-size: 17px; font-weight: 700; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; padding: 0 16px; }
.boton:hover { background: var(--acento-oscuro); color: #FFF; }
.boton:disabled { opacity: .6; cursor: default; }
.boton-sec { min-height: 46px; border: 1.5px solid var(--borde-campo); border-radius: 10px; background: #FFF; color: var(--tinta); font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; padding: 0 14px; }
.boton-sec.acento { border-color: var(--acento); color: var(--acento); }
.boton-sec.peligro { border-color: var(--rojo-borde); color: var(--rojo-borde); }
.boton-sec.chico { min-height: 40px; font-size: 14px; padding: 0 12px; }
.boton-agregar { min-height: 48px; border: 1.5px dashed #9AA3AE; border-radius: 12px; background: transparent; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; color: var(--tinta); text-decoration: none; }
.enlace { background: none; border: none; padding: 8px 0; color: var(--acento); font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; }
.dos-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Etiquetas de estado */
.etq { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--gris-fondo); color: var(--tinta-2); white-space: nowrap; }
.etq.verde { background: var(--acento-suave); color: var(--acento-texto); }
.etq.ambar { background: var(--ambar-fondo); color: var(--ambar); }
.etq.rojo { background: var(--rojo-fondo); color: var(--rojo); }
.etiquetas { display: flex; gap: 6px; flex-wrap: wrap; }

/* Listas */
.item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; text-decoration: none; color: var(--tinta); background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; }
.item .principal { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.item .nombre { font-size: 15px; font-weight: 600; }
.item .detalle { font-size: 13px; color: var(--tenue); }
.subitem { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 52px; padding: 8px 16px; border-top: 1px solid var(--linea); text-decoration: none; color: var(--tinta); }
.lugar-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px 10px; text-decoration: none; color: var(--tinta); }
.lugar-cuerpo { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--tinta-2); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1.5px solid var(--borde-campo); background: #FFF; font-size: 14px; font-weight: 600; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #FFF; }

/* Botones grandes del inicio */
.accesos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acceso { min-height: 104px; border-radius: 14px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; text-decoration: none; font-family: var(--titulos); font-size: 17px; font-weight: 700; }
.acceso.primario { background: var(--acento); color: #FFF; }
.acceso.secundario { background: #FFF; border: 1.5px solid var(--borde-campo); color: var(--tinta); }
.acceso.deshabilitado { opacity: .55; }

/* Menú inferior */
nav.menu { position: sticky; bottom: 0; background: #FFF; border-top: 1px solid var(--borde); display: grid; grid-template-columns: repeat(3, 1fr); padding: 6px 4px calc(10px + env(safe-area-inset-bottom)); }
nav.menu a { min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--tenue); font-size: 12px; font-weight: 600; }
nav.menu a[aria-current="page"] { color: var(--acento); font-weight: 700; }

/* Firma y logo */
.firma { position: relative; height: 170px; border: 1.5px solid var(--borde-campo); border-radius: 12px; background: #FFF; touch-action: none; }
.firma canvas { width: 100%; height: 100%; display: block; border-radius: 12px; }
.firma .renglon { position: absolute; left: 24px; right: 24px; bottom: 44px; border-bottom: 1.5px solid var(--borde-campo); pointer-events: none; }
.firma .indicacion { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font-size: 14px; color: #7A8290; pointer-events: none; }
.imagen-guardada { max-width: 100%; max-height: 120px; object-fit: contain; background: #FFF; border: 1px solid var(--borde); border-radius: 10px; padding: 8px; align-self: flex-start; }
.logo-chico { width: 56px; height: 56px; border-radius: 10px; background: var(--gris-fondo); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--tinta-2); overflow: hidden; flex: none; }
.logo-chico img { width: 100%; height: 100%; object-fit: contain; background: #FFF; }

/* Ventanas */
dialog { border: none; border-radius: 16px; padding: 0; width: min(92vw, 440px); color: var(--tinta); }
dialog::backdrop { background: rgba(17, 24, 32, .55); }
dialog .dialogo { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
dialog h2 { margin: 0; font-family: var(--titulos); font-size: 20px; }

/* Avisos */
#aviso { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%); max-width: min(92vw, 480px); z-index: 50; }
#aviso .mensaje { background: var(--tinta); color: #FFF; padding: 12px 16px; border-radius: 10px; font-size: 14px; line-height: 1.4; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
#aviso .mensaje.error { background: var(--rojo); }
.alerta { border-radius: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.45; background: var(--acento-suave); color: var(--acento-texto); }
.alerta.ambar { background: var(--ambar-fondo); color: var(--ambar); }
.alerta.rojo { background: var(--rojo-fondo); color: var(--rojo); }

/* ===== Parte 2: visitas y desvíos ===== */
/* Pasos de la visita */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pasos li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--gris-fondo); font-size: 13px; font-weight: 600; color: var(--tenue); }
.pasos li span { width: 22px; height: 22px; border-radius: 50%; background: #FFF; display: flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
.pasos li[aria-current="step"] { background: var(--acento); color: #FFF; }
.pasos li[aria-current="step"] span { color: var(--acento); }
.pasos li.hecho { background: var(--acento-suave); color: var(--acento-texto); }

/* Casillas con forma de chip (tareas) */
.chip-tilde { position: relative; }
.chip-tilde input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip-tilde span { display: flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1.5px solid var(--borde-campo); background: #FFF; font-size: 14px; font-weight: 600; }
.chip-tilde input:checked + span { background: var(--tinta); border-color: var(--tinta); color: #FFF; }
.chip-tilde input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Prioridad en tres opciones */
.opciones.tres { grid-template-columns: repeat(3, 1fr); }
.opcion span small { display: block; font-size: 11px; font-weight: 600; opacity: .85; margin-top: 2px; }
.opcion span[class^="prio-"] { flex-direction: column; min-height: 60px; }
.opcion input:checked + span.prio-alto { border-color: var(--rojo-borde); background: var(--rojo-fondo); color: var(--rojo); }
.opcion input:checked + span.prio-medio { border-color: #A86B00; background: var(--ambar-fondo); color: var(--ambar); }
.opcion input:checked + span.prio-bajo { border-color: var(--acento); background: var(--acento-suave); color: var(--acento-texto); }

/* Fotos */
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.galeria:empty { display: none; }
.galeria > .nota { grid-column: 1 / -1; }
.miniatura { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--gris-fondo); border: 1px solid var(--borde); }
.miniatura > button:first-child { all: unset; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura .quitar { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(17, 24, 32, .75); color: #FFF; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* Cartelería */
.carteles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.cartel { position: relative; }
.cartel input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cartel > span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px; border: 1.5px solid var(--borde-campo); border-radius: 10px; background: #FFF; text-align: center; height: 100%; }
.cartel input:checked + span { border: 2px solid var(--acento); background: var(--acento-suave); }
.cartel input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.cartel-nombre { font-size: 13px; font-weight: 600; line-height: 1.3; }
.carteles.solo-ver .cartel > span { border-color: var(--borde); }
.cartel[hidden] { display: none; }
.cartel .cartel-img { width: 72px; height: auto; aspect-ratio: 300 / 380; object-fit: contain; }
.cartel .cartel-nombre { font-size: 12px; }
.carteles { max-height: 62vh; overflow-y: auto; padding: 2px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.carteles.solo-ver { max-height: none; overflow: visible; }
.vista-cartel { display: flex; justify-content: center; padding: 12px; border: 1.5px dashed var(--borde-campo); border-radius: 10px; min-height: 120px; align-items: center; }
.vista-cartel .cartel-img { width: 150px; height: auto; display: block; }
.lista-propios .cartel-propio { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--linea); }
.lista-propios .cartel-propio:first-child { border-top: none; }
.cartel-propio .cartel-mini { flex: none; width: 48px; }
.cartel-propio .cartel-mini .cartel-img, .cartel-propio .cartel-mini svg { width: 48px; height: auto; display: block; }
.cartel-propio .principal { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.cartel-propio .boton-sec { flex: none; }

/* Varios */
.recorte { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.enlace-tarjeta { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--tinta); }
.vista-pdf { width: 100%; height: 70vh; border: 1px solid var(--borde); border-radius: 12px; background: #FFF; }
.contadores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.contadores > div { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.contadores strong { font-family: var(--titulos); font-size: 24px; }
.contadores span { font-size: 12px; color: var(--tenue); font-weight: 600; line-height: 1.25; }
.contadores .rojo { background: var(--rojo-fondo); border-color: transparent; }
.contadores .rojo strong { color: var(--rojo); }
.contadores .verde { background: var(--acento-suave); border-color: transparent; }
.contadores .verde strong { color: var(--acento-texto); }
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--borde); display: flex; flex-direction: column; gap: 14px; }
.linea-tiempo li { position: relative; font-size: 14px; line-height: 1.4; display: flex; flex-direction: column; gap: 2px; }
.linea-tiempo li::before { content: ''; position: absolute; left: -22px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--acento); }

/* Créditos del creador y Acerca de */
.creditos { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 0 2px; font-size: 12px; color: var(--tenue-2); text-decoration: none; }
.creditos img { border-radius: 5px; }
.creditos strong { color: var(--tinta-2); }
.acerca { align-items: center; text-align: center; }
.logo-proveedor { width: 100%; max-width: 320px; height: auto; }
.acerca dl.datos { text-align: left; align-self: stretch; }

/* Invitaciones */
.codigo-invitacion { font-family: var(--titulos); font-size: 28px; font-weight: 700; letter-spacing: .08em; text-align: center; padding: 14px; border-radius: 12px; background: var(--acento-suave); color: var(--acento-texto); user-select: all; }
.codigo-chico { font-family: var(--titulos); letter-spacing: .05em; }

/* Mediciones */
.medicion-fila { gap: 10px; }
.medicion-fila .casilla strong { font-weight: 600; }
a.etq { text-decoration: none; }

.acciones-cartel { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }

.oculto { display: none !important; }
.desplegable > summary { list-style: none; cursor: pointer; }
.desplegable > summary::-webkit-details-marker { display: none; }
@media (min-width: 600px) { #app { box-shadow: 0 0 0 1px var(--borde); } }

/* Inicio: mediciones a vencer agrupadas por cliente */
.grupo-cliente { border-top: 6px solid var(--fondo); }
.grupo-cliente:first-child { border-top: 1px solid var(--borde); }
.grupo-cab { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 12px 16px 8px; background: var(--acento-suave, #eef4f8); color: inherit; text-decoration: none; border-left: 4px solid var(--acento); }
.grupo-nombre { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; min-width: 0; }
.grupo-nombre svg { width: 18px; height: 18px; flex: none; color: var(--acento); }
.grupo-lugar { padding: 8px 16px 2px 20px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tenue); }
.grupo-item { padding-left: 20px; }
.grupo-cab::-webkit-details-marker { display: none; }
.grupo-flecha { width: 9px; height: 9px; margin-left: 4px; border-right: 2px solid var(--acento); border-bottom: 2px solid var(--acento); transform: rotate(45deg); transition: transform .15s; }
.grupo-cliente[open] .grupo-flecha { transform: rotate(-135deg); }
.grupo-cliente:not([open]) .grupo-cab { padding-bottom: 12px; }
.miniatura-pdf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 100%; padding: 6px; background: var(--acento-suave); color: var(--acento-texto); font-size: 11px; text-align: center; word-break: break-word; }
.miniatura-pdf svg { width: 26px; height: 26px; }

/* Indicadores de gestión */
.item.destacado { border: 2px solid var(--acento); }
.indicadores { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.indicador { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.indicador strong { font-family: var(--titulos); font-size: 28px; line-height: 1.1; }
.indicador span { font-weight: 600; font-size: 14px; }
.indicador small { font-size: 12px; color: var(--tenue); line-height: 1.3; }
.indicador.verde { background: var(--acento-suave); border-color: transparent; }
.indicador.verde strong { color: var(--acento-texto); }
.indicador.ambar { background: #FCEFD2; border-color: transparent; }
.indicador.ambar strong { color: #8A5A00; }
.indicador.rojo { background: #FBE4E2; border-color: transparent; }
.indicador.rojo strong { color: #B3261E; }
.grafico { width: 100%; height: auto; display: block; }
.g-linea { stroke: var(--borde); stroke-width: 1; }
.g-eje { font-size: 10px; fill: var(--tenue); }
.g-valor { font-size: 10px; font-weight: 700; fill: currentColor; }
.g-pendiente { fill: #78AA8C; background: #78AA8C; }
.g-vencido { fill: #D65C50; background: #D65C50; }
.g-leyenda { display: flex; gap: 14px; font-size: 12px; color: var(--tenue); }
.g-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.tabla-chica { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-chica th, .tabla-chica td { padding: 6px 4px; text-align: right; border-bottom: 1px solid var(--linea, #E5E7EB); }
.tabla-chica th:first-child, .tabla-chica td:first-child { text-align: left; white-space: nowrap; }
.tabla-chica th { font-size: 12px; color: var(--tenue); font-weight: 600; }