/* Estilos compartidos por toda la app (DISENO.md, versión final aprobada 23/09/2026). Los
   colores, radios y tipografía viven en tokens.css; acá solo se usan (var(--...)), nunca
   hexadecimales sueltos. Criterio: ejecutivo y sobrio — fondo blanco, líneas finas, color de
   marca solo donde aporta información, nada de bloques de color llenos ni etiquetas pintadas.
   tokens.css no se importa desde acá: base.html lo enlaza antes que esta hoja, con su versión en
   la URL (un @import lo pedía sin versión y podía quedar el viejo en caché — revisión adversarial
   de los agregados del dueño, 2026-09-24). */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fuente-texto), system-ui, sans-serif;
    color: var(--texto);
    background: var(--fondo-celular);
    font-size: 16px; /* evita el zoom automático de iOS en inputs */
}

h1, h2, h3 {
    font-family: var(--fuente-titulos), system-ui, sans-serif;
    margin: 0;
}
h1 {
    font-stretch: 125%;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0.03em;
    color: var(--azul-marca);
    margin-bottom: 0.75rem;
}
h2 {
    font-family: var(--fuente-texto), system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--secundario);
    border-bottom: 1px solid var(--linea);
    padding-bottom: 8px;
    margin: 1.75rem 0 0.75rem;
}

a { color: var(--celeste-marca); }
a:hover { color: var(--azul-marca); }

/* Foco del teclado (marca Consta, T10.7; WCAG 2.2, 2.4.7 y 2.4.11): contorno de 2 px en --foco,
   separado 2 px del elemento; sobre un fondo --azul-marca, en --amarillo-acento. */
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.fondo-azul :focus-visible, .franja-entorno :focus-visible { outline-color: var(--amarillo-acento); }

/* --- Encabezado de app ------------------------------------------------------------------ */
.encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: var(--blanco);
    border-bottom: 1px solid var(--linea);
}
.encabezado__logo { height: 26px; width: auto; }
.encabezado__nav { display: none; flex-wrap: wrap; gap: 1rem; font-weight: 600; font-size: 14px; }
.encabezado__nav a { text-decoration: none; color: var(--secundario); display: inline-flex; align-items: center; min-height: 44px; }  /* DETALLES P8 (v8): 44 px, en la misma fila que Consta */
.encabezado__nav a:hover { color: var(--celeste-marca); }
.encabezado__nav a.activo, .encabezado__submenu a.activo { color: var(--azul-marca); }
/* Segunda fila del menú (Parte 3, entrega 1): secciones del espacio, solo en la computadora
   (en el celular van en el menú de las iniciales). */
.encabezado__submenu { display: none; flex-basis: 100%; gap: 1.25rem; font-size: 13px; font-weight: 600; padding-top: 0.35rem; border-top: 1px solid var(--linea); }
.encabezado__submenu a { text-decoration: none; color: var(--terciario); padding: 0.2rem 0; }
.encabezado__submenu a.activo { border-bottom: 2px solid var(--azul-marca); }
.encabezado__usuario { margin-left: auto; position: relative; }
/* Marca Consta (T10.2, opción 2): Consta a la izquierda; el logo de la empresa a la derecha, antes
   de las iniciales (23 px en el celular, 24 px en la computadora, hasta 140 px de ancho, 12 px de
   aire antes de las iniciales; nunca más grande que Consta ni tocándolo). */
.encabezado__consta { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.encabezado__consta-horizontal { display: none; height: 24px; width: auto; }
.encabezado__consta-simbolo { display: block; height: 28px; width: auto; }
.encabezado__empresa { height: 23px; width: auto; max-width: 110px; object-fit: contain; object-position: right center; margin-left: auto; flex: none; }
.encabezado__empresa + .encabezado__usuario { margin-left: 12px; }
/* Ingreso (T10.4): Consta vertical a 72 px, centrado; «Espacio de» y el logo de la empresa a 24 px. */
.ingreso-marca { display: flex; justify-content: center; padding: 12px 0 4px; }
.ingreso-marca__consta { height: 72px; width: auto; }
.ingreso-marca__empresa { height: 40px; width: auto; max-width: 240px; }
.ingreso-empresa { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 20px 0 8px; }
.ingreso-empresa__texto { font-size: 12.5px; color: var(--secundario); }
.ingreso-empresa__logo { height: 24px; width: auto; max-width: 160px; }
/* En el celular, con el selector de obra, lo que se achica es el selector (el logo de la empresa no
   baja de 23 px de alto: mínimo del manual de Ecoenergía). */
@media (max-width: 899px) {
    .encabezado .selector-obra__actual, .encabezado .selector-obra--una { max-width: calc(100vw - 262px); padding: 0 10px; }
}
@media (min-width: 900px) {
    .encabezado__nav { display: flex; }
    .encabezado__submenu { display: flex; }
    .encabezado__consta-horizontal { display: block; }
    .encabezado__consta-simbolo { display: none; }
    .encabezado__empresa { height: 24px; max-width: 140px; }
}

.solo-movil-menu { display: block; }
@media (min-width: 900px) {
    .solo-movil-menu { display: none; }
}

/* Casillero oculto reutilizable: saca de la vista un checkbox sin display:none (algunos
   navegadores desconectan un checkbox display:none de su <label>) — mismo patrón "de facto
   estándar" que ya usa acá abajo .motivo-opciones input[type="radio"], como utilidad con
   nombre propio para reusar en otros lados (ver Menú del avatar más abajo). */
.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radio-etiqueta);
    border: none;
    background: var(--fondo-resumen);
    color: var(--azul-marca);
    font-family: var(--fuente-texto), sans-serif;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
}
/* Menú del avatar (DECISIONES.md, 2026-09-23, punto 17): casillero oculto (checkbox + label),
   sin :target — ver el comentario en _componentes/encabezado.html. El fondo a pantalla
   completa (otra <label> del mismo checkbox) cierra el menú al tocar en cualquier otro lugar;
   va debajo del panel (z-index menor) y arriba del resto de la página. */
.menu-usuario__fondo { display: none; position: fixed; inset: 0; z-index: 9; background: transparent; border: 0; cursor: default; }
.menu-usuario-toggle:checked ~ .menu-usuario__fondo { display: block; }
.menu-usuario {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio-campo);
    box-shadow: 0 4px 16px rgba(27, 36, 51, 0.12);
    min-width: 200px;
    padding: 0.4rem;
    z-index: 10;
}
.menu-usuario-toggle:checked ~ .menu-usuario { display: block; }
.menu-usuario__nombre { display: block; padding: 0.5rem 0.6rem; font-weight: 700; font-size: 13px; color: var(--secundario); }
.menu-usuario a, .menu-usuario button.enlace {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    text-decoration: none;
    color: var(--texto);
    font-size: 14px;
    background: none;
    border: none;
    font-family: var(--fuente-texto), sans-serif;
    cursor: pointer;
}
.menu-usuario a:hover, .menu-usuario button.enlace:hover { background: var(--fondo-celular); }

/* --- Navegación inferior (celular) -------------------------------------------------------- */
.nav-inferior {
    background: var(--blanco);
    border-top: 1px solid var(--linea);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 6px 4px calc(10px + env(safe-area-inset-bottom, 0px));
    position: fixed;
    left: 0; right: 0; bottom: 0;
}
@media (min-width: 900px) {
    .nav-inferior { display: none; }
}
.nav-inferior a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
    min-height: 44px;
    text-decoration: none;
    color: var(--terciario);
    font-size: 11.5px;
    font-weight: 500;
}
.nav-inferior a.activo { color: var(--azul-marca); font-weight: 700; }
.nav-inferior svg { stroke: currentColor; }

/* --- Contenido general -------------------------------------------------------------------- */
/* Bajo el ancho de escritorio hay una barra inferior fija (nav-inferior, ~60px de alto: 6px de
   padding superior + 44px de contenido + 10px de padding inferior) más el área segura del
   teléfono: sin este margen abajo, el último elemento de cualquier pantalla (ej. "Cerrar
   reunión y emitir acta", "Ver todos los frentes de la obra") queda tapado por la barra
   (defecto detectado en la prueba 2, 2026-09-23). Antes había una regla separada con
   padding-bottom que un padding abreviado más abajo en el archivo pisaba sin querer; ahora es
   una sola regla, con el bloque de escritorio después para pisarla ahí sí a propósito; el
   padding va en propiedades largas (no abreviado) para que una futura regla ".contenido" con
   "padding: ..." no vuelva a pisar justo el lado que importa acá. */
.contenido { padding-top: 1rem; padding-right: 1rem; padding-left: 1rem; padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); max-width: 1100px; margin: 0 auto; background: var(--blanco); }
@media (min-width: 900px) {
    .contenido { background: none; padding-bottom: 1rem; }
}

/* --- Encabezado de página (Carga, Acta): obra + subtítulo, sin fondo de color ------------- */
.encabezado-pagina { display: flex; flex-direction: column; gap: 6px; padding: 2px 0 18px; }
.encabezado-pagina__eyebrow { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--secundario); }  /* T10.7: va sobre el fondo de la página, no sobre blanco */
.encabezado-pagina__titulo {
    font-family: var(--fuente-titulos), sans-serif;
    font-stretch: 125%;
    font-weight: 600;
    font-size: 21px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--azul-marca);
}
.encabezado-pagina__subtitulo { font-size: 12.5px; color: var(--secundario); }

/* Exportar a Excel (Parte 8, E6) y los enlaces de la pantalla de Administración (E7): mismo
   aspecto que "Descargar PDF", con el toque de 44 px. */
.acciones-exportar { margin: 8px 0; }
.boton-exportar, .boton-enlace {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 0 14px;
    border-radius: var(--radio-campo);
    border: 1px solid var(--azul-marca);
    background: var(--blanco);
    color: var(--azul-marca);
    text-decoration: none;
    white-space: nowrap;
}
.boton-exportar:hover, .boton-enlace:hover { background: var(--fondo-celular); color: var(--azul-marca); }
/* D-c (modo noche v3): "Actas emitidas · reabrir" en Administración. */

.linea-acento { margin: 14px 0 4px; display: flex; align-items: center; }
.linea-acento__amarillo { width: 32px; height: 2px; background: var(--amarillo-acento); flex-shrink: 0; }
.linea-acento__azul { flex-grow: 1; height: 1px; background: var(--azul-marca); }

/* --- Resumen de cifras (acta: sin fondo; celular: caja con fondo) ------------------------- */
.resumen-cifras { display: flex; flex-wrap: wrap; margin: 22px 0 8px; }
.resumen-cifras__item {
    display: flex; flex-direction: column; gap: 4px;
    flex: 1 1 auto; min-width: 45%;
    padding: 4px 16px 4px 0;
    border-left: none;
}
.resumen-cifras__item + .resumen-cifras__item { border-left: 1px solid var(--linea); padding-left: 16px; }
.resumen-cifras__valor {
    font-family: var(--fuente-titulos), sans-serif;
    font-stretch: 112%;
    font-weight: 500;
    font-size: 26px;
    color: var(--azul-marca);
    font-variant-numeric: tabular-nums;
}
.resumen-cifras__rotulo { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terciario); }
@media (min-width: 640px) {
    .resumen-cifras__item { min-width: 0; border-left: 1px solid var(--linea); padding-left: 16px; }
    .resumen-cifras__item:first-child { border-left: none; padding-left: 0; }
}

/* Mejoras de carga, 2026-09-23 (punto 1): reemplaza al resumen de 3 cifras — "N de M cargados
   · Faltan K para la reunión" + barra fina de 4px, línea fina sin bloques de color (DISENO.md,
   "Criterio"). */
.progreso-carga { display: flex; flex-direction: column; gap: 8px; margin: 0 0 1.25rem; }
.progreso-carga__texto { font-size: 12.5px; font-weight: 600; color: var(--secundario); }
.progreso-carga__barra { height: 4px; background: var(--pista-barra); border-radius: 2px; overflow: hidden; }
.progreso-carga__barra-relleno { display: block; height: 100%; background: var(--azul-marca); }
/* Sistema Consta v2: la barra de progreso es un <progress> (sin estilos escritos en la plantilla). */
.progreso-carga__progreso { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 4px; border: none; background: var(--pista-barra); color: var(--azul-marca); }
.progreso-carga__progreso::-webkit-progress-bar { background: var(--pista-barra); }
.progreso-carga__progreso::-webkit-progress-value { background: var(--azul-marca); }
.progreso-carga__progreso::-moz-progress-bar { background: var(--azul-marca); }

.punto {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: var(--radio-etiqueta);
    box-sizing: border-box;
    flex-shrink: 0;
}
.punto--chico { width: var(--tamano-punto); height: var(--tamano-punto); }  /* sistema v2: todo punto de estado mide 7 px */
.punto--ambar { background: var(--amarillo-acento); }
.punto--gris { background: var(--rotulo-tabla); }

/* --- Rótulo de sección numerado (acta) ----------------------------------------------------- */
.rotulo-seccion {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--linea);
    margin: 1.75rem 0 0.75rem;
}
.rotulo-seccion__numero { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--celeste-marca); }
.rotulo-seccion__titulo { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--secundario); font-weight: 600; }
.rotulo-seccion__leyenda { margin-left: auto; display: flex; gap: 14px; font-size: 9.5px; color: var(--terciario); }
.rotulo-seccion__leyenda-item { display: flex; align-items: center; gap: 5px; }
.rotulo-seccion__leyenda-marca { width: 12px; height: 4px; }

/* --- Barra de dos tonos ---------------------------------------------------------------------*/
.barra-dos-tonos {
    display: flex;
    width: 80px;
    height: 4px;
    background: var(--pista-barra);
    border-radius: 2px;
    overflow: hidden;
}
.barra-dos-tonos--ancha { width: 100%; height: 5px; border-radius: 3px; }

/* --- Tablas --------------------------------------------------------------------------------*/
table.tabla-datos { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.tabla-datos th {
    color: var(--terciario);
    font-weight: 600;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--linea);
}
table.tabla-datos td { padding: 10px; border-top: 1px solid var(--separador-fila); vertical-align: middle; }
table.tabla-datos tbody tr:first-child td { border-top: none; }
table.tabla-datos .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--secundario); }
table.tabla-datos .descripcion { display: block; font-weight: 600; }
table.tabla-datos .detalle { display: block; font-size: 10px; color: var(--terciario); margin-top: 2px; }

/* --- Fila de escritorio de Carga: una sola línea por frente (Entrega 1.5, DECISIONES.md
   2026-09-23), edición compacta en la última columna — mejoras de carga, puntos 3, 7, 9, 11 */
/* Ajuste fino (DECISIONES.md 2026-09-23, punto 3): se saca el recuadro ámbar alrededor de toda
   la fila -- la marca "Restricción abierta" junto al detalle (.fila-carga__restriccion-aviso,
   más abajo) ya alcanza, como en la maqueta. */
.fila-avance__linea { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; }
.fila-avance__compacta { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px 10px; }
.fila-avance__fotos { flex-shrink: 0; }
.fila-avance__input-pct {
    width: 64px;
    height: 34px;
    padding: 0 8px;
    text-align: center;
    font-weight: 600;
    color: var(--azul-marca);
}
.boton-guardar-compacto { height: 34px; padding: 0 16px; font-size: 13px; white-space: nowrap; }
.enlace-atajo {
    background: none;
    border: none;
    padding: 0;
    color: var(--celeste-marca);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.enlace-atajo:hover { background: none; color: var(--azul-marca); text-decoration: underline; }
.confirmacion--compacta { margin: 0; font-size: 11px; white-space: nowrap; }
/* Fila de vista previa (colspan completo, oculta por defecto — app/static/js/carga.js la
   revela en el primer input del campo de %). Mayor especificidad que "table.tabla-datos td"
   a propósito, para recortar el padding/borde de fila normal en esta fila secundaria. */
table.tabla-datos .fila-avance__vista-previa-fila td { padding: 2px 10px 10px; border-top: none; }

/* --- Punto de estado (reemplaza a la etiqueta rellena anterior) --------------------------- */
.estado-punto { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--secundario); white-space: nowrap; }
.estado-punto__marca { width: 7px; height: 7px; border-radius: var(--radio-etiqueta); box-sizing: border-box; border: 1px solid transparent; flex-shrink: 0; }
.estado-punto--no-iniciado .estado-punto__marca { background: var(--estado-no-iniciado-punto); border-color: var(--estado-no-iniciado-borde); }
.estado-punto--en-proceso .estado-punto__marca { background: var(--estado-en-proceso-punto); border-color: var(--estado-en-proceso-borde); }
.estado-punto--finalizado .estado-punto__marca { background: var(--estado-finalizado-punto); border-color: var(--estado-finalizado-borde); }
.estado-punto--abierta .estado-punto__marca { background: var(--estado-abierta-punto); border-color: var(--estado-abierta-borde); }
.estado-punto--liberada .estado-punto__marca { background: var(--estado-liberada-punto); border-color: var(--estado-liberada-borde); }
/* v18, L9 (D5): «Vencida» con el marrón del diccionario (punto y palabra). */
.estado-punto--vencida .estado-punto__marca { background: var(--avance-negativo); border-color: var(--avance-negativo); }
.estado-punto--vencida { color: var(--avance-negativo); font-weight: 700; }
/* Sección 02 del acta: compromiso reprogramado y sin finalizar, "Reprogramado · dd/mm" con punto
   ámbar en lugar de "En proceso" (pedido del dueño, 2026-09-24, antes de cerrar la Parte 2). */
.estado-punto--reprogramado .estado-punto__marca { background: var(--estado-reprogramado-punto); border-color: var(--estado-reprogramado-borde); }
/* La misma marca repetida en la primera columna, debajo de la línea gris, solo en el celular: ahí
   la tabla se desliza hacia el costado y la columna Estado queda fuera de la vista (revisión
   adversarial de los agregados del dueño, 2026-09-24). Desde 768 px se ve en Estado. */
.acta-reprogramado-movil { display: block; margin-top: 4px; }
@media (min-width: 900px) {
    .acta-reprogramado-movil { display: none; }
}

/* --- Formularios y botones ------------------------------------------------------------------ */
form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 13px; font-weight: 700; color: var(--texto); }
form label textarea, form label input, form label select { width: 100%; }
.ayuda-campo { display: block; margin-top: -0.4rem; font-size: 11.5px; font-weight: 400; color: var(--terciario); }

input, select, textarea {
    font-family: var(--fuente-texto), sans-serif;
    font-size: 1rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-campo);
    color: var(--texto);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--celeste-marca); }
/* Un <select> con una opción larga elegida (un frente o una restricción de nombre largo) no
   ensancha la página: WebKit (iPhone) deja que el texto de la opción elegida se salga de la caja
   del <select>, y ese sobrante cuenta para el ancho de la página, que se corría de costado con
   una franja vacía a la derecha (defecto de la Parte 2, 2026-09-24; prueba:
   tests_e2e/test_sin_desborde_horizontal.py). Chromium ya lo recortaba: en computadora y en
   Android se ve igual que antes. */
select:not([multiple]):not([size]) { overflow: hidden; }  /* solo las listas desplegables */

button, .boton {
    font-family: var(--fuente-texto), sans-serif;
    font-size: 15px;
    font-weight: 700;
    padding: 0.6rem 1.1rem;
    border-radius: var(--radio-campo);
    border: none;
    background: var(--azul-marca);
    color: var(--blanco);
    cursor: pointer;
}
button:hover, .boton:hover { background: var(--azul-marca-hover); }
button.secundario, .boton--secundario {
    background: var(--blanco);
    color: var(--azul-marca);
    border: 1px solid var(--linea);
}
button.secundario:hover, .boton--secundario:hover { background: var(--fondo-celular); }

/* --- Confirmaciones y avisos de regla -------------------------------------------------------*/
.confirmacion {
    color: var(--confirmacion-texto);
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 0.75rem;
}
.confirmacion--fila { display: flex; margin: 0.35rem 0 0; font-size: 0.85rem; }

.alerta { color: var(--aviso-texto); font-weight: 600; background: var(--aviso-fondo); border-radius: var(--radio-campo); padding: 0.5rem 0.75rem; display: inline-block; }
/* Carga sin JavaScript tras guardar en una semana ya cerrada (pedido del dueño, 2026-09-25): el
   aviso arriba de la Carga nueva, a lo ancho, y un nombre de frente largo corta la línea en vez de
   hacer deslizar la pantalla hacia el costado en el celular. */
.aviso-semana-cerrada { display: block; margin: 0 0 12px; overflow-wrap: anywhere; }
/* Revisión de datos (2026-09-25), mismo criterio: la respuesta a la propuesta del fiscal que ya
   venció o ya se respondió, arriba de la Carga; y el de una Reunión ya cerrada ("Esta reunión ya se
   cerró…"), arriba de la Reunión nueva o en el lugar de avisos de la sección tocada (vacío, no
   ocupa lugar). */
.aviso-propuesta, .aviso-reunion-cerrada { display: block; margin: 0 0 12px; overflow-wrap: anywhere; }
.aviso-reunion-cerrada a { color: inherit; font-weight: 700; }
/* DETALLES P4 (v7): «Falta para certificar: …» arriba de «Armar el borrador» (enlaces de 44 px). */
.falta-para-certificar { margin: 0 0 12px; padding: 0 12px; border: 1px solid var(--aviso-borde); border-radius: var(--radio-campo); background: var(--aviso-fondo); color: var(--aviso-texto); font-size: 13px; overflow-wrap: anywhere; }
.enlace-falta { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-weight: 700; }
/* Mejora 5 (revisión de usabilidad, ensayo v10): la lista de certificados vacía dice qué falta. */
.certificados-vacio__pasos { margin: 0 0 12px; padding-left: 18px; font-size: 13.5px; overflow-wrap: anywhere; }
.certificados-vacio__pasos .enlace-falta { color: var(--azul-marca); }
.certificados-vacio__ir { display: inline-flex; align-items: center; min-height: 44px; }
.reunion-aviso:empty { display: none; }
.reunion-aviso .aviso-reunion-cerrada, .compromiso .aviso-reunion-cerrada { margin: 0; }

/* --- Lista de Carga en celular: un frente desplegado a la vez, sin JavaScript -------------- */
/* Cada frente es <div id="carga-N"> con dos hijos: el resumen (<a href="#carga-N">, siempre en
   el DOM) y el formulario (oculto salvo que el div sea el :target del fragmento de la URL). El
   navegador solo puede tener un fragmento activo: tocar otro frente cierra el anterior solo,
   sin una línea de JavaScript (ver ESTADO.md / plan de diseño). */
.lista-carga { display: flex; flex-direction: column; }
/* Mejoras de carga, 2026-09-23 (punto 4): dentro de la lista de celular, más contraste que en
   el resto de la app — se redefine la propiedad personalizada --secundario (se puede) solo en
   este scope, así cualquier var(--secundario) usado adentro (rótulos de campo, métricas, aviso)
   toma el valor más oscuro sin tocar la tabla de escritorio, el acta ni nada más. */
@media (max-width: 899px) {
    .lista-carga { --secundario: var(--secundario-movil-carga); }
}
.lista-carga-seccion + .lista-carga-seccion { margin-top: 6px; }
.lista-carga__vacio { padding: 16px 4px; font-size: 12.5px; color: var(--terciario); }

.fila-carga { border-top: 1px solid var(--separador-fila); }
.fila-carga:first-child { border-top: none; }
.fila-carga:target, .fila-carga--abierta { background: var(--fondo-fila-desplegada); }
/* Mejoras de carga, 2026-09-23 (punto 3): frente con restricción abierta — anillo ámbar fino
   alrededor de la tarjeta (nunca un bloque de color lleno). */
.fila-carga--restriccion { box-shadow: inset 0 0 0 1px var(--restriccion-abierta-anillo); border-radius: var(--radio-tarjeta); }
.fila-carga__restriccion-aviso {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--aviso-texto);
}
/* Anillo ámbar fino junto al texto (como la maqueta), sin fondo lleno -- ver arriba, punto 3:
   en escritorio esta marca es ahora la ÚNICA señal de restricción abierta de la fila. */
.fila-carga__restriccion-aviso::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    border: 1.5px solid var(--restriccion-abierta-anillo);
    box-sizing: border-box;
    flex-shrink: 0;
}
.fila-carga__restricciones-abiertas {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--restriccion-abierta-anillo);
    border-radius: var(--radio-campo);
    background: var(--blanco);
}
.fila-carga__restricciones-abiertas p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--aviso-texto); }

.fila-carga__resumen {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 14px 4px;
    border: none;
    background: none;
    text-align: left;
    font-family: var(--fuente-texto), sans-serif;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.fila-carga:target .fila-carga__resumen, .fila-carga--abierta .fila-carga__resumen { display: none; }
.fila-carga__resumen-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fila-carga__descripcion { font-size: 13.5px; font-weight: 600; color: var(--texto); }
.fila-carga__pct { font-size: 13.5px; font-weight: 700; color: var(--azul-marca); font-variant-numeric: tabular-nums; }
.fila-carga__estado { font-size: 10.5px; color: var(--secundario); display: flex; align-items: center; gap: 5px; }
.fila-carga__estado--cargado { color: var(--confirmacion-texto); }
.fila-carga__estado svg { flex-shrink: 0; }

/* .fila-carga--abierta fuerza el panel visible sin depender de :target (que no se puede usar
   acá): tras un rechazo de regla, la respuesta HTMX reemplaza este <div id="carga-N"> entero
   (hx-swap-oob) por uno nuevo con el mismo id — el navegador no reaplica :target a un nodo
   recién insertado aunque el fragmento de la URL siga apuntando a él, así que sin esta clase
   el aviso y el campo de motivo quedaban armados en el HTML pero invisibles (defecto crítico
   detectado en la prueba 2, 2026-09-23). Por la misma razón tampoco sirve un POST nativo sin
   JavaScript: un <form> no conserva el fragmento de la URL al enviarse. */
.fila-carga__form { display: none; flex-direction: column; gap: 14px; padding: 4px 4px 18px; }
.fila-carga:target .fila-carga__form, .fila-carga--abierta .fila-carga__form { display: flex; }
.fila-carga__form-encabezado { display: flex; justify-content: space-between; align-items: baseline; }
.fila-carga__form-titulo { font-size: 13.5px; font-weight: 600; }
.fila-carga__form-pct { font-size: 13.5px; font-weight: 700; color: var(--azul-marca); }
.fila-carga__metricas { font-size: 11px; color: var(--secundario); }
.fila-carga__metricas .avance { font-weight: 600; }
.fila-carga__campo { display: flex; gap: 10px; align-items: flex-end; }
/* Estas etiquetas quedan fuera de un <form> real (el input se asocia al suyo por el
   atributo form="...", diseño 2026-09-23): la regla genérica "form label" de más arriba no
   las alcanza (exige que <label> sea descendiente de <form>), así que necesitan su propio
   diseño en columna acá. */
.fila-carga__form label { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: var(--secundario); font-weight: 400; }
.fila-carga__form label input, .fila-carga__form label textarea { width: 100%; }
.fila-carga__campo label { flex-grow: 1; }
.fila-carga__input-pct {
    height: 48px;
    width: 100%;
    font-size: 19px;
    font-weight: 600;
    color: var(--azul-marca);
    padding: 0 14px;
    border: 1px solid var(--azul-marca);
    border-radius: var(--radio-campo);
}
.fila-carga__boton { height: 48px; padding: 0 22px; white-space: nowrap; }
.fila-carga__ayuda { font-size: 11px; color: var(--secundario); }
.fila-carga__cerrar { align-self: flex-start; font-size: 12px; font-weight: 600; }

/* --- Vista previa antes de guardar (mejoras de carga, punto 9) ---------------------------- */
.fila-carga__vista-previa { font-size: 11.5px; color: var(--secundario); }
.fila-carga__vista-previa--negativa { color: var(--avance-negativo); }

/* --- Atajos y botones de guardar (mejoras de carga, puntos 7 y 10) ------------------------ */
.fila-carga__atajos { display: flex; flex-wrap: wrap; gap: 8px; }
.boton-atajo {
    background: var(--blanco);
    color: var(--azul-marca);
    border: 1px solid var(--azul-marca);
    border-radius: var(--radio-campo);
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 12px;
    white-space: nowrap;
}
.boton-atajo:hover { background: var(--fondo-celular); }
.fila-carga__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.boton-texto-celeste {
    background: none;
    color: var(--celeste-marca);
    border: none;
    padding: 0.6rem 0.2rem;
    font-weight: 700;
}
.boton-texto-celeste:hover { background: none; color: var(--azul-marca); }

/* --- Motivo con opciones de un toque (mejoras de carga, punto 11) ------------------------- */
.motivo-opciones-bloque { display: flex; flex-direction: column; gap: 8px; }
.motivo-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.motivo-opciones input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.motivo-opciones label {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-campo);
    font-size: 12px;
    font-weight: 600;
    color: var(--secundario);
    background: var(--blanco);
    cursor: pointer;
}
.motivo-opciones input[type="radio"]:checked + label { border: 2px solid var(--azul-marca); background: var(--fondo-seleccion); color: var(--azul-marca); font-weight: 700; }  /* sistema v2, regla 2 */
.motivo-opciones input[type="radio"]:focus-visible + label { outline: 2px solid var(--celeste-marca); outline-offset: 2px; }
.motivo-detalle { width: 100%; }
/* Causa de una corrección del fiscal (pedido del dueño, 2026-09-24, antes de cerrar la Parte 2;
   _componentes/causa_correccion.html): las mismas opciones de un toque, con 44 px de alto para
   tocarlas cómodas en el celular (mismo mínimo que los botones de las fotos del fiscal). Acá
   las opciones están dentro del <form> (en Carga no): flex-direction y gap anulan la regla
   genérica "form label" (en columna), que dejaba el texto arriba de la opción. */
.motivo-opciones--tactil label {
    min-height: 44px; padding: 0 14px; font-size: 13px; box-sizing: border-box;
    flex-direction: row; justify-content: center; gap: 0;
}

/* --- Nunca fallar en silencio (verificación 1.9, DECISIONES.md 2026-09-24) ----------------
   Aviso chico junto al campo a corregir (app/static/js/avisos.js y las plantillas de Carga) y
   marca en el campo mismo. Mismos colores de aviso que .alerta, sin colores nuevos. */
.alerta--campo { display: block; font-size: 12px; padding: 0.35rem 0.6rem; margin: 2px 0; }
.motivo-opciones:focus { outline: none; }
.motivo-opciones[aria-invalid="true"] label { border-color: var(--aviso-texto); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--aviso-texto); }
.aviso-falla { display: block; margin: 0 0 8px; }

/* Señal débil, nivel 1 (Parte 8, E5, app/static/js/senal.js): "Pendiente de subir" en la fila y
   el recuadro de arriba de la Carga. Mismos colores de siempre (el punto ámbar de "Por cargar" y
   el aviso de .alerta), sin colores nuevos. */
.cola-sin-senal { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.cola-sin-senal__pendientes { margin: 0; font-size: 13px; color: var(--secundario); overflow-wrap: anywhere; }
.cola-sin-senal__linea { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; overflow-wrap: anywhere; }
.cola-sin-senal__linea > span { flex: 1 1 200px; min-width: 0; }
.cola-sin-senal__linea .boton-atajo { min-height: 44px; }
.cola-sin-senal__foto { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radio-campo); }
.pendiente-subir { flex-wrap: wrap; }
.fila-carga__acciones > .pendiente-subir { flex-basis: 100%; }
td > .pendiente-subir { margin-top: 3px; }
.fotos-pendientes { display: block; }

/* --- Fotos de respaldo: ventana de imágenes (DECISIONES.md 2026-09-23) --------------------- */
/* Compartido entre Carga (avance) y Restricciones, ver app/templates/_componentes/fotos.html y
   _componentes/ventana_fotos_interior.html. Mismo criterio "ejecutivo y sobrio" del resto del
   paquete: miniatura con borde fino (nunca un marco de color lleno) y botones de borde fino. */
.fotos-bloque { display: inline-block; }
.fotos-ver-enlace {
    background: none;
    border: none;
    padding: 0;
    color: var(--celeste-marca);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.fotos-ver-enlace:hover { color: var(--azul-marca); text-decoration: underline; }
.fotos-input-archivo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.fotos-error { margin: 0; font-size: 11px; color: var(--aviso-texto); }
/* Subida de un solo paso (Entrega 1.5, ajuste fino -- DECISIONES.md 2026-09-23, punto 1): sin
   botón "Subir", htmx muestra este span mientras la subida está en vuelo (hx-indicator, ver
   _componentes/ventana_fotos_interior.html). htmx agrega/saca la clase htmx-request sobre el
   propio elemento referenciado -- estas dos reglas son las que hacen el show/hide (no vienen
   con htmx.min.js). */
.htmx-indicator { opacity: 0; transition: opacity 120ms ease; }
.htmx-request.htmx-indicator { opacity: 1; }
.fotos-subiendo { font-size: 11px; color: var(--secundario); white-space: nowrap; }
/* "Subiendo…" con display, no con opacidad (ensayo v10, E1): con opacidad 0 el texto seguía en la
   ventana para el lector de pantalla y al copiar, y parecía que la foto no había terminado. */
.fotos-subiendo.htmx-indicator { display: none; }
.fotos-subiendo.htmx-indicator.htmx-request { display: inline; opacity: 1; }

/* Ventana de imágenes: <dialog> nativo (app/static/js/ventana_fotos.js llama a showModal()) con
   JavaScript; div simple (.ventana-fotos--pagina) en la página propia sin JavaScript
   (fotos/ventana.html) -- mismo contenido interior en los dos casos. */
dialog.ventana-fotos {
    padding: 18px 20px;
    border: none;
    border-radius: var(--radio-tarjeta);
    box-shadow: 0 12px 32px rgba(20, 30, 48, 0.22);
    width: min(640px, 92vw);
    max-height: 85vh;
    overflow-y: auto;
}
dialog.ventana-fotos::backdrop { background: rgba(15, 23, 32, 0.55); }
.ventana-fotos--pagina {
    border: 1px solid var(--linea);
    border-radius: var(--radio-tarjeta);
    padding: 18px 20px;
    max-width: 640px;
}
@media (max-width: 899px) {
    dialog.ventana-fotos {
        position: fixed;
        inset: auto 0 0 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
        max-height: 88vh;
        border-radius: 14px 14px 0 0;
    }
}
.ventana-fotos__encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--linea);
}
.ventana-fotos__titulo { font-weight: 600; font-size: 14px; color: var(--texto); }
.ventana-fotos__cerrar {
    background: none;
    border: none;
    padding: 4px;
    /* Ensayo v10 (segunda vuelta, E1): la «X» medía 24 px de ancho; 44 × 44 para el dedo. */
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--secundario);
    line-height: 0;
    flex-shrink: 0;
}
.ventana-fotos__cerrar:hover { background: none; color: var(--texto); }
.ventana-fotos__grilla { display: flex; flex-wrap: wrap; gap: 12px; }
.ventana-fotos__grilla[hidden] { display: none; }
.ventana-fotos__item { margin: 0; width: 108px; display: flex; flex-direction: column; gap: 6px; }
.ventana-fotos__miniatura-enlace { display: block; border-radius: var(--radio-campo); overflow: hidden; border: 1px solid var(--linea); }
.ventana-fotos__miniatura { width: 108px; height: 108px; object-fit: cover; display: block; }
.ventana-fotos__pie { margin: 0; font-size: 10.5px; font-weight: 400; color: var(--terciario); line-height: 1.3; }  /* igual en Carga y en la fiscalización, esté donde esté la ventana */
.ventana-fotos__borrar-form { margin: 0; }
.ventana-fotos__borrar-boton { padding: 5px 10px; font-size: 11px; }
.ventana-fotos__agregar {
    position: relative;
    overflow: hidden;
    width: 108px;
    height: 108px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px dashed var(--linea);
    border-radius: var(--radio-campo);
    color: var(--celeste-marca);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}
.ventana-fotos__agregar:hover { border-color: var(--celeste-marca); }
.ventana-fotos__ampliada { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ventana-fotos__ampliada[hidden] { display: none; }
.ventana-fotos__ampliada-item { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.ventana-fotos__ampliada-item[hidden] { display: none; }
.ventana-fotos__imagen-grande { max-width: 100%; max-height: 55vh; object-fit: contain; border-radius: var(--radio-campo); display: block; }
.ventana-fotos__ampliada-acciones { display: flex; align-items: center; justify-content: center; gap: 16px; }
.ventana-fotos__flecha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--linea);
    border-radius: 999px;
    color: var(--texto);
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}
.ventana-fotos__flecha:hover { background: var(--fondo-celular); }

/* Acta en pantalla (semanas/acta.html), secciones 02 y 03: en lugar de la miniatura, la misma
   referencia que el PDF ("Foto 3", "Fotos 3 y 4"), que abre la ventana de fotos del acta
   (pedido del dueño, 2026-09-25 -- _componentes/fotos_acta.html). Va en su propia línea, debajo
   de la línea gris (02) o de la restricción (03), con objetivo táctil de 44 px. */
.acta-foto-ref {
    display: flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    min-width: 44px;
    margin-bottom: -6px;  /* el alto de 44 px es para el dedo: la fila no crece más que con la miniatura de antes */
    font-size: 12px;
    font-weight: 600;
    color: var(--celeste-marca);
    text-decoration: none;
    white-space: nowrap;
}
.acta-foto-ref:hover { color: var(--azul-marca); text-decoration: underline; }
.acta-foto-ref svg { flex-shrink: 0; }

/* Ventana de fotos del acta (app/static/js/visor_fotos_acta.js): <dialog> propio, distinto de la
   ventana de Carga (dialog.ventana-fotos), para que ninguno de los dos scripts toque al otro. En
   la computadora, una caja grande centrada; en el celular, toda la pantalla. touch-action: none
   en toda la ventana: el navegador no desliza la página de atrás ni la agranda con dos dedos
   (el zoom y los gestos de la foto los maneja el script). Sin padding propio: la caja interior
   la cubre entera, así un clic con target === <dialog> es siempre fuera de la caja. */
dialog.visor-fotos {
    padding: 0;
    border: none;
    border-radius: var(--radio-tarjeta);
    box-shadow: 0 12px 32px rgba(20, 30, 48, 0.28);
    width: min(980px, 94vw);
    height: min(880px, 90vh);
    max-width: none;
    max-height: none;
    overflow: hidden;
    background: var(--blanco);
    color: var(--texto);
    touch-action: none;
    overscroll-behavior: contain;
}
dialog.visor-fotos:focus { outline: none; }  /* el foco va a la ventana entera al abrir: sin recuadro */
dialog.visor-fotos::backdrop { background: rgba(15, 23, 32, 0.72); }
/* Toda la pantalla también en el celular en horizontal (pantalla baja, 390-412 px de alto) y en
   las pantallas táctiles grandes: con la caja de la computadora la foto quedaba más chica justo
   cuando se gira el celular para verla más grande (revisión de las fotos del acta, 2026-09-25). */
@media (max-width: 899px), (max-height: 500px), (pointer: coarse) {
    dialog.visor-fotos {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        margin: 0;
        border-radius: 0;
    }
}
.visor-fotos__caja { display: flex; flex-direction: column; width: 100%; height: 100%; }
.visor-fotos__encabezado {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 10px 16px;
    border-bottom: 1px solid var(--linea);
    flex-shrink: 0;
}
.visor-fotos__titulos { margin: 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 3px; }
.visor-fotos__numero { font-size: 14px; font-weight: 700; color: var(--azul-marca); }
/* Un compromiso o una restricción de texto largo no empuja la foto fuera de la pantalla: dos
   líneas como mucho (el lector de pantalla lee el texto entero). */
.visor-fotos__fila {
    font-size: 12px;
    color: var(--secundario);
    line-height: 1.35;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.visor-fotos__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    min-width: 44px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;  /* "Volver a entrar" es un enlace con cara de botón */
    touch-action: manipulation;
}
.visor-fotos__boton[hidden] { display: none; }
.visor-fotos__boton[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.visor-fotos__boton[aria-disabled="true"]:hover { background: var(--blanco); }
.visor-fotos__cerrar { flex-shrink: 0; }
.visor-fotos__flecha { width: 44px; padding: 0; font-size: 24px; line-height: 1; border-radius: var(--radio-etiqueta); }
.visor-fotos__marco {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: var(--fondo-resumen);
    touch-action: none;
    cursor: zoom-in;
}
.visor-fotos__marco--ampliada { cursor: grab; }
.visor-fotos__marco--arrastrando { cursor: grabbing; }
/* Centrada y achicada hasta entrar entera (nunca agrandada más que su tamaño real); el zoom y el
   desplazamiento son un transform que pone el script. */
.visor-fotos__imagen {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    display: block;
    transform-origin: center center;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}
.visor-fotos__imagen[hidden] { display: none; }
.visor-fotos__aviso {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--secundario);
}
.visor-fotos__aviso[hidden] { display: none; }
.visor-fotos__aviso--error { color: var(--aviso-texto); }
.visor-fotos__aviso-texto {
    margin: 0;
    max-width: 420px;
    padding: 10px 14px;
    border-radius: var(--radio-campo);
    background: var(--aviso-fondo);
    border: 1px solid var(--aviso-borde);
    line-height: 1.45;
}
.visor-fotos__acciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--linea);
    flex-shrink: 0;
}
.visor-fotos__zoom { display: flex; gap: 8px; margin: 0 auto; }
/* Pantalla baja (celular en horizontal): encabezado y barra más finos, número y fila en una sola
   línea, para que la foto gane alto. Los botones siguen de 44 px. */
@media (max-height: 500px) {
    .visor-fotos__encabezado { align-items: center; padding: 4px 8px 4px 12px; }
    .visor-fotos__titulos { flex-direction: row; align-items: baseline; gap: 8px; padding-top: 0; }
    .visor-fotos__numero { flex-shrink: 0; }
    .visor-fotos__fila { -webkit-line-clamp: 1; min-width: 0; }
    .visor-fotos__acciones { padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px)); }
}

/* --- Barra deslizante decorativa (mejoras de carga, punto 6) ------------------------------ */
.fila-carga__slider-envoltorio { position: relative; padding: 10px 0 6px; }
.fila-carga__slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    background: var(--pista-barra);
}
.fila-carga__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--blanco);
    border: 2px solid var(--azul-marca);
    cursor: pointer;
}
.fila-carga__slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--blanco);
    border: 2px solid var(--azul-marca);
    cursor: pointer;
}
.fila-carga__slider::-moz-range-track { height: 4px; border-radius: 2px; background: transparent; }
.fila-carga__marca-anterior {
    position: absolute;
    top: 10px;
    width: 1px;
    height: 14px;
    background: var(--azul-marca);
    pointer-events: none;
}

.enlace-ver-todos { display: block; padding: 16px 4px; font-size: 13px; font-weight: 600; }

/* Pantallas sin lista propia para celular (Frentes, Restricciones, Reunión, Actas): la tabla
   scrollea horizontal dentro de su propio ancho en vez de romper el layout de la página. */
.tabla-envoltorio { overflow-x: auto; margin-bottom: 8px; }
.tabla-envoltorio table.tabla-datos { margin-bottom: 0; }

/* --- Utilidades responsive ------------------------------------------------------------------ */
.solo-movil { display: flex; flex-direction: column; gap: 0; }
table.solo-escritorio { display: none; }
@media (min-width: 900px) {
    .solo-movil { display: none; }
    table.solo-escritorio { display: table; }
}


/* --- Reunión (Parte 2, entrega B — DECISIONES.md 2026-09-24; maqueta:
   diseno/parte2/maqueta-p2-reunion.html). Tarjetas blancas con borde fino, dos columnas en
   computadora (1.35 / 1) y una en celular. Colores: solo tokens existentes (sin colores nuevos
   en el Módulo A, CLAUDE.md) -- Cumplido con el verde de confirmación, No cumplido con el ámbar
   de avance negativo y el punto amarillo de acento, Informativo en gris. */
.reunion-cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.reunion-cabecera .encabezado-pagina { padding-bottom: 0; }
.reunion-fecha { display: flex; align-items: flex-end; gap: 8px; }
.reunion-fecha label { font-size: 13px; color: var(--secundario); }
.reunion-grilla { display: grid; grid-template-columns: 1fr; gap: 22px; padding: 18px 0; }
.reunion-grilla__columna { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
@media (min-width: 900px) {
    .reunion-grilla { grid-template-columns: 1.35fr 1fr; gap: 24px; }
}
.tarjeta-reunion {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio-tarjeta);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.tarjeta-reunion > .rotulo-seccion { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
.tarjeta-reunion__vacio { margin: 6px 0 0; font-size: 12.5px; color: var(--terciario); }
.reunion-formulario { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; padding-top: 10px; border-top: 1px solid var(--linea); }
.reunion-formulario label { flex: 1 1 180px; }
.reunion-formulario__confirmacion { flex-basis: 100%; }
.reunion-formulario__confirmacion:empty { display: none; }
.confirmacion-restriccion {
    display: flex; flex-direction: column; gap: 8px; padding: 10px 12px;
    background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); border-radius: var(--radio-campo);
    color: var(--aviso-texto); font-size: 12.5px; font-weight: 600;
}
.confirmacion-restriccion__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.acuerdo-con-restriccion { color: var(--aviso-texto); }

.compromiso { display: flex; flex-direction: column; gap: 8px; padding: 11px 0; border-top: 1px solid var(--separador-fila); font-size: 12.5px; }
.tarjeta-reunion > .rotulo-seccion + .compromiso { border-top: none; }
.compromiso__linea { display: grid; grid-template-columns: 2.4fr 0.6fr 0.7fr 1.5fr; align-items: center; gap: 6px; }
.compromiso__frente { font-weight: 600; }
.compromiso__meta { text-align: right; color: var(--secundario); }
.compromiso__logrado { text-align: right; font-weight: 700; color: var(--azul-marca); }
.compromiso__resultado { padding-left: 16px; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; }
.compromiso__resultado--cumplido { color: var(--azul-marca); }
.compromiso__resultado--no-cumplido { color: var(--avance-negativo); }
.compromiso__resultado--informativo { color: var(--terciario); }
.compromiso__causas { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.compromiso__causas label { font-size: 11.5px; color: var(--secundario); display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; }
@media (max-width: 899px) {
    .compromiso__linea { grid-template-columns: 1fr auto auto; grid-template-areas: "frente frente frente" "meta logrado resultado"; }
    .compromiso__frente { grid-area: frente; }
    .compromiso__meta { grid-area: meta; text-align: left; }
    .compromiso__logrado { grid-area: logrado; }
    .compromiso__resultado { grid-area: resultado; }
}
.compromisos-total { display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--linea); font-size: 12.5px; color: var(--secundario); }
.compromisos-total strong { color: var(--azul-marca); }
/* Guardado automático de un No cumplido con señal lenta (reunion/_compromiso.html): mientras
   viaja, htmx pone htmx-request sobre el propio formulario y deshabilita sus campos
   (hx-disabled-elt) -- se ve "Guardando…" en lugar del último "Guardado HH:MM". Con display, no
   con opacidad como .htmx-indicator: oculto de verdad, también para lectores de pantalla. */
.compromiso__guardando { display: none; margin: 0.35rem 0 0; font-size: 0.85rem; font-weight: 600; color: var(--secundario); }
.compromiso__causas.htmx-request .compromiso__guardando { display: flex; }
.compromiso__causas.htmx-request .compromiso__guardado { display: none; }
/* La fecha sola (opción a del dueño): mismo "Guardando…", sin deshabilitar nada. */
.compromiso__causas.guardando-fecha .compromiso__guardando { display: flex; }
.compromiso__causas.guardando-fecha .compromiso__guardado { display: none; }
.compromiso__causas select:disabled, .compromiso__causas input:disabled { background: var(--fondo-resumen); color: var(--secundario); }

.disponible { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; font-size: 12.5px; }
.disponible__texto { display: flex; flex-direction: column; gap: 2px; }
.disponible__frente { font-weight: 600; }
.disponible__detalle { font-size: 11px; color: var(--confirmacion-texto); }
.disponible__accion { font-size: 12px; font-weight: 600; color: var(--celeste-marca); text-decoration: none; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }

.reunion-cierre { display: flex; flex-direction: column; gap: 8px; }
.reunion-cierre__ayuda { overflow-wrap: anywhere; }  /* v23l · LC.6: «Con copia a Administración: …» con correos largos */
.reunion-cierre__boton { width: 100%; height: 48px; font-size: 14.5px; }
/* Verificación 2.18 del dueño (2026-09-24). Solo tokens existentes (sin colores nuevos en el
   Módulo A): el ámbar de aviso para lo que hay que atender.
   - Cierre: "Esperando que termine de guardarse un compromiso…" o por qué no se cerró. */
.reunion-cierre__estado { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--secundario); }
.reunion-cierre__estado:empty { display: none; }
.reunion-cierre__estado.alerta { color: var(--aviso-texto); }
/* - Cierre rechazado: pegado al primer No cumplido incompleto, con lo que falta en cada uno;
     scroll-margin para que no quede pegado al borde de arriba al llevarlo a la vista. */
.cierre-rechazado {
    display: flex; flex-direction: column; gap: 6px; margin: 6px 0 2px; padding: 12px 14px;
    background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); border-radius: var(--radio-campo);
    color: var(--aviso-texto); font-size: 13px; line-height: 1.4; scroll-margin-top: 12px;
}
.cierre-rechazado__titulo { font-size: 15px; font-weight: 700; }
.cierre-rechazado__lista { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.cierre-rechazado__lista a { color: inherit; font-weight: 700; overflow-wrap: anywhere; }
.cierre-rechazado--completo { color: var(--confirmacion-texto); background: var(--blanco); border-color: var(--linea); }
/* - Restricciones vencidas, arriba de todo: en celular un bloque por restricción (frente y
     atraso arriba, la restricción, y quién libera + fecha comprometida), sin tabla ancha; desde
     768 px, columnas con encabezado. */
.tarjeta-reunion--vencidas { margin-top: 18px; border-color: var(--aviso-borde); }
.vencidas { list-style: none; margin: 0; padding: 0; }
.vencidas__encabezado { display: none; }
.vencida {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "frente atraso" "restriccion restriccion" "datos datos";
    gap: 3px 12px; padding: 10px 0; border-top: 1px solid var(--separador-fila); font-size: 12.5px;
}
.vencidas__encabezado + .vencida { border-top: none; }
.vencida__frente { grid-area: frente; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.vencida__restriccion { grid-area: restriccion; color: var(--texto); min-width: 0; overflow-wrap: anywhere; }
.vencida__datos { grid-area: datos; display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--secundario); font-size: 12px; }
.vencida__rotulo { color: var(--terciario); }
.vencida__atraso { grid-area: atraso; font-weight: 700; color: var(--aviso-texto); white-space: nowrap; }
@media (min-width: 900px) {
    .vencidas__encabezado, .vencida {
        display: grid; grid-template-columns: 1.3fr 1.8fr 0.8fr 0.9fr 0.9fr; grid-template-areas: none; align-items: baseline; gap: 12px;
    }
    .vencidas__encabezado {
        padding: 6px 0; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terciario); font-weight: 600;
    }
    .vencida__frente, .vencida__restriccion, .vencida__atraso { grid-area: auto; }
    .vencida__datos { display: contents; }
    .vencida__dato { color: var(--secundario); }
    /* En columnas el encabezado ya dice qué es: el rótulo queda solo para lectores de pantalla. */
    .vencida__rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* --- Fiscal Ecoenergía (Parte 2, entrega C — DECISIONES.md 2026-09-24; maquetas
   maqueta-p2-fiscal.html y maqueta-p2-residente.html). Solo tokens existentes: el ámbar de aviso
   para lo ajustado por el fiscal, el verde de confirmación para lo corregido. ---------------- */
.marca-ajuste { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--aviso-texto); }
.fotos-sin-imagenes { font-size: 11.5px; color: var(--terciario); white-space: nowrap; }
.compromiso__lectura { padding-left: 16px; font-size: 12px; color: var(--secundario); }
.avisos-cierre { margin: 0; padding-left: 18px; font-weight: 400; display: flex; flex-direction: column; gap: 4px; }
.menu-usuario .menu-usuario__alertas { font-weight: 700; color: var(--aviso-texto); }

/* Fotos: miniaturas guardadas y casilleros para elegir */
.miniaturas { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.miniatura { display: block; width: 44px; height: 44px; border-radius: 6px; overflow: hidden; background: var(--fondo-resumen); flex-shrink: 0; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.casilleros-fotos { display: flex; gap: 8px; }
.casillero-foto {
    position: relative; width: 56px; height: 56px; box-sizing: border-box; flex-shrink: 0;
    border: 1px dashed var(--linea); border-radius: 6px; background: var(--blanco);
    display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden;
    color: var(--celeste-marca); font-size: 22px;
}
.casillero-foto[hidden] { display: none; }
.casillero-foto--lleno { border-style: solid; }
.casillero-foto__vista { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.casillero-foto__vista[hidden] { display: none; }
.casillero-foto:focus-within { outline: 2px solid var(--celeste-marca); outline-offset: 2px; }
.casilleros-fotos:has([aria-invalid="true"]) .casillero-foto:first-child { border-color: var(--aviso-texto); }
/* Verificación 2.18 del dueño (punto 5): cada casillero va en su celda, con "Cambiar" y
   "Quitar" debajo cuando tiene foto (app/static/js/fiscal.js). Botones de texto sobrios, como
   los enlaces, con 44 px táctiles de alto y de ancho. Cada casillero es ahora el primer hijo de
   su celda: el borde de aviso de la regla de arriba queda solo en la primera celda. */
.casilleros-fotos { flex-wrap: wrap; align-items: flex-start; }
.casillero-celda { display: flex; flex-direction: column; align-items: flex-start; }  /* el casillero no se corre al aparecer Cambiar/Quitar */
.casillero-celda[hidden] { display: none; }
.casilleros-fotos:has([aria-invalid="true"]) .casillero-celda + .casillero-celda .casillero-foto { border-color: var(--linea); }
.casillero-celda__acciones { display: flex; }
.casillero-celda__acciones[hidden] { display: none; }
.casillero-celda__boton {
    min-width: 44px; min-height: 44px; padding: 0 3px;
    background: none; border: none; border-radius: var(--radio-campo);
    color: var(--celeste-marca); font-size: 11.5px; font-weight: 600;
}
.casillero-celda__boton:hover { background: none; color: var(--azul-marca); text-decoration: underline; }

/* Residente: "Devoluciones del fiscal" arriba de la carga */
.devoluciones { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.devoluciones > .rotulo-seccion { margin: 0; }
.devolucion {
    border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--blanco);
    padding: 14px; display: flex; flex-direction: column; gap: 8px; margin: 0;
}
.devolucion--ajuste { border-color: var(--aviso-borde); }
.devolucion--espera { padding: 10px 14px; gap: 2px; }
.devolucion__cabecera { display: flex; justify-content: space-between; gap: 10px; }
.devolucion__frente { font-size: 14px; font-weight: 600; }
.devolucion__estado { font-size: 11.5px; font-weight: 700; color: var(--secundario); white-space: nowrap; }
.devolucion__estado--ajuste { color: var(--aviso-texto); }
.devolucion__texto { font-size: 12.5px; color: var(--secundario); line-height: 1.45; }
.devolucion__fotos { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.devolucion__nota { font-size: 11px; color: var(--terciario); }
.devolucion__diferencia { font-size: 12px; font-weight: 600; color: var(--aviso-texto); }
.devolucion__form { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.devolucion__rotulo { font-size: 12px; font-weight: 600; color: var(--secundario); }
.devolucion__boton { min-height: 44px; font-size: 13.5px; }
.devolucion__boton--secundario { background: var(--blanco); color: var(--azul-marca); border: 1px solid var(--linea); }
.devolucion__boton--secundario:hover { background: var(--fondo-celular); }
@media (min-width: 900px) {
    .devoluciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: start; }
    .devoluciones > .rotulo-seccion, .devoluciones > .alerta { grid-column: 1 / -1; }
    .devolucion__boton { align-self: flex-start; }
}

/* Fiscal: portada, tarjeta "Verificando" y listas */
.fiscal-grilla { display: grid; grid-template-columns: 1fr; gap: 8px 28px; }
/* DETALLES P7 (v7): accesos de Fiscalización arriba de la lista (toques de 44 px). */
.fiscal-atajos { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 12px; }
.fiscal-atajos__enlace { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 700; color: var(--azul-marca); text-decoration: none; }
.fiscal-atajos__enlace:hover { text-decoration: underline; }
@media (min-width: 900px) {
    .fiscal-grilla:has(.fiscal-grilla__principal) { grid-template-columns: 1.1fr 1fr; align-items: start; }
}
.fiscal-grilla__principal, .fiscal-grilla__listas { display: flex; flex-direction: column; min-width: 0; }
.fiscal-rotulo { padding: 18px 0 6px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--secundario); font-weight: 600; }
.fiscal-grilla__principal > .fiscal-rotulo:first-child, .fiscal-grilla__listas > .fiscal-rotulo:first-child { padding-top: 0; }
.verificando {
    display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 18px;
    background: var(--fondo-fila-desplegada); border-top: 1px solid var(--separador-fila); border-bottom: 1px solid var(--separador-fila);
    margin: 0 -1rem;
}
@media (min-width: 900px) {
    .verificando { margin: 0; border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); }
}
.verificando--suelta { max-width: 640px; }
.verificando__titulo { display: flex; flex-direction: column; gap: 3px; }
.verificando__frente { font-size: 15px; font-weight: 600; }
.verificando__declarado { font-size: 12px; color: var(--secundario); }
.verificando__declarado strong { color: var(--azul-marca); }
.verificando__correccion { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--confirmacion-texto); font-weight: 600; }
.verificando__campo { display: flex; flex-direction: column; gap: 6px; }
.verificando__campo[hidden] { display: none; }
.verificando__rotulo { font-size: 12.5px; font-weight: 600; }
.verificando__pct { width: 110px; height: 48px; font-size: 22px; font-weight: 600; color: var(--azul-marca); border-color: var(--azul-marca); }
.verificando__fecha { width: 170px; height: 44px; }
.verificando__observacion { min-height: 56px; resize: vertical; }
.verificando__diferencia { font-size: 12.5px; font-weight: 600; color: var(--aviso-texto); }
.verificando__diferencia:empty { display: none; }
.verificando__acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.verificando__guardar, .verificando__cancelar { min-height: 46px; font-size: 13.5px; display: flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
.verificando__form { display: flex; flex-direction: column; gap: 10px; }
.fiscal-lista { list-style: none; margin: 0; padding: 0; }
.fiscal-lista > li { border-top: 1px solid var(--separador-fila); }
.fiscal-lista__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0; text-decoration: none; color: var(--texto); min-height: 44px; }
.fiscal-lista__fila:hover .fiscal-lista__frente { color: var(--celeste-marca); }
.fiscal-lista__texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fiscal-lista__frente { font-size: 14px; font-weight: 600; }
/* Decisión 33 del dueño: «Ajustes esperando corrección», una línea por ajuste; el vencido, en aviso. */
.fiscal-lista__frente--ajuste { font-weight: 500; overflow-wrap: anywhere; }
.fiscal-lista__fila[data-vencido] .fiscal-lista__frente--ajuste { color: var(--aviso-texto); font-weight: 600; }
.fiscal-lista__motivo { font-size: 11.5px; color: var(--secundario); }
.fiscal-lista__pct { font-size: 14px; font-weight: 700; color: var(--azul-marca); white-space: nowrap; }
.fiscal-lista__vacio { padding: 14px 0; font-size: 12.5px; color: var(--terciario); }
.fiscal-lista__nivel { padding: 16px 0 6px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--secundario); font-weight: 600; }
.fiscal-lista > li.fiscal-lista__nivel { border-top: none; }
.fiscal-lista--apagada .fiscal-lista__frente { color: var(--secundario); font-weight: 500; }
.alerta-fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; }
/* Verificación 2.18: el estado de hoy de lo que originó la alerta, debajo del hecho. */
.alerta-fila__estado { font-size: 12.5px; font-weight: 600; color: var(--secundario); overflow-wrap: anywhere; }
.alerta-fila__estado--pendiente { color: var(--aviso-texto); }
.alerta-fila__estado--en-curso { color: var(--azul-marca); }
.alerta-fila__estado--resuelta { color: var(--confirmacion-texto); }
.alerta-fila .fiscal-lista__frente, .alerta-fila .fiscal-lista__motivo { overflow-wrap: anywhere; }
.fiscal-nueva { align-self: flex-start; margin-top: 12px; text-decoration: none; font-size: 13px; }
.fiscal-recorrido {
    margin-top: 16px; border: 1px solid var(--linea); border-radius: 10px; padding: 12px 14px;
    display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: var(--texto); min-height: 44px;
}
.fiscal-recorrido__titulo { font-size: 13px; font-weight: 600; }
.fiscal-recorrido__abrir { font-size: 13px; color: var(--celeste-marca); font-weight: 600; }

/* --- Parte 3, entrega 1: Certificación y Administración ----------------------------------- */
.espacio-encabezado { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; }
.espacio-encabezado h1 { margin-right: auto; }
.espacio-encabezado__obra { font-size: 13px; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.espacio-subtitulo { margin: -0.4rem 0 1rem; font-size: 13px; color: var(--terciario); }
.tarjeta-vacia { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 18px 20px; max-width: 640px; }
.tarjeta-vacia__titulo { margin: 0 0 4px; font-weight: 700; color: var(--azul-marca); }
.tarjeta-vacia__texto { margin: 0; font-size: 13.5px; color: var(--secundario); }
.usuarios-tabla td { vertical-align: top; }
.usuarios-obras { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.usuarios-obras label, .usuario-nuevo__obras label { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 400; }
.usuario-nuevo { display: flex; flex-direction: column; gap: 0.75rem; max-width: 420px; margin-top: 0.5rem; }
.usuario-nuevo__obras { border: 0; border-radius: 0; padding: 0; margin: 0; } /* v23i · IC.7 (Línea D): sin caja */
/* v23k · KB.2 (P7, 3.1): «Función» solo con Rol = Administración (sin :has(), se ve; lo obligatorio lo controla el servidor). */
.usuario-nuevo:has(select[name="rol"] option[value="administracion"]:not(:checked)) .usuario-nuevo__funcion { display: none; }
/* Gestión de usuarios (26/09/2026): contraseña en persona, desactivar/reactivar y el aviso
   trimestral. Sin colores nuevos: los del aviso (.alerta) y los secundarios. */
.usuario-nuevo__clave { border: 0; border-radius: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.usuario-nuevo__ayuda, .usuarios-nota { margin: 0; font-size: 13px; color: var(--secundario); }
.usuarios-nota { margin: 4px 0 12px; }
.usuario-nuevo__sin-clave { display: flex; align-items: flex-start; gap: 8px; min-height: 44px; font-weight: 400; }
.usuario-nuevo__sin-clave input { flex: none; min-height: 0; margin-top: 3px; }
.usuarios-tabla__nombre { display: block; font-weight: 600; }
.usuarios-tabla__estado { display: inline-block; margin-top: 2px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--aviso-fondo); color: var(--aviso-texto); }
.usuarios-tabla__fila--inactiva td { color: var(--terciario); }
.usuarios-tabla__correo { overflow-wrap: anywhere; }
.usuarios-tabla__nota { margin: 6px 0 0; font-size: 12px; color: var(--secundario); }
.usuarios-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.usuarios-acciones form { margin: 0; }
/* v14, B2 + M05: «Editar correo» con su historial, debajo del correo. */
.usuarios-correo { margin-top: var(--espacio-8); }
.usuarios-correo summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; }
.usuarios-correo form { display: flex; flex-direction: column; gap: var(--espacio-8); max-width: 320px; }
.usuarios-correo__historial { margin: var(--espacio-8) 0 0; padding-left: 16px; font-size: 11.5px; color: var(--secundario); }
/* DETALLES J10 (modo noche v6): casilleros de obras de tamaño normal (no el alto de un campo) y,
   debajo de 768 px, cada usuario es una tarjeta con Correo, Rol y Obras rotulados (la tabla de
   cuatro columnas partía los correos letra a letra y cortaba Obras). */
.usuarios-obras input[type="checkbox"], .usuario-nuevo__obras input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; flex: none; margin: 0; }
@media (max-width: 899px) {
    .usuarios-tabla thead { display: none; }
    .usuarios-tabla, .usuarios-tabla tbody, .usuarios-tabla tr, .usuarios-tabla td { display: block; width: 100%; box-sizing: border-box; }
    .usuarios-tabla tr { padding: 10px 0; border-bottom: 1px solid var(--linea); }
    .usuarios-tabla td { padding: 4px 14px; border: 0; }
    .usuarios-tabla td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--terciario); margin-bottom: 2px; }
    .usuarios-tabla__correo { overflow-wrap: anywhere; word-break: normal; }
}
.usuarios-acciones .boton, .usuarios-acciones button { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.usuario-nuevo .boton { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* Mejora 7 (revisión de usabilidad, ensayo v10): «+ Nuevo usuario» arriba, y cada casilla de obra
   con su rótulo entero tocable (44 px de alto, todo el ancho). */
.usuarios-nuevo-arriba { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.usuarios-obras label, .usuario-nuevo__obras label { min-height: 44px; width: 100%; box-sizing: border-box; cursor: pointer; }
/* Parte 3, E2: importación del contrato. */
.tarjeta-vacia__accion { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; }
.tarjeta-vacia__accion a { display: inline-flex; align-items: center; min-height: 44px; }
.lista-simple { margin: 10px 0 0; padding-left: 18px; font-size: 13px; }
.lista-simple li { padding: 4px 0; overflow-wrap: anywhere; }
.formulario-p3 { display: flex; flex-direction: column; gap: 0.75rem; max-width: 460px; }
.formulario-p3__dato { margin: 0; }
.formulario-p3 input[type="file"] { min-height: 44px; max-width: 100%; }
.resumen-importacion { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 16px; margin: 0 0 14px; }
.resumen-importacion div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resumen-importacion dt { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terciario); }
.resumen-importacion dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.importacion-hojas { display: flex; flex-direction: column; gap: 14px; }
.importacion-hojas__plantilla { display: flex; flex-direction: column; gap: 4px; max-width: 460px; }
.hoja-importacion { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 14px 16px; min-width: 0; }
.hoja-importacion__encabezado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hoja-importacion__encabezado h2 { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.hoja-importacion__tipo { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; max-width: 320px; }
.hoja-importacion__acta, .hoja-importacion__vacia { margin: 0 0 8px; font-size: 12.5px; color: var(--secundario); }
.etiqueta-oculta, .etiqueta-reconocida { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.etiqueta-oculta { background: var(--aviso-fondo); color: var(--aviso-texto); }
.etiqueta-reconocida { background: var(--fondo-celular); color: var(--azul-marca); border: 1px solid var(--linea); }
/* Valores de PRUEBA (dueño, 26/09/2026, ruta provisoria hasta el día del servidor): rótulo junto
   al monto del anticipo cuando el pago o las condiciones son de prueba. */
.etiqueta-prueba { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; padding: 2px 8px;
    border-radius: var(--radio-etiqueta); background: var(--blanco); color: var(--rojo-alerta); border: 1px solid var(--rojo-alerta); }
.tabla-columnas select { min-height: 44px; max-width: 220px; }
.importacion-cancelar { margin-top: 12px; }
/* Parte 3: toques de 44 px en los formularios nuevos (lista de control del dueño). */
.formulario-p3 button, .formulario-p3 input, .formulario-p3 select,
.importacion-hojas button, .importacion-hojas input, .importacion-hojas select, .importacion-cancelar button,
.usuario-nuevo button, .usuario-nuevo input, .usuario-nuevo select, .usuarios-obras button { min-height: 44px; }
/* Franja de la copia de prueba (ETIQUETA_ENTORNO, Parte 3). */
.franja-entorno { background: var(--aviso-fondo); color: var(--aviso-texto); font-weight: 700; font-size: 12.5px; text-align: center; padding: 6px 12px; border-bottom: 1px solid var(--aviso-borde); }
/* Parte 3, E3: vista previa del importador. */
.revision { margin: 18px 0; display: flex; flex-direction: column; gap: 10px; }
.revision__titulo { font-size: 15px; margin: 0; }
.revision__nota { font-size: 12.5px; color: var(--secundario); margin: 4px 0; }
.revision__falta { margin-left: 10px; font-size: 13px; font-weight: 600; color: var(--aviso-texto); }
.revision button[disabled] { opacity: 0.5; cursor: not-allowed; }
.hallazgo { background: var(--blanco); border: 1px solid var(--linea); border-left: 3px solid var(--celeste-marca); border-radius: var(--radio-campo); padding: 10px 12px; min-width: 0; }
.hallazgo--error { border-left-color: var(--aviso-borde); background: var(--aviso-fondo); }
.hallazgo p { margin: 0; }
.hallazgo__tipo { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terciario); }
.hallazgo--error .hallazgo__tipo { color: var(--aviso-texto); }
.hallazgo__donde { font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.hallazgo__que { font-size: 13px; color: var(--secundario); overflow-wrap: anywhere; }
.hallazgo__correccion { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.hallazgo__campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.hallazgo__campos label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; min-width: 0; overflow-wrap: anywhere; }
.hallazgo__campos input, .hallazgo__correccion button, .revision button { min-height: 44px; }
.hallazgo__correccion button { align-self: flex-start; }
.correcciones-hechas h2 { font-size: 15px; }
.detalle-contrato { margin: 10px 0; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-campo); padding: 8px 12px; }
.detalle-contrato summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; overflow-wrap: anywhere; }
.tabla-contrato td.numero { text-align: right; white-space: nowrap; }
.tabla-contrato__capitulo td { font-weight: 700; background: var(--fondo-celular); }
.tabla-contrato__subtitulo td { font-style: italic; color: var(--secundario); }
.tabla-contrato__origen { color: var(--terciario); font-size: 11px; }
/* Parte 3, E4: contratos de la obra. */
.tabla-contratos td.numero, .tabla-contratos th.numero { text-align: right; white-space: nowrap; }
.tabla-contratos__titulo { color: var(--secundario); font-size: 12px; }
.tabla-contratos__quien, .tabla-contratos__devuelto { display: block; font-size: 11.5px; color: var(--terciario); }
.tabla-contratos__devuelto { color: var(--aviso-texto); font-weight: 600; }
.tabla-contratos__total td { font-weight: 700; }
.tabla-contratos__acciones td { background: var(--fondo-celular); }
.tabla-contratos__instruccion { margin: 0 0 8px; font-size: 12.5px; color: var(--secundario); white-space: normal; }
.acciones-contrato { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.acciones-contrato__devolver { display: flex; flex-direction: column; gap: 6px; min-width: 240px; }
.acciones-contrato__devolver textarea { min-height: 44px; }
.acciones-contrato button, .acciones-contrato__descartar button { min-height: 44px; }
.acciones-contrato__descartar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; font-size: 12.5px; color: var(--secundario); }
/* DETALLES J8 (modo noche v6): en el celular la tabla de contratos se desliza de costado y las
   acciones de cada contrato en revisión quedaban cortadas a la derecha. Debajo de 768 px van como
   una tarjeta que se queda fija a la izquierda, del ancho de la pantalla, con los botones uno
   debajo del otro y todos del mismo tamaño. */
@media (max-width: 899px) {
    .tabla-contratos__acciones td > * { position: sticky; left: 12px; box-sizing: border-box; width: calc(100vw - 76px); max-width: calc(100vw - 76px); }
    .tabla-contratos__acciones .acciones-contrato { flex-direction: column; align-items: stretch; }
    .tabla-contratos__acciones .acciones-contrato > form, .tabla-contratos__acciones .acciones-contrato__devolver { min-width: 0; width: 100%; }
    .tabla-contratos__acciones button { width: 100%; font-size: 14px; }
    .tabla-contratos__acciones input[type="file"], .tabla-contratos__acciones input[type="text"], .tabla-contratos__acciones textarea { width: 100%; box-sizing: border-box; min-width: 0; }
    .tabla-contratos__acciones .acciones-contrato__descartar { flex-direction: column; align-items: stretch; }
    .tabla-contratos__acciones .acciones-contrato__descartar label { display: flex; flex-direction: column; gap: 6px; }
}
/* Parte 3, E5: nuevo adicional. */
.formulario-adicional { max-width: 900px; }
.formulario-adicional__origen { border: 1px solid var(--linea); border-radius: var(--radio-campo); padding: 6px 12px; margin: 0; }
.formulario-adicional__origen label { display: flex; gap: 8px; align-items: center; min-height: 44px; font-weight: 400; }
.tabla-adicional input, .tabla-adicional select { min-height: 44px; width: 100%; min-width: 90px; box-sizing: border-box; }
/* WebKit del iPhone ignora min-height en un select con borde propio (quedaba en 27 px): alto fijo. */
.tabla-adicional select { height: 44px; }
.tabla-adicional td:nth-child(2) input { min-width: 220px; }
/* Parte 3, E6: condiciones financieras. */
.tarjeta-condiciones { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 14px 16px; margin: 12px 0; max-width: 760px; }
.tarjeta-condiciones h2 { font-size: 15px; margin: 0 0 8px; }
.simulacion { margin: 10px 0 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
/* Parte 3, E7: niveles y ámbito. */
.lista-niveles { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-left: 18px; margin: 0 0 10px; font-size: 13px; }
.ambito { display: flex; flex-direction: column; gap: 12px; }
/* A5: ítems por etapas sugeridos (las bocas), con "Confirmar ítems por etapas". */
.etapas-sugeridas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 12px 14px; min-width: 0; }
.etapas-sugeridas > .rotulo-seccion { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
.etapas-sugeridas__ayuda { margin: 0; font-size: 12.5px; color: var(--secundario); }
.etapas-sugeridas__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.etapas-sugeridas__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 4px 0; border-bottom: 1px solid var(--linea); min-width: 0; }
.etapas-sugeridas__marca { display: flex; align-items: center; gap: 10px; min-height: 44px; flex: 1 1 240px; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.etapas-sugeridas__marca input { width: 20px; height: 20px; flex: none; }
.etapas-sugeridas .estado-punto { white-space: normal; }
.etapas-sugeridas form > button { align-self: flex-start; margin-top: 8px; }
.etapas-sugeridas__nota { display: block; font-size: 11px; color: var(--terciario); margin-top: 2px; }
.ambito__capitulo { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 12px 14px; min-width: 0; }
.ambito__encabezado { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; }
.ambito__encabezado h2 { font-size: 14px; margin: 0; flex: 1 1 260px; overflow-wrap: anywhere; }
.ambito__encabezado select, .ambito select { min-height: 44px; }
.ambito__niveles { border: none; padding: 6px 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; }
.ambito__niveles legend { font-size: 12px; color: var(--secundario); padding: 0; margin-bottom: 4px; }
.ambito__niveles label { display: flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 400; }
.ambito details summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 13px; }
.ambito button { min-height: 44px; align-self: flex-start; }
/* Parte 3, E8: reparto por nivel. */
.reparto { display: flex; flex-direction: column; gap: 12px; }
.reparto button { min-height: 44px; align-self: flex-start; }
.tabla-reparto input { width: 56px; min-height: 44px; text-align: right; box-sizing: border-box; }
.tabla-reparto .reparto__igual input { width: 90px; text-align: left; }
.tabla-reparto__item { min-width: 220px; }
.tabla-reparto__mal td { background: var(--aviso-fondo); }
.reparto__estado { font-size: 12px; color: var(--secundario); }
.reparto__emparejamiento select, .reparto__emparejamiento input { min-height: 44px; }
/* Parte 3, E9: reconstrucción. */
.reconstruccion__falta { font-weight: 700; color: var(--aviso-texto); }
.reconstruccion__falta--cero { color: var(--confirmacion-texto); }
.reconstruccion__falta { white-space: nowrap; }
.reconstruccion__completar { min-height: 44px; margin-left: 6px; }
/* Bocas por etapas (dueño, 26/09/2026): reconstrucción por etapa, criterio y frentes por etapa. */
.reconstruccion-etapas { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 12px 14px; min-width: 0; }
.reconstruccion-etapas h2 { font-size: 14px; margin: 0 0 6px; overflow-wrap: anywhere; }
.reconstruccion-etapas__por { font-size: 11px; font-weight: 700; color: var(--secundario); }
.reconstruccion-etapas__diferencia { font-weight: 700; color: var(--aviso-texto); background: var(--aviso-fondo); padding: 6px 10px; border-radius: var(--radio-campo); margin: 8px 0 0; }
.reconstruccion-etapas__cierra { font-weight: 700; color: var(--confirmacion-texto); margin: 8px 0 0; }
.etapas__pesos { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.etapas__pesos label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.etapas__pesos input { width: 90px; min-height: 44px; box-sizing: border-box; text-align: right; }
.etapas__estado { font-size: 12.5px; margin: 4px 0 8px; }
.etapas__estado--pendiente { color: var(--aviso-texto); font-weight: 700; }
.etapas__estado--confirmado { color: var(--confirmacion-texto); font-weight: 700; }
.etapas form, .frentes-etapa form { display: flex; flex-direction: column; gap: 10px; }
.etapas button, .frentes-etapa button, .etapas input[type="text"], .etapas select { min-height: 44px; }
.etapas button, .frentes-etapa button { align-self: flex-start; }
.etapas details summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 13px; }
.frentes-etapa__lista { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.frentes-etapa__lista li { overflow-wrap: anywhere; }
.frentes-etapa__crear { font-weight: 700; color: var(--azul-marca); }
.frentes-etapa a.boton { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; text-decoration: none; }
/* Parte 3, E11: carga por cantidades. */
.cantidades { display: flex; flex-direction: column; gap: 10px; margin: 6px 0; min-width: 0; }
.cantidades__item { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; border-top: 1px solid var(--linea); min-width: 0; }
.cantidades__item--error { background: var(--aviso-fondo); padding: 8px; border-radius: var(--radio-campo); }
.cantidades__rotulo { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.cantidades__numero { color: var(--azul-marca); }
.cantidades__origen { font-size: 11px; color: var(--terciario); font-weight: 400; margin-left: 4px; }
.cantidades__contexto { font-size: 12px; color: var(--secundario); overflow-wrap: anywhere; }
.cantidades__campo { display: flex; gap: 8px; align-items: center; }
.cantidades__campo input { width: 110px; min-height: 44px; text-align: right; font-size: 16px; box-sizing: border-box; }
.cantidades__campo .boton-atajo { min-height: 44px; }
.fila-avance .cantidades__campo input { width: 80px; font-size: 14px; }

/* Parte 3, E15: borrador del certificado quincenal (maqueta 4). */
.formulario-en-linea { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 8px 0 16px; }
.certificado__origen { font-size: 12px; }
.certificado__origen--verificado { color: var(--secundario); }
.certificado__origen--sin_verificar, .certificado__origen--ajuste { color: var(--aviso-texto); background: var(--aviso-fondo); font-weight: 600; }
.certificado__ajuste summary { cursor: pointer; color: var(--azul-marca); font-size: 13px; min-height: 44px; display: flex; align-items: center; }
.certificado__ajuste .formulario-p3 { min-width: 220px; }
.certificado__liquidacion { margin-top: 12px; }
/* Pedidos a Administración (pedido del dueño, 26/09/2026). */
.certificado__lista-pedidos { list-style: none; margin: 8px 0 0; padding: 0; }
.certificado__pedido { padding: 10px 0; border-top: 1px solid var(--linea); overflow-wrap: anywhere; font-size: 14px; }
.certificado__pedido p { margin: 0 0 4px; }
.certificado__pedido--pendiente { background: var(--aviso-fondo); padding-left: 8px; padding-right: 8px; }
.certificado__pedido button { min-height: 44px; }
.certificado__pedido .formulario-p3 textarea { width: 100%; box-sizing: border-box; }
/* Parte 3, E18 · Por facturar (maqueta p3-10). Colores de los tokens existentes: verde de
   confirmación (relacionada), ámbar del acento (sin relacionar pasados los 5 días), gris del
   rótulo (sin relacionar). En el celular, cada línea es una tarjeta: sin deslizar de costado. */
.estado-punto--relacionada .estado-punto__marca { background: var(--confirmacion-texto); border-color: var(--confirmacion-texto); }
.estado-punto--relacionada { color: var(--confirmacion-texto); }
.estado-punto--sin-relacionar .estado-punto__marca { background: var(--blanco); border-color: var(--rotulo-tabla); }
.estado-punto--atrasada .estado-punto__marca { background: var(--amarillo-acento); border-color: var(--restriccion-abierta-anillo); }
.estado-punto--atrasada { color: var(--aviso-texto); font-weight: 700; }
.por-facturar__filtros { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.por-facturar__filtro { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--linea); border-radius: var(--radio-etiqueta); background: var(--blanco); color: var(--secundario); font-size: 13px; font-weight: 600; text-decoration: none; }
.por-facturar__filtro--activo { background: var(--fondo-seleccion); border: 2px solid var(--azul-marca); color: var(--azul-marca); font-weight: 700; }  /* sistema v2, regla 2 */
.por-facturar__total-guardado { background: var(--fondo-resumen); border-radius: var(--radio-campo); padding: 10px 14px; margin: 0 0 14px; font-size: 13px; overflow-wrap: anywhere; max-width: 720px; }
.por-facturar__totales { margin: 18px 0 0; }
.por-facturar__totales h2 { font-size: 15px; margin: 0; }
.tabla-por-facturar { background: var(--blanco); }
.tabla-por-facturar__obra { font-weight: 600; }
.tabla-por-facturar__neto { white-space: nowrap; color: var(--texto); font-weight: 600; }
.tabla-por-facturar__formulario { display: flex; gap: 6px; align-items: center; margin: 0; }
.tabla-por-facturar__formulario input { min-height: 44px; width: 100%; max-width: 190px; min-width: 0; box-sizing: border-box; }
.tabla-por-facturar__formulario button { min-height: 44px; flex: none; }
.tabla-por-facturar__nota { display: block; font-size: 11px; color: var(--terciario); margin-top: 3px; }
.tabla-por-facturar__fila--alerta td:first-child { box-shadow: inset 3px 0 0 var(--amarillo-acento); }
@media (max-width: 899px) {
    .tabla-por-facturar, .tabla-por-facturar tbody, .tabla-por-facturar tr, .tabla-por-facturar td { display: block; width: 100%; box-sizing: border-box; }
    .tabla-por-facturar thead { display: none; }
    .tabla-por-facturar { background: none; }
    .tabla-por-facturar tr { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 8px 12px; margin: 0 0 10px; }
    .tabla-por-facturar__fila--alerta { border-left: 3px solid var(--amarillo-acento) !important; }
    .tabla-por-facturar__fila--alerta td:first-child { box-shadow: none; }
    table.tabla-datos.tabla-por-facturar td { border-top: none; padding: 4px 0; text-align: left; }
    .tabla-por-facturar td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--terciario); }
    .tabla-por-facturar__formulario input { max-width: none; flex: 1; }
}

/* --- Parte 3, E17: control interno (certificado contra verificado, maqueta p3-8) y recuadro
   "regularizar" del residente y del fiscal. Solo tokens existentes (ámbar de aviso). ----------- */
.recuadro-regularizar {
    display: flex; align-items: flex-start; gap: 12px; box-sizing: border-box; max-width: 100%;
    background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); border-radius: var(--radio-tarjeta);
    color: var(--aviso-texto); padding: 12px 16px; margin: 12px 0;
}
.recuadro-regularizar svg { flex: none; margin-top: 1px; }
.recuadro-regularizar__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.recuadro-regularizar__titulo { font-size: 14px; font-weight: 700; }
.recuadro-regularizar__detalle { font-size: 12.5px; overflow-wrap: anywhere; }
/* A4: "Todavía no se puede comparar", con el botón a la reconstrucción; en el celular el botón
   baja debajo del texto. */
.control-interno__sin-medir { flex-wrap: wrap; }
.control-interno__sin-medir .recuadro-regularizar__texto { flex: 1 1 220px; }
.control-interno__ir { flex: none; align-self: center; }
.recuadro-regularizar__enlace { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 600; color: var(--celeste-marca); }
.control-interno__cifras {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 12px 0;
    background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta);
}
.control-interno__cifra { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; border-bottom: 1px solid var(--separador-fila); min-width: 0; }
.control-interno__valor { font-family: var(--fuente-titulos), sans-serif; font-size: 17px; font-weight: 500; color: var(--azul-marca); overflow-wrap: anywhere; }
.control-interno__valor--aviso { color: var(--avance-negativo); }
.control-interno__valor--apagado { color: var(--terciario); }
.control-interno__rotulo { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terciario); }
.control-interno__tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 4px 16px; margin: 12px 0; }
.control-interno__subtitulo { font-size: 15px; margin: 12px 0 4px; }
.control-interno__lista { list-style: none; margin: 0; padding: 0; }
.control-interno__fila {
    display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; padding: 12px 0;
    border-bottom: 1px solid var(--separador-fila); font-size: 12.5px;
}
.control-interno__fila:last-child { border-bottom: none; }
.control-interno__item { flex: 1 1 100%; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.control-interno__dato { display: inline-flex; flex-direction: column; min-width: 64px; color: var(--secundario); font-variant-numeric: tabular-nums; }
.control-interno__dato--aviso { color: var(--avance-negativo); font-weight: 700; }
.control-interno__etiqueta { font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--terciario); font-weight: 400; }
.control-interno__como { flex: 1 1 100%; font-size: 11.5px; color: var(--secundario-movil-carga); }
.control-interno__ajuste { flex: 1 1 100%; }
.control-interno__ajuste summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--celeste-marca); }
.control-interno__ajuste input { width: 100%; min-height: 44px; box-sizing: border-box; }
.control-interno__ajuste button { min-height: 44px; }
.control-interno__sin-diferencias { margin: 12px 0; }
@media (min-width: 900px) {
    .control-interno__cifra + .control-interno__cifra { border-left: 1px solid var(--separador-fila); }
    .control-interno__cifra { border-bottom: none; }
    .control-interno__item { flex: 2 1 260px; }
    .control-interno__como { flex: 1 1 200px; }
}

/* --- Parte 3, E14: modificaciones del contrato (maqueta 9, abajo). Solo tokens existentes: ámbar
   de aviso para deductivos y controles, azul de marca para aditivos. ------------------------------ */
.formulario-modificacion__adenda { display: flex; flex-wrap: wrap; gap: 12px; }
.formulario-modificacion__adenda > .s-campo { flex: 1 1 180px; }
.formulario-modificacion__adjunta { display: block; font-size: 12.5px; font-weight: 400; color: var(--secundario); overflow-wrap: anywhere; }
.formulario-modificacion input[type="file"], .formulario-modificacion input[type="date"] { min-height: 44px; max-width: 100%; box-sizing: border-box; }
.tabla-modificacion td:nth-child(2) input { min-width: 110px; }
.tabla-modificacion td:nth-child(4) input { min-width: 220px; }
.tabla-modificacion__control td { background: var(--aviso-fondo); white-space: normal; }
.tabla-modificacion__control label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.control-modificacion {
    margin: 8px 0; padding: 10px 12px; border: 1px solid var(--aviso-borde); background: var(--aviso-fondo);
    border-radius: var(--radio-campo); font-size: 13px; color: var(--aviso-texto); line-height: 1.45; overflow-wrap: anywhere; white-space: normal;
}
.titulo-seccion-p3 { font-size: 15px; margin: 22px 0 8px; }
.modificaciones { display: flex; flex-direction: column; gap: 16px; }
.tarjeta-modificacion { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 14px 16px; min-width: 0; }
.tarjeta-modificacion__cabecera { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
.tarjeta-modificacion__cabecera h3 { margin: 0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--secundario); overflow-wrap: anywhere; }
.tarjeta-modificacion__estado { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--aviso-texto); }
.tarjeta-modificacion__estado--aprobada { color: var(--confirmacion-texto); }
.tabla-modificacion-lineas td.numero, .tabla-modificacion-lineas th.numero { text-align: right; white-space: nowrap; }
.tabla-modificacion-lineas__item { display: block; font-weight: 600; }
.tabla-modificacion-lineas__tipo { display: block; font-size: 11.5px; font-weight: 600; color: var(--azul-marca); }
.tabla-modificacion-lineas__tipo--deductivo { color: var(--avance-negativo); }
.tabla-modificacion-lineas__ajuste { display: block; font-size: 11.5px; color: var(--aviso-texto); white-space: normal; }
.balance-modificacion { margin: 8px 0 0; display: flex; flex-direction: column; }
.balance-modificacion > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--separador-fila); font-size: 13px; }
.balance-modificacion dt { color: var(--secundario-movil-carga); }
.balance-modificacion dd { margin: 0; font-weight: 600; white-space: nowrap; }
.balance-modificacion__menos { color: var(--avance-negativo); }
.balance-modificacion__neto { font-weight: 600; }
.balance-modificacion--contrato { background: var(--fondo-resumen); border-radius: var(--radio-campo); padding: 4px 12px; margin-top: 8px; }
.balance-modificacion--contrato > div:first-child { border-top: none; }
.balance-modificacion--contrato .balance-modificacion__neto dd { color: var(--azul-marca); font-weight: 700; }
.tarjeta-modificacion .acciones-contrato__descartar .boton { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; font-size: 14px; box-sizing: border-box; }
.tabla-contratos__vigente { color: var(--confirmacion-texto); font-weight: 600; }
/* --- Parte 3, E13: excedentes (declarar en el celular, verificar y "Fuera de contrato · a
   regularizar", maqueta p3-9). Solo tokens existentes. ------------------------------------------ */
.enlace-excedente { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 600; color: var(--celeste-marca); }
.enlace-excedente--celular { align-self: flex-start; }
.excedente-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.excedente-form__opciones { flex-direction: column; }
.excedente-form__opciones label { justify-content: flex-start; text-align: left; overflow-wrap: anywhere; padding: 8px 14px; }
.excedente-form__libre {
    display: flex; flex-direction: column; gap: 12px; margin: 0; min-width: 0;
    border: 1px dashed var(--linea); border-radius: var(--radio-campo); padding: 10px 12px 12px;
}
.fuera-contrato {
    background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta);
    padding: 14px 16px; margin: 16px 0; min-width: 0;
}
.fuera-contrato__encabezado { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
.fuera-contrato__titulo { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--secundario); font-weight: 600; margin: 0; }
.fuera-contrato__quien { margin-left: auto; font-size: 11.5px; color: var(--terciario); overflow-wrap: anywhere; }
.fuera-contrato__lista { list-style: none; margin: 0; padding: 0; }
.fuera-contrato__fila { display: flex; flex-direction: column; gap: 5px; padding: 10px 0; border-bottom: 1px solid var(--separador-fila); font-size: 12.5px; min-width: 0; }
.fuera-contrato__fila .fuera-contrato__quien { margin-left: 0; }
.fuera-contrato__fila:last-child { border-bottom: none; }
.fuera-contrato__cabeza { display: flex; justify-content: space-between; gap: 8px; overflow-wrap: anywhere; }
.fuera-contrato__dias { flex: none; font-weight: 600; color: var(--secundario); }
.fuera-contrato__dias--alerta { color: var(--aviso-texto); }
.fuera-contrato__detalle { color: var(--secundario); overflow-wrap: anywhere; }
.fuera-contrato__propuesta { color: var(--azul-marca); overflow-wrap: anywhere; }
.fuera-contrato__formulario summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--celeste-marca); cursor: pointer; }
.fuera-contrato__acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.fuera-contrato__con-motivo { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 240px; min-width: 0; }
.fuera-contrato__con-motivo input[type="text"] { flex: 1 1 140px; min-width: 0; min-height: 44px; box-sizing: border-box; }
.fuera-contrato__boton {
    min-height: 44px; font-size: 13px; padding: 0 14px;
    background: var(--blanco); color: var(--secundario); border: 1px solid var(--linea);
}
.fuera-contrato__boton:hover { background: var(--fondo-celular); }
.fuera-contrato__boton--principal { color: var(--azul-marca); border-color: var(--azul-marca); }
.fuera-contrato__vacio { padding: 10px 0; color: var(--terciario); font-size: 12.5px; }

/* Parte 8, E1 y E2 (PARTE8.md): envío del acta, reapertura y revisiones. Sin colores nuevos:
   los avisos reutilizan confirmacion, alerta y confirmacion-restriccion. Toques de 44 px. */
.acta-envio { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
.acta-envio__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.acta-envio__acciones .boton, .acta-envio__reabrir summary, .acta-envio__enlace, .envio-acta .boton { min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; text-decoration: none; }
.acta-envio__estado { font-size: 12.5px; font-weight: 600; color: var(--secundario); }
.acta-envio__enlace { font-size: 13px; font-weight: 600; color: var(--celeste-marca); }
.acta-envio__reabrir summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--azul-marca); }
.acta-envio__reabrir textarea, .envio-acta textarea { width: 100%; box-sizing: border-box; }
.acta-envio__aviso { overflow-wrap: anywhere; }
.envio-acta { margin-bottom: 12px; }
.envio-acta label { display: block; }
.envio-acta__nota { font-size: 12.5px; color: var(--secundario); margin: 4px 0; }
.envio-acta__asunto { font-size: 13px; overflow-wrap: anywhere; margin: 4px 0; }
.envio-acta__texto { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: 13px; background: var(--fondo-celular); border-radius: var(--radio-campo); padding: 8px 10px; margin: 4px 0; }
.envio-acta__lista { margin: 0; padding-left: 18px; font-size: 12.5px; overflow-wrap: anywhere; }

/* --- Parte 8, E3: portada de dirección e indicadores del residente. Solo tokens existentes (el
   ámbar de aviso de Alertas y del control interno); las cifras reutilizan .control-interno__*. -- */
.portada-excepciones { list-style: none; margin: 0 0 8px; padding: 0 16px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); }
.portada-excepcion { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--separador-fila); min-width: 0; }
.portada-excepcion:last-child { border-bottom: none; }
.portada-excepcion__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.portada-excepcion__nombre { font-size: 13.5px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.portada-excepcion__cuenta { font-size: 12.5px; color: var(--terciario); white-space: nowrap; }
.portada-excepcion__cuenta--aviso { color: var(--aviso-texto); font-weight: 700; font-size: 14px; }
.portada-excepcion__nota { font-size: 11.5px; color: var(--secundario); }
.portada-casos { list-style: none; margin: 0; padding: 0; }
.portada-caso { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 12px; font-size: 12.5px; color: var(--secundario); }
.portada-caso__texto { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; padding-top: 4px; }
.portada-caso__texto strong { color: var(--texto); }
.portada-enlace { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--celeste-marca); overflow-wrap: anywhere; }

/* --- A8: portada de dirección (modo noche v3) ---------------------------------------------
   Maquetas p8-1 (escritorio) y p8-2 (celular) de docs/especificaciones/parte8/. Solo tokens
   existentes: vencido = --avance-negativo, aviso = --amarillo-acento, recordatorio =
   --celeste-marca. Celular (< 768 px): 3 temas + "Ver N más" (casillero oculto, sin JavaScript, como el menú del avatar) y obras
   en tarjetas compactas; sin deslizar de costado y toques de 44 px. */
.portada-d { min-width: 0; }
.portada-d__cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px 16px; flex-wrap: wrap; }
.portada-d__encabezado { padding-bottom: 0; min-width: 0; }
.portada-d__titulo { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.portada-d__actualizado { font-size: 12px; color: var(--terciario); }
.portada-d__filete { display: flex; align-items: center; margin: 12px 0 16px; height: 2px; background: linear-gradient(var(--azul-marca), var(--azul-marca)) 0 50% / 100% 1px no-repeat; }
.portada-d__filete span { width: 32px; height: 2px; background: var(--amarillo-acento); }

.portada-d__indicadores { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); }
.portada-d__indicador { display: flex; flex-direction: column; gap: 4px; padding: 12px 12px; min-width: 0; border-right: 1px solid var(--separador-fila); border-bottom: 1px solid var(--separador-fila); }
.portada-d__indicador:nth-child(3n) { border-right: none; }
.portada-d__indicador:nth-child(n+4) { border-bottom: none; }
.portada-d__cifra { font-family: var(--fuente-titulos), sans-serif; font-stretch: 112%; font-weight: 500; font-size: 22px; color: var(--azul-marca); font-variant-numeric: tabular-nums; }
.portada-d__cifra--vencido { color: var(--avance-negativo); }
.portada-d__rotulo { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terciario); overflow-wrap: anywhere; }

.portada-d__grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.portada-d__tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 16px; min-width: 0; }
.portada-d__obras { margin-top: 18px; }
.portada-d__cabeza { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding-bottom: 10px; border-bottom: 1px solid var(--linea); }
.portada-d .portada-d__seccion { margin: 0; padding: 0; border: none; }
.portada-d__nota { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--terciario); }
.portada-d__muestra { width: var(--tamano-punto); height: var(--tamano-punto); background: var(--azul-marca); }
.portada-d__vacio { margin: 12px 0 0; font-size: 12.5px; color: var(--terciario); }

.portada-d__temas { list-style: none; margin: 0; padding: 0; }
.portada-d__tema { display: grid; grid-template-columns: 7px minmax(0, 1fr); align-items: start; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--separador-fila); }
.portada-d__punto { margin-top: 5px; }
.portada-d__punto--vencido { background: var(--avance-negativo); border-color: var(--avance-negativo); }
.portada-d__punto--aviso { background: var(--amarillo-acento); border-color: var(--amarillo-acento); }
.portada-d__punto--recordatorio { background: var(--blanco); border-color: var(--rotulo-tabla); }  /* diccionario v2: Pendiente, hueco */
.portada-d__tema-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.portada-d__tema-titulo { font-size: 13px; font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
.portada-d__tema-detalle { font-size: 11.5px; color: var(--terciario); overflow-wrap: anywhere; }
.portada-d__accion { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 0.3em; min-height: 44px; box-sizing: border-box; padding: 0 14px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; border-color: var(--azul-marca); }
.portada-d__mas { display: flex; align-items: center; justify-content: center; gap: 0.3em; width: 100%; min-height: 44px; margin-top: 10px; font-size: 13px; font-weight: 600; border-color: var(--azul-marca); }
.portada-d__ver-mas:checked ~ .portada-d__mas { display: none; }
.portada-d__ver-mas:focus-visible ~ .portada-d__mas { outline: 2px solid var(--celeste-marca); outline-offset: 2px; }
.portada-d__sin-novedad { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--terciario); overflow-wrap: anywhere; }
.portada-d__sin-novedad-rotulo { font-weight: 600; color: var(--terciario); }
.portada-d__leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; }
.portada-d__leyenda .estado-punto { font-size: 10.5px; color: var(--terciario); }

.portada-d__tabla { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.portada-d__tabla th { padding: 10px 0 6px; font-size: 9.5px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terciario); text-align: left; overflow-wrap: anywhere; }
.portada-d__tabla th:first-child { width: 42%; }
.portada-d__tabla td { padding: 10px 0; border-top: 1px solid var(--separador-fila); vertical-align: middle; overflow-wrap: anywhere; color: var(--secundario); }
.portada-d__num { text-align: right; font-variant-numeric: tabular-nums; }
.portada-d__largo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.portada-d__tabla th { overflow-wrap: normal; }
.portada-d__tabla .portada-d__num { padding-left: 6px; }
.portada-d__fuerte { display: block; font-weight: 600; color: var(--texto); }
.portada-d__sub { display: block; font-size: 10.5px; color: var(--terciario); overflow-wrap: anywhere; }
.portada-d__valor { font-weight: 700; color: var(--azul-marca); }
.portada-d .portada-d__vencido { color: var(--avance-negativo); font-weight: 600; }
.portada-d .portada-d__apagado { color: var(--terciario); }

/* Obras activas: tarjeta compacta en el celular, fila de 8 columnas en la computadora. */
.portada-d__obra { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--separador-fila); font-size: 12px; color: var(--secundario); }
.portada-d__obra--titulos + .portada-d__obra { border-top: none; }
.portada-d__obra--titulos, .portada-d__solo-escritorio { display: none; }
.portada-d__obra-nombre { display: flex; flex-direction: column; min-width: 0; }
.portada-d__enlace-obra { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--azul-marca); text-decoration: none; overflow-wrap: anywhere; }
.portada-d__enlace-obra:hover { text-decoration: underline; }
.portada-d__cumplimiento { display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 8px; }
.portada-d__cumplimiento-pct { font-size: 15px; font-weight: 700; color: var(--azul-marca); font-variant-numeric: tabular-nums; white-space: nowrap; }
.portada-d__barras { display: flex; align-items: flex-end; gap: 3px; height: 24px; }
.portada-d__barra { width: 8px; background: var(--sin-avance); }
.portada-d__barra--alto { background: var(--azul-marca); }
.portada-d__barra--medio { background: var(--celeste-marca); }
.portada-d__resumen { grid-column: 1 / -1; font-size: 11.5px; color: var(--secundario); overflow-wrap: anywhere; }

/* Regla 10 (v17): arriba solo lo crítico, en celular y en computadora: 5 temas y «Ver los N». */
.portada-d__ver-mas:not(:checked) ~ .portada-d__temas .portada-d__tema--extra { display: none; }
.portada-d__detalles-mas { font-size: 12px; }
.portada-d__cifra-enlace { text-decoration: none; color: inherit; display: inline-flex; min-height: 44px; align-items: center; }
.portada-d__tabla td a { color: inherit; text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.portada-d__prueba { margin: 0 0 12px; font-size: 12.5px; color: var(--secundario); }
.portada-d__prueba a { display: inline-flex; align-items: center; min-height: 44px; color: var(--celeste-marca); font-weight: 700; text-decoration: none; }
.portada-d__detalles-mas > summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--celeste-marca); font-weight: 700; cursor: pointer; }
@media (min-width: 900px) {
    .portada-d__titulo { font-size: 22px; }
    .portada-d__indicadores { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .portada-d__indicador { padding: 16px 18px; border-bottom: none; }
    .portada-d__indicador:nth-child(3n) { border-right: 1px solid var(--separador-fila); }
    .portada-d__indicador:last-child { border-right: none; }
    .portada-d__cifra { font-size: 26px; }
    .portada-d__grilla { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; }
    .portada-d__obras { margin-top: 24px; }
    .portada-d__tarjeta { padding: 20px 22px; }
    .portada-d__tema { grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 14px; }
    .portada-d__punto { margin-top: 0; }
    .portada-d__accion { grid-column: auto; justify-self: end; }
    .portada-d__obra { grid-template-columns: 1.7fr 1.3fr 0.9fr 0.8fr 1.3fr 1fr 1.1fr 0.9fr; gap: 0 10px; padding: 12px 0; }
    .portada-d__obra--titulos { display: grid; padding: 10px 0 6px; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terciario); }
    .portada-d__obra--titulos + .portada-d__obra { border-top: 1px solid var(--separador-fila); }
    .portada-d__solo-escritorio { display: block; min-width: 0; overflow-wrap: anywhere; }
    .portada-d__cumplimiento { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
    .portada-d__cumplimiento .portada-d__sub { flex-basis: 100%; }
    .portada-d__cumplimiento-pct { min-width: 40px; }
    .portada-d__resumen { display: none; }
    .portada-d__largo { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
    .portada-d__corto { display: none; }
    .portada-d__estado { white-space: normal; }
}

/* --- A9: pasada de diseño (modo noche v3) --------------------------------------------------
   Pantallas nuevas de las Partes 3 y 8 contra su maqueta (p3-2 a p3-10, p8-3, p8-5): el título
   con "encabezado-pagina" (antetítulo + titular en mayúsculas), las acciones del encabezado como
   botones, tablas y cifras en tarjetas y los enlaces sueltos con un componente de la app. Solo
   tokens existentes; nada de cálculos, rutas ni formularios. ---------------------------------- */
.encabezado-pagina h1.encabezado-pagina__titulo { margin: 0; line-height: 1.2; overflow-wrap: anywhere; }
.encabezado-pagina__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.encabezado-pagina--con-acciones { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 16px; }
.encabezado-pagina__texto { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 260px; }
.encabezado-pagina__acciones .boton, .envio-acta__acciones .boton {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box;
    padding: 0 16px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.encabezado-pagina__acciones .boton:not(.boton--secundario), .encabezado-pagina__acciones .boton:not(.boton--secundario):hover { color: var(--blanco); }
.acciones-exportar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.envio-acta__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
/* Enlace dentro de un texto o una tabla: el botón de texto celeste de Carga, con el toque de 44 px. */
a.boton-texto-celeste { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.2rem; text-decoration: none; overflow-wrap: anywhere; }
.control-interno__rotulo a.boton-texto-celeste { min-height: 44px; padding: 0; letter-spacing: inherit; }
/* Tablas en tarjeta (maquetas p3-3, p3-5, p3-9): el envoltorio sigue deslizando la tabla por
   dentro; la página no se corre de costado. */
.tarjeta-tabla { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 4px 12px; margin: 12px 0; }
/* Rótulo de sección como título (h2) de una tarjeta o de una parte de la pantalla. */
h2.rotulo-seccion { font-size: inherit; font-weight: inherit; margin: 1.5rem 0 0.75rem; }
/* Cifras de arriba de Condiciones (maqueta p3-2): tarjeta con el valor en titular y el rótulo abajo. */
dl.resumen-cifras {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; margin: 12px 0;
    background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); max-width: 760px;
}
dl.resumen-cifras > div { flex-direction: column-reverse; justify-content: flex-end; gap: 3px; padding: 12px 16px; border-bottom: 1px solid var(--separador-fila); }
dl.resumen-cifras dt { font-size: 10px; }
dl.resumen-cifras dd { font-family: var(--fuente-titulos), sans-serif; font-size: 17px; font-weight: 500; color: var(--azul-marca); }
/* Liquidación, resumen y acumulados (maquetas p3-4 y p3-9): una fila por concepto, el monto a la derecha. */
dl.resumen-filas { display: flex; flex-direction: column; gap: 0; margin: 8px 0 12px; }
dl.resumen-filas > div { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--separador-fila); }
dl.resumen-filas dt { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--secundario-movil-carga); }
dl.resumen-filas dd { text-align: right; }
/* Criterio de etapas: mismo lenguaje que Reunión (tarjetas con rótulo de sección y punto de estado). */
.etapas { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.etapas__tarjeta .etapas__estado { margin: 0; }
.etapas__tarjeta .estado-punto { white-space: normal; font-size: 12.5px; font-weight: 600; }
/* Administración (maqueta p8-5): el título de cada tarjeta como rótulo de sección. */
.por-facturar__totales { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 12px 16px; max-width: 760px; }
.por-facturar__totales > .rotulo-seccion { margin: 0; }
.usuario-nuevo { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 16px; box-sizing: border-box; }
dl.resumen-filas dd { margin-left: auto; }
.envio-acta .boton { font-size: 13px; font-weight: 600; padding: 0 16px; }

/* === Parte 7 · P7-3 importar === */
/* Importar informe del cliente e informes recibidos (maqueta p7-2): tarjetas con rótulo de
   sección, grillas que en el celular pasan a una columna (sin deslizar de costado) y decisiones
   de un toque de 44 px. Solo tokens existentes. */
.importar-p7__columnas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 14px; }
@media (min-width: 900px) {
    .importar-p7__columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; align-items: start; }
}
.importar-p7__tarjeta {
    background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta);
    padding: 16px; margin: 14px 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; box-sizing: border-box;
}
.importar-p7__columnas > .importar-p7__tarjeta { margin: 0; }
.importar-p7__tarjeta--angosta { max-width: 640px; }
.importar-p7__rotulo-fila { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
.importar-p7__rotulo-fila h2.importar-p7__rotulo { border-bottom: none; padding-bottom: 0; }
.importar-p7__rotulo { margin: 0; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--secundario); font-weight: 600; }
.importar-p7__tarjeta > .importar-p7__rotulo { padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
.importar-p7__archivo { margin-left: auto; font-size: 11px; color: var(--terciario); overflow-wrap: anywhere; }
.importar-p7__nota { margin: 0; font-size: 11.5px; color: var(--terciario); line-height: 1.5; }
.importar-p7__nota a.boton-texto-celeste { min-height: 44px; padding: 0; display: inline-flex; align-items: center; vertical-align: middle; font-weight: 600; }  /* Mejora 8 (ensayo v10): «Informes recibidos» medía 33 px */
.importar-p7__vacio { margin: 0; padding: 8px 0; font-size: 12.5px; color: var(--terciario); list-style: none; }
.importar-p7__reconocido, .importar-p7__aviso { margin: 0; border-radius: var(--radio-campo); padding: 10px 14px; font-size: 12px; line-height: 1.45; }
.importar-p7__reconocido { background: var(--fondo-resumen); border: 1px solid var(--linea); color: var(--confirmacion-texto); }
.importar-p7__aviso { background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); color: var(--aviso-texto); }
.importar-p7__subtitulo { font-family: var(--fuente-texto), system-ui, sans-serif; margin: 4px 0 0; font-size: 12px; font-weight: 700; color: var(--azul-marca); }
.importar-p7__subtitulo--error { color: var(--aviso-texto); }
.importar-p7__errores { margin: 0; padding-left: 18px; font-size: 12px; color: var(--aviso-texto); display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; }
.importar-p7__lista { margin: 8px 0 0; padding-left: 18px; font-size: 12px; color: var(--secundario); display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.importar-p7__detalle summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--celeste-marca); }
/* Grillas (una fila por línea, como la maqueta). En el celular cada fila se apila. */
.importar-p7__grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--separador-fila); font-size: 12.5px; min-width: 0; }
.importar-p7__grilla > * { min-width: 0; overflow-wrap: break-word; }
.importar-p7__grilla--titulos { display: none; padding: 12px 0 8px; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terciario); border-bottom: 1px solid var(--linea); }
fieldset.importar-p7__grilla { margin: 0; border: none; border-bottom: 1px solid var(--separador-fila); padding: 9px 0; }
.importar-p7__movil { color: var(--terciario); font-size: 11px; }
@media (min-width: 900px) {
    .importar-p7__grilla--titulos { display: grid; }
    .importar-p7__grilla--equivalencia { grid-template-columns: 1.3fr 0.3fr 1.3fr 1.4fr; }
    .importar-p7__grilla--diferencias { grid-template-columns: 0.6fr auto 1.3fr 1.3fr auto; }
    .importar-p7__grilla--informes { grid-template-columns: 2fr 1.6fr 1.2fr 1fr; }
    .importar-p7__grilla--items { grid-template-columns: 0.7fr 2fr 1.2fr 1.2fr; }
    .importar-p7__movil { display: none; }
}
.importar-p7__flecha { color: var(--terciario); }
@media (max-width: 899px) { .importar-p7__flecha { display: none; } }
.importar-p7__columna, .importar-p7__nombre-informe { font-weight: 600; }
form label.importar-p7__campo, .importar-p7__campo { color: var(--azul-marca); font-weight: 600; font-size: 12.5px; flex-direction: row; }
.importar-p7__ejemplo { color: var(--terciario); font-size: 11.5px; }
.importar-p7__grilla--equivalencia select { width: 100%; min-height: 44px; box-sizing: border-box; font-size: 14px; }
.importar-p7__codigo { font-weight: 700; color: var(--azul-marca); }
.importar-p7__que { font-weight: 600; }
.importar-p7__valor, .importar-p7__como { color: var(--secundario); font-size: 12px; }
.importar-p7__decision { gap: 6px; flex-wrap: nowrap; }
@media (max-width: 899px) { .importar-p7__decision { flex-wrap: wrap; } }
/* Decisión 26: nueva sin ubicación, nivel y espacio a completar en la misma fila. */
.importar-p7__ubicacion { display: flex; gap: 8px; min-width: 0; }
.importar-p7__ubicacion .verificando__campo { flex: 1 1 0; min-width: 0; margin: 0; }
.importar-p7__ubicacion .verificando__campo:first-child { flex: 0 1 90px; }
.importar-p7__ubicacion input { width: 100%; min-height: 44px; box-sizing: border-box; font-size: 16px; }
@media (min-width: 900px) { .importar-p7__ubicacion { width: 260px; } }
.importar-p7__estado { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--secundario); }
.importar-p7__punto { width: 7px; height: 7px; border-radius: var(--radio-etiqueta); flex-shrink: 0; }
.importar-p7__punto--pendiente { background: var(--avance-negativo); }
.importar-p7__punto--listo { background: var(--confirmacion-texto); }
.importar-p7__accion a.boton-texto-celeste { font-size: 12px; font-weight: 600; }
/* Cifras del resultado (nuevas, sin cambios, con diferencias). */
.importar-p7__cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.importar-p7__cifras > div { background: var(--fondo-resumen); border-radius: var(--radio-campo); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--secundario-movil-carga); min-width: 0; overflow-wrap: anywhere; }
.importar-p7__cifra { font-family: var(--fuente-titulos), sans-serif; font-size: 22px; font-weight: 500; color: var(--azul-marca); }
.importar-p7__cifra--gris { color: var(--terciario); }
.importar-p7__cifra--ambar { color: var(--avance-negativo); }
.importar-p7__botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding-top: 6px; margin: 0; }
.importar-p7__botones button, .importar-p7__hoja button, .importar-p7__completo button { min-height: 44px; font-size: 13px; font-weight: 600; padding: 0 16px; }
/* Confirmar va primero en el código (Enter en un campo confirma, no cancela) y se ve a la derecha. */
.importar-p7__botones--invertidos { flex-direction: row-reverse; justify-content: flex-start; }
.importar-p7__confirmar { display: flex; flex-direction: column; gap: 10px; }
.importar-p7__hoja { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.importar-p7__hoja label { flex: 1 1 200px; }
.importar-p7__hoja select, .importar-p7__nombre input { min-height: 44px; box-sizing: border-box; }
.importar-p7__nombre { max-width: 460px; margin-top: 6px; }
.importar-p7__archivos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.importar-p7__archivos li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; border-bottom: 1px solid var(--separador-fila); }
.importar-p7__peso { font-size: 11px; color: var(--terciario); font-weight: 400; }
.importar-p7__comentario { margin: 0; font-size: 12.5px; color: var(--secundario); white-space: pre-line; overflow-wrap: anywhere; }
.importar-p7__completo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--linea); }
.importar-p7__tarjeta .formulario-p3 { max-width: none; }
.importar-p7__tarjeta .formulario-p3 button { min-height: 44px; align-self: flex-start; }
/* === Parte 7 · P7-2 residente === */
/* Correcciones del cliente (maquetas p7-1 y p7-4). Módulo B: los colores de estado aplican acá
   (CLAUDE.md), siempre con tokens: pendiente gris, en proceso celeste, en revisión Ecoenergía
   ámbar, lista para el cliente celeste claro, devuelta ámbar oscuro, cerrada verde. */
.estado-punto--c-pendiente .estado-punto__marca { background: var(--blanco); border-color: var(--rotulo-tabla); }  /* diccionario v2: hueco */
.estado-punto--c-proceso .estado-punto__marca { background: var(--celeste-marca); border-color: var(--celeste-marca); }
.estado-punto--c-revision .estado-punto__marca { background: var(--amarillo-acento); border-color: var(--amarillo-acento); }  /* diccionario v2: En revisión Ecoenergía, amarillo */
.estado-punto--c-lista .estado-punto__marca { background: var(--blanco); border: 2px solid var(--azul-marca); }  /* diccionario v2: anillo, espera al cliente */
.estado-punto--c-devuelta .estado-punto__marca { background: var(--avance-negativo); border-color: var(--avance-negativo); }
.estado-punto--c-cerrada .estado-punto__marca { background: var(--azul-marca); border-color: var(--azul-marca); }  /* diccionario v2: Cerrada azul */
.correcciones-atraso { color: var(--avance-negativo); font-weight: 600; }
.correcciones-sin-dato { color: var(--terciario); font-weight: 600; }
.correcciones-riesgo { color: var(--secundario); font-weight: 600; }
.correcciones-riesgo--alto { color: var(--avance-negativo); font-weight: 700; }
.correcciones-esperando { display: block; font-size: 11px; color: var(--terciario); padding-left: 14px; }
.correcciones-codigo { font-weight: 700; color: var(--azul-marca); text-decoration: none; }
a.correcciones-codigo { display: inline-flex; align-items: center; min-height: 44px; }
a.correcciones-codigo:hover { color: var(--celeste-marca); }
.correcciones-ubicacion { display: block; font-size: 11px; color: var(--terciario); margin-top: 2px; }
.correcciones-origen { font-size: 11.5px; color: var(--secundario); }
a.correcciones-ver { display: inline-flex; align-items: center; min-height: 44px; font-size: 11px; font-weight: 600; color: var(--celeste-marca); text-decoration: none; }
.correcciones-nota { display: block; font-size: 11.5px; color: var(--terciario); line-height: 1.5; margin: 10px 0 0; overflow-wrap: anywhere; }
.correcciones-nota-caja, .correcciones-nota--caja {
    background: var(--fondo-resumen); border: 1px solid var(--linea); border-radius: var(--radio-campo);
    padding: 10px 14px; font-size: 12px; color: var(--secundario-movil-carga); line-height: 1.45; margin: 14px 0 0; max-width: 1000px;
}
.correcciones-boton-aviso.boton--secundario { border-color: var(--restriccion-abierta-anillo); color: var(--aviso-texto); background: var(--aviso-fondo); }
.correcciones-boton-aviso.boton--secundario:hover { color: var(--aviso-texto); background: var(--aviso-fondo); }
/* Cifras de arriba de la lista: 2 columnas en el celular, 6 en la computadora. */
dl.correcciones-cifras {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 16px 0 0;
    background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta);
}
dl.correcciones-cifras > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 3px; padding: 12px 16px; border-bottom: 1px solid var(--separador-fila); min-width: 0; }
dl.correcciones-cifras dt { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terciario); }
dl.correcciones-cifras dd { margin: 0; font-family: var(--fuente-titulos), sans-serif; font-stretch: 112%; font-weight: 500; font-size: 22px; color: var(--azul-marca); font-variant-numeric: tabular-nums; }
dl.correcciones-cifras dd.correcciones-cifras__valor--aviso { color: var(--avance-negativo); }
dl.correcciones-cifras dd.correcciones-cifras__valor--cerrada { color: var(--confirmacion-texto); }
@media (min-width: 900px) {
    dl.correcciones-cifras { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    dl.correcciones-cifras > div { border-bottom: none; border-right: 1px solid var(--separador-fila); }
    dl.correcciones-cifras > div:last-child { border-right: none; }
}
/* En el celular la lista agrupada va primero (regla 18): cifras, aviso de reinspección, filtros y
   búsqueda quedan para la computadora. */
@media (max-width: 899px) {
    dl.correcciones-cifras, .correcciones-filtros, .correcciones-busqueda, .correcciones-nota-caja { display: none; }
}
/* Filtros (chips) y búsqueda. */
.correcciones-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.correcciones-filtro {
    display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 14px;
    border: 1px solid var(--linea); border-radius: var(--radio-etiqueta); font-size: 12px; color: var(--secundario-movil-carga);
    text-decoration: none; background: var(--blanco);
}
.correcciones-filtro:hover { color: var(--azul-marca); }
.correcciones-filtro--activo { border-color: var(--azul-marca); color: var(--azul-marca); font-weight: 600; }
.correcciones-busqueda { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.correcciones-busqueda select, .correcciones-busqueda input[type="search"] { min-height: 44px; font-size: 16px; min-width: 0; }
.correcciones-busqueda input[type="search"] { flex: 1 1 220px; }
.correcciones-busqueda select { flex: 0 1 220px; }
.correcciones-busqueda button { min-height: 44px; font-size: 13px; }
/* La tabla solo en la computadora; el celular ve los grupos. */
.correcciones-tabla-tarjeta { display: none; }
@media (min-width: 900px) {
    .correcciones-tabla-tarjeta { display: block; }
}
.correcciones-tabla .estado-punto { white-space: normal; }
.correcciones-grupos { margin-top: 8px; }
.correcciones-grupos .fiscal-rotulo { display: block; }
.correcciones-item { align-items: flex-start; }
.correcciones-item .fiscal-lista__texto { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.correcciones-item .fiscal-lista__frente .correcciones-codigo { margin-right: 4px; }
.correcciones-item__estado { display: block; }
.correcciones-item__estado .estado-punto { white-space: normal; }
.correcciones-item__estado .correcciones-esperando { display: inline; padding-left: 0; }
.correcciones-item__fecha { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12.5px; color: var(--secundario); white-space: nowrap; flex-shrink: 0; }
.correcciones-motivo { font-size: 12px; color: var(--aviso-texto); line-height: 1.4; }
.correcciones-cerradas > summary { cursor: pointer; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; }
/* Detalle (maqueta p7-4). */
.correcciones-volver { margin: 0 0 4px; }
.correcciones-detalle__estado { margin-top: 2px; }
.correcciones-detalle__estado .estado-punto { font-size: 12.5px; white-space: normal; }
.correcciones-devuelta {
    background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); border-radius: var(--radio-campo);
    padding: 10px 14px; font-size: 12.5px; color: var(--aviso-texto); line-height: 1.45; margin: 0 0 12px; overflow-wrap: anywhere; max-width: 760px;
}
.correcciones-tarjeta { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 12px 14px; margin: 0 0 12px; background: var(--blanco); max-width: 760px; }
.correcciones-tarjeta--aviso { border-color: var(--aviso-borde); }
.correcciones-tarjeta__titulo { font-weight: 700; color: var(--aviso-texto); font-size: 13.5px; }
.correcciones-tarjeta__texto { font-size: 12.5px; color: var(--secundario); }
.correcciones-datos {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--fondo-resumen); border-radius: var(--radio-tarjeta);
    padding: 12px 14px; font-size: 11px; color: var(--secundario-movil-carga); max-width: 760px;
}
.correcciones-datos > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.correcciones-datos > div + div { padding-left: 12px; border-left: 1px solid var(--linea); }
.correcciones-datos strong { font-size: 14px; font-weight: 700; color: var(--secundario-movil-carga); }
.correcciones-datos strong.correcciones-datos__fecha { color: var(--azul-marca); }
.correcciones-datos strong.correcciones-atraso, .correcciones-datos strong.correcciones-riesgo--alto { color: var(--avance-negativo); }
.correcciones-pedido { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; max-width: 760px; overflow-wrap: anywhere; }
.correcciones-fotos-par { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 760px; }
@media (min-width: 900px) {
    .correcciones-fotos-par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.correcciones-fotos { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.correcciones-fotos__rotulo { font-size: 12.5px; font-weight: 600; }
.correcciones-fotos__grilla { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.correcciones-foto { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.correcciones-foto .miniatura.correcciones-foto__miniatura { width: 72px; height: 72px; }
.correcciones-foto__quitar .boton-atajo { min-height: 44px; font-size: 12px; }
.correcciones-subir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
form label.correcciones-subir__elegir { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; flex: 1 1 200px; min-width: 0; }
.correcciones-subir__elegir input[type="file"] { min-height: 44px; font-size: 13px; width: 100%; max-width: 100%; padding: 8px; background: var(--blanco); }
.correcciones-subir__boton { min-height: 44px; font-size: 13px; }
.correcciones-actualizar { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.correcciones-estados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.correcciones-estados label { min-width: 0; }
.correcciones-estados input[type="radio"]:disabled + label { opacity: 0.5; cursor: default; }
.correcciones-estados input[type="radio"]:checked + label { background: var(--fondo-seleccion); box-shadow: inset 0 0 0 2px var(--azul-marca); color: var(--azul-marca); font-weight: 700; }  /* sistema v2, regla 2 */
.correcciones-actualizar__campo input { min-height: 44px; }
.correcciones-actualizar__guardar { min-height: 48px; font-size: 14px; }
.correcciones-reprogramar { margin: 18px 0 0; max-width: 640px; }
.correcciones-reprogramar > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--celeste-marca); }
.correcciones-fecha { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.correcciones-fecha input { min-height: 44px; }
.correcciones-fecha__boton { min-height: 44px; font-size: 13.5px; align-self: flex-start; }
.correcciones-historial .correcciones-historial__fila { padding: 10px 0; }
.correcciones-nueva__par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; }
.correcciones-nueva input, .correcciones-nueva select { min-height: 44px; }
/* Regla 27: el quinto ícono de la barra del celular ("Correcciones · N"), solo mientras haya
   correcciones abiertas; con cinco ítems la letra baja un punto y el texto puede ir en dos líneas. */
.nav-inferior--cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nav-inferior--cinco a { font-size: 10.5px; text-align: center; overflow-wrap: anywhere; line-height: 1.2; }
.nav-inferior__cuenta { white-space: nowrap; }
/* === Parte 7 · P7-4 revisión === */
/* Revisión de nuestro fiscal (maqueta p7-5), reinspección registrada por dirección,
   configuración, enlace de envío y feriados. Sin colores nuevos: los de la fiscalización. */
.revision-cliente {
    display: flex; flex-direction: column; gap: 12px; padding: 14px 20px 16px;
    background: var(--fondo-fila-desplegada); border-top: 1px solid var(--separador-fila); border-bottom: 1px solid var(--separador-fila);
    margin: 0 -1rem; min-width: 0;
}
@media (min-width: 900px) {
    .revision-cliente { margin: 0; max-width: 640px; border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); box-sizing: border-box; }
}
.revision-cliente__titulo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.revision-cliente__codigo { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.revision-cliente__detalle { font-size: 12px; color: var(--secundario-movil-carga); overflow-wrap: anywhere; }
.revision-cliente__fotos { display: flex; flex-wrap: wrap; gap: 12px; }
.revision-cliente__grupo { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 44px; }
.revision-cliente__rotulo-foto { font-size: 10.5px; color: var(--terciario); }
.revision-cliente__sin-foto {
    width: 44px; height: 44px; border-radius: 6px; background: var(--pista-barra); color: var(--terciario);
    font-size: 10px; display: flex; align-items: center; justify-content: center; text-align: center;
}
.revision-cliente__texto { margin: 0; font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.revision-cliente__acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.revision-cliente__acciones form { margin: 0; display: flex; }
.revision-cliente__boton {
    min-height: 46px; width: 100%; padding: 0 16px; font-size: 13px; font-weight: 600; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none;
}
a.revision-cliente__boton.boton--secundario { color: var(--azul-marca); }
.revision-cliente__ayuda { font-size: 11.5px; color: var(--secundario-movil-carga); line-height: 1.5; overflow-wrap: anywhere; }
.revision-cliente__devolver { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.revision-cliente__nota {
    margin: 14px 0 0; max-width: 640px; box-sizing: border-box; background: var(--fondo-resumen); border: 1px solid var(--linea);
    border-radius: var(--radio-campo); padding: 10px 14px; font-size: 12px; color: var(--secundario-movil-carga); line-height: 1.45;
}
.revision-cliente__aviso { display: block; margin: 0 0 12px; overflow-wrap: anywhere; }
.revision-cliente__donde { text-align: right; white-space: normal; flex-shrink: 0; max-width: 45%; }
.revision-cliente__cerrar { min-height: 44px; }
.acciones-revision { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.acciones-revision > .fiscal-rotulo { padding-top: 6px; }
.configuracion-correcciones {
    background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta);
    padding: 16px; margin: 0 0 16px; max-width: 640px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.configuracion-correcciones__titulo { margin: 0; font-size: 15px; color: var(--azul-marca); }
.configuracion-correcciones__form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.configuracion-correcciones__opciones { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.configuracion-correcciones__opcion { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; font-size: 13.5px; font-weight: 400; }
.configuracion-correcciones__opcion input { flex: none; margin-top: 3px; width: 20px; height: 20px; }
.configuracion-correcciones__guardar, .enlace-envio__boton { min-height: 44px; align-self: flex-start; }
.enlace-envio { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.enlace-envio form { margin: 0; display: flex; }
.enlace-envio__rotulo { font-size: 12.5px; font-weight: 600; }
.enlace-envio__direccion { width: 100%; min-height: 44px; box-sizing: border-box; font-size: 13px; color: var(--texto); background: var(--fondo-resumen); }
/* === Parte 7 · P7-5/6 resumen y cliente === */
/* Resumen y cronograma (maqueta p7-3): dos columnas en la computadora, una en el celular. Solo
   tokens: cerradas en el verde de confirmación, abiertas en celeste, lo vencido en el ámbar de
   restricción abierta y la línea de hoy en el marrón de avance negativo (Módulo B: colores de
   estado). */
.boton-enlace--principal, .boton-enlace--principal:hover { background: var(--azul-marca); color: var(--blanco); }
.resumen-correcciones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 20px; margin: 20px 0; align-items: start; }
.resumen-correcciones__total { font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--terciario); }
.resumen-correcciones__nombre { overflow-wrap: anywhere; }
.resumen-correcciones__cerradas { background: var(--confirmacion-texto); }
.resumen-correcciones__aviso { color: var(--avance-negativo); }
.resumen-correcciones .tableros__pie > span:first-child { color: var(--secundario-movil-carga); overflow-wrap: anywhere; }
.resumen-correcciones .tableros__pie > .tableros__numero { flex-shrink: 0; }
.cronograma__fila { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 4fr); align-items: center; gap: 10px; font-size: 12px; }
.cronograma__fila--escala { padding-bottom: 2px; }
.cronograma__nivel { border-top: 1px solid var(--separador-fila); }
.cronograma__resumen { list-style: none; cursor: pointer; min-height: 44px; padding: 4px 0; }
.cronograma__resumen::-webkit-details-marker { display: none; }
.cronograma__rotulo { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.cronograma__flecha::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--azul-marca); }
.cronograma__nivel[open] .cronograma__flecha::before { content: "▾"; }
.cronograma__cantidad { color: var(--terciario); font-weight: 500; }
.cronograma__correccion { padding: 6px 0; color: var(--secundario); font-size: 11.5px; }
.cronograma__rotulo--correccion { font-weight: 400; padding-left: 18px; display: flex; flex-direction: column; gap: 1px; }
.cronograma__rotulo--correccion strong { color: var(--azul-marca); }
.cronograma__fechas { font-size: 10.5px; color: var(--terciario); }
.cronograma__pista { position: relative; height: 12px; }
.cronograma__fila--escala .cronograma__pista { height: 14px; overflow: hidden; }
.cronograma { overflow: hidden; }
.cronograma__pista--chica { height: 8px; }
.cronograma__semana { position: absolute; top: 0; font-size: 10px; color: var(--terciario); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.cronograma__barra { position: absolute; top: 0; height: 100%; border-radius: 3px; background: var(--celeste-marca); }
.cronograma__barra--lista { opacity: 0.55; }
.cronograma__barra--sin-fecha { background: var(--sin-avance); }
.cronograma__barra--vencida { background: var(--restriccion-abierta-anillo); border-radius: 0 3px 3px 0; }
.cronograma__barra--con-vencidas { box-shadow: inset 0 0 0 2px var(--restriccion-abierta-anillo); }  /* DETALLES O4 */
.cronograma__hoy { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--avance-negativo); }
.cronograma__cierre { margin: 0; padding-top: 8px; border-top: 1px solid var(--separador-fila); font-size: 12.5px; color: var(--secundario-movil-carga); }
@media (max-width: 899px) {
    .resumen-correcciones { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 600px) {
    /* En el celular el rótulo va arriba y la barra ocupa todo el ancho: nada se desliza de costado. */
    .cronograma__fila { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .cronograma__fila--escala > span:first-child { display: none; }
    .cronograma__correccion { padding: 8px 0; }
    .encabezado-pagina__acciones .boton-enlace { white-space: normal; }
}
/* Portal del cliente (maqueta p7-7), reinspección (p7-6) y "Enviar informe" (p7-8): APAGADOS
   hasta la Parte 6. Estados con punto de 7 px + texto, como el resto de la app. */
.portal-correcciones__cifras { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); margin: 18px 0 0; }
.portal-correcciones__cifra { padding: 14px 18px; display: flex; flex-direction: column; gap: 3px; border-right: 1px solid var(--separador-fila); min-width: 0; }
.portal-correcciones__cifra:last-child { border-right: none; }
.portal-correcciones__valor { font-family: var(--fuente-titulos); font-weight: 500; font-size: 24px; color: var(--azul-marca); }
.portal-correcciones__valor--cerradas { color: var(--confirmacion-texto); }
.portal-correcciones__valor--atrasadas { color: var(--avance-negativo); }
.portal-correcciones__rotulo { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terciario); overflow-wrap: anywhere; }
.portal-correcciones__codigo { font-weight: 700; color: var(--azul-marca); white-space: nowrap; }
.portal-correcciones__descripcion { display: block; font-weight: 600; overflow-wrap: anywhere; }
.portal-correcciones__ubicacion { display: block; font-size: 11px; color: var(--terciario); overflow-wrap: anywhere; }
.portal-correcciones__estado { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--secundario); }
.portal-correcciones__estado::before { content: ""; width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; box-sizing: border-box; }
.portal-correcciones__estado--pendiente::before { background: var(--estado-no-iniciado-punto); border: 1px solid var(--estado-no-iniciado-borde); }
.portal-correcciones__estado--proceso::before { background: var(--estado-en-proceso-punto); }
.portal-correcciones__estado--lista::before { background: var(--blanco); border: 2px solid var(--azul-marca); }
.portal-correcciones__estado--cerrada::before { background: var(--azul-marca); }
.portal-correcciones__fotos { display: flex; flex-wrap: wrap; gap: 4px; }
.portal-correcciones__fotos a { display: inline-flex; min-width: 44px; min-height: 44px; }
.portal-correcciones__fotos img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; display: block; }
.portal-correcciones__notas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 12px 0; }
.portal-correcciones__nota { margin: 0; background: var(--fondo-resumen); border: 1px solid var(--linea); border-radius: var(--radio-campo); padding: 10px 14px; font-size: 12px; color: var(--secundario-movil-carga); line-height: 1.45; }
.reinspeccion-cliente { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; background: var(--fondo-fila-desplegada); border: 1px solid var(--separador-fila); border-radius: var(--radio-tarjeta); max-width: 640px; }
.reinspeccion-cliente__titulo { display: flex; flex-direction: column; gap: 3px; }
.reinspeccion-cliente__titulo h2 { margin: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.reinspeccion-cliente__ubicacion { font-size: 12px; color: var(--secundario-movil-carga); }
.reinspeccion-cliente__fotos { display: flex; flex-wrap: wrap; gap: 12px; }
.reinspeccion-cliente__foto { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; color: var(--terciario); text-decoration: none; }
.reinspeccion-cliente__foto img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
.reinspeccion-cliente__texto { margin: 0; font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.reinspeccion-cliente__formulario { display: flex; flex-direction: column; gap: 6px; }
.reinspeccion-cliente__botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.reinspeccion-cliente__botones button { min-height: 46px; }
.reinspeccion-cliente__nota { margin: 0; font-size: 11.5px; color: var(--secundario-movil-carga); line-height: 1.5; }
.reinspeccion-cliente__siguientes-titulo { margin: 18px 0 6px; }
.reinspeccion-cliente__siguientes { list-style: none; margin: 0 0 12px; padding: 0; max-width: 640px; }
.reinspeccion-cliente__siguientes a { display: flex; justify-content: space-between; gap: 10px; min-height: 44px; align-items: center; padding: 6px 4px; border-top: 1px solid var(--separador-fila); font-size: 13.5px; font-weight: 600; color: var(--texto); text-decoration: none; overflow-wrap: anywhere; }
.enviar-informe { max-width: 460px; }
.enviar-informe__texto { font-size: 12.5px; color: var(--secundario-movil-carga); line-height: 1.5; }
.enviar-informe__nota { margin: 14px 0 0; background: var(--fondo-resumen); border: 1px solid var(--linea); border-radius: var(--radio-campo); padding: 10px 14px; font-size: 12px; color: var(--secundario-movil-carga); }
@media (max-width: 899px) {
    .portal-correcciones__cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portal-correcciones__cifra { border-bottom: 1px solid var(--separador-fila); }
    .portal-correcciones__notas { grid-template-columns: minmax(0, 1fr); }
}

/* --- Parte 6 (modo noche v6): el portal del cliente y su lado en Ecoenergía. Sin colores nuevos:
   los estados usan el punto de 7 px con los tokens de siempre (P6 de la revisión de diseño). --- */
.portal-acceso { max-width: 440px; display: flex; flex-direction: column; gap: 10px; }
.portal-acceso__obra { margin: 0; font-size: 13px; color: var(--secundario); }
.portal-acceso__formulario { display: flex; flex-direction: column; gap: 0.75rem; }
.portal-acceso__formulario input { min-height: 46px; }
.portal-acceso__ayuda { display: block; font-size: 12px; color: var(--terciario); font-weight: 400; }
.portal-acceso__nota { margin: 0; font-size: 12.5px; color: var(--secundario); }
.portal-lista:not(.obras-lista) .portal-lista__fila { display: flex; flex-direction: column; gap: 3px; min-height: 44px; }
.portal-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--texto); }
.portal-estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.portal-estado--ok::before { background: var(--azul-marca); }
.portal-estado--pendiente::before { background: var(--estado-no-iniciado-punto); border: 1px solid var(--estado-no-iniciado-borde); }
.portal-estado--obs::before { background: var(--estado-abierta-punto); }
.portal-estado--apagado::before { background: var(--estado-liberada-punto); }
.portal-inicio__cifras { margin-bottom: 10px; }
.portal-pendientes { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.portal-pendientes__item { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.portal-pendientes__titulo { font-weight: 700; color: var(--azul-marca); overflow-wrap: anywhere; }
.portal-pendientes__detalle { font-size: 13px; color: var(--secundario); }
.portal-pendientes__accion { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; color: var(--celeste-marca); text-decoration: none; }
.portal-inicio__avisos { margin-top: 8px; }
.portal-botones { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.portal-botones .boton, .portal-botones button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.portal-respuesta { display: flex; flex-direction: column; gap: 0.75rem; max-width: 560px; }
.portal-respuesta textarea, .portal-respuesta input[type="text"] { min-height: 46px; }
.portal-opciones { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.portal-opcion { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--linea); border-radius: var(--radio-campo); background: var(--blanco); font-weight: 600; cursor: pointer; }
.portal-opcion input { width: 18px; height: 18px; min-height: 0; margin: 0; flex: none; }
.portal-opcion:has(input:checked) { border-color: var(--azul-marca); box-shadow: inset 0 0 0 1px var(--azul-marca); }
.portal-opciones--compactas .portal-opcion { padding: 0 10px; font-size: 13px; }
.portal-certificado__tabla td { vertical-align: top; }
.portal-certificado__item { font-weight: 600; }
.portal-certificado__historial { display: block; margin-top: 4px; font-size: 12px; color: var(--secundario); }
.portal-certificado__respuesta { min-width: 250px; }
.portal-certificado__campo { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; font-size: 12px; color: var(--secundario); }
.portal-certificado__campo input { min-height: 44px; }
.portal-firma { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 8px 16px 16px; }
.portal-firma__cifras dd { font-variant-numeric: tabular-nums; }
.portal-restriccion { margin-bottom: 14px; }
.temas-sugeridos { background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); border-radius: var(--radio-campo); padding: 10px 14px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.temas-sugeridos__titulo { margin: 0; font-size: 12px; font-weight: 700; color: var(--aviso-texto); text-transform: uppercase; letter-spacing: 0.06em; }
.temas-sugeridos__item { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; font-size: 13px; }
.temas-sugeridos__item form { display: flex; gap: 8px; margin: 0; }
.temas-sugeridos__item button { min-height: 44px; }
.restriccion-cliente { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.restriccion-cliente form { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.restriccion-cliente button, .restriccion-cliente input { min-height: 44px; }
.revision-cliente-cert { border-top: 1px solid var(--linea); margin-top: 12px; padding-top: 8px; }
.revision-cliente-cert__historial summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.portal-admin__permisos { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0; }
.portal-admin__permisos label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 400; }
.portal-admin__permisos input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; margin: 0; }
.portal-admin__permisos button, .portal-admin__acciones button { min-height: 44px; }
.portal-admin__acciones { display: flex; flex-direction: column; gap: 6px; }
.portal-admin__acciones form { margin: 0; }
/* Las cifras del portal (Inicio, acta, certificado) se reparten según cuántas hay. */
.portal-inicio__cifras, #acta-cifras, #certificado-cifras { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.portal-correcciones__valor { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Etapa Q: en el celular, cada ítem del certificado del cliente es una tarjeta (la columna "Su
   respuesta" quedaba fuera de la pantalla en el iPhone). */
@media (max-width: 899px) {
    .portal-certificado__tabla thead { display: none; }
    .portal-certificado__tabla, .portal-certificado__tabla tbody, .portal-certificado__tabla tr, .portal-certificado__tabla td { display: block; width: 100%; box-sizing: border-box; }
    .portal-certificado__tabla tr { padding: 10px 0; border-bottom: 1px solid var(--linea); }
    .portal-certificado__tabla td { border: 0; padding: 4px 14px; font-size: 13px; }
    .portal-certificado__tabla td.numero { text-align: left; }
    .portal-certificado__tabla td.numero::before { content: attr(data-etiqueta) " "; color: var(--terciario); font-size: 12px; }
    .portal-certificado__respuesta { min-width: 0; }
}

/* --- Patrones de sistema (revisión de diseño de la app, modo noche v6, 28/09/2026 —
   docs/REVISION_DISENO_APP.md). Van al final a propósito: corrigen de una vez todas las
   pantallas que usan estos componentes. ------------------------------------------------------ */
/* P3: encabezados de tabla legibles, 10,5 px en el gris terciario (antes 9,5 px en el gris de
   rótulo, contraste 2,5:1). */
table.tabla-datos th,
.portada-d__tabla th,
.vencidas__encabezado,
.portada-d__obra--titulos,
.importar-p7__grilla--titulos,
.control-interno__etiqueta,
.portada-d__rotulo { font-size: 10.5px; color: var(--terciario); }
/* P2: cifras tabulares en toda celda y en montos, cantidades y fechas; el encabezado de una
   columna numérica se alinea como su columna. */
table td, table th, .num, .numero, .monto { font-variant-numeric: tabular-nums; }
table th.num, table th.numero, table td.num, table td.numero { text-align: right; }
/* P1: aire entre columnas en las tablas sin relleno lateral (la portada se leía
   "SIN CARGARRESTRICCIONES"). */
.portada-d__tabla th, .portada-d__tabla td { padding-right: 14px; }
.portada-d__tabla th:last-child, .portada-d__tabla td:last-child { padding-right: 0; }
/* Monto de un adicional o modificación que todavía no suma al total: en gris, sin paréntesis
   (se leían como negativo contable). */
.tabla-contratos__no-suma { color: var(--terciario); }

/* P9 / P4: casilla o botón de opción A LA IZQUIERDA de su texto, alineados, con la fila entera
   como área táctil (antes `form label` en columna dejaba la casilla sola y centrada, y el rótulo
   debajo: no se sabía qué casilla era de qué obra o permiso). */
form label:has(> input[type="checkbox"]), form label:has(> input[type="radio"]) {
    flex-direction: row; align-items: center; gap: 10px; font-weight: 600; min-height: 44px; text-align: left;
}
form label > input[type="checkbox"], form label > input[type="radio"] {
    width: 20px; height: 20px; min-height: 0; flex: none; margin: 0; padding: 0; accent-color: var(--azul-marca);
}
/* P4: listas desplegables con el mismo aspecto de campo en todos los navegadores (WebKit/iPhone
   las dibujaba nativas, de 26 px y sin borde). La flecha es un SVG en línea, en el gris terciario. */
select:not([multiple]):not([size]) {
    -webkit-appearance: none; appearance: none; min-height: 44px; padding-right: 34px;
    background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B778A' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 8px;
}
@media (max-width: 899px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
    select:not([multiple]):not([size]) { min-height: 46px; }
}
/* P2: un monto o una cantidad nunca se parte en dos líneas ("Gs." arriba y la cifra abajo). */
td.numero, td.num, .monto { white-space: nowrap; }
/* Tablas anchas en el celular: se deslizan de costado dentro de su envoltorio (la página no);
   una sombra en el borde avisa que hay más columnas hacia ese lado. */
@media (max-width: 899px) {
    .tabla-envoltorio {
        background:
            linear-gradient(to right, var(--blanco) 30%, rgba(255, 255, 255, 0)) left center / 28px 100% no-repeat local,
            linear-gradient(to left, var(--blanco) 30%, rgba(255, 255, 255, 0)) right center / 28px 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgba(27, 36, 51, 0.16), rgba(27, 36, 51, 0)) left center / 12px 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgba(27, 36, 51, 0.16), rgba(27, 36, 51, 0)) right center / 12px 100% no-repeat scroll,
            var(--blanco);
    }
}
/* P7: encabezado de "01 Compromisos de la semana anterior" (Reunión), con la grilla de sus filas;
   en el celular, donde la fila se reparte en dos renglones, cada número lleva su rótulo. */
.compromisos-encabezado {
    display: grid; grid-template-columns: 2.4fr 0.6fr 0.7fr 1.5fr; gap: 6px; padding: 0 0 6px;
    font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--terciario); font-weight: 600;
}
.compromisos-encabezado span:nth-child(2), .compromisos-encabezado span:nth-child(3) { text-align: right; }
.compromisos-encabezado span:nth-child(4) { padding-left: 16px; }
@media (max-width: 899px) {
    .compromisos-encabezado { display: none; }
    .compromiso__meta::before { content: "Meta "; font-weight: 400; color: var(--terciario); }
    .compromiso__logrado::before { content: "Logrado "; font-weight: 400; color: var(--terciario); }
}
/* Niveles de la obra: un nivel por renglón, en columnas (se leía "500 m²2. PB" todo corrido). */
.lista-niveles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 24px; list-style-position: inside; padding-left: 0; }
.lista-niveles li { font-variant-numeric: tabular-nums; }
.estado-punto--vencido { color: var(--avance-negativo); font-weight: 600; }
/* Un enlace con aspecto de botón ocupa su alto (en línea, su relleno se montaba sobre el renglón
   de arriba: «Abrir el borrador» tapaba «Corte al…», «Evidencia» tapaba las fotos). */
a.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; text-decoration: none; }
/* P5: en el celular, las secciones de Certificación y Administración en una fila que se desliza
   debajo del encabezado (antes solo estaban dentro del menú de las iniciales; el analista no veía
   ningún menú). */
@media (max-width: 899px) {
    .encabezado__submenu--movil { display: flex; overflow-x: auto; white-space: nowrap; gap: 1.1rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .encabezado__submenu--movil a { min-height: 44px; display: inline-flex; align-items: center; flex: none; }
}

/* Verificación del después (R-DIS): */
/* la portada con los encabezados de 10,5 px: aire entre columnas y corte dentro de la columna. */
.portada-d__obra { column-gap: 16px; }
.portada-d__obra--titulos > * { overflow-wrap: anywhere; min-width: 0; }
/* el texto de una casilla se parte en renglones (no se corta con "…"). */
form label:has(> input[type="checkbox"]), form label:has(> input[type="radio"]) { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
/* casillas sueltas en una celda (Frente → ítems, ámbito): 22 px y la celda como área táctil. */
table.tabla-datos td > input[type="checkbox"] { width: 22px; height: 22px; margin: 11px 0; accent-color: var(--azul-marca); }
/* la fila de secciones del celular avisa que sigue hacia la derecha. */
@media (max-width: 899px) {
    .encabezado__submenu--movil { -webkit-mask-image: linear-gradient(to right, var(--texto) 85%, transparent); mask-image: linear-gradient(to right, var(--texto) 85%, transparent); /* la máscara solo usa la opacidad */ padding-right: 24px; }
}
/* montos del portal: "Gs." y la cifra en el mismo renglón. */
@media (min-width: 900px) { .portal-correcciones__valor, .portal-firma__cifras dd { white-space: nowrap; overflow-wrap: normal; } }

/* ===== X1 lote 4 (DETALLES, tandas B, E, I, L, N) ===== */
/* I2: "Enviar otra vez" cuando esa revisión del acta ya salió. */
.envio-acta__otra-vez { min-height: 44px; margin: 8px 0; font-size: 13px; }
/* N17f: Restricciones en el celular, una tarjeta por restricción: frente, descripción, estado y
   "Liberar" arriba, a la vista (en la tabla que se deslizaba quedaban fuera de la pantalla). */
@media (max-width: 899px) {
    .restricciones-tabla thead { display: none; }
    .restricciones-tabla, .restricciones-tabla tbody { display: block; width: 100%; }
    .restricciones-tabla tr { display: flex; flex-direction: column; padding: 10px 0; border-bottom: 1px solid var(--linea); }
    .restricciones-tabla td { display: block; order: 5; padding: 3px 14px; border: 0; overflow-wrap: anywhere; }
    .restricciones-tabla td[data-titulo]::before { content: attr(data-titulo); display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--terciario); margin-bottom: 2px; }
    .restricciones-tabla td.restricciones-tabla__frente { order: 0; font-weight: 600; }
    .restricciones-tabla td.restricciones-tabla__frente::before { content: none; }
    .restricciones-tabla td.restricciones-tabla__descripcion { order: 1; }
    .restricciones-tabla td.restricciones-tabla__descripcion::before { content: none; }
    .restricciones-tabla td.restricciones-tabla__estado { order: 2; }
    .restricciones-tabla td.restricciones-tabla__accion { order: 3; }
    .restricciones-tabla td.restricciones-tabla__accion:empty { display: none; }
    .restricciones-tabla td.restricciones-tabla__accion button { min-height: 44px; }
}
/* N15a: "Finalizado" en la tarjeta de Carga. */
.fila-carga__finalizado { display: block; font-size: 12px; margin-top: 2px; }
/* N6g: Frente → ítems en el celular (ver frentes/items.html): casillas de 22 px con la celda
   como área táctil (ya general) y el estado en su propio renglón. */
@media (max-width: 899px) {
    .frente-items-tabla thead { display: none; }
    .frente-items-tabla, .frente-items-tabla tbody { display: block; width: 100%; }
    .frente-items-tabla tr { display: grid; grid-template-columns: 44px 1fr; column-gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--linea); }
    .frente-items-tabla td { display: block; padding: 2px 8px 2px 0; border: 0; overflow-wrap: anywhere; grid-column: 2; }
    .frente-items-tabla td:first-child { grid-column: 1; grid-row: 1 / span 6; display: flex; justify-content: center; }
    .frente-items-tabla td[data-titulo]::before { content: attr(data-titulo) " "; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--terciario); }
}
/* L14a–c: "Volver a …", enlaces de Alertas e Importar y el selector "Origen", de 44 px. */
.encabezado-pagina__subtitulo a, .fiscal-lista__motivo a, .importar-p7__nota a { display: inline-flex; align-items: center; min-height: 44px; }
#correcciones-origen { min-height: 44px; }
/* E7: pantalla de ingreso, campos y botón de 44 px. */
.formulario-ingreso input, .formulario-ingreso button { min-height: 44px; }

/* X1, lotes 1 y 3 (CSS pedido por los agentes): ingreso en columna; casilla de confirmación con su
   texto al lado y 44 px de área táctil; total del adicional en el portal. */
.formulario-ingreso { display: flex; flex-direction: column; gap: 0.75rem; max-width: 320px; }
label.casilla { display: flex; flex-direction: row; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: 13px; }
label.casilla > input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; flex: none; margin: 0; accent-color: var(--azul-marca); }
.portal-adicional__total { text-align: right; font-weight: 600; margin: 12px 0 0; font-variant-numeric: tabular-nums; }

/* ===== Estructura v2 (modo noche v7, ESTRUCTURA.md §2) ===== */
/* Barra del celular por perfil: de 1 a 5 opciones, siempre del mismo ancho. */
.nav-inferior--1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.nav-inferior--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav-inferior--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nav-inferior--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nav-inferior--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nav-inferior--5 a { font-size: 10.5px; text-align: center; overflow-wrap: anywhere; line-height: 1.2; }
.nav-inferior { z-index: 5; }
/* Selector de obra (regla 6): el nombre de la obra en el encabezado; con más de una, un
   desplegable que lleva a la misma sección de la otra obra. */
.selector-obra { position: relative; font-weight: 700; font-size: 13.5px; color: var(--azul-marca); }
.selector-obra--una { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--linea); border-radius: 10px; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selector-obra__actual { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--linea); border-radius: 10px; cursor: pointer; list-style: none; max-width: 52vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selector-obra__actual::-webkit-details-marker { display: none; }
.selector-obra__actual::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.selector-obra__lista { position: absolute; top: calc(100% + 4px); left: 0; z-index: 12; min-width: 240px; max-width: 86vw; max-height: 60vh; overflow-y: auto; background: var(--blanco); border: 1px solid var(--linea); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 32, 64, 0.12); padding: 6px; display: flex; flex-direction: column; }
.selector-obra__lista a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 8px; text-decoration: none; color: var(--secundario); font-weight: 600; }
.selector-obra__lista a:hover, .selector-obra__lista a.activo { background: var(--fondo-celular); color: var(--azul-marca); }
@media (min-width: 900px) { .selector-obra__actual, .selector-obra--una { max-width: 280px; } }
/* Pantalla «Más» (§2): el resto de las secciones del perfil, por espacio. */
.mas__grupo { margin: 0 0 18px; }
.mas__titulo { font-family: var(--fuente-titulos, inherit); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11.5px; color: var(--terciario); margin: 0 0 6px; }
.mas__lista { display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--blanco); } /* v23i · IC.7 (Línea D): sin caja */
/* Pestañas de una sección (Reunión y actas, Clientes): las de los tableros. */
.pestanas-seccion { margin: 0 0 14px; }
/* Pendientes (estructura v2, regla 2; maquetas C y D). */
.pendientes__cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pendientes__obra { font-size: 12.5px; color: var(--terciario); padding-bottom: 18px; }
.pendientes__titulo-computadora { display: none; }
.pendientes__titulo-celular { display: block; }
.pendientes__indicadores { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--blanco); margin: 0 0 16px; overflow: hidden; }
.pendientes__indicador { display: flex; flex-direction: column; gap: 4px; padding: 12px; min-width: 0; }
.pendientes__indicador + .pendientes__indicador { border-left: 1px solid var(--linea); }
.pendientes__indicador--enlace { min-height: 44px; text-decoration: none; color: inherit; }
.pendientes__indicador--enlace:hover, .pendientes__indicador--enlace:focus-visible { background: var(--fondo-resumen); }
.pendientes__valor { font-size: 20px; color: var(--azul-marca); font-variant-numeric: tabular-nums; }
.pendientes__indicador--aviso .pendientes__valor { color: var(--avance-negativo); }
.pendientes__rotulo { font-size: 12px; color: var(--secundario); overflow-wrap: anywhere; }
.pendientes__columnas { display: grid; gap: 16px; }
.pendientes__lateral { display: grid; gap: 16px; align-content: start; }
.pendientes__tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 16px; min-width: 0; }
.pendientes__titulos { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pendientes__rotulo-seccion { font-family: var(--fuente-texto); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11.5px; font-weight: 700; color: var(--secundario); margin: 0 0 8px; }
.pendientes__nota { font-size: 11.5px; color: var(--terciario); }
.pendientes__lista { list-style: none; margin: 0; padding: 0; }
.pendiente { border-top: 1px solid var(--separador-fila); }
.pendiente__enlace { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 0; text-decoration: none; color: var(--texto); }
/* Sistema Consta v2 (molde «Bandeja»): la urgencia con punto y palabra; en la computadora, una línea. */
.pendiente__urgencia { flex: none; width: 108px; }
.pendientes__dato { font-size: var(--letra-texto-chico); color: var(--secundario); }
.pendientes__vacios { margin: 16px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--fondo-resumen); border: 1px solid var(--linea); font-size: 13px; color: var(--secundario); }
.pendientes__numeros { margin: 24px 0 0; }
.pendientes__numeros .pendientes__rotulo-seccion { margin-bottom: 8px; }
.pendientes__columnas { margin-top: 16px; }
.pendiente__punto { flex: none; width: var(--tamano-punto); height: var(--tamano-punto); border-radius: 50%; background: var(--celeste-marca); }
.pendiente--vencido .pendiente__punto { background: var(--avance-negativo); }
.pendiente--aviso .pendiente__punto { background: var(--amarillo-acento); }
.pendiente__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pendiente__que { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.pendiente__detalle { font-size: 12.5px; color: var(--secundario); overflow-wrap: anywhere; }
.pendiente__seccion { display: none; font-size: 12px; color: var(--terciario); white-space: nowrap; }
.pendiente__boton { display: none; }
.pendiente__enlace::after { content: "›"; flex: none; color: var(--terciario); font-size: 20px; }
.pendiente__cuando { flex: none; font-size: 12px; font-weight: 700; color: var(--secundario); white-space: nowrap; }
.pendiente__cuando--vencido { color: var(--avance-negativo); }
.pendientes__vacio { color: var(--terciario); font-size: 13px; margin: 8px 0 0; }
.pendientes__mas { margin: 10px 0 0; font-size: 13px; }
.pendientes__mas a { display: inline-flex; min-height: 44px; align-items: center; }
.pendientes__detalle { margin: 20px 0 0; }
.pendientes__detalle > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--azul-marca); }
.pendientes__resumen { margin: 24px 0 0; }
@media (min-width: 900px) {
    .pendientes__titulo-computadora { display: block; }
    .pendientes__titulo-celular { display: none; }
    .pendientes__valor { font-size: 24px; }
    .pendientes__indicador { padding: 14px 20px; }
    .pendientes__columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
    .pendiente__seccion { display: inline; }
    .pendiente__boton { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--azul-marca); border-radius: 8px; color: var(--azul-marca); font-weight: 700; font-size: 13px; white-space: nowrap; }
    .pendiente__enlace:hover .pendiente__boton { background: var(--fondo-seleccion); }
    .pendiente__enlace::after { display: none; }
    .pendientes__lateral .pendiente__enlace::after { display: none; }
}
@media (max-width: 899px) {
    .pendientes__indicador:nth-child(n+4) { display: none; }
    .pendientes__tarjeta { padding: 0; border: 0; background: none; }
    .pendientes__titulos .pendientes__nota { display: none; }
    .pendiente { border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--blanco); margin: 0 0 10px; }
    .pendiente__enlace { padding: 12px 14px; flex-wrap: wrap; }
    .pendiente__urgencia { width: 100%; }
}
.portada-d__decisiones { margin: 0 0 16px; }
.pendientes__alertas { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--aviso-texto); text-decoration: none; }
/* Configuración de la obra (estructura v2, regla 4; maqueta E). */
.configuracion__cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.configuracion__falta { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; min-width: min(420px, 100%); padding-bottom: 18px; font-size: 12.5px; color: var(--secundario); }
.configuracion__falta-numero { font-weight: 700; color: var(--texto); }
.configuracion__barra { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--pista-barra); overflow: hidden; }
.configuracion__barra > span { display: block; height: 100%; background: var(--azul-marca); }
.configuracion__tabla { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 4px 16px; }
.configuracion__fila { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "numero que estado" "numero como como" "numero quien quien" "numero accion accion"; gap: 4px 10px; padding: 14px 0; border-top: 1px solid var(--separador-fila); align-items: center; }
.configuracion__fila--titulos { display: none; }
.configuracion__fila:nth-child(2) { border-top: 0; }
.configuracion__numero { grid-area: numero; align-self: start; font-size: 18px; color: var(--terciario); }
.configuracion__que { grid-area: que; font-weight: 700; }
.configuracion__como { grid-area: como; font-size: 13px; color: var(--secundario); overflow-wrap: anywhere; }
.configuracion__otro { margin-left: 10px; font-size: 12.5px; display: inline-flex; min-height: 32px; align-items: center; }
.configuracion__quien { grid-area: quien; font-size: 12.5px; color: var(--terciario); display: flex; flex-direction: column; gap: 6px; }
.configuracion__estado { grid-area: estado; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: var(--azul-marca); white-space: nowrap; }
.configuracion__punto { width: var(--tamano-punto); height: var(--tamano-punto); border-radius: 50%; background: var(--azul-marca); }
.configuracion__estado--falta, .configuracion__estado--falta_confirmar, .configuracion__estado--en_curso { color: var(--aviso-texto); }
.configuracion__estado--falta .configuracion__punto, .configuracion__estado--falta_confirmar .configuracion__punto, .configuracion__estado--en_curso .configuracion__punto { background: var(--amarillo-acento); }
.configuracion__estado--apagado { color: var(--terciario); }
.configuracion__estado--apagado .configuracion__punto { background: var(--rotulo-tabla); }
.configuracion__accion { grid-area: accion; display: flex; gap: 10px; align-items: center; }
.configuracion__accion .boton, .configuracion__accion a.boton { min-width: 140px; min-height: 44px; }
.configuracion__ir { display: inline-flex; align-items: center; min-height: 44px; }
.configuracion__asignar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.configuracion__asignar select { min-height: 44px; max-width: 100%; }
.configuracion__asignar .boton-enlace { min-height: 44px; }
.configuracion__asignado { font-size: 11.5px; }
.configuracion__nota { font-size: 12.5px; color: var(--terciario); margin: 14px 0 0; }
/* v14 (O5, sistema v2): la barra de avance es un <progress> (sin estilos en la plantilla). */
.configuracion__progreso { grid-column: 1 / -1; width: 100%; height: 6px; border: 0; border-radius: 3px; background: var(--pista-barra); overflow: hidden; -webkit-appearance: none; appearance: none; }
.configuracion__progreso::-webkit-progress-bar { background: var(--pista-barra); border-radius: 3px; }
.configuracion__progreso::-webkit-progress-value { background: var(--azul-marca); border-radius: 3px; }
.configuracion__progreso::-moz-progress-bar { background: var(--azul-marca); }
.configuracion__prueba { margin-top: var(--espacio-24); padding: var(--espacio-16); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); }
.configuracion__prueba h2 { margin: 0 0 var(--espacio-8); font-size: 15px; }
.configuracion__historial { margin: var(--espacio-8) 0 0; padding-left: 16px; font-size: 11.5px; color: var(--secundario); }
@media (min-width: 900px) {
    .configuracion__fila { grid-template-columns: 40px minmax(0, 1.1fr) minmax(0, 2fr) minmax(0, 1.6fr) 150px 150px; grid-template-areas: "numero que como quien estado accion"; }
    .configuracion__fila--titulos { display: grid; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--terciario); padding: 10px 0; }
    .configuracion__fila--titulos > span:nth-child(1) { grid-area: numero; } .configuracion__fila--titulos > span:nth-child(2) { grid-area: que; }
    .configuracion__fila--titulos > span:nth-child(3) { grid-area: como; } .configuracion__fila--titulos > span:nth-child(4) { grid-area: quien; }
    .configuracion__fila--titulos > span:nth-child(5) { grid-area: estado; } .configuracion__fila--titulos > span:nth-child(6) { grid-area: accion; }
    .configuracion__numero { align-self: center; }
    .configuracion__accion { justify-content: flex-end; flex-direction: column; align-items: stretch; }
}
/* Regla 24: el residente y el analista no abren Certificación en el celular; el renglón queda como aviso. */
@media (max-width: 899px) {
    .pendiente--solo-computadora .pendiente__enlace { pointer-events: none; }
    .pendiente--solo-computadora .pendiente__enlace::after { content: ""; }
}
/* Cambios al contrato (estructura v2, regla 5; maqueta F). */
.cambios__tipos { display: grid; gap: 12px; margin: 0 0 16px; }
.cambios__tipo { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 14px 18px; }
.cambios__tipo-titulo { font-family: var(--fuente-texto); text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--azul-marca); margin: 0 0 4px; }
.cambios__tipo-texto { font-size: 13px; margin: 0 0 6px; color: var(--texto); }
.cambios__tipo-circuito { font-size: 12px; margin: 0; color: var(--secundario); }
.cambios__filtros { margin: 0 0 14px; }
.cambios__codigo { display: block; font-weight: 700; color: var(--texto); text-decoration: none; min-height: 24px; }
.cambios__rotulo { display: block; font-size: 11.5px; color: var(--terciario); }
.cambios__donde { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--azul-marca); }
.cambios__punto { width: var(--tamano-punto); height: var(--tamano-punto); border-radius: 50%; background: var(--azul-marca); flex: none; }
.cambios__donde--aviso { color: var(--aviso-texto); } .cambios__donde--aviso .cambios__punto { background: var(--amarillo-acento); }
.cambios__donde--cliente { color: var(--celeste-marca); } .cambios__donde--cliente .cambios__punto { background: var(--celeste-marca); }
.cambios__donde--neutro { color: var(--terciario); } .cambios__donde--neutro .cambios__punto { background: var(--rotulo-tabla); }
@media (min-width: 900px) { .cambios__tipos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cambios__filtros .tableros__opcion, .pestanas-seccion .tableros__opcion { min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; }
/* E7.2 (revisión contra las maquetas E y D): asignar en un renglón; en el celular, «Esperando a
   otros» con el «cuándo» debajo del texto (no aprieta la columna). */
.configuracion__asignar { flex-wrap: nowrap; }
.configuracion__asignar select { flex: 1 1 auto; min-width: 0; width: auto; }
.configuracion__asignar .boton-enlace { flex: none; }
.configuracion__otro { margin-left: 0; margin-right: 12px; }
.configuracion__como { display: flex; flex-wrap: wrap; column-gap: 10px; align-items: center; }
@media (max-width: 899px) {
    .pendiente__enlace { flex-wrap: wrap; }
    .pendiente__texto { flex: 1 1 0; }
    .pendiente__cuando { order: 3; flex-basis: 100%; padding-left: 20px; margin-top: -4px; }
}
/* E7 (verificación por tareas): las iniciales, un botón de 44 px (la etiqueta no tomaba su tamaño);
   «Editar frentes» con alto de toque. */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; box-sizing: border-box; }
.enlace-editar-frentes { display: inline-flex; align-items: center; min-height: 44px; }
/* Regla 24 (E7): el residente y el analista no tienen, en el celular, ningún camino por menú a
   Certificación: desde un paso asignado (niveles, etapas) la fila de secciones no aparece. Por su
   dirección se abren en cantidades, con «—» en lugar de guaraníes: lo decide el servidor
   (decisión 12 del dueño, app/permisos.py, montos_ocultos). */
@media (max-width: 899px) {
    body.certificacion-solo-computadora .encabezado__submenu { display: none !important; }
}
/* E7: toques de 44 px en los enlaces nuevos (Configuración, Cambios al contrato, menú de las iniciales). */
.configuracion__otro { min-height: 44px; }
@media (max-width: 899px) { .cambios__codigo { display: inline-flex; align-items: center; min-height: 44px; } }
.menu-usuario a, .menu-usuario button.enlace { min-height: 44px; box-sizing: border-box; }

/* Decisión 11 del dueño (modo noche v9): aprobar o no el pedido de reabrir un acta, con toques de 44 px. */
.confirmacion-restriccion .acta-envio__acciones button { min-height: 44px; }

/* Modo noche v9, S2: los botones del circuito de adicionales, con toques de 44 px. */
.adicional__boton { min-height: 44px; }

/* Decisión 28 del dueño (S2.3): las acciones de «Cambios al contrato» en el mismo renglón, con toques
   de 44 px; en el celular cada renglón es una tarjeta (sin deslizar de costado a 390 y 412 px). */
.cambios__acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.cambios__acciones > form { margin: 0; }
.cambios__acciones-celda { min-width: 190px; }
.cambios__boton { min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; padding: 0.5rem 0.9rem; white-space: nowrap; }
summary.cambios__boton, a.cambios__boton { font-weight: 700; border-radius: var(--radio-campo); background: var(--azul-marca); color: var(--blanco); cursor: pointer; list-style: none; text-decoration: none; }
summary.cambios__boton::-webkit-details-marker { display: none; }
summary.cambios__boton.cambios__boton--secundario, a.cambios__boton--enlace { background: var(--blanco); color: var(--azul-marca); border: 1px solid var(--linea); }
.cambios__desplegable[open] { flex-basis: 100%; }
.cambios__formulario { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; min-width: 220px; font-size: 12.5px; }
.cambios__formulario textarea, .cambios__formulario input[type="text"] { width: 100%; box-sizing: border-box; min-height: 44px; }
.cambios__formulario .casilla { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.cambios__sin-accion { color: var(--terciario); }
@media (max-width: 899px) {
    .cambios__tabla thead { display: none; }
    .cambios__tabla, .cambios__tabla tbody, .cambios__tabla tr, .cambios__tabla td { display: block; width: 100%; box-sizing: border-box; }
    .cambios__tabla tr { border-top: 1px solid var(--separador-fila); padding: 8px 0; }
    .cambios__tabla tbody tr:first-child { border-top: none; }
    table.tabla-datos.cambios__tabla td { border-top: none; padding: 3px 0; text-align: left; overflow-wrap: anywhere; }
    .cambios__tabla td[data-titulo]:not(:first-child)::before { content: attr(data-titulo); display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--terciario); margin-bottom: 2px; }
    .cambios__acciones-celda { min-width: 0; }
    .cambios__acciones { flex-direction: column; align-items: stretch; }
    .cambios__boton { width: 100%; white-space: normal; }
    .cambios__formulario { min-width: 0; }
}
/* DETALLES P1 (tanda P, modo noche v7) y P8 (modo noche v8): en el celular, los toques que quedaban
   por debajo de 44 px (medidos en tests_e2e/test_toques_44_detalles.py, Android e iPhone). Solo el
   alto del área de toque: el texto y los colores no cambian; la computadora queda igual. */
@media (max-width: 899px) {
    .fotos-ver-enlace, .fila-carga__cerrar { display: inline-flex; align-items: center; min-height: 44px; }
    .tabla-datos td > a { display: inline-flex; align-items: center; min-height: 44px; }
    button { min-height: 44px; }
    a.boton { padding-top: 12px; padding-bottom: 12px; }
    .ventana-fotos__ampliada-acciones .enlace-atajo { display: inline-flex; align-items: center; min-height: 44px; }
    /* Ensayo v10, E1: «Cerrar» y las secciones de la segunda fila (Carga) tenían 37 px de ancho,
       y la barra del % 20 px de alto. La barra suma un borde transparente arriba y abajo (área
       de toque de 44 px) y se sigue viendo igual: el degradado solo se pinta adentro del borde y
       el filete gris pasa a una sombra interior. La marca de la semana pasada, centrada sobre
       la barra. */
    .fila-carga__cerrar { min-width: 44px; }
    .encabezado__submenu--movil a { min-width: 44px; justify-content: center; }
    .fila-carga__slider-envoltorio { padding: 0; }
    .fila-carga__slider {
        display: block;
        border-width: 14px 0;
        border-color: transparent;
        background-clip: padding-box !important;
        box-shadow: inset 0 0 0 1px var(--linea);
    }
    .fila-carga__marca-anterior { top: 50%; transform: translateY(-50%); }
}

/* Mejora 8 (revisión de usabilidad, ensayo v10): toques de 44 px que quedaban chicos en el celular
   («+ Nueva restricción», «Cambiar la fecha de corte», «Planilla con el rubrado»). Solo el área de
   toque: el texto y los colores no cambian. */
.enlace-con-boton { display: inline-block; }
.enlace-tocable { display: inline-flex; align-items: center; min-height: 44px; }
.certificado__corte > summary { padding: 11px 0; line-height: 22px; cursor: pointer; }

/* Modo noche v12 (E1): «Ajustar a lo aprobado por el cliente». */
.base-cliente__vista { margin: 16px 0 24px; }
.base-cliente__botones { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.base-cliente__formas { margin: 16px 0; }
.tabla-por-facturar__ctf { display: block; font-size: var(--letra-texto-chico); font-weight: 400; color: var(--terciario); }
/* Modo noche v12 (E2): el CTF del cliente. */
.ctf__registrado { margin: 16px 0; }
.ctf__certificado { margin: 16px 0; }
.ctf__incluir { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.ctf__incluir input { width: 22px; height: 22px; }
/* Modo noche v13 (G2): leer el PDF del CTF y sus controles. */
.ctf__leer, .ctf__lectura { margin: 16px 0 24px; }
.ctf__controles { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ctf__controles li { display: flex; flex-direction: column; gap: 4px; }
.ctf__control-texto { font-size: var(--letra-texto); overflow-wrap: anywhere; }
/* Modo noche v12 (E4): conciliación con el cliente. */
.conciliacion__archivos, .conciliacion__estado { margin: 24px 0; }
/* Modo noche v13 (G3): la conciliación viva en pestañas. */
.conciliacion__bloque { margin: 24px 0; }
.conciliacion__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.conciliacion__total td { border-top: 2px solid var(--borde-campo); }
.conciliacion__elegido { background: var(--fondo-seleccion); }
.formatos__formato { margin: 12px 0; }
.formatos__resumen { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; cursor: pointer; }
.formatos__muestras, .formatos__historial { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.formatos__muestra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Modo noche v13 (F4): tablero «Caja y certificación». */
.caja__filtro { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 12px 0; max-width: 520px; }
.caja__filtro .s-campo { flex: 1 1 220px; }
.caja__bloque { margin: 24px 0; }
.caja__avisos, .caja__hitos { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.caja__aviso, .caja__hitos li { display: flex; flex-direction: column; gap: 4px; }
.caja__aviso-texto { overflow-wrap: anywhere; }
.caja__frase { font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); margin: 8px 0 12px; }
.caja__detalle { margin: 12px 0; }
.conciliacion__lista-archivos { padding-left: 18px; }
.conciliacion__lista-archivos li { min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; overflow-wrap: anywhere; }
.conciliacion__nota { border-bottom: 1px solid var(--linea); padding: 8px 0; overflow-wrap: anywhere; }
.portada-d__conciliacion { margin: 12px 0 20px; font-size: var(--letra-texto); overflow-wrap: anywhere; }
.portada-d__conciliacion a { display: inline-flex; align-items: center; min-height: 44px; }
.hitos__hito { margin: 16px 0; padding-bottom: 16px; border-bottom: 1px solid var(--borde-campo); display: flex; flex-direction: column; gap: 8px; }
.caja__bloque .s-tabla td:first-child, .caja__bloque .s-tabla th:first-child { min-width: 9em; }
.caja__bloque .caja__texto-largo { min-width: 14em; }

/* --- Modo noche v14, H1: reclamos del cliente en el portal y ubicación con listas -------------- */
.ubicacion-obra { display: flex; flex-direction: column; gap: var(--espacio-16); }
.ubicacion-obra__otro[hidden] { display: none; }
.portal-reclamo { display: flex; flex-direction: column; gap: var(--espacio-16); max-width: 560px; margin-top: var(--espacio-16); }
.portal-reclamo__fotos { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--espacio-8); }
.portal-reclamo__acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-12); align-items: center; }
.portal-reclamo__envio { margin: 0; }
.portal-reclamo__rotulo { margin: 0 0 var(--espacio-8); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--terciario); }
.portal-reclamo__cargadas, .portal-reclamo__pendientes { margin-top: var(--espacio-16); padding: var(--espacio-12) var(--espacio-16); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); }
.portal-reclamo__pendientes[hidden] { display: none; }
.portal-reclamo__codigos { display: flex; flex-wrap: wrap; gap: var(--espacio-8); margin: 0; }
.portal-reclamo__codigo { font-weight: 700; color: var(--azul-marca); }
.portal-reclamo__pendiente { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-8); padding: var(--espacio-8) 0; border-top: 1px solid var(--separador-fila); }
.portal-reclamo__pendiente:first-of-type { border-top: 0; }
.portal-reclamo__detalle { flex: 1 1 100%; margin: 0; font-size: 12.5px; color: var(--secundario); overflow-wrap: anywhere; }
.portal-reclamo__enviado { margin-top: var(--espacio-8); }
.portal-correcciones__para-revisar { margin-top: var(--espacio-16); }
.portal-correcciones__despues { flex-basis: 100%; font-size: 11px; color: var(--terciario); }
@media (max-width: 899px) {
    /* Regla 8 del sistema: en el celular, la acción principal abajo, al alcance del pulgar, arriba de la barra. */
    .portal-reclamo__acciones { position: sticky; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); z-index: 5; background: var(--fondo-celular); padding: var(--espacio-8) 0; }
}
/* Configuración → Espacios de la obra (v14, H1.3). */
.espacios__sugeridos, .espacios__lista { list-style: none; margin: var(--espacio-8) 0; padding: 0; }
.espacios__sugerido { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-8); padding: var(--espacio-8) 0; border-top: 1px solid var(--separador-fila); }
.espacios__sugerido > .s-estado { flex: 1 1 100%; }
.espacios__lista li { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-8); min-height: 44px; border-top: 1px solid var(--separador-fila); overflow-wrap: anywhere; }
.espacios__accion { margin: 0; }
.espacios__niveles { display: flex; flex-wrap: wrap; gap: var(--espacio-4) var(--espacio-12); border: 1px solid var(--linea); border-radius: var(--radio-campo); padding: var(--espacio-8) var(--espacio-12); margin: 0; min-width: 0; }
.espacios__nivel { display: inline-flex; align-items: center; gap: var(--espacio-8); min-height: 44px; font-weight: 400; }
.espacios__nivel input { width: 20px; height: 20px; min-height: 0; margin: 0; }
.espacios__nivel-detalle { border-top: 1px solid var(--separador-fila); padding: var(--espacio-8) 0; }
.espacios__resumen { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-8); cursor: pointer; }
.espacios__muestra { font-size: 12px; color: var(--terciario); overflow-wrap: anywhere; }
/* Portal: firma con el usuario del cliente (v14, H2.1). */
.portal-firma__formulario { display: flex; flex-direction: column; gap: var(--espacio-12); margin-top: var(--espacio-12); }
.portal-firma__texto { margin: 0; font-size: 13px; color: var(--secundario); }
.portal-firma__adjunto summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; }
/* Portal: el acta enviada y su historial de conformidades (v14, H2.2). */
.portal-acta__respuesta { padding: var(--espacio-12) var(--espacio-16); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); }
.portal-acta__observaciones { margin: var(--espacio-8) 0 0; font-size: 13px; color: var(--secundario); overflow-wrap: anywhere; }
.portal-acta__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-8); }
/* Correcciones del cliente (v14, C7): «Importar informe» con su marca y el menú «Descargar ▾». */
.correcciones-importar__marca { display: inline-block; margin-left: var(--espacio-8); padding: 2px 8px; border-radius: 999px; background: var(--amarillo-acento); color: var(--texto); font-size: 11.5px; font-weight: 700; }
.s-desplegable { position: relative; }
.s-desplegable > summary { list-style: none; cursor: pointer; }
.s-desplegable > summary::-webkit-details-marker { display: none; }
.s-desplegable__menu { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; min-width: 300px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; gap: var(--espacio-4); padding: var(--espacio-8); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); box-shadow: 0 8px 24px rgba(27, 36, 51, 0.12); }
.s-desplegable__formulario { margin: 0; }
.s-desplegable__opcion { display: flex; flex-direction: column; gap: 2px; min-height: 44px; justify-content: center; padding: var(--espacio-8) var(--espacio-12); border: 0; border-radius: var(--radio-campo); background: transparent; color: var(--texto); text-align: left; text-decoration: none; font: inherit; cursor: pointer; width: 100%; }
.s-desplegable__opcion:hover, .s-desplegable__opcion:focus-visible { background: var(--fondo-seleccion); }
.s-desplegable__opcion b { color: var(--azul-marca); font-size: 13px; }
.s-desplegable__opcion span { font-size: 11.5px; color: var(--secundario); }
.s-desplegable__opcion--destacada { background: var(--fondo-seleccion); }
/* En el celular el menú se abre debajo, en el lugar (sin salirse de la pantalla). */
@media (max-width: 899px) { .s-desplegable__menu { position: static; min-width: 0; max-width: none; margin-top: var(--espacio-8); box-shadow: none; } }
/* Categorías del cliente sin clasificar (v14, C4). */
.categorias-cliente { list-style: none; margin: var(--espacio-16) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-16); }
.categorias-cliente__item { padding: var(--espacio-16); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); display: flex; flex-direction: column; gap: var(--espacio-12); }
.categorias-cliente__forma { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--espacio-12); margin: 0; }
.categorias-cliente__forma .s-campo { flex: 1 1 240px; }
/* Control al aprobar (v14, P1): barras como <progress> y el certificado de más de la cuenta única. */
.control-aprobar__progreso { width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--pista-barra); -webkit-appearance: none; appearance: none; overflow: hidden; }
.control-aprobar__progreso::-webkit-progress-bar { background: var(--pista-barra); border-radius: 4px; }
.control-aprobar__progreso::-webkit-progress-value { background: var(--celeste-marca); border-radius: 4px; }
.control-aprobar__progreso::-moz-progress-bar { background: var(--celeste-marca); }
.control-aprobar__progreso--fuerte::-webkit-progress-value { background: var(--azul-marca); }
.control-aprobar__progreso--fuerte::-moz-progress-bar { background: var(--azul-marca); }
.control-aprobar__de-mas { margin: var(--espacio-8) 0 0; font-size: 12.5px; color: var(--secundario); }
/* P2 + M03 (v14): montos negativos entre paréntesis y en rojo. */
.cifra-negativa { color: var(--avance-negativo); font-weight: 600; }
.tabla-contratos__numero summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; font-size: 12.5px; }
.tabla-contratos__numero-forma { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--espacio-8); max-width: 320px; }