/* ==== D · ESCALA DE estilo.css (generado por scripts/d_escala.py; no editar a mano) ==== */
/* Pregunta 5 del dueño: estilo.css se retira en v24; hasta entonces sus tamaños fuera de la escala de D se
   pisan acá, con el mismo selector y la misma media query (sistema.css carga después de estilo.css). */
body { font-size: 15px; } /* era 16px */
h2 { font-size: 13px; } /* era 10px */
.ingreso-empresa__texto { font-size: 13px; } /* era 12.5px */
.nav-inferior a { font-size: 12px; } /* era 11.5px */
.encabezado-pagina__eyebrow { font-size: 13px; } /* era 10px */
.encabezado-pagina__titulo { font-size: 20px; } /* era 21px */
.encabezado-pagina__subtitulo { font-size: 13px; } /* era 12.5px */
.boton-exportar, .boton-enlace { font-size: 13px; } /* era 12.5px */
.resumen-cifras__valor { font-size: 24px; } /* era 26px */
.resumen-cifras__rotulo { font-size: 13px; } /* era 10px */
.progreso-carga__texto { font-size: 13px; } /* era 12.5px */
.rotulo-seccion__numero { font-size: 13px; } /* era 10px */
.rotulo-seccion__titulo { font-size: 13px; } /* era 10px */
.rotulo-seccion__leyenda { font-size: 12px; } /* era 9.5px */
table.tabla-datos { font-size: 13px; } /* era 12.5px */
table.tabla-datos th { font-size: 12px; } /* era 9.5px */
table.tabla-datos .detalle { font-size: 13px; } /* era 10px */
.enlace-atajo { font-size: 12px; } /* era 11.5px */
.confirmacion--compacta { font-size: 12px; } /* era 11px */
.estado-punto { font-size: 12px; } /* era 11px */
.ayuda-campo { font-size: 12px; } /* era 11.5px */
.confirmacion { font-size: 14px; } /* era 0.9rem */
.confirmacion--fila { font-size: 13.5px; } /* era 0.85rem */
.lista-carga__vacio { font-size: 13px; } /* era 12.5px */
.fila-carga__restriccion-aviso { font-size: 12px; } /* era 10.5px */
.fila-carga__estado { font-size: 12px; } /* era 10.5px */
.fila-carga__metricas { font-size: 12px; } /* era 11px */
.fila-carga__form label { font-size: 12px; } /* era 11.5px */
.fila-carga__input-pct { font-size: 20px; } /* era 19px */
.fila-carga__ayuda { font-size: 12px; } /* era 11px */
.fila-carga__vista-previa { font-size: 12px; } /* era 11.5px */
.boton-atajo { font-size: 13px; } /* era 12.5px */
.fotos-ver-enlace { font-size: 12px; } /* era 11.5px */
.fotos-error { font-size: 12px; } /* era 11px */
.fotos-subiendo { font-size: 12px; } /* era 11px */
.ventana-fotos__pie { font-size: 12px; } /* era 10.5px */
.ventana-fotos__borrar-boton { font-size: 12px; } /* era 11px */
.ventana-fotos__agregar { font-size: 12px; } /* era 11.5px */
.tarjeta-reunion__vacio { font-size: 13px; } /* era 12.5px */
.confirmacion-restriccion { font-size: 13px; } /* era 12.5px */
.compromiso { font-size: 13px; } /* era 12.5px */
.compromiso__causas label { font-size: 12px; } /* era 11.5px */
.compromisos-total { font-size: 13px; } /* era 12.5px */
.compromiso__guardando { font-size: 13.5px; } /* era 0.85rem */
.disponible { font-size: 13px; } /* era 12.5px */
.disponible__detalle { font-size: 12px; } /* era 11px */
.reunion-cierre__boton { font-size: 14px; } /* era 14.5px */
.reunion-cierre__estado { font-size: 13px; } /* era 12.5px */
.vencida { font-size: 13px; } /* era 12.5px */
@media (min-width: 900px) { .vencidas__encabezado { font-size: 13px; } } /* era 10px */
.fotos-sin-imagenes { font-size: 12px; } /* era 11.5px */
.casillero-foto { font-size: 20px; } /* era 22px */
.casillero-celda__boton { font-size: 12px; } /* era 11.5px */
.devolucion__estado { font-size: 12px; } /* era 11.5px */
.devolucion__texto { font-size: 13px; } /* era 12.5px */
.devolucion__nota { font-size: 12px; } /* era 11px */
.fiscal-rotulo { font-size: 13px; } /* era 10px */
.verificando__correccion { font-size: 13px; } /* era 12.5px */
.verificando__rotulo { font-size: 13px; } /* era 12.5px */
.verificando__pct { font-size: 20px; } /* era 22px */
.verificando__diferencia { font-size: 13px; } /* era 12.5px */
.fiscal-lista__motivo { font-size: 12px; } /* era 11.5px */
.fiscal-lista__vacio { font-size: 13px; } /* era 12.5px */
.fiscal-lista__nivel { font-size: 13px; } /* era 10px */
.alerta-fila__estado { font-size: 13px; } /* era 12.5px */
.usuarios-tabla__estado { font-size: 12px; } /* era 11px */
.usuarios-correo__historial { font-size: 12px; } /* era 11.5px */
@media (max-width: 899px) { .usuarios-tabla td[data-etiqueta]::before { font-size: 12px; } } /* era 11px */
.resumen-importacion dt { font-size: 12px; } /* era 10.5px */
.hoja-importacion__acta, .hoja-importacion__vacia { font-size: 13px; } /* era 12.5px */
.etiqueta-oculta, .etiqueta-reconocida { font-size: 12px; } /* era 11px */
.etiqueta-prueba { font-size: 12px; } /* era 11px */
.franja-entorno { font-size: 13px; } /* era 12.5px */
.revision__nota { font-size: 13px; } /* era 12.5px */
.hallazgo__tipo { font-size: 12px; } /* era 10.5px */
.tabla-contrato__origen { font-size: 12px; } /* era 11px */
.tabla-contratos__quien, .tabla-contratos__devuelto { font-size: 12px; } /* era 11.5px */
.tabla-contratos__instruccion { font-size: 13px; } /* era 12.5px */
.acciones-contrato__descartar { font-size: 13px; } /* era 12.5px */
.etapas-sugeridas__ayuda { font-size: 13px; } /* era 12.5px */
.etapas-sugeridas__nota { font-size: 12px; } /* era 11px */
.ambito__niveles { font-size: 13px; } /* era 12.5px */
.reconstruccion-etapas__por { font-size: 12px; } /* era 11px */
.etapas__estado { font-size: 13px; } /* era 12.5px */
.cantidades__origen { font-size: 12px; } /* era 11px */
.tabla-por-facturar__nota { font-size: 12px; } /* era 11px */
@media (max-width: 899px) { .tabla-por-facturar td[data-rotulo]::before { font-size: 12px; } } /* era 10.5px */
.recuadro-regularizar__detalle { font-size: 13px; } /* era 12.5px */
.control-interno__valor { font-size: 15px; } /* era 17px */
.control-interno__rotulo { font-size: 13px; } /* era 10px */
.control-interno__fila { font-size: 13px; } /* era 12.5px */
.control-interno__etiqueta { font-size: 12px; } /* era 9.5px */
.control-interno__como { font-size: 12px; } /* era 11.5px */
.formulario-modificacion__adjunta { font-size: 13px; } /* era 12.5px */
.tabla-modificacion-lineas__tipo { font-size: 12px; } /* era 11.5px */
.tabla-modificacion-lineas__ajuste { font-size: 12px; } /* era 11.5px */
.fuera-contrato__titulo { font-size: 13px; } /* era 10px */
.fuera-contrato__quien { font-size: 12px; } /* era 11.5px */
.fuera-contrato__fila { font-size: 13px; } /* era 12.5px */
.fuera-contrato__vacio { font-size: 13px; } /* era 12.5px */
.acta-envio__estado { font-size: 13px; } /* era 12.5px */
.envio-acta__nota { font-size: 13px; } /* era 12.5px */
.envio-acta__lista { font-size: 13px; } /* era 12.5px */
.portada-excepcion__cuenta { font-size: 13px; } /* era 12.5px */
.portada-excepcion__nota { font-size: 12px; } /* era 11.5px */
.portada-caso { font-size: 13px; } /* era 12.5px */
.portada-d__titulo { font-size: 20px; } /* era 18px */
.portada-d__cifra { font-size: 20px; } /* era 22px */
.portada-d__rotulo { font-size: 12px; } /* era 9.5px */
.portada-d__nota { font-size: 12px; } /* era 11px */
.portada-d__vacio { font-size: 13px; } /* era 12.5px */
.portada-d__tema-detalle { font-size: 12px; } /* era 11.5px */
.portada-d__sin-novedad { font-size: 12px; } /* era 11.5px */
.portada-d__leyenda .estado-punto { font-size: 12px; } /* era 10.5px */
.portada-d__tabla th { font-size: 12px; } /* era 9.5px */
.portada-d__sub { font-size: 12px; } /* era 10.5px */
.portada-d__resumen { font-size: 12px; } /* era 11.5px */
.portada-d__prueba { font-size: 13px; } /* era 12.5px */
@media (min-width: 900px) { .portada-d__titulo { font-size: 20px; } } /* era 22px */
@media (min-width: 900px) { .portada-d__cifra { font-size: 24px; } } /* era 26px */
@media (min-width: 900px) { .portada-d__obra--titulos { font-size: 12px; } } /* era 9.5px */
dl.resumen-cifras dt { font-size: 13px; } /* era 10px */
dl.resumen-cifras dd { font-size: 15px; } /* era 17px */
.etapas__tarjeta .estado-punto { font-size: 13px; } /* era 12.5px */
.importar-p7__rotulo { font-size: 13px; } /* era 10px */
.importar-p7__archivo { font-size: 12px; } /* era 11px */
.importar-p7__nota { font-size: 12px; } /* era 11.5px */
.importar-p7__vacio { font-size: 13px; } /* era 12.5px */
.importar-p7__detalle summary { font-size: 13px; } /* era 12.5px */
.importar-p7__grilla { font-size: 13px; } /* era 12.5px */
.importar-p7__grilla--titulos { font-size: 12px; } /* era 9.5px */
.importar-p7__movil { font-size: 12px; } /* era 11px */
form label.importar-p7__campo, .importar-p7__campo { font-size: 13px; } /* era 12.5px */
.importar-p7__ejemplo { font-size: 12px; } /* era 11.5px */
.importar-p7__estado { font-size: 12px; } /* era 11.5px */
.importar-p7__cifras > div { font-size: 12px; } /* era 11px */
.importar-p7__cifra { font-size: 20px; } /* era 22px */
.importar-p7__peso { font-size: 12px; } /* era 11px */
.importar-p7__comentario { font-size: 13px; } /* era 12.5px */
.correcciones-esperando { font-size: 12px; } /* era 11px */
.correcciones-ubicacion { font-size: 12px; } /* era 11px */
.correcciones-origen { font-size: 12px; } /* era 11.5px */
a.correcciones-ver { font-size: 12px; } /* era 11px */
.correcciones-nota { font-size: 12px; } /* era 11.5px */
dl.correcciones-cifras dt { font-size: 13px; } /* era 10px */
dl.correcciones-cifras dd { font-size: 20px; } /* era 22px */
.correcciones-item__fecha { font-size: 13px; } /* era 12.5px */
.correcciones-detalle__estado .estado-punto { font-size: 13px; } /* era 12.5px */
.correcciones-devuelta { font-size: 13px; } /* era 12.5px */
.correcciones-tarjeta__texto { font-size: 13px; } /* era 12.5px */
.correcciones-datos { font-size: 12px; } /* era 11px */
.correcciones-fotos__rotulo { font-size: 13px; } /* era 12.5px */
form label.correcciones-subir__elegir { font-size: 13px; } /* era 12.5px */
.nav-inferior--cinco a { font-size: 12px; } /* era 10.5px */
.revision-cliente__rotulo-foto { font-size: 12px; } /* era 10.5px */
.revision-cliente__sin-foto { font-size: 13px; } /* era 10px */
.revision-cliente__texto { font-size: 13px; } /* era 12.5px */
.revision-cliente__ayuda { font-size: 12px; } /* era 11.5px */
.enlace-envio__rotulo { font-size: 13px; } /* era 12.5px */
.resumen-correcciones__total { font-size: 12px; } /* era 11px */
.cronograma__correccion { font-size: 12px; } /* era 11.5px */
.cronograma__fechas { font-size: 12px; } /* era 10.5px */
.cronograma__semana { font-size: 13px; } /* era 10px */
.cronograma__cierre { font-size: 13px; } /* era 12.5px */
.portal-correcciones__rotulo { font-size: 13px; } /* era 10px */
.portal-correcciones__ubicacion { font-size: 12px; } /* era 11px */
.portal-correcciones__estado { font-size: 12px; } /* era 11.5px */
.reinspeccion-cliente__foto { font-size: 12px; } /* era 10.5px */
.reinspeccion-cliente__texto { font-size: 13px; } /* era 12.5px */
.reinspeccion-cliente__nota { font-size: 12px; } /* era 11.5px */
.enviar-informe__texto { font-size: 13px; } /* era 12.5px */
.portal-acceso__nota { font-size: 13px; } /* era 12.5px */
.portal-estado { font-size: 13px; } /* era 12.5px */
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: 12px; } /* era 10.5px */
.compromisos-encabezado { font-size: 12px; } /* era 10.5px */
@media (max-width: 899px) { .restricciones-tabla td[data-titulo]::before { font-size: 12px; } } /* era 11px */
@media (max-width: 899px) { .frente-items-tabla td[data-titulo]::before { font-size: 12px; } } /* era 11px */
.nav-inferior--5 a { font-size: 12px; } /* era 10.5px */
.mas__titulo { font-size: 12px; } /* era 11.5px */
.pendientes__obra { font-size: 13px; } /* era 12.5px */
.pendientes__rotulo-seccion { font-size: 12px; } /* era 11.5px */
.pendientes__nota { font-size: 12px; } /* era 11.5px */
.pendiente__detalle { font-size: 13px; } /* era 12.5px */
.configuracion__falta { font-size: 13px; } /* era 12.5px */
.configuracion__numero { font-size: 20px; } /* era 18px */
.configuracion__otro { font-size: 13px; } /* era 12.5px */
.configuracion__quien { font-size: 13px; } /* era 12.5px */
.configuracion__asignado { font-size: 12px; } /* era 11.5px */
.configuracion__nota { font-size: 13px; } /* era 12.5px */
.configuracion__historial { font-size: 12px; } /* era 11.5px */
@media (min-width: 900px) { .configuracion__fila--titulos { font-size: 12px; } } /* era 11px */
.cambios__rotulo { font-size: 12px; } /* era 11.5px */
.cambios__formulario { font-size: 13px; } /* era 12.5px */
@media (max-width: 899px) { .cambios__tabla td[data-titulo]:not(:first-child)::before { font-size: 12px; } } /* era 11px */
.portal-reclamo__rotulo { font-size: 13px; } /* era 10px */
.portal-reclamo__detalle { font-size: 13px; } /* era 12.5px */
.portal-correcciones__despues { font-size: 12px; } /* era 11px */
.correcciones-importar__marca { font-size: 12px; } /* era 11.5px */
.s-desplegable__opcion span { font-size: 12px; } /* era 11.5px */
.control-aprobar__de-mas { font-size: 13px; } /* era 12.5px */
.tabla-contratos__numero summary { font-size: 13px; } /* era 12.5px */
/* ==== FIN D · ESCALA DE estilo.css ==== */

/* Sistema Consta v2 (dueño, 29/09/2026; diseno/sistema_v2/SISTEMA_V2.md): los 14 componentes
   (app/templates/_componentes/sistema/) y el marco (menú lateral y barra del celular). Solo
   variables de tokens.css: ningún color escrito a mano (tests/test_sistema_v2_componentes.py). */

/* --- 01 · Encabezado de página ------------------------------------------------------------- */
.s-encabezado { display: flex; align-items: flex-end; gap: var(--espacio-12); flex-wrap: wrap; margin: 0 0 var(--espacio-24); }
.s-encabezado__textos { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.s-encabezado__rotulo { margin: 0; font-size: var(--letra-rotulo); font-weight: var(--peso-rotulo); color: var(--secundario); overflow-wrap: anywhere; }
.s-encabezado__titulo { margin: 0; font-family: var(--fuente-titulos); font-size: var(--letra-titulo-pagina); font-weight: var(--peso-titulo-pagina); color: var(--azul-marca); overflow-wrap: anywhere; }
.s-encabezado__trazo { display: block; width: 32px; height: 2px; background: var(--amarillo-acento); }
.s-encabezado__acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-8); align-items: center; }

/* --- 02 · Botón ---------------------------------------------------------------------------- */
.s-boton {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--espacio-8);
    min-height: var(--tamano-toque); padding: 0 var(--espacio-16); box-sizing: border-box;
    border-radius: var(--radio-campo); border: 1px solid transparent;
    font-family: var(--fuente-texto); font-size: var(--letra-boton); font-weight: var(--peso-boton);
    line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
}
.s-boton--principal { background: var(--azul-marca); border-color: var(--azul-marca); color: var(--blanco); }
.s-boton--principal:hover { background: var(--azul-marca-hover); color: var(--blanco); }
.s-boton--secundario { background: var(--blanco); border-color: var(--azul-marca); color: var(--azul-marca); }
.s-boton--secundario:hover { background: var(--fondo-seleccion); color: var(--azul-marca); }
.s-boton--neutro { background: var(--blanco); border-color: var(--borde-campo); color: var(--texto); }
.s-boton--neutro:hover { background: var(--fondo-resumen); color: var(--texto); }
.s-boton--enlace { background: transparent; border-color: transparent; color: var(--celeste-marca); padding: 0 var(--espacio-4); }
.s-boton--enlace:hover { color: var(--azul-marca); }
.s-boton:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.s-boton--principal:focus-visible { outline-color: var(--foco); }
.s-boton[disabled], .s-boton[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* --- 03 · Campo ---------------------------------------------------------------------------- */
.s-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.s-campo__etiqueta { font-size: var(--letra-etiqueta-campo); font-weight: var(--peso-etiqueta-campo); color: var(--secundario); }
.s-campo__control {
    min-height: var(--tamano-toque); box-sizing: border-box; width: 100%;
    border: 1px solid var(--borde-campo); border-radius: var(--radio-campo); padding: 0 var(--espacio-12);
    font-family: var(--fuente-texto); font-size: 15px; color: var(--texto); background: var(--blanco);
}
@media (min-width: 900px) { .s-campo__control { font-size: var(--letra-texto); } }
.s-campo__control--area { min-height: 88px; padding: var(--espacio-8) var(--espacio-12); }
.s-campo__control:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.s-campo--error .s-campo__control { border: 2px solid var(--avance-negativo); }
.s-campo__error { margin: 0; font-size: var(--letra-etiqueta-campo); font-weight: 700; color: var(--avance-negativo); }
.s-campo__ayuda { margin: 0; font-size: var(--letra-texto-chico); color: var(--secundario); }

/* --- 04 · Estado: punto de 7 px y palabra (diccionario §5) --------------------------------- */
.s-estado { display: inline-flex; align-items: center; gap: var(--espacio-8); font-size: var(--letra-texto); color: var(--texto); min-width: 0; }
.s-estado__punto, .s-envio .s-estado__punto {
    display: block; flex: none; width: var(--tamano-punto); height: var(--tamano-punto);
    border-radius: var(--radio-etiqueta); box-sizing: border-box; background: var(--rotulo-tabla);
}
.s-estado__palabra { font-weight: 700; }
.s-estado__detalle { font-weight: 400; color: var(--secundario); }
.s-estado--vencido .s-estado__punto { background: var(--avance-negativo); }
.s-estado--atencion .s-estado__punto { background: var(--amarillo-acento); }
.s-estado--en_marcha .s-estado__punto { background: var(--celeste-marca); }
.s-estado--terminado .s-estado__punto { background: var(--azul-marca); }
.s-estado--espera .s-estado__punto { background: var(--blanco); border: 2px solid var(--azul-marca); }
.s-estado--reprogramado .s-estado__punto { background: var(--estado-reprogramado-punto); }
.s-estado--no_empezo .s-estado__punto { background: var(--blanco); border: 1px solid var(--rotulo-tabla); }
.s-estado--no_cuenta .s-estado__punto { background: var(--rotulo-tabla); }
.s-estado--no_cuenta .s-estado__palabra { color: var(--secundario); }

/* --- 05 · Fila de pendiente ---------------------------------------------------------------- */
.s-pendiente {
    display: flex; flex-direction: column; gap: var(--espacio-8); padding: var(--espacio-12) var(--espacio-16);
    background: var(--blanco); border: 1px solid var(--linea); border-radius: 10px;
}
.s-pendiente__cuerpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.s-pendiente__titulo { margin: 0; font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); overflow-wrap: anywhere; }
.s-pendiente__detalle { margin: 0; font-size: var(--letra-texto-tabla); color: var(--secundario); overflow-wrap: anywhere; }
.s-pendiente__accion { width: 100%; }
@media (min-width: 900px) {
    .s-pendiente { flex-direction: row; align-items: center; gap: var(--espacio-16); }
    .s-pendiente__cabeza { flex: 0 0 200px; }
    .s-pendiente__cuerpo { flex: 1 1 auto; }
    .s-pendiente__accion { width: auto; flex: none; }
}

/* --- 06 · Tarjeta de número ---------------------------------------------------------------- */
.s-tarjeta-numero {
    display: flex; flex-direction: column; gap: 5px; padding: var(--espacio-16) 18px;
    background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta);
    color: var(--texto); text-decoration: none; min-width: 0; container-type: inline-size;
}
a.s-tarjeta-numero:hover { border-color: var(--azul-marca); }
.s-tarjeta-numero p { margin: 0; }
.s-tarjeta-numero__nombre { font-size: var(--letra-etiqueta-campo); font-weight: var(--peso-etiqueta-campo); color: var(--secundario); }
.s-tarjeta-numero__cifras { display: flex; align-items: baseline; gap: var(--espacio-8); flex-wrap: wrap; }
.s-tarjeta-numero__numero { font-family: var(--fuente-titulos); font-size: var(--letra-cifra-grande); font-weight: var(--peso-cifra-grande); color: var(--azul-marca); font-variant-numeric: tabular-nums; }
/* K8: el monto va completo («Gs. 1.908.274.072») y en una línea; si no entra, la cifra baja de tamaño */
@supports (container-type: inline-size) {
    .s-tarjeta-numero__numero { font-size: 24px; white-space: nowrap; }
}
.s-tarjeta-numero__cuenta { font-size: var(--letra-texto); color: var(--secundario); }
.s-tarjeta-numero__frase { font-size: var(--letra-texto); }
.s-tarjeta-numero__dato { font-size: var(--letra-texto-chico); color: var(--secundario); }

/* --- 07 · Aviso ---------------------------------------------------------------------------- */
.s-aviso { margin: 0 0 var(--espacio-16); padding: var(--espacio-12) 14px; border-radius: 10px; font-size: var(--letra-texto); line-height: 1.45; overflow-wrap: anywhere; }
.s-aviso--regla { background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); color: var(--aviso-texto); }
.s-aviso--saber { background: var(--fondo-resumen); border: 1px solid var(--linea); color: var(--texto); }
.s-aviso--confirmacion { display: flex; align-items: center; gap: var(--espacio-8); padding: 0; font-weight: 700; color: var(--confirmacion-texto); }

/* --- 08 · Pasos ---------------------------------------------------------------------------- */
.s-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-8); }
.s-pasos__enlace {
    display: flex; align-items: center; gap: 10px; min-height: var(--tamano-toque); padding: 0 var(--espacio-12);
    box-sizing: border-box; border: 1px solid var(--linea); border-radius: 10px; color: var(--texto); text-decoration: none;
}
.s-pasos__marca {
    width: 26px; height: 26px; flex: none; border-radius: var(--radio-etiqueta); display: flex; align-items: center; justify-content: center;
    font-size: var(--letra-etiqueta-campo); font-weight: 700; background: var(--separador-fila); color: var(--secundario);
}
.s-pasos__texto { flex: 1 1 auto; font-size: var(--letra-texto); font-weight: 600; min-width: 0; }
.s-pasos__detalle { font-size: var(--letra-texto-tabla); color: var(--secundario); }
.s-pasos__paso--hecho .s-pasos__marca { background: var(--azul-marca); color: var(--blanco); }
.s-pasos__paso--actual .s-pasos__enlace { background: var(--fondo-seleccion); border: 2px solid var(--azul-marca); color: var(--azul-marca); }
.s-pasos__paso--actual .s-pasos__marca { background: var(--amarillo-acento); color: var(--texto); }
.s-pasos__paso--actual .s-pasos__texto { font-weight: 700; }
.s-pasos__paso--pendiente .s-pasos__texto { color: var(--secundario); }
a.s-pasos__enlace:hover { border-color: var(--azul-marca); }

/* --- 09 · Pestañas y filtros --------------------------------------------------------------- */
.s-pestanas { display: inline-flex; flex-wrap: wrap; gap: var(--espacio-4); padding: var(--espacio-4); background: var(--separador-fila); border-radius: 10px; margin: 0 0 var(--espacio-16); max-width: 100%; box-sizing: border-box; }
.s-pestanas__pestana {
    display: inline-flex; align-items: center; min-height: var(--tamano-toque); padding: 0 14px; box-sizing: border-box;
    border-radius: var(--radio-campo); font-size: var(--letra-texto); font-weight: 600; color: var(--secundario); text-decoration: none;
}
.s-pestanas__pestana[aria-current="page"] { background: var(--blanco); color: var(--azul-marca); font-weight: 700; }
@media (max-width: 899px) {
    /* En el celular, las pestañas en una fila que se desliza (la página no se desliza de costado). */
    .s-pestanas { display: flex; flex-wrap: nowrap; overflow-x: auto; }
    .s-pestanas__pestana { white-space: nowrap; flex: none; }
}
/* v15 · R2: unas pestañas debajo de otras (Usuarios y ajustes › Clientes) van en su propia fila,
   sin fondo, para que no parezcan una sola barra con dos elegidas. */
.s-pestanas + .s-pestanas { display: flex; width: fit-content; max-width: 100%; background: none; padding: 0; margin-top: calc(-1 * var(--espacio-8)); }
.s-pestanas + .s-pestanas .s-pestanas__pestana[aria-current="page"] { background: var(--fondo-seleccion); }
.s-filtros { display: flex; flex-wrap: wrap; gap: var(--espacio-8); margin: 0 0 var(--espacio-16); }
.s-filtros__filtro {
    display: inline-flex; align-items: center; min-height: var(--tamano-toque); padding: 0 14px; box-sizing: border-box;
    border: 1px solid var(--borde-campo); border-radius: var(--radio-etiqueta); background: var(--blanco);
    font-size: var(--letra-texto); font-weight: 600; color: var(--secundario); text-decoration: none;
}
.s-filtros__filtro[aria-pressed="true"] { border: 2px solid var(--azul-marca); background: var(--fondo-seleccion); color: var(--azul-marca); font-weight: 700; }

/* --- 10 · Tabla (en el celular, tarjetas) -------------------------------------------------- */
.s-tabla__marco { max-width: 100%; }
.s-tabla { border-collapse: collapse; width: 100%; font-size: var(--letra-texto-tabla); }
.s-tabla th { text-align: left; font-size: var(--letra-texto-chico); font-weight: 700; color: var(--terciario); padding: var(--espacio-8) 6px; border-bottom: 1px solid var(--linea); }
.s-tabla td { padding: 9px 6px; border-bottom: 1px solid var(--separador-fila); vertical-align: top; overflow-wrap: anywhere; }
.s-tabla .s-tabla__numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.s-tabla .s-tabla__numero .s-campo__ayuda { display: block; white-space: normal; }
.s-tabla tr[aria-selected="true"] td { background: var(--fondo-seleccion); }
@media (max-width: 899px) {
    .s-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .s-tabla, .s-tabla tbody, .s-tabla tr, .s-tabla td { display: block; width: 100%; box-sizing: border-box; }
    .s-tabla tr { background: var(--blanco); border: 1px solid var(--linea); border-radius: 10px; padding: var(--espacio-8) var(--espacio-12); margin: 0 0 var(--espacio-8); }
    .s-tabla td { border: none; padding: 3px 0; display: flex; justify-content: space-between; gap: var(--espacio-12); text-align: right; }
    .s-tabla td::before { content: attr(data-rotulo); color: var(--terciario); font-size: var(--letra-texto-chico); font-weight: 700; text-align: left; min-width: 7.5em; flex-shrink: 0; }
    .s-tabla td[data-rotulo=""]::before { content: none; }
}

/* --- 11 · Vacío ---------------------------------------------------------------------------- */
.s-vacio { border: 1px dashed var(--borde-campo); border-radius: 10px; padding: 20px var(--espacio-16); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.s-vacio p { margin: 0; }
.s-vacio__titulo { font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); }
.s-vacio__texto { font-size: var(--letra-texto); color: var(--secundario); }

/* --- 12 · Hoja del celular ----------------------------------------------------------------- */
.s-hoja { margin: auto 0 0; padding: 0; border: none; width: 100%; max-width: 100%; max-height: 85vh; background: transparent; }
.s-hoja::backdrop { background: color-mix(in srgb, var(--secundario) 70%, transparent); }
.s-hoja__panel {
    background: var(--blanco); border-radius: 14px 14px 0 0; padding: var(--espacio-8) var(--espacio-16) calc(var(--espacio-12) + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; box-sizing: border-box;
}
.s-hoja__asa { width: 36px; height: 4px; border-radius: var(--radio-etiqueta); background: var(--linea); align-self: center; margin-bottom: 6px; }
.s-hoja__titulo { margin: 0 0 var(--espacio-4); font-size: var(--letra-rotulo); font-weight: var(--peso-rotulo); color: var(--secundario); }
.s-hoja__lista { display: flex; flex-direction: column; }
.s-hoja__opcion { min-height: var(--tamano-toque); display: flex; align-items: center; gap: 10px; font-size: var(--letra-texto); font-weight: 600; color: var(--texto); text-decoration: none; border-radius: var(--radio-campo); padding: 0 var(--espacio-4); }
.s-hoja__opcion[aria-current="page"] { background: var(--fondo-seleccion); color: var(--azul-marca); font-weight: 700; }
.s-hoja__texto { flex: 1 1 auto; }
.s-hoja__marca { font-size: var(--letra-texto-tabla); font-weight: 700; color: var(--azul-marca); }
.s-hoja__marca--vencida { font-size: var(--letra-texto-chico); color: var(--avance-negativo); }
.s-hoja__cerrar { margin: var(--espacio-8) 0 0; display: flex; }
.s-hoja__cerrar .s-boton { flex: 1 1 auto; }

/* --- 13 · Confirmación --------------------------------------------------------------------- */
.s-confirmar { border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 0; width: min(420px, calc(100% - 32px)); box-sizing: border-box; }
.s-confirmar::backdrop { background: color-mix(in srgb, var(--texto) 45%, transparent); }
.s-confirmar__panel { padding: var(--espacio-16); display: flex; flex-direction: column; gap: 10px; margin: 0; }
.s-confirmar__titulo { margin: 0; font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); }
.s-confirmar__texto { margin: 0; font-size: var(--letra-texto); color: var(--secundario); line-height: 1.45; }
.s-confirmar__botones { display: flex; gap: var(--espacio-8); justify-content: flex-end; flex-wrap: wrap; }

/* --- 14 · Envío y conexión ----------------------------------------------------------------- */
.s-envio { display: flex; align-items: center; gap: var(--espacio-8); margin: 0; font-size: var(--letra-texto); }
.s-envio--guardando .s-estado__punto { background: var(--celeste-marca); }
.s-envio--pendiente .s-estado__punto { background: var(--amarillo-acento); }
.s-envio--error .s-estado__punto { background: var(--avance-negativo); }
.s-envio--enviado { color: var(--confirmacion-texto); }
.s-envio__reintentar { margin-left: auto; min-height: var(--tamano-toque); display: inline-flex; align-items: center; font: inherit; font-weight: 700; color: var(--celeste-marca); background: none; border: none; cursor: pointer; text-decoration: none; padding: 0 var(--espacio-4); }

/* --- Página interna /_sistema (D2.2): la grilla de muestras -------------------------------- */
.sistema-muestra { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.sistema-muestra__pieza { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 18px 20px; display: flex; flex-direction: column; gap: var(--espacio-12); min-width: 0; }
.sistema-muestra__nombre { margin: 0; font-family: var(--fuente-texto); font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); text-transform: none; color: var(--texto); }
.sistema-muestra__fila { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--letra-texto-tabla); color: var(--secundario); flex-wrap: wrap; }
.sistema-muestra__lista { display: flex; flex-direction: column; gap: var(--espacio-12); margin: 0; }

/* --- Molde «Tablero de obra» (maqueta M8Indicadores): /obras/N/indicadores ------------------- */
.indicadores__tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--espacio-12); margin: 0 0 var(--espacio-24); }
.indicadores__cuerpo { display: grid; gap: var(--espacio-16); }
@media (min-width: 900px) { .indicadores__cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; } }
.indicadores__seccion { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: var(--espacio-16) 18px; min-width: 0; }
.indicadores__titulo { margin: 0; padding: 0; border: none; font-family: var(--fuente-texto); font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); text-transform: none; color: var(--texto); }
.indicadores__nota { margin: var(--espacio-4) 0 var(--espacio-12); font-size: var(--letra-texto-chico); color: var(--secundario); }
.indicadores__fila { display: flex; align-items: center; gap: var(--espacio-12); min-height: 36px; border-top: 1px solid var(--separador-fila); font-size: var(--letra-texto-tabla); }
.indicadores__fecha { flex: 0 0 48px; color: var(--secundario); font-variant-numeric: tabular-nums; }
.indicadores__fecha--ancha { flex: 1 1 auto; color: var(--texto); overflow-wrap: anywhere; }
/* Barra fina: un <progress> (sin estilos escritos en la plantilla), azul sobre la pista gris. */
.indicadores__barra { -webkit-appearance: none; appearance: none; flex: 1 1 auto; width: 100%; height: 6px; border: none; border-radius: var(--radio-etiqueta); background: var(--pista-barra); overflow: hidden; display: block; min-width: 40px; color: var(--azul-marca); }
.indicadores__barra::-webkit-progress-bar { background: var(--pista-barra); border-radius: var(--radio-etiqueta); }
.indicadores__barra::-webkit-progress-value { background: var(--azul-marca); border-radius: var(--radio-etiqueta); }
.indicadores__barra::-moz-progress-bar { background: var(--azul-marca); border-radius: var(--radio-etiqueta); }
.indicadores__barra--fina { height: 3px; margin-top: 3px; }
.indicadores__valor { flex: none; font-weight: 700; color: var(--azul-marca); font-variant-numeric: tabular-nums; }
.indicadores__mapa-marco { overflow-x: auto; max-width: 100%; }
.indicadores__mapa { border-collapse: collapse; width: 100%; font-size: var(--letra-texto-tabla); }
.indicadores__mapa th { text-align: left; font-size: var(--letra-texto-chico); font-weight: 700; color: var(--terciario); padding: 6px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.indicadores__mapa td { padding: 6px; border-bottom: 1px solid var(--separador-fila); min-width: 64px; }
.indicadores__mapa tbody th { color: var(--texto); font-size: var(--letra-texto-tabla); }
.indicadores__celda { font-weight: 700; font-variant-numeric: tabular-nums; }
.indicadores__sin { color: var(--terciario); }
.indicadores__mas { margin: var(--espacio-16) 0 0; font-size: var(--letra-texto-tabla); }
.indicadores__mas a { display: inline-flex; min-height: var(--tamano-toque); align-items: center; }

/* --- Molde «Lista con detalle»: Restricciones (regla 2: una sola acción principal por pantalla;
   «Liberar» en cada fila, con contorno). ---------------------------------------------------------- */
.restricciones-tabla__estado .s-estado { white-space: nowrap; }
.restricciones-tabla__accion form > button[type="submit"]:not(.secundario) {
    background: var(--blanco); color: var(--azul-marca); border: 1px solid var(--azul-marca);
}
.restricciones-tabla__accion form > button[type="submit"]:not(.secundario):hover { background: var(--fondo-seleccion); }

/* --- Molde «Pasos» (maqueta M3Pasos): − / + de 48 px en la tarjeta abierta de Carga ----------- */
.fila-carga__pasos-pct { display: none; gap: var(--espacio-8); flex: none; }
.con-js .fila-carga__pasos-pct { display: flex; }
.fila-carga__paso-pct {
    width: 48px; height: 48px; flex: none; border-radius: var(--radio-campo); border: 1px solid var(--azul-marca);
    background: var(--blanco); color: var(--azul-marca); font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0;
}
.fila-carga__paso-pct:active { background: var(--fondo-seleccion); }

/* --- Molde «Pasos» de computadora: la Reunión (maqueta M7Reunion) ---------------------------- */
.s-pasos--fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espacio-8); }
.s-pasos--fila .s-pasos__enlace { min-height: 60px; align-items: center; }
.s-pasos--fila .s-pasos__texto { display: flex; flex-direction: column; gap: 1px; }
.s-pasos--fila .s-pasos__detalle { font-size: var(--letra-etiqueta-campo); font-weight: 400; color: var(--secundario); }
@media (max-width: 899px) {
    .s-pasos--fila { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espacio-4); }
    .s-pasos--fila .s-pasos__enlace { flex-direction: column; justify-content: center; gap: 4px; padding: 6px 4px; min-height: 64px; text-align: center; }
    .s-pasos--fila .s-pasos__detalle { display: none; }
    .s-pasos--fila .s-pasos__texto { font-size: var(--letra-texto-chico); }
}
.reunion-pasos { margin-top: var(--espacio-16); scroll-margin-top: 64px; }
.reunion-pasos__nav { display: flex; flex-direction: column; gap: var(--espacio-4); margin-bottom: var(--espacio-16); }
.reunion-pasos__todo { align-self: flex-end; min-height: var(--tamano-toque); display: inline-flex; align-items: center; font-size: var(--letra-texto-tabla); font-weight: 700; }
.reunion-pasos__todo[aria-current="page"] { color: var(--azul-marca); }
.reunion-pasos__cuerpo { display: grid; gap: var(--espacio-16); }
@media (min-width: 900px) { .reunion-pasos__cuerpo { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
.reunion-pasos__principal { min-width: 0; display: flex; flex-direction: column; gap: var(--espacio-16); }
.reunion-paso { display: flex; flex-direction: column; gap: var(--espacio-16); }
.reunion-paso__titulos { display: flex; flex-direction: column; gap: 2px; }
.reunion-paso__titulo { margin: 0; padding: 0; border: none; font-family: var(--fuente-texto); font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); text-transform: none; color: var(--texto); }
.reunion-paso__texto { margin: 0; font-size: var(--letra-texto); color: var(--secundario); }
.reunion-paso__botones { display: flex; justify-content: flex-end; gap: var(--espacio-8); flex-wrap: wrap; }
/* Con JavaScript, un paso por pantalla; «todos», todos (sin JavaScript se ven todos). */
.con-js .reunion-pasos:not([data-paso="todos"]) .reunion-paso { display: none; }
.con-js .reunion-pasos[data-paso="1"] .reunion-paso[data-n="1"],
.con-js .reunion-pasos[data-paso="2"] .reunion-paso[data-n="2"],
.con-js .reunion-pasos[data-paso="3"] .reunion-paso[data-n="3"],
.con-js .reunion-pasos[data-paso="4"] .reunion-paso[data-n="4"] { display: flex; }
.reunion-pasos[data-paso="todos"] .reunion-paso__botones { display: none; }
.reunion-vista-previa { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: var(--espacio-16); position: sticky; top: var(--espacio-16); }
.reunion-vista-previa p { margin: 0; }
.reunion-vista-previa__rotulo { font-size: var(--letra-rotulo); font-weight: var(--peso-rotulo); color: var(--secundario); }
.reunion-vista-previa__obra { font-size: var(--letra-texto); font-weight: 700; margin-top: var(--espacio-4) !important; }
.reunion-vista-previa__nota { font-size: var(--letra-texto-chico); color: var(--secundario); }
.reunion-vista-previa__lista { margin: var(--espacio-12) 0 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--letra-texto-tabla); }
.reunion-vista-previa__lista dt { font-size: var(--letra-rotulo); font-weight: var(--peso-rotulo); color: var(--secundario); margin-top: var(--espacio-8); }
.reunion-vista-previa__lista dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 899px) { .reunion-vista-previa { position: static; } }

/* --- Las piezas de antes, con las medidas del sistema v2 (D5) ---------------------------------
   Toda pantalla que todavía no pasó a su molde usa botones, campos, títulos y pestañas de
   estilo.css; acá se alinean con el sistema (§2 y §3): botón 13/700 de 44 px con radio 8,
   secundario con contorno azul, campo con --borde-campo, título 20/600, elegido con contorno de
   2 px y --fondo-seleccion. Las clases de los componentes (.s-*) no cambian. */
button, .boton {
    font-size: var(--letra-boton); font-weight: var(--peso-boton); min-height: var(--tamano-toque);
    padding: 0 var(--espacio-16); border-radius: var(--radio-campo); text-decoration: none; line-height: 1.2;
}
/* La forma (display) sin especificidad: cualquier regla de la pantalla que oculte o acomode el
   botón manda (p. ej. «Ver N más» de la Portada, que no se muestra en la computadora). */
:where(button, .boton) { display: inline-flex; align-items: center; justify-content: center; gap: var(--espacio-8); }
:where(button, .boton)[hidden] { display: none; }
button.secundario, .boton--secundario { border: 1px solid var(--azul-marca); }
button.secundario:hover, .boton--secundario:hover { background: var(--fondo-seleccion); }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]), select, textarea {
    border-color: var(--borde-campo); min-height: var(--tamano-toque);
}
.encabezado-pagina__titulo { font-size: var(--letra-titulo-pagina); }
.encabezado-pagina__eyebrow { }
.tableros__opcion--activa { border: 2px solid var(--azul-marca); background: var(--fondo-seleccion); font-weight: 700; }
.tarjeta-vacia { border-style: dashed; border-color: var(--borde-campo); }
.tarjeta-vacia__titulo { color: var(--texto); font-size: var(--letra-texto-destacado); }
/* Títulos de página de antes (h1 suelto): en mayúsculas como el título del sistema (§3). */
main h1 { font-size: var(--letra-titulo-pagina); }

/* --- Molde «Tablero» (maqueta M4Tablero): la Portada ----------------------------------------- */
.portada-d__urgencia { display: block; font-size: var(--letra-texto); font-weight: 700; color: var(--texto); margin-bottom: 2px; }
.portada-d__seccion--numeros { margin: var(--espacio-24) 0 var(--espacio-8); padding: 0; border: none; font-family: var(--fuente-texto); font-size: var(--letra-rotulo); font-weight: var(--peso-rotulo); color: var(--secundario); }
.portada-d .s-encabezado { margin-bottom: var(--espacio-16); }

/* Sistema Consta v2 (D7): el alto de cada barrita de la tendencia, sin estilos escritos en la plantilla (3 a 24 px). */
.portada-d__barra[data-alto="3"] { height: 3px; }
.portada-d__barra[data-alto="4"] { height: 4px; }
.portada-d__barra[data-alto="5"] { height: 5px; }
.portada-d__barra[data-alto="6"] { height: 6px; }
.portada-d__barra[data-alto="7"] { height: 7px; }
.portada-d__barra[data-alto="8"] { height: 8px; }
.portada-d__barra[data-alto="9"] { height: 9px; }
.portada-d__barra[data-alto="10"] { height: 10px; }
.portada-d__barra[data-alto="11"] { height: 11px; }
.portada-d__barra[data-alto="12"] { height: 12px; }
.portada-d__barra[data-alto="13"] { height: 13px; }
.portada-d__barra[data-alto="14"] { height: 14px; }
.portada-d__barra[data-alto="15"] { height: 15px; }
.portada-d__barra[data-alto="16"] { height: 16px; }
.portada-d__barra[data-alto="17"] { height: 17px; }
.portada-d__barra[data-alto="18"] { height: 18px; }
.portada-d__barra[data-alto="19"] { height: 19px; }
.portada-d__barra[data-alto="20"] { height: 20px; }
.portada-d__barra[data-alto="21"] { height: 21px; }
.portada-d__barra[data-alto="22"] { height: 22px; }
.portada-d__barra[data-alto="23"] { height: 23px; }
.portada-d__barra[data-alto="24"] { height: 24px; }

/* --- Revisión independiente (D8) ------------------------------------------------------------ */
/* R3 · Carga de la computadora: «Guardar» de cada fila con contorno (una sola acción llena, regla 2). */
.boton-guardar-compacto { background: var(--blanco); color: var(--azul-marca); border: 1px solid var(--azul-marca); }
.boton-guardar-compacto:hover { background: var(--fondo-seleccion); }
/* R8 · «Restricción abierta»: punto amarillo lleno (diccionario §5: Abierta), no anillo. */
.fila-carga__restriccion-aviso::before { background: var(--estado-abierta-punto); border-color: var(--estado-abierta-borde); }
/* R21 · los atajos de texto («Meta», «Sin avance», «Agregar imagen», «Ver acta»…) con toque de 44 px. */
.enlace-atajo, .fotos-ver-enlace, .boton-texto-celeste { min-height: var(--tamano-toque); display: inline-flex; align-items: center; }
/* R9 · en el celular, los botones de cada paso de la Reunión quedan abajo, al alcance del pulgar. */
@media (max-width: 899px) {
    .reunion-paso__botones {
        position: sticky; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 5;
        background: var(--blanco); padding: var(--espacio-8) 0; border-top: 1px solid var(--linea);
    }
    .reunion-paso__botones .s-boton { flex: 1 1 0; }
}
/* R16 · tabla ancha de Indicadores en el celular: una sombra avisa que se desliza. */
@media (max-width: 899px) {
    .indicadores__mapa-marco { background: linear-gradient(to left, var(--pista-barra), transparent 24px) right / 24px 100% no-repeat; }
}

/* === v15 · A · Carga (no borrar esta línea) === */
/* Barra de dos tonos (_componentes/barra_progreso.html): dos <progress> encimados sobre la pista
   gris; el de abajo pinta el celeste hasta el acumulado, el de arriba el azul hasta el anterior. */
.carga-barra { position: relative; }
.carga-barra progress {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
    -webkit-appearance: none; appearance: none; background: transparent; display: block;
}
.carga-barra progress::-webkit-progress-bar { background: transparent; }
.carga-barra__celeste::-webkit-progress-value { background: var(--celeste-marca); }
.carga-barra__celeste::-moz-progress-bar { background: var(--celeste-marca); }
.carga-barra__azul::-webkit-progress-value { background: var(--azul-marca); }
.carga-barra__azul::-moz-progress-bar { background: var(--azul-marca); }

/* Carga de la computadora (avances/_fila.html): «Semana» con el color del signo y «Acumulado». */
table.tabla-datos td.carga-semana--cero { color: var(--avance-cero); }
table.tabla-datos td.carga-semana--positivo { color: var(--avance-positivo); }
table.tabla-datos td.carga-semana--negativo { color: var(--avance-negativo); }
table.tabla-datos td.carga-acumulado { text-align: right; }
.carga-acumulado__caja { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.carga-acumulado__pct { font-weight: 700; color: var(--azul-marca); font-variant-numeric: tabular-nums; }
.fila-avance .marca-ajuste .s-estado, .fila-avance .s-estado { font-size: var(--letra-texto-tabla); }

/* Carga en el celular (molde «Pasos», maqueta M3Pasos): cada frente es una tarjeta; la abierta,
   con contorno azul de 2 px. */
.lista-carga { gap: var(--espacio-8); }
.lista-carga .fila-carga { border: 1px solid var(--linea); border-radius: 10px; background: var(--blanco); }
.lista-carga .fila-carga:target, .lista-carga .fila-carga--abierta { border: 2px solid var(--azul-marca); border-radius: var(--radio-tarjeta); background: var(--blanco); }
.lista-carga .fila-carga__resumen { min-height: 52px; box-sizing: border-box; padding: var(--espacio-12); gap: var(--espacio-8); }
.lista-carga .fila-carga__descripcion { font-size: var(--letra-texto); font-weight: 600; overflow-wrap: anywhere; }
.lista-carga .fila-carga__estado { font-size: var(--letra-texto-tabla); }
.lista-carga .fila-carga__estado .s-estado, .lista-carga .marca-ajuste .s-estado { font-size: var(--letra-texto-tabla); }
.lista-carga .fila-carga__estado--cargado { font-weight: 700; color: var(--confirmacion-texto); }
.lista-carga .fila-carga__form { padding: 14px; gap: var(--espacio-12); }
.lista-carga .fila-carga__form-titulo { font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); overflow-wrap: anywhere; }
.lista-carga .fila-carga__form-encabezado { gap: var(--espacio-8); }
.lista-carga .fila-carga__metricas { font-size: var(--letra-texto-tabla); }
.lista-carga .fila-carga__ayuda { font-size: var(--letra-texto-chico); }

/* − / + a los costados del % (como la maqueta); sin JavaScript no hay − / + y el campo va solo. */
.con-js .carga-campo { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 10px; align-items: end; }
.con-js .carga-campo .fila-carga__pasos-pct { display: contents; }
.con-js .carga-campo label { grid-column: 2; grid-row: 1; min-width: 0; }
.con-js .carga-campo [data-paso-pct="-5"] { grid-column: 1; grid-row: 1; }
.con-js .carga-campo [data-paso-pct="5"] { grid-column: 3; grid-row: 1; }
.carga-campo label { font-size: var(--letra-etiqueta-campo); font-weight: var(--peso-etiqueta-campo); }
.con-js .carga-campo label { text-align: center; }
.carga-campo .fila-carga__input-pct {
    text-align: center; font-family: var(--fuente-titulos); font-size: var(--letra-cifra); font-weight: 700;
    border-color: var(--borde-campo); padding: 0 var(--espacio-8); box-sizing: border-box; min-width: 0;
}
.carga-campo .fila-carga__paso-pct { border-color: var(--borde-campo); border-radius: 10px; }

/* La barra del %: la pista de dos tonos queda debajo de la barra deslizante (transparente) y la
   marca de la semana pasada es el borde derecho de un <progress> en el % anterior. */
.fila-carga__slider-envoltorio.carga-deslizador { position: relative; padding: 0; margin: var(--espacio-4) 0; }
.carga-deslizador .carga-barra { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); width: auto; height: 4px; border-radius: 2px; }
.carga-deslizador .fila-carga__slider { position: relative; z-index: 1; background: transparent; }
/* En el celular la barra suma un borde transparente de 14 px arriba y abajo (toque de 44 px): la
   pista ocupa lo de adentro del borde, como el degradado de antes. */
@media (max-width: 899px) {
    .carga-deslizador .fila-carga__slider { margin: 0; }
    .carga-deslizador .carga-barra { top: 14px; bottom: 14px; height: auto; transform: none; border-radius: 0; }
}
.carga-deslizador .carga-deslizador__marca {
    position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 100%; height: 14px; margin: 0; padding: 0; border: 0; background: transparent;
    -webkit-appearance: none; appearance: none; pointer-events: none; display: block;
}
.carga-deslizador__marca::-webkit-progress-bar { background: transparent; }
.carga-deslizador__marca::-webkit-progress-value { background: transparent; border-right: 1px solid var(--azul-marca); box-sizing: border-box; }
.carga-deslizador__marca::-moz-progress-bar { background: transparent; border-right: 1px solid var(--azul-marca); }

/* «Llegó a la meta» y «Sin avance»: dos botones neutros iguales, de 44 px. */
.lista-carga .fila-carga__atajos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-8); }
.carga-atajo {
    min-height: var(--tamano-toque); border: 1px solid var(--borde-campo); background: var(--blanco); color: var(--texto);
    font-size: var(--letra-boton); font-weight: var(--peso-boton); white-space: normal; padding: 0 var(--espacio-8);
}
.carga-atajo:hover { background: var(--fondo-seleccion); }

/* «Agregar imagen» / «Ver imágenes · N» con ícono; en la tarjeta, botón de borde punteado. */
.fotos-ver-enlace { gap: 6px; }
.fotos-ver-enlace .icono { flex: none; }
.fila-carga__fotos .fotos-ver-enlace {
    min-height: var(--tamano-toque); padding: 0 var(--espacio-12); box-sizing: border-box;
    border: 1px dashed var(--borde-campo); border-radius: var(--radio-campo); background: var(--blanco);
    color: var(--azul-marca); font-size: var(--letra-boton); font-weight: var(--peso-boton); text-decoration: none;
}

/* «Guardar y pasar al siguiente»: la acción principal, a lo ancho y abajo, al alcance del pulgar
   (queda pegada arriba de la barra del celular mientras la tarjeta abierta sigue en pantalla). */
.lista-carga .fila-carga__acciones { flex-direction: column; align-items: stretch; gap: var(--espacio-4); }
.lista-carga .fila-carga__boton { width: 100%; min-height: 48px; font-size: 14px; }
.lista-carga .fila-carga__acciones .boton-texto-celeste { align-self: center; min-height: var(--tamano-toque); }
@media (max-width: 899px) {
    .lista-carga .fila-carga__form > .carga-envio {
        position: sticky; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 5;
        margin: 0 -13px; padding: 10px 13px 6px; background: var(--blanco); border-top: 1px solid var(--linea);
    }
}

/* Devoluciones del fiscal: estado con punto y palabra; botones con contorno (la acción principal
   de la pantalla es guardar la carga). */
.devolucion__estado .s-estado { font-size: var(--letra-texto-tabla); white-space: nowrap; }
.devolucion__form .s-campo__control { width: 100%; }
/* === fin v15 · A === */
/* === v15 · B · Reunión y actas === */
/* Reunión (molde M7): el resultado de cada compromiso con punto y palabra (s.estado), los campos
   del No cumplido con la etiqueta del sistema, «Guardando…» con el punto celeste, «Quitar» con
   contorno y la confirmación de restricción como aviso «regla». */
.compromiso__resultado .s-estado { font-size: var(--letra-texto-tabla); }
.compromiso__causas .reunion-compromiso__campo { font-size: var(--letra-etiqueta-campo); color: var(--secundario); gap: 6px; }
.reunion-compromiso__campo .s-campo__control[aria-invalid="true"] { border: 2px solid var(--avance-negativo); }
.compromiso__guardando { align-items: center; gap: var(--espacio-8); }
.compromiso__guardando .s-estado__punto { background: var(--celeste-marca); }
.reunion-fila__acciones { white-space: nowrap; }
.reunion-fila__acciones form { display: inline-flex; margin: 0; }
.reunion-confirmacion { display: flex; flex-direction: column; gap: var(--espacio-8); margin: 0; font-weight: 600; }
.reunion-confirmacion__acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-8); }

/* Acta (molde M5 Documento): la pantalla del acta como documento. Las tablas, los estados y la
   sección 02 en el celular son los de siempre (tabla-datos y estado-punto: las miden las pruebas
   del acta y del PDF); acá solo el encabezado, las cifras, los títulos y lo que iba escrito a mano. */
.acta-documento { max-width: var(--ancho-contenido); }
.acta-encabezado { margin-bottom: var(--espacio-16); padding-bottom: var(--espacio-12); border-bottom: 2px solid var(--azul-marca); }
.acta-encabezado__reunion { margin: 0; font-size: var(--letra-texto); color: var(--secundario); overflow-wrap: anywhere; }
.acta-encabezado__acciones { flex-direction: column; align-items: flex-end; gap: var(--espacio-8); }
.acta-encabezado__revision { margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: var(--letra-texto-chico); color: var(--secundario); white-space: nowrap; }
@media (max-width: 899px) {
    .acta-encabezado__acciones, .acta-encabezado__revision { align-items: flex-start; }
    .acta-encabezado__acciones { width: 100%; }
    .acta-encabezado__acciones .s-boton { width: 100%; }
}
.acta-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espacio-12); margin: var(--espacio-16) 0; padding: var(--espacio-12) 14px; background: var(--fondo-resumen); border-radius: var(--radio-campo); }
@media (max-width: 899px) { .acta-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.acta-cifras__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; min-width: 0; }
.acta-cifras__valor { margin: 0; font-family: var(--fuente-titulos); font-size: var(--letra-cifra); font-weight: 700; color: var(--azul-marca); font-variant-numeric: tabular-nums; }
.acta-cifras__rotulo { font-size: var(--letra-texto-chico); color: var(--secundario); overflow-wrap: anywhere; }
.acta-documento .rotulo-seccion__titulo { color: var(--azul-marca); font-weight: 700; }
.acta-documento .rotulo-seccion__numero { color: var(--azul-marca); }
.acta-leyenda--anterior { background: var(--azul-marca); }
.acta-leyenda--semana { background: var(--celeste-marca); }
.acta-participantes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--espacio-16); }
.acta-participante { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.acta-participante__nombre { font-size: var(--letra-texto-tabla); font-weight: 600; }
.acta-participante__rol { font-size: var(--letra-texto-chico); color: var(--secundario); }
.acta-vacio { margin: 0; font-size: var(--letra-texto-tabla); color: var(--secundario); }
.acta-temas .tema-fila { display: flex; gap: 14px; padding: 6px 0; font-size: var(--letra-texto-tabla); line-height: 1.5; overflow-wrap: anywhere; }
.acta-tema__numero { flex: none; width: 18px; color: var(--secundario); font-variant-numeric: tabular-nums; }
table.tabla-datos .acta-avance { font-weight: 700; }
table.tabla-datos .acta-avance--cero { color: var(--avance-cero); }
table.tabla-datos .acta-avance--positivo { color: var(--avance-positivo); }
table.tabla-datos .acta-avance--negativo { color: var(--avance-negativo); }
table.tabla-datos .acta-acumulado { text-align: right; }
.acta-acumulado__caja { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.acta-acumulado__valor { font-weight: 700; color: var(--azul-marca); font-variant-numeric: tabular-nums; }
.acta-evidencia { font-size: var(--letra-texto-chico); display: inline-flex; align-items: center; min-height: var(--tamano-toque); }
table.tabla-datos .acta-desde { color: var(--terciario); }
.acta-compromiso-texto { font-weight: 700; color: var(--azul-marca); }
table.tabla-datos .acta-meta { font-weight: 700; color: var(--azul-marca); }
.acta-pie { margin: var(--espacio-32) 0 0; padding-top: var(--espacio-16); border-top: 1px solid var(--linea); color: var(--terciario); font-size: var(--letra-texto-chico); display: flex; justify-content: space-between; gap: var(--espacio-12); flex-wrap: wrap; }

/* Revisar y enviar, acta reabierta, revisiones e historial (M5 con una sola acción y M2 Lista). */
.acta-envio-pagina__subtitulo { margin: calc(-1 * var(--espacio-16)) 0 var(--espacio-16); font-size: var(--letra-texto); color: var(--secundario); overflow-wrap: anywhere; }
.acta-envio-pagina__fila { margin: var(--espacio-8) 0 0; }
.acta-envio-pagina__acciones { gap: var(--espacio-8); margin-top: var(--espacio-12); }
.acta-envio-pagina__volver { margin: var(--espacio-16) 0 0; }
.envio-acta .s-campo { margin: var(--espacio-8) 0; }
@media (max-width: 899px) { .acta-envio-pagina__acciones .s-boton, .acta-reabierta__cierre .s-boton { width: 100%; } }
.acta-reabierta__formulario .s-campo { flex: 1 1 180px; }
/* «.reunion-formulario label» (estilo.css) le daba 180 px de alto a la etiqueta del campo del sistema. */
.acta-reabierta__formulario .s-campo__etiqueta, .envio-acta .s-campo__etiqueta { flex: none; }
.acta-reabierta__cierre { display: flex; flex-direction: column; gap: var(--espacio-8); margin: var(--espacio-16) 0 0; }
.acta-reabierta__cierre form { margin: 0; }
.acta-revisiones { list-style: none; margin: 0 0 var(--espacio-16); padding: 0; display: flex; flex-direction: column; gap: var(--espacio-8); }
.acta-revisiones__fila { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espacio-4); padding: var(--espacio-12) var(--espacio-16); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); overflow-wrap: anywhere; min-width: 0; }
.acta-revisiones__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-4) var(--espacio-12); }
.acta-revisiones__titulo { font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); }
.acta-revisiones__detalle { font-size: var(--letra-texto-tabla); color: var(--secundario); }
.acta-revisiones__pdf { margin-top: var(--espacio-4); }
.acta-historial__detalle { display: block; font-size: var(--letra-texto-chico); color: var(--secundario); }
.acta-historial__acciones { white-space: nowrap; }
@media (max-width: 899px) { .acta-historial__acciones { flex-wrap: wrap; white-space: normal; } }
/* === fin v15 · B === */
/* === v15 · C · Frentes, excedentes, alertas, obras, portada === */
/* Rótulo de sección de estas pantallas (10/600, tracking, mayúsculas, gris), como el de Pendientes. */
.alertas__titulo, .indicadores-residente__rotulo {
    margin: 0; padding: 0; border: none; font-family: var(--fuente-texto); font-size: var(--letra-rotulo);
    font-weight: var(--peso-rotulo); color: var(--secundario);
}

/* Frentes (molde «Lista con detalle»): tabla del sistema; en el celular, tarjetas. */
.frentes-tabla__codigo { font-weight: 700; white-space: nowrap; }
.frentes-tabla__sin-nivel { margin-left: var(--espacio-4); font-weight: 700; color: var(--aviso-texto); }
.frentes-tabla__enlace { display: inline-flex; align-items: center; min-height: var(--tamano-toque); font-weight: 600; color: var(--celeste-marca); }
.frentes-tabla__enlace:hover { color: var(--azul-marca); }
.s-tabla td.frentes-tabla__accion { vertical-align: middle; text-align: right; }
@media (max-width: 899px) {
    .s-tabla td.frentes-tabla__accion { padding-top: var(--espacio-8); }
    .frentes-tabla__accion .s-boton { width: 100%; }
}
/* Formularios de un paso: Frente, Avisar adicional, Verificar adicional. */
.frentes-formulario { display: flex; flex-direction: column; gap: var(--espacio-16); max-width: 480px; }
.frentes-formulario__acciones, .frente-items__acciones, .excedente-form__acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-8); }
.frente-items__alcance { margin: 0 0 var(--espacio-8); font-size: var(--letra-texto); color: var(--secundario); }
.frente-items .reparto__estado .s-estado { white-space: nowrap; }
.excedente-form__cantidad { max-width: 200px; }
.excedente-verificar__declarado { display: flex; flex-direction: column; gap: var(--espacio-4); }
.excedente-verificar__declarado p { margin: 0; }
.excedente-verificar__que { font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); overflow-wrap: anywhere; }
.excedente-verificar__detalle { font-size: var(--letra-texto-tabla); color: var(--secundario); overflow-wrap: anywhere; }
.excedente-verificar__detalle strong { color: var(--azul-marca); }
@media (max-width: 899px) {
    /* En el celular la acción principal va abajo y a todo el ancho, al alcance del pulgar (regla 8). */
    .frentes-formulario__acciones .s-boton, .frente-items__acciones .s-boton, .excedente-form__acciones .s-boton { flex: 1 1 100%; }
}

/* Mis obras: filas tocables. */
.obras-lista__marca { margin: 0 0 var(--espacio-12); }
.obras-lista {
    list-style: none; margin: 0; padding: 0; background: var(--blanco); border: 1px solid var(--linea);
    border-radius: var(--radio-tarjeta); overflow: hidden; max-width: 720px;
}
.obras-lista > li + li { border-top: 1px solid var(--separador-fila); }
.obras-lista__fila { display: flex; align-items: center; gap: var(--espacio-12); min-height: 56px; padding: var(--espacio-8) var(--espacio-16); box-sizing: border-box; color: var(--texto); text-decoration: none; }
.obras-lista__fila:hover { background: var(--fondo-seleccion); color: var(--texto); }
.obras-lista__textos { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.obras-lista__nombre { font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); overflow-wrap: anywhere; }
.obras-lista__cliente { font-size: var(--letra-texto-tabla); color: var(--secundario); overflow-wrap: anywhere; }
.obras-lista__ir { flex: none; font-size: 20px; color: var(--terciario); }

/* Adicionales pedidos (molde «Lista con detalle»): una tarjeta con una fila por pedido. */
.excedentes__nota { margin: 0 0 var(--espacio-16); font-size: var(--letra-texto); color: var(--secundario); }
.excedentes-lista {
    list-style: none; margin: 0 0 var(--espacio-16); padding: 0; background: var(--blanco); border: 1px solid var(--linea);
    border-radius: var(--radio-tarjeta);
}
.excedentes-lista > li + li { border-top: 1px solid var(--separador-fila); }
.excedentes-lista__fila { display: flex; flex-direction: column; gap: var(--espacio-8); padding: var(--espacio-12) var(--espacio-16); min-width: 0; }
.excedentes-lista__textos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.excedentes-lista__que { font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); overflow-wrap: anywhere; }
.excedentes-lista__detalle { font-size: var(--letra-texto-tabla); color: var(--secundario); overflow-wrap: anywhere; }
.excedentes-lista__estado .s-estado, .alertas__estado .s-estado { align-items: flex-start; }
.excedentes-lista__estado .s-estado__punto, .alertas__estado .s-estado__punto { margin-top: 4px; }
.excedentes-lista__estado .s-estado__palabra, .alertas__estado .s-estado__palabra { font-weight: 600; overflow-wrap: anywhere; }
.excedentes-lista__vacio, .alertas__vacio { padding: var(--espacio-12) var(--espacio-16); font-size: var(--letra-texto); color: var(--secundario); }
@media (min-width: 900px) {
    .excedentes-lista__fila { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; column-gap: var(--espacio-16); }
    .excedentes-lista__fotos { grid-column: 1 / -1; }
}

/* Mis indicadores (molde «Bandeja» con tarjetas de número abajo): una tarjeta por obra. */
.indicadores-residente__nota { margin: 0 0 var(--espacio-16); font-size: var(--letra-texto); color: var(--secundario); }
.indicadores-residente {
    display: flex; flex-direction: column; gap: var(--espacio-8); background: var(--blanco); border: 1px solid var(--linea);
    border-radius: var(--radio-tarjeta); padding: var(--espacio-16); margin: 0 0 var(--espacio-16); min-width: 0;
}
.indicadores-residente__obra { margin: 0; padding: 0; border: none; font-family: var(--fuente-texto); font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); text-transform: none; color: var(--texto); }
.indicadores-residente__rotulo { margin-top: var(--espacio-8); }
.indicadores-residente__lista { list-style: none; margin: 0; padding: 0; }
.indicadores-residente__fila { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--espacio-4) var(--espacio-12); padding: 10px 0; border-top: 1px solid var(--separador-fila); font-size: var(--letra-texto-tabla); }
.indicadores-residente__texto { flex: 1 1 100%; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.indicadores-residente__dato { flex: 1 1 auto; color: var(--secundario); min-width: 0; overflow-wrap: anywhere; }
.indicadores-residente__valor { flex: none; font-weight: 700; color: var(--azul-marca); white-space: nowrap; font-variant-numeric: tabular-nums; }
.indicadores-residente__valor--bajo { color: var(--avance-negativo); }
.indicadores-residente__vacio { margin: 0; padding: 10px 0; border-top: 1px solid var(--separador-fila); font-size: var(--letra-texto); color: var(--secundario); }
.indicadores-residente__tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--espacio-12); margin: var(--espacio-4) 0 var(--espacio-8); }
.indicadores-residente__tarjeta { display: flex; min-width: 0; }
.indicadores-residente__tarjeta > .s-tarjeta-numero { flex: 1 1 auto; }
.indicadores-residente__tarjeta--aviso .s-tarjeta-numero__numero { color: var(--avance-negativo); }
@media (min-width: 900px) {
    .indicadores-residente__texto { flex: 1 1 260px; }
}

/* Alertas (molde «Bandeja»): cada grupo en su tarjeta; cada fila con el hecho, su estado y un botón. */
.alertas__resumen { margin: 0 0 var(--espacio-4); font-size: var(--letra-texto); color: var(--secundario); overflow-wrap: anywhere; }
.alertas__resumen:last-of-type { margin-bottom: var(--espacio-16); }
.alertas__grupo {
    background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta);
    margin: 0 0 var(--espacio-16); min-width: 0; overflow: hidden;
}
.alertas__titulo { padding: var(--espacio-12) var(--espacio-16) var(--espacio-8); }
.alertas__lista { list-style: none; margin: 0; padding: 0; }
.alertas__lista > .alertas__fila, .alertas__lista > .alertas__vacio { border-top: 1px solid var(--separador-fila); }
.alertas__lista > .alertas__fila {
    display: flex; flex-direction: column; align-items: stretch; gap: var(--espacio-8);
    padding: var(--espacio-12) var(--espacio-16); min-width: 0;
}
.alertas__texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.alertas__texto .fiscal-lista__frente { font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); overflow-wrap: anywhere; }
.alertas__texto .fiscal-lista__motivo { font-size: var(--letra-texto-chico); color: var(--secundario); overflow-wrap: anywhere; }
.alertas__estado { font-size: var(--letra-texto-tabla); }
.alertas__estado .s-estado { font-size: var(--letra-texto-tabla); }
.alertas__accion, .alertas__vista .s-boton { width: 100%; }
.alertas__vista { margin: 0; }
.alertas__lista > .alertas__fila--enlace { padding: 0; }
.alertas__enlace { display: flex; align-items: center; gap: var(--espacio-12); min-height: 56px; padding: var(--espacio-8) var(--espacio-16); box-sizing: border-box; color: var(--texto); text-decoration: none; }
.alertas__enlace:hover { background: var(--fondo-seleccion); }
.alertas__enlace .fiscal-lista__frente { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.alertas__ir { flex: none; font-size: 20px; color: var(--terciario); }
.alertas__grupo--apagado .fiscal-lista__frente { color: var(--secundario); font-weight: 500; }
@media (min-width: 900px) {
    .alertas__lista > .alertas__fila { flex-direction: row; align-items: center; gap: var(--espacio-16); }
    .alertas__accion, .alertas__vista .s-boton { width: auto; flex: none; white-space: nowrap; }
    .alertas__vista { flex: none; }
}
/* === fin v15 · C === */
/* === v15 · D · Fiscal === */
/* Fiscalización (moldes Bandeja, Pasos del celular y Lista con detalle): las clases de antes
   (fiscal-lista, verificando, revision-cliente) siguen, porque las usan fiscal.js y las pruebas;
   acá se suman el estado con punto y palabra, los campos del sistema y la acción abajo. */
.fiscal-atajos { display: flex; flex-wrap: wrap; gap: var(--espacio-8); margin: 0; }
.fiscal-atajos .fiscal-atajos__enlace { color: var(--texto); font-size: var(--letra-boton); }
.fiscal-atajos .fiscal-atajos__enlace:hover { text-decoration: none; }
.fiscal-resumen { margin: calc(-1 * var(--espacio-12)) 0 var(--espacio-16); font-size: var(--letra-texto); color: var(--secundario); overflow-wrap: anywhere; }
.fiscal-nota { margin: 0; font-size: var(--letra-texto-chico); color: var(--secundario); line-height: 1.45; overflow-wrap: anywhere; }
.fiscal-grilla__listas > .fiscal-nota { margin: 0 0 var(--espacio-8); }
.fiscal-rotulo { font-size: var(--letra-rotulo); font-weight: var(--peso-rotulo); }
/* Fila de la bandeja: la urgencia (o el estado de la corrección) con punto y palabra, qué y el número. */
.fiscal-lista__fila--urgencia { align-items: center; flex-wrap: wrap; row-gap: var(--espacio-4); }
.fiscal-lista__urgencia { flex: 0 0 100%; min-width: 0; }
.fiscal-lista__fila--urgencia .fiscal-lista__texto { flex: 1 1 0; }
.fiscal-lista__urgencia .s-estado { font-size: var(--letra-texto-tabla); }
@media (min-width: 900px) {
    .fiscal-lista__fila--urgencia { flex-wrap: nowrap; }
    .fiscal-lista__urgencia { flex: 0 0 190px; }
    /* Al lado de «Verificando» la columna es angosta: el estado arriba del frente, a lo ancho. */
    .fiscal-grilla:has(.fiscal-grilla__principal) .fiscal-lista__fila--urgencia { flex-wrap: wrap; }
    .fiscal-grilla:has(.fiscal-grilla__principal) .fiscal-lista__urgencia { flex: 0 0 100%; }
}
.fiscal-lista__fila--urgencia .revision-cliente__donde { text-align: left; max-width: none; }
.fiscal-cerrable { flex-wrap: wrap; row-gap: var(--espacio-8); }
.fiscal-cerrable .fiscal-lista__texto { flex: 1 1 200px; }
.fiscal-cerrable form { margin: 0; }
/* Formularios del fiscal (Verificando, observación de calidad, revisar una corrección, devolver). */
.fiscal-form { gap: var(--espacio-16); }
.fiscal-form .verificando__frente { font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); overflow-wrap: anywhere; }
.fiscal-form__estado { display: block; margin: var(--espacio-4) 0 0; }
.fiscal-form__subtitulo { font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); margin-top: var(--espacio-8); }
.fiscal-form .verificando__fecha { width: 100%; max-width: 220px; box-sizing: border-box; }
.fiscal-form .verificando__pct { border-width: 2px; }
.fiscal-form .s-campo__control--area { padding: var(--espacio-8) var(--espacio-12); resize: vertical; }
.fiscal-acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-8); }
.fiscal-acciones .s-boton { flex: 1 1 96px; }
.fiscal-acciones .s-boton--principal { flex: 2 1 180px; }
.fiscal-revision .fiscal-form__estado { margin-top: var(--espacio-4); }
.fiscal-revision .revision-cliente__boton { font-size: var(--letra-boton); font-weight: var(--peso-boton); }
/* En el celular, la acción principal abajo, al alcance del pulgar (regla 8), sobre la barra. */
@media (max-width: 899px) {
    .fiscal-acciones {
        position: sticky; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 5;
        background: var(--blanco); padding: var(--espacio-8) 0; border-top: 1px solid var(--linea);
    }
}
/* Contrato en cantidades: la fila a regularizar dice su estado con punto y palabra. */
.fiscal-contrato__marca { display: block; margin-top: var(--espacio-4); }
.fiscal-contrato__marca .s-estado { font-size: var(--letra-texto-chico); }
/* v15 · R8: en el celular cada ítem es una tarjeta corta: el ítem arriba y las cuatro cifras en una
   fila (rótulo encima de cada una), en lugar de una línea por cifra. */
@media (max-width: 899px) {
    #fiscal-contrato tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--espacio-8); }
    #fiscal-contrato td:first-child { grid-column: 1 / -1; display: block; text-align: left; padding-bottom: var(--espacio-4); }
    #fiscal-contrato td:not(:first-child) { flex-direction: column; justify-content: flex-start; gap: 0; text-align: left; white-space: normal; }
    #fiscal-contrato td:not(:first-child)::before { min-width: 0; }
}
/* === fin v15 · D === */
/* === v15 · E · Armado del contrato === */
/* Armado del contrato (Certificación · Configuración del contrato, importar, condiciones, niveles,
   etapas, ámbito, reparto y reconstrucción), molde M7 «Pasos (computadora)» sin partir en pasos
   nuevos (DETALLES V14-D1): cada parte en una tarjeta blanca con su título de sección. */
.contrato-seccion {
    background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta);
    padding: var(--espacio-16) 18px; margin: 0 0 var(--espacio-16); min-width: 0; max-width: 100%; box-sizing: border-box;
    display: flex; flex-direction: column; gap: var(--espacio-12);
}
.contrato-seccion__titulo {
    margin: 0; padding: 0; border: none; font-family: var(--fuente-texto); font-size: var(--letra-texto-destacado);
    font-weight: var(--peso-texto-destacado); text-transform: none; color: var(--texto); overflow-wrap: anywhere;
}
.contrato-seccion > .s-aviso, .contrato-seccion > p { margin: 0; }
.contrato-nota { margin: 0; font-size: var(--letra-texto-tabla); line-height: 1.45; color: var(--secundario); overflow-wrap: anywhere; }
.contrato-nota--bajo-titulo { margin: calc(-1 * var(--espacio-12)) 0 var(--espacio-16); }
.contrato-formulario { display: flex; flex-direction: column; gap: var(--espacio-12); max-width: 460px; margin: 0; }
.contrato-formulario--ancho { max-width: none; }
.contrato-formulario > .s-boton, .contrato-seccion form > .s-boton { align-self: flex-start; }
.contrato-acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-8); align-items: center; margin: 0; }
.contrato-en-linea { display: flex; flex-wrap: wrap; gap: var(--espacio-8) var(--espacio-12); align-items: flex-end; margin: var(--espacio-8) 0; }
.contrato-en-linea .s-campo { flex: 0 1 220px; }
.contrato-casilla { display: flex; align-items: center; gap: var(--espacio-8); min-height: var(--tamano-toque); font-size: var(--letra-texto); }
.contrato-casilla input { width: 20px; height: 20px; flex: none; }
.contrato-lista { margin: 0; padding-left: 18px; font-size: var(--letra-texto); }
.contrato-lista li { padding: var(--espacio-4) 0; overflow-wrap: anywhere; }
.contrato-lista--filas { list-style: none; padding-left: 0; }
.contrato-lista--filas li { border-top: 1px solid var(--separador-fila); padding: var(--espacio-8) 0; }
.contrato-desplegable summary { min-height: var(--tamano-toque); display: flex; align-items: center; cursor: pointer; font-size: var(--letra-texto); font-weight: 700; color: var(--azul-marca); }
.contrato-desplegable[open] > summary { margin-bottom: var(--espacio-8); }
.contrato-desplegable form { display: flex; flex-direction: column; gap: var(--espacio-12); }
/* Datos del resumen (archivo, cliente, anticipo, retención…): rótulo y dato. */
.contrato-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--espacio-12) var(--espacio-16); margin: 0 0 var(--espacio-16); }
.contrato-seccion .contrato-datos { margin: 0; }
.contrato-datos > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contrato-datos dt { font-size: var(--letra-rotulo); font-weight: var(--peso-rotulo); color: var(--secundario); }
.contrato-datos dd { margin: 0; font-size: var(--letra-texto); font-weight: 700; color: var(--texto); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.contrato-datos--filas { grid-template-columns: minmax(0, 1fr); }
/* Desplegables y campos dentro de tablas: el ancho de su contenido, no el de la celda. */
.contrato-control--corto { width: auto; max-width: 100%; min-width: 88px; }
.contrato-control--medio { max-width: 320px; }
.tabla-columnas .s-campo__control, .ambito .tabla-datos .s-campo__control { width: auto; max-width: 240px; }
.hoja-importacion__tipo { max-width: 320px; margin: 0; }
.hoja-importacion__encabezado { gap: var(--espacio-8) var(--espacio-12); }
.hallazgo__tipo .s-estado { font-size: var(--letra-texto-chico); text-transform: none; }
.ambito__encabezado .s-campo { flex: 0 1 260px; }
.ambito__capitulo > details > summary { font-weight: 700; color: var(--azul-marca); }
.ambito__niveles legend { color: var(--secundario); }
.etapas__pesos .s-campo { flex: 0 0 auto; }
.etapas__estado { margin: 0; }
/* v15 · R4: en una columna angosta el detalle baja debajo de la palabra, no a su costado. */
.etapas__estado .s-estado { flex-wrap: wrap; row-gap: var(--espacio-4); }
.reconstruccion__completar.s-boton { margin-left: var(--espacio-4); }
.reconstruccion-etapas__diferencia.s-aviso, .reconstruccion-etapas__cierra.s-aviso { margin: 0; }
/* El recuadro «regularizar» (Carga y Fiscalización) con las medidas del aviso del sistema. */
.recuadro-regularizar { border-radius: 10px; padding: var(--espacio-12) 14px; }
/* === fin v15 · E === */
/* === v15 · F · Certificado y control === */
/* Molde M5 «Documento»: el certificado quincenal (certificacion/certificado.html). */
.certificado-estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-4) var(--espacio-12); margin: calc(-1 * var(--espacio-12)) 0 var(--espacio-16); font-size: var(--letra-texto); color: var(--secundario); }
.certificado-estado__texto { overflow-wrap: anywhere; }
.certificado-desplegable { margin: 0 0 var(--espacio-16); }
.certificado-desplegable > summary, .certificado__ajuste > summary { min-height: var(--tamano-toque); display: inline-flex; align-items: center; cursor: pointer; font-size: var(--letra-texto); font-weight: 700; color: var(--celeste-marca); }
.certificado-desplegable[open] > summary { margin-bottom: var(--espacio-8); }
.certificado-formulario { display: flex; flex-direction: column; gap: var(--espacio-12); max-width: 480px; margin: 0 0 var(--espacio-12); }
.certificado-formulario--ancho { max-width: none; }
.certificado-formulario--en-linea { flex-direction: row; flex-wrap: wrap; align-items: flex-end; max-width: none; }
.certificado-formulario--en-linea > .s-campo { flex: 0 1 240px; }
.certificado-formulario--en-linea > .revision__nota { flex: 1 1 200px; align-self: center; margin: 0; }
.certificado-formulario .s-boton { align-self: flex-start; }
.certificado-aprobar > .certificado__motivo-aprobar { flex: 1 1 320px; max-width: 480px; }
.certificado-formulario--en-linea .s-boton { align-self: flex-end; }
.certificado-seccion { margin: 0 0 var(--espacio-16); min-width: 0; }
.certificado-seccion--tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: var(--espacio-16); }
@media (min-width: 900px) { .certificado-seccion--tarjeta { padding: var(--espacio-16) var(--espacio-24); } }
.certificado-seccion > h2, .certificado-seccion__subtitulo {
    margin: 0 0 var(--espacio-12); padding: 0 0 var(--espacio-8); border: none; border-bottom: 2px solid var(--azul-marca);
    font-family: var(--fuente-texto); font-size: var(--letra-rotulo); font-weight: 700; color: var(--azul-marca); overflow-wrap: anywhere;
}
.certificado-seccion__subtitulo { margin-top: var(--espacio-16); border-bottom-width: 1px; }
.certificado-seccion > p { margin: 0 0 var(--espacio-8); overflow-wrap: anywhere; }
/* La fila de cifras de la hoja (M5): fondo gris claro, cifra en Archivo azul y su rótulo. */
.certificado-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--espacio-12); padding: var(--espacio-12) var(--espacio-16); background: var(--fondo-resumen); border-radius: var(--radio-campo); margin: 0; }
.certificado-cifras__cifra { display: flex; flex-direction: column; gap: 2px; margin: 0; min-width: 0; }
.certificado-cifras__valor { font-family: var(--fuente-titulos); font-size: var(--letra-texto-destacado); font-weight: 700; color: var(--azul-marca); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.certificado-cifras__cifra--neto .certificado-cifras__valor { font-size: var(--letra-cifra); }
.certificado-cifras__rotulo { font-size: var(--letra-etiqueta-campo); color: var(--secundario); }
.certificado-cifras__dato { margin: var(--espacio-4) 0 var(--espacio-8) !important; font-size: var(--letra-texto-chico); color: var(--secundario); }
/* Filas de etiqueta y monto (liquidación de cada planilla y acumulados). */
.certificado-filas { margin: var(--espacio-12) 0 0; display: flex; flex-direction: column; }
.certificado-filas > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espacio-12); padding: 6px 0; border-top: 1px solid var(--separador-fila); font-size: var(--letra-texto-tabla); min-width: 0; }
.certificado-filas dt { color: var(--secundario); min-width: 0; overflow-wrap: anywhere; }
.certificado-filas dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.certificado-filas__total { border-top: 1px solid var(--texto) !important; }
.certificado-filas__total dt, .certificado-filas__total dd { color: var(--texto); font-weight: 700; }
.certificado-vacio { margin: 0 0 var(--espacio-16); padding: var(--espacio-16); border: 1px dashed var(--borde-campo); border-radius: 10px; font-size: var(--letra-texto); color: var(--secundario); text-align: center; }
.certificado-origen { align-items: flex-start; font-size: var(--letra-texto-tabla); font-weight: 400; }
.certificado-origen .s-estado__punto { margin-top: 4px; }
.certificado__origen--sin_verificar, .certificado__origen--ajuste { background: transparent; color: var(--aviso-texto); }
.certificado-celda-accion { min-width: 180px; }
.certificado-celda-accion .revision__nota { display: block; }
@media (max-width: 899px) {
    .certificado-celda-accion { min-width: 0; flex-direction: column; align-items: stretch; }
    .s-tabla td[data-rotulo=""] > .certificado__ajuste { width: 100%; }
    /* En la tarjeta del celular, el ítem y el origen (textos largos) van debajo de su rótulo. */
    .certificado-seccion .s-tabla td[data-rotulo="Ítem"], .certificado-seccion .s-tabla td[data-rotulo="Origen"] { display: block; text-align: left; }
    .certificado-seccion .s-tabla td[data-rotulo="Ítem"]::before, .certificado-seccion .s-tabla td[data-rotulo="Origen"]::before { display: block; }
    .certificado-formulario--en-linea { flex-direction: column; align-items: stretch; }
    .certificado-formulario--en-linea > .s-campo { flex: none; }
    .certificado-formulario .s-boton { align-self: stretch; }
}
/* Molde M4 «Tablero»: Control interno (certificacion/control_interno.html). */
.control-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-8) var(--espacio-12); }
.control-aviso__texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; }
.control-aviso__titulo { display: block; font-size: var(--letra-texto-destacado); }
.control-aviso__detalle { display: block; font-size: var(--letra-texto-tabla); overflow-wrap: anywhere; }
.control-aviso > .control-aviso__titulo, .control-aviso > .control-aviso__detalle { flex: 1 1 100%; }
.control-interno__sin-diferencias { margin: 0 0 var(--espacio-16); }
.control-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--espacio-12); margin: 0 0 var(--espacio-24); }
.control-tarjeta__numero { font-size: var(--letra-cifra); overflow-wrap: anywhere; }
.control-tarjeta__numero--aviso { color: var(--avance-negativo); }
.control-tarjeta .control-interno__enlace { min-height: var(--tamano-toque); font-size: var(--letra-etiqueta-campo); font-weight: 700; }
.control-seccion__titulo { margin: var(--espacio-12) 0 var(--espacio-4); padding: 0; border: none; font-family: var(--fuente-texto); font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); text-transform: none; color: var(--texto); }
.control-formulario { display: flex; flex-direction: column; gap: var(--espacio-12); max-width: 480px; padding: 0 0 var(--espacio-8); }
.control-formulario .s-boton { align-self: flex-start; }
.control-regularizadas { list-style: none; margin: 0; padding: 0; }
.control-regularizadas__fila { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--separador-fila); font-size: var(--letra-texto-tabla); color: var(--secundario); min-width: 0; }
.control-regularizadas__fila:first-child { border-top: none; }
.control-regularizadas__item { font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
.control-regularizadas__como { overflow-wrap: anywhere; }
.fuera-contrato-decididos__titulo { margin: var(--espacio-16) 0 var(--espacio-4); }
.fuera-contrato-vacio { padding: var(--espacio-12) 0; font-size: var(--letra-texto); color: var(--secundario); }
/* Molde M2 «Lista con detalle»: Cambios al contrato (certificacion/cambios.html). */
.cambios-lista { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: var(--espacio-4) var(--espacio-12); }
.cambios-lista .s-estado { align-items: flex-start; }
.cambios-lista .s-estado__punto { margin-top: 5px; }
.cambios-lista .cambios__acciones .s-boton { white-space: normal; }
summary.cambios-accion { list-style: none; }
summary.cambios-accion::-webkit-details-marker { display: none; }
.cambios__desplegable[open] > summary.cambios-accion { border-width: 2px; background: var(--fondo-seleccion); }
@media (max-width: 899px) {
    .cambios-lista { background: transparent; border: none; padding: 0; }
    .cambios-lista .s-tabla td { flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; }
    .cambios-lista .cambios__acciones-celda { min-width: 0; }
    .cambios-lista .cambios__acciones { flex-direction: column; align-items: stretch; width: 100%; }
    .cambios-lista .cambios__acciones .s-boton, .cambios-lista .cambios__acciones form { width: 100%; }
}
/* El detalle de un contrato (certificacion/contrato_detalle.html) y su tabla ancha. */
.contrato-detalle__ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--espacio-12) var(--espacio-16); margin: 0 0 var(--espacio-16); padding: var(--espacio-16); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); }
.contrato-detalle__ficha > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.contrato-detalle__ficha dt { font-size: var(--letra-rotulo); font-weight: var(--peso-rotulo); color: var(--secundario); }
.contrato-detalle__ficha dd { margin: 0; font-size: var(--letra-texto); font-weight: 600; overflow-wrap: anywhere; }
.contrato-detalle__acciones { margin: 0 0 var(--espacio-16); }
.tabla-contrato-marco { max-width: 100%; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); }
/* Revisión del cliente dentro del certificado (certificacion/_revision_cliente.html). */
.revision-cliente-cert__titulo { margin: 0 0 var(--espacio-8); font-family: var(--fuente-texto); font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); text-transform: none; color: var(--texto); }
.revision-cliente-cert__estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-4) var(--espacio-8); font-size: var(--letra-texto-tabla); color: var(--secundario); }
.revision-cliente-cert__respuesta { display: flex; flex-direction: column; gap: var(--espacio-8); min-width: 220px; }
@media (max-width: 899px) { .s-tabla td.revision-cliente-cert__respuesta { min-width: 0; align-items: stretch; text-align: left; } }
/* Formularios de un paso de Cambios al contrato: nuevo adicional y nueva modificación. */
.formulario-contrato { display: flex; flex-direction: column; gap: var(--espacio-16); }
.formulario-contrato__ayuda { margin: 0 0 var(--espacio-16); }
.formulario-contrato__fila { display: flex; flex-wrap: wrap; gap: var(--espacio-12) var(--espacio-16); }
.formulario-contrato__fila > .s-campo { flex: 1 1 200px; max-width: 480px; }
.formulario-contrato__opciones { max-width: 560px; }
.formulario-contrato__opciones legend { padding: 0 var(--espacio-4); }
.formulario-contrato__botones { display: flex; flex-wrap: wrap; gap: var(--espacio-8); justify-content: flex-end; }
@media (max-width: 899px) {
    /* Regla 8: en el celular, la acción principal abajo, al alcance del pulgar. */
    .formulario-contrato__botones { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 5; background: var(--blanco); padding: var(--espacio-8) 0; border-top: 1px solid var(--linea); }
    .formulario-contrato__botones .s-boton { flex: 1 1 0; }
}
/* === fin v15 · F === */
/* === v15 · G · Administración === */
/* Molde M4 «Tablero» (Resumen de Administración) y M2 «Lista con detalle» (Usuarios y ajustes). */
.admin-subtitulo { margin: calc(-1 * var(--espacio-16)) 0 var(--espacio-16); font-size: var(--letra-texto); color: var(--secundario); }
.admin-nota { margin: 0 0 var(--espacio-16); }
.admin-resumen, .admin-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--espacio-12); margin: 0 0 var(--espacio-16); }
.admin-tarjetas { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.admin-tarjetas--dos { max-width: none; }
@media (min-width: 900px) { .admin-tarjetas--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.admin-tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: var(--espacio-16); display: flex; flex-direction: column; gap: var(--espacio-8); min-width: 0; box-sizing: border-box; }
.admin-tarjeta--ancha { margin: 0 0 var(--espacio-16); }
.admin-tarjeta--media { max-width: 760px; margin: 0 0 var(--espacio-16); }
.admin-tarjeta p { margin: 0; }
.admin-tarjeta__rotulo { margin: 0; padding: 0; border: none; font-family: var(--fuente-texto); font-size: var(--letra-rotulo); font-weight: var(--peso-rotulo); color: var(--secundario); }
.admin-tarjeta__titulo { margin: 0; padding: 0; border: none; font-family: var(--fuente-texto); font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); text-transform: none; color: var(--texto); overflow-wrap: anywhere; }
.admin-tarjeta__dato { font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); color: var(--texto); line-height: 1.35; overflow-wrap: anywhere; }
.admin-tarjeta__texto { font-size: var(--letra-texto); color: var(--texto); overflow-wrap: anywhere; }
.admin-tarjeta__nota { font-size: var(--letra-texto-chico); color: var(--secundario); overflow-wrap: anywhere; }
.admin-tarjeta__accion { margin-top: auto; align-self: flex-start; max-width: 100%; white-space: normal; text-align: center; }
.admin-tarjeta .s-aviso { margin: 0; }
/* Actas emitidas · reabrir */
.admin-actas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.admin-actas__fila { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espacio-8); padding: var(--espacio-12) 0; border-top: 1px solid var(--separador-fila); min-width: 0; }
.admin-actas__fila:first-child { border-top: none; padding-top: var(--espacio-4); }
.admin-actas__acta { font-size: var(--letra-texto); overflow-wrap: anywhere; }
.admin-actas__pedido { font-size: var(--letra-texto-tabla); color: var(--secundario); overflow-wrap: anywhere; }
.admin-acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-8); align-items: center; margin: 0; }
.admin-acciones form { margin: 0; }
/* Lo plegado («Reabrir con motivo», «Ver el texto»): el resumen es un enlace de 44 px. */
.admin-plegable { min-width: 0; max-width: 100%; }
.admin-plegable__abrir { min-height: var(--tamano-toque); display: inline-flex; align-items: center; font-size: var(--letra-boton); font-weight: var(--peso-boton); color: var(--celeste-marca); cursor: pointer; }
.admin-plegable__abrir:hover { color: var(--azul-marca); }
.admin-formulario { display: flex; flex-direction: column; gap: var(--espacio-12); max-width: 460px; min-width: 0; margin: 0; }
.admin-formulario > .s-boton { align-self: flex-start; }
.admin-formulario legend { padding: 0 var(--espacio-4); font-size: var(--letra-etiqueta-campo); font-weight: var(--peso-etiqueta-campo); color: var(--secundario); }
/* El aviso trimestral «Revisar usuarios del cliente» (aviso «regla»). */
.admin-revision { max-width: 640px; display: flex; flex-direction: column; gap: var(--espacio-8); }
.admin-revision__titulo { margin: 0; padding: 0; border: none; font-family: var(--fuente-texto); font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); text-transform: none; color: inherit; }
.admin-revision__texto { margin: 0; }
.admin-revision__lista { margin: 0; padding-left: 18px; font-size: var(--letra-texto-tabla); }
.admin-revision__lista li { padding: 2px 0; overflow-wrap: anywhere; }
.admin-revision form { margin: 0; }
/* Listas (bandeja de salida, feriados): una fila por elemento, en una tarjeta. */
.admin-lista { list-style: none; margin: 0 0 var(--espacio-24); padding: 0 var(--espacio-16); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); }
.admin-lista--angosta { max-width: 640px; }
.admin-lista__fila { display: flex; flex-direction: column; gap: var(--espacio-4); padding: var(--espacio-12) 0; border-top: 1px solid var(--separador-fila); min-width: 0; }
.admin-lista__fila:first-child { border-top: none; }
.admin-lista__fila--accion { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--espacio-12); }
.admin-lista__fila--accion form { margin: 0; flex: none; }
.admin-lista__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--espacio-4) var(--espacio-12); }
.admin-lista__textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-lista p { margin: 0; }
.admin-lista__titulo { font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); overflow-wrap: anywhere; min-width: 0; }
.admin-lista__detalle { font-size: var(--letra-texto-tabla); color: var(--secundario); overflow-wrap: anywhere; }
.admin-lista__texto { margin: var(--espacio-4) 0 0; padding: var(--espacio-12); background: var(--fondo-resumen); border-radius: var(--radio-campo); font-family: var(--fuente-texto); font-size: var(--letra-texto-tabla); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; box-sizing: border-box; }
.admin-anios { display: flex; gap: var(--espacio-8); }
.admin-seccion { margin: 0 0 var(--espacio-24); min-width: 0; }
/* Portal del cliente: la tabla de personas, con sus permisos, se desliza sola en la computadora angosta. */
@media (min-width: 900px) { #portal-usuarios { min-width: 720px; } .admin-seccion .s-tabla__marco { overflow-x: auto; } }
/* Marca: las muestras del logo. */
.admin-marca { display: flex; flex-wrap: wrap; gap: var(--espacio-16); }
.admin-marca__muestra { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: var(--espacio-16); border: 1px solid var(--linea); border-radius: var(--radio-campo); background: var(--blanco); max-width: 100%; box-sizing: border-box; }
.admin-marca__muestra--oscura { background: var(--azul-marca); }
.admin-marca__logo { height: 24px; width: auto; max-width: 240px; }
.admin-marca__nota { font-size: var(--letra-texto-chico); color: var(--secundario); }
.admin-marca__muestra--oscura .admin-marca__nota { color: var(--blanco); }
/* Frentes medibles: el régimen y las dos listas. */
.admin-opciones { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-4); min-width: 0; }
.admin-opciones__opcion { display: flex; align-items: center; gap: var(--espacio-8); min-height: var(--tamano-toque); font-size: var(--letra-texto); font-weight: 400; cursor: pointer; }
.admin-opciones__opcion input { width: 20px; height: 20px; min-height: 0; margin: 0; flex: none; accent-color: var(--azul-marca); }
.admin-renglones { list-style: none; margin: 0; padding: 0; }
.admin-renglones__renglon { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-12); min-height: var(--tamano-toque); border-top: 1px solid var(--separador-fila); font-size: var(--letra-texto-tabla); overflow-wrap: anywhere; }
.admin-renglones__renglon:first-child { border-top: none; }
.admin-renglones__renglon strong { flex: none; font-weight: 700; color: var(--azul-marca); }
.admin-renglones__renglon .s-boton { flex: none; }
/* === fin v15 · G === */
/* === v16 · J1 · Portal, correcciones del cliente e ingreso === */
/* Ingreso y cuenta (molde M9): una columna de 440 px, campos del sistema a lo ancho y la acción
   principal a lo ancho (en el celular, al alcance del pulgar). */
.cuenta-acceso { display: flex; flex-direction: column; gap: var(--espacio-16); max-width: 440px; min-width: 0; }
.cuenta-acceso > .s-encabezado { margin: 0; }
.cuenta-acceso > .s-aviso, .cuenta-acceso > p { margin: 0; }
.cuenta-acceso--ingreso { margin: 0 auto; padding-top: var(--espacio-16); }
.cuenta-acceso__titulo { margin: 0; text-align: center; font-family: var(--fuente-titulos); font-size: var(--letra-titulo-pagina); font-weight: var(--peso-titulo-pagina); color: var(--azul-marca); }
.cuenta-acceso__texto { margin: 0; font-size: var(--letra-texto); color: var(--texto); line-height: 1.5; overflow-wrap: anywhere; }
.cuenta-acceso__nota { margin: 0; font-size: var(--letra-texto-chico); color: var(--secundario); line-height: 1.45; overflow-wrap: anywhere; }
.cuenta-acceso__acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-8); }
.cuenta-acceso__centro { text-align: center; }
.cuenta-acceso .ingreso-empresa { margin: var(--espacio-8) 0; }
.formulario-ingreso { display: flex; flex-direction: column; gap: var(--espacio-12); max-width: none; margin: 0; }
.formulario-ingreso .s-campo { margin: 0; }
.formulario-ingreso > .s-boton { width: 100%; }
.formulario-ingreso .s-campo__control:disabled { background: var(--fondo-resumen); color: var(--secundario); }
/* Portal: filas tocables (las de «Mis obras») con el estado arriba del texto. */
.portal-lista.obras-lista .s-estado { font-size: var(--letra-texto-tabla); }
.portal-lista.obras-lista .obras-lista__textos { gap: 3px; }
.portal-seccion { margin: var(--espacio-24) 0 var(--espacio-8); font-size: var(--letra-rotulo); font-weight: var(--peso-rotulo); color: var(--secundario); }
.portal-nota { margin: var(--espacio-12) 0 0; font-size: var(--letra-texto-chico); color: var(--secundario); line-height: 1.45; max-width: 640px; overflow-wrap: anywhere; }
/* Una ficha (la restricción, la corrección a reinspeccionar): tarjeta blanca con rótulo y título. */
.portal-ficha { display: flex; flex-direction: column; gap: var(--espacio-8); margin: 0 0 var(--espacio-16); padding: var(--espacio-16); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); max-width: 640px; box-sizing: border-box; min-width: 0; }
.portal-ficha > * { margin: 0; }
.portal-ficha__rotulo { font-size: var(--letra-rotulo); font-weight: var(--peso-rotulo); color: var(--secundario); overflow-wrap: anywhere; }
.portal-ficha__titulo { font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); color: var(--texto); overflow-wrap: anywhere; }
.portal-ficha__texto { font-size: var(--letra-texto); color: var(--texto); line-height: 1.5; overflow-wrap: anywhere; }
.portal-ficha__texto--gris { font-size: var(--letra-texto-tabla); color: var(--secundario); }
.portal-formulario { display: flex; flex-direction: column; gap: var(--espacio-12); max-width: 640px; margin: 0; }
.portal-formulario .s-campo { margin: 0; }
.portal-formulario .s-campo__control[type="file"] { padding: var(--espacio-8); height: auto; min-height: var(--tamano-toque); }
.portal-formulario .s-campo__control--area { padding: var(--espacio-8) var(--espacio-12); resize: vertical; }
@media (max-width: 899px) {
    .portal-formulario > .s-boton, .formulario-ingreso > .s-boton { min-height: 48px; }
}
/* === fin v16 · J1 === */
/* === v16 · J1 (2) · Correcciones del lado del cliente === */
.portal-foto { margin: var(--espacio-12) 0 var(--espacio-16); max-width: 960px; }
.portal-foto__imagen { display: block; max-width: 100%; height: auto; border-radius: var(--radio-campo); border: 1px solid var(--linea); }
.reinspeccion-cliente.portal-ficha { background: var(--blanco); border: 2px solid var(--azul-marca); padding: var(--espacio-16); gap: var(--espacio-12); }
.reinspeccion-cliente .reinspeccion-cliente__fotos { gap: var(--espacio-12); }
.reinspeccion-cliente .reinspeccion-cliente__foto { font-size: var(--letra-texto-chico); color: var(--secundario); min-height: var(--tamano-toque); }
.reinspeccion-cliente .reinspeccion-cliente__foto img { width: 72px; height: 72px; border-radius: var(--radio-campo); }
.reinspeccion-cliente .reinspeccion-cliente__botones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-8); }
.reinspeccion-cliente .reinspeccion-cliente__botones .s-boton { width: 100%; }
/* === fin v16 · J1 (2) === */
/* === v16 · J1 (3) · Correcciones internas: ficha, resumen, configuración, importar === */
/* Ficha de una corrección (molde M2, detalle). */
.correcciones-ficha__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-4) var(--espacio-12); margin: calc(-1 * var(--espacio-12)) 0 var(--espacio-16); font-size: var(--letra-texto-tabla); color: var(--secundario); overflow-wrap: anywhere; }
.correcciones-ficha__cabeza .s-estado { font-size: var(--letra-texto); }
.correcciones-ficha__rotulo { margin: var(--espacio-24) 0 var(--espacio-8); padding: 0; border: none; font-family: var(--fuente-texto); font-size: var(--letra-rotulo); font-weight: var(--peso-rotulo); color: var(--secundario); }
.correcciones-devuelta.s-aviso, .correcciones-faltante.s-aviso { display: flex; flex-direction: column; gap: var(--espacio-8); max-width: 760px; box-sizing: border-box; }
.correcciones-devuelta__motivo, .correcciones-faltante__texto { font-size: var(--letra-texto); color: var(--texto); }
.correcciones-faltante .correcciones-fecha { max-width: 420px; }
.correcciones-fecha .s-campo, .correcciones-actualizar .s-campo, .correcciones-subir .s-campo { margin: 0; }
.correcciones-fecha > .s-boton { align-self: flex-start; }
.correcciones-subir .s-campo { flex: 1 1 200px; min-width: 0; }
.correcciones-subir .s-campo__control[type="file"], .importar-p7 .s-campo__control[type="file"] { padding: var(--espacio-8); height: auto; min-height: var(--tamano-toque); font-size: var(--letra-texto); }
.correcciones-actualizar > .s-boton { align-self: flex-start; min-width: 160px; }
.correcciones-foto__quitar-boton.s-boton { min-height: var(--tamano-toque); padding: 0 var(--espacio-8); }
.correcciones-en-revision.s-aviso { max-width: 640px; }
.correcciones-fotos .correcciones-sin-dato { font-size: var(--letra-texto-tabla); font-weight: 400; color: var(--secundario); }
.correcciones-pedido .s-boton--enlace { padding: 0; justify-content: flex-start; }
.correcciones-datos strong.correcciones-datos__fecha { color: var(--azul-marca); }
@media (max-width: 899px) { .correcciones-actualizar > .s-boton { width: 100%; } }
/* Resumen y cronograma (molde M4): barras en SVG, colores del diccionario. */
.resumen-correcciones__pista { display: block; overflow: hidden; border-radius: 4px; }
.resumen-correcciones__fondo { fill: var(--pista-barra); }
rect.resumen-correcciones__cerradas { fill: var(--azul-marca); }
rect.resumen-correcciones__abiertas { fill: var(--celeste-marca); }
.cronograma__escala { display: block; overflow: hidden; }
text.cronograma__semana { position: static; font-family: var(--fuente-texto); font-size: 13px; fill: var(--terciario); }
svg.cronograma__svg { position: static; display: block; overflow: visible; }
rect.cronograma__barra { position: static; fill: var(--celeste-marca); }
rect.cronograma__barra--lista { fill: var(--blanco); stroke: var(--azul-marca); stroke-width: 2px; }  /* v16 · R7: lista para el cliente = anillo azul (§5) */
rect.cronograma__barra--sin-fecha { fill: var(--sin-avance); }
rect.cronograma__barra--vencida { fill: var(--restriccion-abierta-anillo); }
rect.cronograma__barra--con-vencidas { box-shadow: none; stroke: var(--restriccion-abierta-anillo); stroke-width: 2px; }
line.cronograma__hoy { position: static; stroke: var(--avance-negativo); stroke-width: 2px; }  /* v16 · R7: sobresale de la barra, como antes */
/* === fin v16 · J1 (3) === */
/* Configuración de correcciones (molde M7, paso de configuración): la opción elegida con contorno azul. */
.configuracion-correcciones .configuracion-correcciones__opcion { padding: var(--espacio-8) var(--espacio-12); border: 1px solid var(--linea); border-radius: var(--radio-campo); background: var(--blanco); cursor: pointer; }
.configuracion-correcciones .configuracion-correcciones__opcion:has(input:checked) { border: 2px solid var(--azul-marca); background: var(--fondo-seleccion); }
.configuracion-correcciones__opcion input { accent-color: var(--azul-marca); }
.configuracion-correcciones__titulo { font-family: var(--fuente-texto); font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); }
.configuracion-correcciones__nota, .enlace-envio__nota { margin: 0; font-size: var(--letra-texto-chico); color: var(--secundario); line-height: 1.45; overflow-wrap: anywhere; }
.enlace-envio .enlace-envio__rotulo { font-size: var(--letra-etiqueta-campo); font-weight: var(--peso-etiqueta-campo); }
.enlace-envio .enlace-envio__direccion { background: var(--fondo-resumen); }
.enlace-envio > .s-aviso { margin: 0; }
/* Importar informe (molde M7) e Informes recibidos (M2): pasos arriba, formularios con los campos del sistema. */
.importar-p7__pasos { margin: 0 0 var(--espacio-16); }
@media (min-width: 900px) { .importar-p7__pasos .s-pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.importar-p7__formulario { display: flex; flex-direction: column; gap: var(--espacio-12); max-width: 460px; margin: 0; }
.importar-p7__formulario .s-campo, .importar-p7__hoja .s-campo, .importar-p7__nombre .s-campo, .importar-p7__ubicacion .s-campo { margin: 0; }
.importar-p7__formulario > .s-boton { align-self: flex-start; }
.importar-p7__formulario .s-campo__control[type="file"] { padding: var(--espacio-8); height: auto; min-height: var(--tamano-toque); font-size: var(--letra-texto); }
.importar-p7__estado .s-estado { font-size: var(--letra-texto-tabla); }
.importar-p7__aviso.s-aviso { margin: 0; }
.importar-p7__tarjeta > .s-aviso, .importar-p7__tarjeta > p.s-aviso { margin: 0; }
.importar-p7__botones .s-boton { min-height: var(--tamano-toque); }
@media (max-width: 899px) { .importar-p7__formulario > .s-boton, .importar-p7__botones .s-boton { width: 100%; } }
/* === fin v16 · J1 (4) === */
/* === v16 · J2 · Tableros === */
/* Encabezado, obra (filtros) y vistas (pestañas) del sistema. */
.tableros__selector .s-filtros { margin: 0 0 var(--espacio-12); }
.tableros__pestanas .s-pestanas { margin: 0 0 var(--espacio-8); }
/* v16 · R4: en el celular, las cuatro vistas bajan de línea (la elegida nunca queda cortada). */
@media (max-width: 899px) { .tableros__pestanas .s-pestanas { flex-wrap: wrap; overflow-x: visible; } }
/* V15-6: «Usuarios y ajustes» en dos líneas en el celular, cada pestaña media fila */
@media (max-width: 899px) {
    .ajustes__pestanas .s-pestanas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-x: visible; width: 100%; }
    .ajustes__pestanas .s-pestanas__pestana { white-space: normal; text-align: center; justify-content: center; }
}
/* v16 · R5: en el celular, el nombre de la obra hace de título de su tarjeta (sin el rótulo «Obra»). */
@media (max-width: 899px) { .s-tabla td.tableros__titulo-fila { font-weight: 700; color: var(--azul-marca); text-align: left; } }
.tableros__tarjeta .s-tabla__marco { margin: 0; }
.tableros__titulo .s-boton { min-height: 36px; padding: 0 var(--espacio-12); font-size: var(--letra-texto-chico); text-transform: none; flex: none; }
@media (max-width: 899px) { .tableros__titulo .s-boton { min-height: var(--tamano-toque); } }
/* Barras horizontales: un <progress> por fila (celeste; «fuerte» azul; «aviso» ámbar; «vencido» marrón). */
.tableros__barra { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 8px; border: none; border-radius: 4px; background: var(--pista-barra); overflow: hidden; color: var(--celeste-marca); }
.tableros__barra::-webkit-progress-bar { background: var(--pista-barra); border-radius: 4px; }
.tableros__barra::-webkit-progress-value { background: var(--celeste-marca); }
.tableros__barra::-moz-progress-bar { background: var(--celeste-marca); }
.tableros__barra--fuerte::-webkit-progress-value { background: var(--azul-marca); }
.tableros__barra--fuerte::-moz-progress-bar { background: var(--azul-marca); }
.tableros__barra--aviso::-webkit-progress-value { background: var(--restriccion-abierta-anillo); }
.tableros__barra--aviso::-moz-progress-bar { background: var(--restriccion-abierta-anillo); }
.tableros__barra--vencido::-webkit-progress-value { background: var(--avance-negativo); }
.tableros__barra--vencido::-moz-progress-bar { background: var(--avance-negativo); }
/* Barras verticales del cumplimiento por semana: un SVG por semana (alto y valor como atributos). */
.tableros__columnas { height: auto; align-items: stretch; }
.tableros__columna { justify-content: flex-end; }
.tableros__columna-grafico { display: block; overflow: visible; }
rect.tableros__columna-barra { fill: var(--sin-avance); }
rect.tableros__columna-barra--alta { fill: var(--azul-marca); }
rect.tableros__columna-barra--media { fill: var(--celeste-marca); }
text.tableros__columna-valor { font-family: var(--fuente-texto); font-size: 13px; fill: var(--secundario-movil-carga); }
.tableros__mapa-tabla td.tableros__celda { font-variant-numeric: tabular-nums; }
.tableros__accion { text-align: right; white-space: nowrap; }
.tableros__migas .s-boton--enlace { min-height: var(--tamano-toque); }
.tableros__foto { display: block; min-height: var(--tamano-toque); }
@media (max-width: 899px) { .s-tabla td.tableros__accion { text-align: left; } .tableros__accion .s-boton { width: 100%; } }
/* Tableros v2: el color de cada tarjeta con punto y palabra; las acciones como botones del sistema. */
.tablero2__color { flex: none; display: inline-flex; }
.tablero2__color .s-estado { font-size: var(--letra-texto-chico); }
.s-boton.tablero2__accion { text-decoration: none; font-size: var(--letra-boton); }
.s-boton--enlace.tablero2__accion { padding: 0 var(--espacio-4); }
.s-boton--secundario.tablero2__accion { padding: 0 var(--espacio-12); color: var(--azul-marca); border: 1px solid var(--azul-marca); background: var(--blanco); }
summary.s-boton.tablero2__accion { list-style: none; display: inline-flex; }
.tablero2__herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-8); margin: 0 0 var(--espacio-12); }
.tablero2__explica--encabezado { margin: calc(-1 * var(--espacio-12)) 0 var(--espacio-12); max-width: 760px; }
.tablero2__area .s-estado, .tablero2__estado .s-estado { font-size: var(--letra-texto-tabla); }
.tablero2__calibracion.s-aviso { margin: 0 0 var(--espacio-16); }
.tablero2__reconocer .s-campo { max-width: 260px; margin: 0; }
/* === fin v16 · J2 === */
/* «Entrar como…» (solo copias de prueba): un bloque por puesto, una fila por persona. */
.entrar-como { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--espacio-16); }
.bloque-entrar-como { display: flex; flex-direction: column; gap: var(--espacio-8); padding: var(--espacio-16); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); min-width: 0; }
.bloque-entrar-como form { margin: 0; }
.entrar-como__puesto { margin: 0; font-family: var(--fuente-texto); font-size: var(--letra-rotulo); font-weight: var(--peso-rotulo); color: var(--secundario); }
.entrar-como__persona.s-boton { width: 100%; justify-content: flex-start; }
.entrar-como__nota { margin: 0 0 var(--espacio-12); font-size: var(--letra-texto-chico); color: var(--secundario); }

/* --- Tablero por puesto (modo noche v17, K7; maquetas diseno/v17/*) -------------------------------------- */
.tablero-indice .s-pestanas { margin-bottom: var(--espacio-12); }
.tablero-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--espacio-12); margin: 0 0 var(--espacio-16); }
.tablero-filtros .s-campo { margin: 0; min-width: 180px; flex: 1 1 180px; max-width: 280px; }
.tablero-filtros__prueba { display: inline-flex; align-items: center; gap: var(--espacio-8); min-height: var(--tamano-toque); font-size: var(--letra-texto); color: var(--secundario); }
.tablero-filtros__prueba input { width: 20px; height: 20px; }
.tablero-numeros { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-12); margin: 0 0 var(--espacio-16); }
@media (min-width: 640px) { .tablero-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tablero-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tablero-numero { display: flex; flex-direction: column; gap: var(--espacio-4); padding: var(--espacio-16); background: var(--blanco);
    border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); color: var(--texto); text-decoration: none; min-width: 0; container-type: inline-size; }
a.tablero-numero:hover { border-color: var(--azul-marca); }
.tablero-numero p { margin: 0; }
.tablero-numero__rotulo { font-size: var(--letra-rotulo); font-weight: var(--peso-rotulo); color: var(--secundario); }
.tablero-numero__valor { font-family: var(--fuente-titulos); font-size: var(--letra-cifra-grande); font-weight: var(--peso-cifra-grande); color: var(--azul-marca);
    font-variant-numeric: tabular-nums; white-space: nowrap; }
@supports (container-type: inline-size) { .tablero-numero__valor { font-size: 24px; } }
.tablero-numero__valor--vencido, .tablero-numero__valor--atencion { color: var(--avance-negativo); }
.tablero-numero__frase { font-size: var(--letra-texto); color: var(--secundario); }
.tablero-bloques { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-16); margin: 0 0 var(--espacio-16); }
@media (min-width: 1100px) { .tablero-bloques { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tablero-bloque--ancho { grid-column: 1 / -1; } }
.tablero-bloque { display: flex; flex-direction: column; gap: var(--espacio-8); padding: var(--espacio-16); background: var(--blanco);
    border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); min-width: 0; }
.tablero-bloque__rotulo { margin: 0; font-size: var(--letra-rotulo); font-weight: var(--peso-rotulo); color: var(--secundario); }
.tablero-bloque__rotulo a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tamano-toque); }
.tablero-bloque__rotulo a:hover { color: var(--azul-marca); text-decoration: underline; }
.tablero-bloque__conclusion { margin: 0; font-family: var(--fuente-texto); font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--texto); text-transform: none; }
.tablero-bloque__resalte { color: var(--avance-negativo); font-weight: 700; }
.tablero-bloque__grafico { width: 100%; }
.tablero-bloque__que-mide { margin: 0; padding-top: var(--espacio-8); border-top: 1px dashed var(--linea); font-size: var(--letra-texto-chico); color: var(--secundario); }
.tablero-bloque__ver { margin: 0; }
.tablero-bloque__ver a { display: inline-flex; align-items: center; min-height: var(--tamano-toque); font-weight: 700; color: var(--celeste-marca); }
.tablero-leyenda { display: flex; flex-wrap: wrap; gap: var(--espacio-12); margin: 0; padding: 0; list-style: none; font-size: var(--letra-texto-chico); color: var(--secundario); }
.tablero-leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.tablero-leyenda__marca { display: inline-block; width: 16px; height: 4px; border-radius: 2px; background: var(--celeste-marca); }
.tablero-leyenda__marca--proyectado { background: var(--calor-2-fondo); }
.tablero-leyenda__marca--necesario { background: var(--rotulo-tabla); }
.tablero-leyenda__marca--atencion { background: var(--avance-negativo); }
.tablero-leyenda__marca--terminado { background: var(--azul-marca); }
.tablero-leyenda__marca--declarado { width: 10px; height: 10px; border-radius: 50%; background: var(--blanco); border: 2px solid var(--celeste-marca); }
.tablero-leyenda__marca--verificado { width: 10px; height: 10px; border-radius: 50%; background: var(--azul-marca); }
.tablero-respaldo { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--espacio-12); margin: 0; padding-top: var(--espacio-8); border-top: 1px solid var(--separador-fila); }
.tablero-respaldo div { min-width: 0; }
.tablero-respaldo dt { font-size: var(--letra-texto-chico); color: var(--secundario); }
.tablero-respaldo dd { margin: 0; display: flex; flex-direction: column; }
.tablero-respaldo dd b { font-family: var(--fuente-titulos); font-size: var(--letra-texto-destacado); color: var(--texto); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tablero-respaldo dd span { font-size: var(--letra-texto-chico); color: var(--secundario); }
.tablero-tabla { margin: 0 0 var(--espacio-16); padding: var(--espacio-16); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); min-width: 0; }
.tablero-bloque .tablero-tabla { padding: 0; border: 0; margin: 0; }
.tablero-tabla__titulo { margin: 0 0 var(--espacio-4); font-size: var(--letra-texto-destacado); font-weight: 700; }
.tablero-tabla__fuente, .tablero-tabla__nota { margin: 0 0 var(--espacio-8); font-size: var(--letra-texto-chico); color: var(--secundario); }
.tablero-tabla__total td { border-top: 2px solid var(--linea); }
.tablero-miga { margin: 0 0 var(--espacio-8); font-size: var(--letra-texto); color: var(--secundario); }
.tablero-miga a { display: inline-flex; align-items: center; min-height: var(--tamano-toque); color: var(--celeste-marca); }
.tablero-notas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-16); }
@media (min-width: 1100px) { .tablero-notas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tablero-nota { padding: var(--espacio-16); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); font-size: var(--letra-texto); }
.tablero-nota__titulo { margin: 0 0 var(--espacio-8); font-size: var(--letra-texto-destacado); font-weight: 700; }
.tablero-nota ul { margin: 0; padding-left: 18px; }
.tablero-puesto__nota { font-size: var(--letra-texto-chico); color: var(--secundario); }
/* Gráficos (app/graficos.py): solo colores del sistema */
.grafico { display: block; width: 100%; height: auto; font-family: var(--fuente-texto); overflow: visible; }
.grafico__guia { stroke: var(--separador-fila); stroke-width: 1; }
.grafico__eje { font-size: 13px; fill: var(--secundario); }
.grafico__fila { font-size: 12px; fill: var(--texto); }
.grafico__valor { font-size: 12px; font-weight: 700; fill: var(--texto); }
.grafico__valor--atencion { fill: var(--avance-negativo); }
.grafico__meta { stroke: var(--secundario); stroke-width: 1.2; stroke-dasharray: 5 4; }
.grafico__meta-texto { font-size: 13px; fill: var(--secundario); }
.grafico__corte { stroke: var(--avance-negativo); stroke-width: 1; stroke-dasharray: 3 3; }
.grafico__corte-texto { font-size: 13px; font-weight: 700; fill: var(--avance-negativo); }
.grafico__barra.grafico--real { fill: var(--celeste-marca); }
.grafico__barra.grafico--proyectado { fill: var(--calor-2-fondo); }
.grafico__barra.grafico--necesario { fill: var(--rotulo-tabla); }
.grafico__barra.grafico--atencion { fill: var(--avance-negativo); }
.grafico__barra.grafico--terminado { fill: var(--azul-marca); }
.grafico__barra.grafico--aviso { fill: var(--amarillo-acento); }
.grafico__linea { fill: none; stroke-width: 2; }
.grafico__linea.grafico--real { stroke: var(--celeste-marca); }
.grafico__linea.grafico--proyectado { stroke: var(--celeste-marca); stroke-dasharray: 2 3; }
.grafico__linea.grafico--necesario { stroke: var(--rotulo-tabla); stroke-dasharray: 6 4; }
.grafico__punto.grafico--real { fill: var(--celeste-marca); }
.grafico__area { fill: var(--fondo-seleccion); }
.grafico__diferencia { stroke: var(--avance-negativo); stroke-width: 2.5; }
.grafico__declarado { fill: var(--blanco); stroke: var(--celeste-marca); stroke-width: 2; }
.grafico__verificado { fill: var(--azul-marca); }
@media (max-width: 899px) { .tablero-indice .s-pestanas { flex-wrap: wrap; overflow-x: visible; } }

/* --- Globales por partes (modo noche v17, K4) -------------------------------------------------------------- */
.globales__nota { font-size: var(--letra-texto); color: var(--secundario); margin: 0 0 var(--espacio-12); }
.globales__tarjeta { padding: var(--espacio-16); margin: 0 0 var(--espacio-16); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); min-width: 0; }
.globales__titulo { margin: 0 0 var(--espacio-8); font-size: var(--letra-texto-destacado); font-weight: 700; }
.globales__sub { display: block; font-size: var(--letra-texto-chico); font-weight: 400; color: var(--secundario); }
.globales__fecha { display: block; font-size: var(--letra-texto-chico); color: var(--secundario); }
.globales__accion { display: flex; flex-wrap: wrap; gap: var(--espacio-8); align-items: center; }
.globales__accion .s-campo__control { max-width: 170px; min-height: var(--tamano-toque); }
.globales__accion input[type="file"] { max-width: 100%; font-size: var(--letra-texto-chico); }
.globales__confirmar { display: flex; flex-wrap: wrap; gap: var(--espacio-12); align-items: center; margin: 0 0 var(--espacio-12); }
.globales__cuenta { margin: var(--espacio-12) 0 var(--espacio-4); font-size: var(--letra-texto); }
.globales__barra { width: 100%; height: 8px; accent-color: var(--celeste-marca); }
.globales__formulario { display: flex; flex-direction: column; gap: var(--espacio-8); margin-top: var(--espacio-12); }

/* v18, L3: resúmenes semanal (Administración) y mensual (Directorio), con la caja de cada obra.
   Maquetas diseno/v17/maqueta_resumen_*.png y diseno/v18/maqueta_tablero_caja_administracion.png. */
.resumen-cambiar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espacio-12); margin: 0 0 var(--espacio-12); }
.resumen-cambiar .s-pestanas { margin: 0; }
.resumen__frase { margin: 0 0 var(--espacio-16); font-size: var(--letra-texto-destacado); font-weight: 600; color: var(--texto); max-width: 70ch; }
.resumen__columnas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-24); margin: 0 0 var(--espacio-24); }
@media (min-width: 1100px) { .resumen__columnas { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.resumen-seccion { margin: var(--espacio-16) 0 var(--espacio-8); font-size: var(--letra-rotulo); font-weight: var(--peso-rotulo); color: var(--azul-marca); }
.resumen-detalle { display: block; font-weight: 400; font-size: var(--letra-texto-chico); color: var(--secundario); }
.resumen-tabla__grupo td { padding-top: var(--espacio-16); font-size: var(--letra-rotulo); font-weight: 700; color: var(--azul-marca); }
.resumen-tabla__otras td { color: var(--terciario); }
.resumen-lista { margin: 0 0 var(--espacio-12); padding-left: 18px; }
.resumen-lista li { margin: 0 0 var(--espacio-4); }
.resumen-decision { margin: 0 0 var(--espacio-12); padding: var(--espacio-12) var(--espacio-16); background: var(--blanco); border: 1px solid var(--linea); border-left: 4px solid var(--avance-negativo); border-radius: 12px; }
.resumen-decision h3 { margin: 0 0 var(--espacio-4); font-size: var(--letra-texto-destacado); }
.resumen-decision p { margin: 0; color: var(--secundario); }
.resumen-caja { margin: 0 0 var(--espacio-24); padding: var(--espacio-16); border: 1px dashed var(--linea); border-radius: 12px; }
.resumen-supuestos summary { display: inline-flex; align-items: center; min-height: var(--tamano-toque); cursor: pointer; font-weight: 700; color: var(--celeste-marca); }
@media (max-width: 899px) {
    .resumen-tabla__grupo td::before { content: none; }
    .resumen-tabla__grupo { border: 0 !important; background: transparent !important; padding: 0 !important; }
    .resumen-tabla td .s-estado { justify-content: flex-end; }
    .resumen-cambiar .s-pestanas { flex-wrap: wrap; overflow-x: visible; }
}
@media (min-width: 900px) { .resumen-tabla td[data-rotulo="Desde"], .resumen-tabla td[data-rotulo="Quién"], .resumen-tabla td[data-rotulo="Estado"] { white-space: nowrap; } }
@media (max-width: 899px) {
    .resumen td[data-rotulo="Qué hacer"], .resumen td[data-rotulo="Qué facturas"], .resumen td[data-rotulo="Qué entra"],
    .resumen td[data-rotulo="Detalle"], .resumen td[data-rotulo="Obra"], .resumen td[data-rotulo^="¿"] { display: block; text-align: left; }
    .resumen td[data-rotulo="Qué hacer"]::before, .resumen td[data-rotulo="Qué facturas"]::before, .resumen td[data-rotulo="Qué entra"]::before,
    .resumen td[data-rotulo="Detalle"]::before, .resumen td[data-rotulo="Obra"]::before, .resumen td[data-rotulo^="¿"]::before { display: block; margin-bottom: 2px; }
    .resumen td[data-rotulo^="¿"] .s-estado { justify-content: flex-start; }
}
/* v18, L2: la tabla exacta de cada bloque del Tablero. */
.tablero-exacta__plegable > summary { display: inline-flex; align-items: center; min-height: var(--tamano-toque); cursor: pointer; font-weight: 700; color: var(--celeste-marca); }
.tablero-exacta__plegable[open] > summary { margin-bottom: var(--espacio-8); }
.tablero-exacta__fuente { color: var(--secundario); font-size: var(--letra-texto-chico); }
.tablero-exacta .s-estado { white-space: nowrap; }
/* v18, L12: Condiciones como lista para marcar (molde diseno/v18/molde_condiciones_L12.png). */
.condiciones-pasos { margin: 0 0 var(--espacio-16); }
.condiciones-pasos .s-pasos { flex-wrap: wrap; }
.condiciones-bloque { margin: 0 0 var(--espacio-16); padding: var(--espacio-16); background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; }
.condiciones-bloque__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--espacio-8); align-items: baseline; margin: 0 0 var(--espacio-8); }
.condiciones-bloque__titulo { margin: 0; font-size: var(--letra-texto-destacado); font-weight: 700; color: var(--texto); }
.condiciones-bloque__nota { margin: 0; font-size: var(--letra-texto-chico); color: var(--secundario); }
.condiciones-linea { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-8) var(--espacio-16); padding: var(--espacio-12) 0; border-bottom: 1px solid var(--separador-fila); }
.condiciones-linea__marca { display: inline-flex; align-items: center; gap: var(--espacio-12); min-height: var(--tamano-toque); min-width: 15em; cursor: pointer; }
.condiciones-linea__marca input, .condiciones-casilla input { width: 22px; height: 22px; accent-color: var(--azul-marca); }
.condiciones-linea__valor { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-8); }
.condiciones-linea__pct { width: 5.5em; text-align: right; }
.condiciones-linea__vacio, .condiciones-linea__monto, .condiciones-fila__hoy { color: var(--secundario); font-size: var(--letra-texto); }
.condiciones-linea [hidden] { display: none !important; }
.condiciones-tabla { display: flex; flex-direction: column; }
.condiciones-fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-4) var(--espacio-16); padding: var(--espacio-12) 0; border-bottom: 1px solid var(--separador-fila); align-items: center; }
@media (min-width: 900px) { .condiciones-fila { grid-template-columns: 14em minmax(0, 1.6fr) minmax(0, 1fr); } }
.condiciones-fila--cabeza { font-size: var(--letra-rotulo); font-weight: 700; color: var(--terciario); padding-bottom: var(--espacio-4); }
@media (max-width: 899px) { .condiciones-fila--cabeza { display: none; } }
.condiciones-fila__valor { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-8); }
.condiciones-fila__valor .s-campo__control { width: auto; max-width: 100%; }
.condiciones-fila__valor [hidden] { display: none !important; }
.condiciones-fila__para { font-size: var(--letra-texto-chico); color: var(--secundario); }
.condiciones-casilla { display: inline-flex; align-items: center; gap: var(--espacio-8); min-height: var(--tamano-toque); }
.condiciones-mas { margin: var(--espacio-12) 0 0; }
.condiciones-mas > summary { display: inline-flex; align-items: center; min-height: var(--tamano-toque); cursor: pointer; font-weight: 700; color: var(--celeste-marca); }
.condiciones-guardar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--espacio-12); margin: var(--espacio-16) 0 0; }
.condiciones-respaldo { margin: 0; flex: 1 1 280px; }
/* La barra de los 9 pasos de la configuración, en una o dos líneas (molde M7). */
.condiciones-pasos .s-pasos { flex-direction: row; flex-wrap: wrap; gap: var(--espacio-4) var(--espacio-8); }
.condiciones-pasos .s-pasos__enlace { min-height: var(--tamano-toque); padding-right: var(--espacio-12); }
.condiciones-pasos .s-pasos__texto { white-space: nowrap; }
.condiciones-fila > [role="rowheader"] { font-size: var(--letra-texto); }
.condiciones-fila__valor { font-size: var(--letra-texto); }
.condiciones-fila__valor .condiciones-linea__pct, .condiciones-linea .condiciones-linea__pct { width: 5.5em; flex: 0 0 auto; }
/* v18, L11: Datos clave de la obra (molde diseno/v18/molde_datos_clave_L11.png). */
.datos-clave__pestanas .s-pestanas { margin: 0 0 var(--espacio-16); }
@media (max-width: 899px) { .datos-clave__pestanas .s-pestanas { flex-wrap: wrap; overflow-x: visible; } }
.datos-clave__app, .datos-clave__registro { margin: 0 0 var(--espacio-16); padding: var(--espacio-16); background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; }
.datos-clave__grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--espacio-12) var(--espacio-16); margin: var(--espacio-8) 0 var(--espacio-12); }
.datos-clave__dato { padding: 0 0 var(--espacio-8); border-bottom: 1px solid var(--separador-fila); min-width: 0; }
.datos-clave__dato dt { font-size: var(--letra-texto-chico); font-weight: 700; color: var(--secundario); }
.datos-clave__dato dd { margin: 2px 0 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.datos-clave__sin-cargar { font-weight: 700; color: var(--avance-negativo); }
.datos-clave__fuente { display: block; font-size: var(--letra-texto-chico); color: var(--secundario); }
.datos-clave__enlace { display: inline-flex; align-items: center; min-height: var(--tamano-toque); font-weight: 700; color: var(--celeste-marca); }
.datos-clave__cobra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--espacio-8); padding: var(--espacio-8) var(--espacio-12); background: var(--fondo-resumen); border-radius: 8px; }
.datos-clave__cobra p { margin: 0; }
.datos-clave__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--espacio-12); margin: 0 0 var(--espacio-12); }
.datos-clave__acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-8); }
.datos-clave__buscar { display: flex; flex-wrap: wrap; gap: var(--espacio-8); margin: var(--espacio-12) 0; }
.datos-clave__buscar .s-campo__control { flex: 1 1 220px; max-width: 420px; }
.datos-clave__tema { display: block; font-size: var(--letra-texto-chico); color: var(--secundario); }
.datos-clave__agregar, .datos-clave__quien { margin: var(--espacio-16) 0 0; }
.datos-clave__agregar > summary, .datos-clave__quien > summary, .datos-clave__historial > summary { display: inline-flex; align-items: center; min-height: var(--tamano-toque); cursor: pointer; font-weight: 700; color: var(--celeste-marca); }
.datos-clave__historial ul { margin: var(--espacio-4) 0 0; padding-left: 0; list-style: none; font-size: var(--letra-texto-chico); }
/* v18, L5: Conciliación abre en «Resumen». */
.conciliacion__tambien { margin: 0 0 var(--espacio-12); font-size: var(--letra-texto-chico); color: var(--secundario); }
.conciliacion__tambien a { display: inline-flex; align-items: center; min-height: var(--tamano-toque); font-weight: 700; color: var(--celeste-marca); }
.conciliacion__tambien a[aria-current] { color: var(--azul-marca); }
.conciliacion__resumen { margin-bottom: var(--espacio-12); }
/* v18, L9 (D2): Frentes por nivel; en el celular, 3 por nivel y «Ver N más». */
.frentes-grupo td { background: var(--fondo-resumen); color: var(--azul-marca); font-size: var(--letra-texto-chico); }
.frentes-ver-mas { display: none; }
@media (max-width: 899px) {
    .frentes-tabla__mas { display: none !important; }
    .frentes-ver-mas { display: block; border: 0 !important; background: transparent !important; padding: 0 !important; }
    .frentes-grupo { border: 0 !important; background: transparent !important; padding: var(--espacio-12) 0 0 !important; }
    .frentes-grupo td, .frentes-ver-mas td { background: transparent; }
}
@media (max-width: 899px) { #frentes-tabla td[data-rotulo="Nivel/área"] { display: none; } }
/* v18, L9 (D1): «Siguiente» al pie de cada paso de la configuración. */
.pasos-siguiente { display: flex; justify-content: flex-end; margin: var(--espacio-24) 0 var(--espacio-8); }
/* v18, L9 (D5): la palabra de estado debajo de cada cifra de la Portada. */
.portada-d__estado { display: block; margin-top: var(--espacio-4); font-size: var(--letra-texto-chico); }

/* ==== D · Constancia (v23b-D · B.1, diseno/d/LEEME.md y tokens.json) ======================================
   Una sola capa al final de sistema.css (carga después de estilo.css, que se retira en v24 y no se edita):
   letra en oración, títulos y cifras en Archivo Expanded 600, Manrope 500 en el texto, botones de 40 px en la
   computadora y 44 en el celular, íconos de 18 / 20 / 22 px, foco de 2 px separado 2 px. */
*, *::before, *::after { text-transform: none !important; letter-spacing: normal !important; }
body { font-family: var(--fuente-texto); font-size: var(--letra-texto); font-weight: var(--peso-texto); color: var(--texto); background: var(--blanco); }
h1, .s-encabezado__titulo, .encabezado-pagina__titulo, .hoy-encabezado__titulo {
    font-family: var(--fuente-titulos); font-stretch: normal; font-size: var(--letra-titulo-pagina); font-weight: 600;
    color: var(--texto); line-height: 1.2;
}
h2 { font-family: var(--fuente-texto); font-size: var(--letra-texto-destacado); font-weight: 700; color: var(--texto); }
h3 { font-family: var(--fuente-texto); font-size: var(--letra-texto-destacado); font-weight: 700; color: var(--texto); }
th { font-size: var(--letra-rotulo); font-weight: 500; color: var(--secundario); }
.s-tarjeta-numero__numero, .resumen-cifras__valor { font-weight: 600; color: var(--texto); }
/* Cifras con números tabulares. */
td, .s-tarjeta-numero__numero, [class*="__numero"], [class*="__cifra"], [class*="__monto"] { font-variant-numeric: tabular-nums; }

/* Botones: computadora 40 px al ancho de su texto; celular 44 px (la acción principal, 52). Radio 8. Nunca rojos. */
.s-boton, .boton, button.secundario, .boton-enlace, .boton-exportar {
    min-height: var(--boton-alto); border-radius: var(--radio-boton); font-size: var(--letra-boton); font-weight: 700;
    box-sizing: border-box;
}
.s-boton--secundario, .boton--secundario, button.secundario { border-color: var(--linea-fuerte); }
@media (max-width: 899px) {
    .s-boton--principal { min-height: 52px; }
}

/* Íconos: 18 px en texto y botones, 20 en el menú de la computadora, 22 en el del celular; trazo de 1,75. */
svg.icono { width: 18px; height: 18px; stroke-width: 1.75; flex: none; }
.marco-sup svg.icono, .marco-menu svg.icono { width: 20px; height: 20px; }
.marco-barra svg.icono, .s-hoja svg.icono { width: 22px; height: 22px; }
.hoy-boton svg.icono { width: 24px; height: 24px; }

/* Foco del teclado: 2 px celeste separado 2 px; sobre superficies azules, amarillo. Solo con el teclado. */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--foco) !important; outline-offset: 2px !important; }
/* El contorno queda afuera del botón (sobre el blanco): celeste también en los botones azules. Amarillo solo
   dentro de una superficie azul. */
.fondo-azul :focus-visible, .franja-entorno :focus-visible, [data-fondo="azul"] :focus-visible { outline-color: var(--amarillo-acento) !important; }
/* ==== FIN D · B.1 ==== */

/* ==== D · B.2: los componentes de D, desde un solo lugar ====================================================
   Sin tarjetas: a las tarjetas de hoy se les saca borde, fondo, radio y sombra desde acá, sin tocar plantillas; las
   secciones se separan por aire (32 px) y una línea de 1 px. Radio 12 y fondo «zona» solo en avisos y en lo que flota. */
.adm-caja__tarjeta, .adm-cert__tarjeta, .adm-ciclo__tabla, .adm-semana__caja, .adm-semana__tabla-caja,
.adm-dos-numeros__uno, .adm-obra, .adm-para-hacer, .adm-planilla,
.capitulos__tabla, .configurar-inicio__persona, .configurar__ficha, .configurar__tarjeta,
.ambito__capitulo, .cambios__tipo, .categorias-cliente__item, .configuracion-correcciones, .configuracion__prueba,
.configuracion__tabla, .control-interno__cifras, .control-interno__tarjeta, .correcciones-tarjeta,
.etapas-sugeridas, .fiscal-recorrido, .fuera-contrato, .importar-p7__tarjeta, .pendiente, .pendientes__indicadores,
.pendientes__tarjeta, .por-facturar__totales, .portada-d__indicadores, .portada-d__tarjeta,
.portada-excepciones, .portal-acta__respuesta, .portal-correcciones__cifras, .portal-pendientes__item,
.portal-reclamo__cargadas, .portal-reclamo__pendientes, .reconstruccion-etapas, .reinspeccion-cliente,
.revision-cliente, .tarjeta-condiciones, .tarjeta-modificacion, .tarjeta-reunion, .tarjeta-tabla, .usuario-nuevo,
dl.correcciones-cifras, dl.resumen-cifras,
.dir-legajo, .dir-ahorro, .dir-escape, .dir-obra-celular, .dir-semanas, .dir-tarjeta,
.mi-cuenta, .av-tarjeta, .hoy-tarjeta, .rescert__suma, .rescert__tarjeta, .reunion-envio__a,
.reunion-resumen__enlace, .traba, .yo-mas, .yo-mediciones,
.admin-tarjeta, .alertas__grupo, .bloque-entrar-como, .certificado-seccion--tarjeta, .condiciones-bloque,
.contrato-detalle__ficha, .contrato-seccion, .datos-clave__app, .datos-clave__registro, .globales__tarjeta,
.indicadores-residente, .indicadores__seccion, .portal-ficha, .resumen-decision, .reunion-vista-previa,
.s-pendiente, .tabla-contrato-marco, .tablero-bloque, .tablero-numero, .tablero-tabla,
.portada-d__plata, .tableros__tarjeta, .tablero2__tarjeta {
    border: 0 !important; border-top: 1px solid var(--linea) !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important;
}
/* Avisos y lo que flota: fondo «zona», radio 12, sin borde ni sombra. */
.recuadro-regularizar, .bloqueo, .s-confirmar, .hoy-trabas, .hoy-congelado, .hoy-falta, .dir-destraba, .dir-mirar,
.tarjeta-vacia, .pendientes__vacios, .verificando, .devolucion, .portal-firma, .tablero-nota {
    border: 0 !important; border-radius: var(--radio-flota) !important; background: var(--zona) !important; box-shadow: none !important;
}
.s-aviso--saber { background: var(--zona); border: 0; border-radius: var(--radio-flota); }
.s-aviso--regla { border-radius: var(--radio-flota); }
/* Sin sombras (lo que flota se distingue por el fondo y un borde fino). */
.marco-sup__lista, .marco-obra__lista, .s-hoja__panel, dialog { box-shadow: none !important; }
.marco-sup__lista, .marco-obra__lista { border: 1px solid var(--linea-fuerte) !important; border-radius: var(--radio-flota) !important; }
.marco-menu__persona { box-shadow: none !important; }
/* El título de pantalla no lleva trazo debajo. */
.s-encabezado__trazo, .linea-acento__amarillo { display: none !important; }

/* Estados: punto (o tilde) + palabra, siempre; el punto es decorativo (aria-hidden en la plantilla).
   Atención en ámbar oscuro, congelado y espera con su color; el rojo solo en lo crítico (D, regla 4). */
.s-estado__palabra { color: var(--texto); font-weight: 700; }
.s-estado--atencion .s-estado__punto, .s-envio--pendiente .s-estado__punto, .punto--ambar, .portada-d__punto--aviso,
.pendiente--aviso .pendiente__punto, .cambios__donde--aviso .cambios__punto, .tablero2__punto--amarillo,
.estado-punto--c-revision .estado-punto__marca, .estado-punto--atrasada .estado-punto__marca {
    background: var(--estado-atencion-punto) !important; border-color: var(--estado-atencion-punto) !important;
}
.s-estado--atencion .s-estado__palabra { color: var(--estado-atencion-texto); }
/* «vencido» del diccionario de la plantilla (agrupa vencida, no cumplido, devuelta, sin facturar…): punto de atención
   y la palabra en tinta. El rojo queda para lo crítico que la pantalla marca aparte (vencido de un error, sábado no). */
.s-estado--vencido .s-estado__punto { background: var(--estado-atencion-punto); border-color: var(--estado-atencion-punto); }
.s-estado--espera .s-estado__punto { background: var(--blanco); border: 2px solid var(--estado-espera); }
.s-estado--espera .s-estado__palabra { color: var(--estado-espera); }

/* La franja de cifras: divisores finos en lugar de cajas. Cada cifra en tinta, completa y tabular, 24 px; la que manda
   (clase o atributo por pantalla, B.4) en 40 px con una línea azul de 2 px arriba. */
.s-tarjeta-numero {
    border: 0 !important; border-top: 1px solid var(--linea) !important; border-radius: 0 !important; background: transparent !important;
    box-shadow: none !important; padding: 18px 0 !important;
}
.s-tarjeta-numero__numero { font-family: var(--fuente-titulos); font-size: var(--letra-cifra-grande); font-weight: 600; color: var(--texto); }
.s-tarjeta-numero__nombre { font-size: var(--letra-rotulo); font-weight: 500; color: var(--secundario); }

/* La barra del ciclo de certificación: una barra por paso; las hechas en azul con el tilde, la de «ahora» en celeste
   con la palabra «ahora» (para el lector, cada celda ya dice su paso y si está hecho, es el actual o falta). */
.adm-ciclo__celda { background: transparent !important; border: 0 !important; border-top: 6px solid var(--linea) !important;
    border-radius: 3px 3px 0 0 !important; min-height: 28px !important; height: auto !important; display: flex !important;
    align-items: flex-start !important; justify-content: flex-start !important; padding: 6px 0 0 !important; color: var(--celeste-marca) !important; }
.adm-ciclo__celda--hecho, .adm-ciclo__celda--fuera { border-top-color: var(--azul-marca) !important; }
.adm-ciclo__celda--actual { border-top-color: var(--celeste-marca) !important; }
.adm-ciclo__celda--actual .adm-ciclo__marca { visibility: hidden; display: inline-block; width: 0; }
.adm-ciclo__celda--actual .adm-ciclo__marca::after { visibility: visible; content: "ahora"; font-size: var(--letra-texto-chico); font-weight: 700; color: var(--azul-marca); }
.adm-ciclo__celda .adm-ciclo__marca { color: var(--celeste-marca); font-weight: 700; font-size: var(--letra-texto-chico); }

/* Menú de arriba en la computadora: una línea debajo de la página activa, sin «pastillas». */
.marco-sup { border-bottom: 1px solid var(--linea); box-shadow: none; }
.marco-sup__item { background: transparent !important; border-radius: 0 !important; color: var(--secundario) !important; font-size: var(--letra-menu); font-weight: 600; }
.marco-sup__item:hover { color: var(--texto); }
.marco-sup__item[aria-current="page"], .marco-sup__item--activo { color: var(--texto) !important; font-weight: 700; box-shadow: inset 0 -2px 0 var(--azul-marca) !important; }
.marco-sup__desplegable[open] > summary { background: transparent !important; color: var(--texto); }
.marco-sup__avatar { background: var(--fondo-seleccion); color: var(--azul-marca); }
/* El menú lateral de hoy (Presupuestos y el portal del cliente) pasa a ser el menú de arriba de D en la computadora:
   la marca a la izquierda, las opciones con una línea debajo de la activa, la obra, el logo de la empresa y las
   iniciales a la derecha. Solo CSS: la plantilla y app/permisos.py no cambian. */
@media (min-width: 900px) {
    body.con-marco:not(.marco-superior) { padding-left: 0 !important; }
    body.con-marco:not(.marco-superior) .contenido { margin-inline: auto; }
    body.con-marco:not(.marco-superior) .marco-menu {
        position: sticky; top: 0; bottom: auto; width: auto; height: 64px; z-index: 20; flex-direction: row; align-items: stretch;
        gap: var(--espacio-24); padding: 0 32px; overflow: visible; border-right: 0; border-bottom: 1px solid var(--linea);
    }
    body.con-marco:not(.marco-superior) .marco-menu__logo { height: 64px; padding: 0; border: 0; }
    body.con-marco:not(.marco-superior) .marco-menu__grupo { flex-direction: row; align-items: stretch; gap: var(--espacio-16); padding: 0; border: 0; }
    body.con-marco:not(.marco-superior) .marco-menu__titulo:not(.marco-menu__titulo--plegable) { display: none; }
    body.con-marco:not(.marco-superior) .marco-menu__item { min-height: 0; height: 100%; padding: 0 4px; border-radius: 0; background: transparent !important;
        box-shadow: none; color: var(--secundario); font-size: var(--letra-menu); }
    body.con-marco:not(.marco-superior) .marco-menu__item svg.icono { display: none; }
    body.con-marco:not(.marco-superior) .marco-menu__item[aria-current="page"] { color: var(--texto); font-weight: 700; box-shadow: inset 0 -2px 0 var(--azul-marca); }
    body.con-marco:not(.marco-superior) .marco-obra { order: 5; margin: 0; padding: 0; border: 0; align-self: center; }
    body.con-marco:not(.marco-superior) .marco-obra__boton { min-height: var(--boton-alto); border-color: transparent; }
    body.con-marco:not(.marco-superior) .marco-obra__iniciales, body.con-marco:not(.marco-superior) .marco-obra__rotulo { display: none; }
    body.con-marco:not(.marco-superior) .marco-obra__lista { left: auto; right: 0; min-width: 260px; }
    body.con-marco:not(.marco-superior) .marco-menu__relleno { order: 4; }
    body.con-marco:not(.marco-superior) .marco-menu__empresa { order: 6; margin: 0; padding: 0; }
    body.con-marco:not(.marco-superior) .marco-menu__persona { order: 7; position: static; margin: 0; padding: 0 !important; border: 0; align-self: center; }
    body.con-marco:not(.marco-superior) .marco-menu__cuenta { flex: none; }
    body.con-marco:not(.marco-superior) .marco-menu__puesto { display: none; }
}
/* La barra del celular: la activa con la línea azul arriba. */
.marco-barra__boton[aria-current="page"] { color: var(--texto); }
.marco-barra__boton::after { order: -1; position: absolute; top: 0; left: 15%; width: 70%; height: 2px; border-radius: 0; }
.marco-barra__boton[aria-current="page"]::after { background: var(--azul-marca) !important; }
/* Doble marca en el portal del cliente: la marca de la empresa arriba y «Generado con Consta» al pie. */
body[data-trato="usted"] .contenido::after { content: "Generado con Consta"; display: block; margin-top: var(--entre-secciones);
    padding-top: var(--espacio-16); border-top: 1px solid var(--linea); font-size: var(--letra-texto-chico); color: var(--terciario); }
/* Un estado sin palabra no muestra el punto solo (D, regla 5). */
.s-estado:has(.s-estado__palabra:empty) .s-estado__punto { display: none; }
/* «Urgente»: relleno en tinta con la palabra en blanco (no rojo); «Bajo»: relleno zona. */
[data-criticidad="urgente"] .s-estado { background: var(--estado-urgente-fondo); border-radius: var(--radio-estado); padding: 3px 8px; }
[data-criticidad="urgente"] .s-estado .s-estado__palabra { color: var(--blanco); }
[data-criticidad="urgente"] .s-estado .s-estado__punto { display: none; }
[data-criticidad="bajo"] .s-estado { background: var(--zona); border-radius: var(--radio-estado); padding: 3px 8px; }
[data-criticidad="bajo"] .s-estado .s-estado__punto { display: none; }
/* La marca «PRUEBA» de los datos armados: en tinta, sin rojo. */
.etiqueta-prueba { color: var(--texto) !important; border-color: var(--texto) !important; background: var(--blanco) !important; }
/* La marca de la barra de arriba del celular: zona de toque de 44 px. */
.marco-arriba__marca { min-width: var(--tamano-toque); justify-content: center; }
/* ==== FIN D · B.2 ==== */

/* ==== D · TINTA EN TÍTULOS Y CIFRAS (generado por scripts/d_tinta.py; no editar a mano) ==== */
.acta-acumulado__valor,
.acta-cifras__valor,
.acta-compromiso-texto,
.acta-documento .rotulo-seccion__numero,
.acta-documento .rotulo-seccion__titulo,
.adm-caja__neto-monto,
.adm-caja__titulo,
.adm-cert__cobrar dd,
.adm-cert__titulo,
.adm-dos-numeros__cifra,
.adm-para-hacer__titulo,
.adm-planilla__cifra,
.adm-semana__subtitulo,
.admin-renglones__renglon strong,
.alerta-fila__estado--en-curso,
.av-tarjeta__nivel,
.av-tarjeta__pct,
.balance-modificacion--contrato .balance-modificacion__neto dd,
.cambios__donde,
.cambios__tipo-titulo,
.cantidades__numero,
.capitulos__etapas,
.capitulos__excepcion,
.capitulos__numero,
.carga-acumulado__pct,
.certificado-cifras__valor,
.certificado-seccion > h2, .certificado-seccion__subtitulo,
.compromiso__logrado,
.compromiso__resultado--cumplido,
.compromisos-total strong,
.configuracion-correcciones__titulo,
.configuracion__estado,
.configurar-inicio__cuenta,
.configurar-inicio__nota,
.configurar__cuenta,
.configurar__ficha,
.configurar__tipo-nombre,
.confirmar__n,
.control-interno__valor,
.correcciones-codigo,
.correcciones-datos strong.correcciones-datos__fecha,
.cronograma__rotulo--correccion strong,
.cuenta-acceso__titulo,
.dir-mirar__titulo b,
.dir-tarjeta__numero,
.encabezado-pagina__titulo,
.excedente-verificar__detalle strong,
.fila-carga__form-pct,
.fila-carga__pct,
.fiscal-lista__pct,
.frentes-grupo td,
.fuera-contrato__propuesta,
.hoy-encabezado__titulo,
.hoy-lista__nivel,
.importar-p7__cifra,
.importar-p7__codigo,
.importar-p7__subtitulo,
.indicadores-residente__valor,
.indicadores__valor,
.lo-cert__numero,
.lo-cert__titulo,
.pendientes__valor,
.portada-d__cifra,
.portada-d__cumplimiento-pct,
.portada-d__plata-valor,
.portada-d__valor,
.portal-correcciones__codigo,
.portal-correcciones__valor,
.portal-pendientes__titulo,
.portal-reclamo__codigo,
.progreso-carga__progreso,
.rescert__nivel,
.rescert__numero,
.rescert__rotulo--azul,
.rescert__tabla tfoot .rescert__total,
.rescert__titulo,
.resumen-cifras__valor,
.resumen-seccion,
.resumen-tabla__grupo td,
.s-encabezado__titulo,
.s-tarjeta-numero__numero,
.tabla-modificacion-lineas__tipo,
.tablero-numero__valor,
.tablero2__calibracion strong,
.tablero2__estado,
.tablero2__etapa-valor,
.tablero2__obra-nombre,
.tablero2__valor,
.tableros__cifra-valor,
.tableros__numero,
.tablet-cobertura b,
.tablet-error__nivel,
.tablet-ficha__titulo,
.tablet-numero b,
.tablet-piso-detalle__titulo b,
.tablet-pisos__titulo span:first-child,
.tablet-tarea__rotulo,
.tarjeta-vacia__titulo,
.traba__nivel,
.verificando__declarado strong,
.verificando__pct,
.visor-fotos__numero,
.yo-mediciones__fila b,
.yo-titulo,
dl.correcciones-cifras dd,
dl.resumen-cifras dd,
h1,
table.tabla-datos .acta-meta { color: var(--texto) !important; }
/* Enlaces y botones de texto: del celeste al azul de la marca. */
.acta-envio__enlace,
.adm-enlace,
.boton-texto-celeste,
.casillero-celda__boton,
.conciliacion__tambien a,
.datos-clave__enlace,
.disponible__accion,
.encabezado__nav a:hover,
.enlace-atajo,
.enlace-excedente,
.fiscal-lista__fila:hover .fiscal-lista__frente,
.fotos-ver-enlace,
.frentes-tabla__enlace,
.hoy-lista__ver,
.portada-d__prueba a,
.portada-enlace,
.portal-pendientes__accion,
.recuadro-regularizar__enlace,
.residente-enlace,
.s-boton--enlace,
.tablero-bloque__ver a,
.tablero-miga a,
.tablero2__accion,
a.correcciones-codigo:hover,
a.correcciones-ver { color: var(--azul-marca) !important; }
a { color: var(--azul-marca); }
/* ==== FIN D · TINTA ==== */

/* ==== D · B.3: ancho medio y zoom al 200 % ==================================================================
   Un solo corte, 900 px (scripts/d_cortes.py cambió las media queries de todas las hojas): desde 900 px, el diseño de
   la computadora (menú arriba, contenido centrado de hasta 1180 px); debajo, el del celular (una columna centrada de
   hasta 560 px, menú abajo). A 720 px (la computadora con zoom al 200 %) nada se corre de costado. */
@media (max-width: 899px) {
    body.con-marco .contenido { max-width: 560px; margin-inline: auto; box-sizing: border-box; }
    /* Tablas de la computadora (clase d-reflujo en la plantilla): un bloque por fila, cada celda con el título de su
       columna (data-etiqueta, excepción (e) de la huella). Solo esas: una tabla escondida en el celular sigue escondida. */
    table.d-reflujo, table.d-reflujo tbody, table.d-reflujo tfoot, table.d-reflujo tr, table.d-reflujo td { display: block; width: auto; }
    table.d-reflujo thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    table.d-reflujo tr { padding: var(--espacio-12) 0; border-bottom: 1px solid var(--linea); }
    table.d-reflujo td { padding: 2px 0; border: 0; text-align: left; }
    table.d-reflujo td[data-etiqueta]::before { content: attr(data-etiqueta); display: inline-block; min-width: 9em; margin-right: var(--espacio-8);
        font-size: var(--letra-rotulo); font-weight: 500; color: var(--secundario); }
    td[data-etiqueta=""]::before { content: none; }
    .contenido img, .contenido svg, .contenido pre { max-width: 100%; }
}
/* ==== FIN D · B.3 ==== */

/* ==== D · B.4 · La franja de cifras y la cifra que manda (diseno/d/LEEME.md, tabla «La cifra que manda») ======
   En la computadora, las cifras de una franja van en columnas con divisores finos; la que manda abre la franja con su
   columna de 1,7fr, la línea azul de 2 px arriba y 40 px. En el celular, una debajo de la otra, separadas por una línea. */
@media (min-width: 900px) {
    body .adm-ciclo__numeros, body .adm-semana__numeros, body .adm-caja__numeros, body .dir-tarjetas, body .tablet-numeros, body .adm-planillas__tarjetas, body .adm-dos-numeros, body .portal-inicio__cifras {
        display: grid !important; grid-template-columns: minmax(0, 1.7fr); grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column;
        gap: 0 !important; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
    }
    body .adm-dos-numeros, body .tablet-numeros { grid-template-columns: minmax(0, 1fr); }
    body :is(.adm-ciclo__numeros, .adm-semana__numeros, .adm-caja__numeros, .dir-tarjetas, .tablet-numeros, .adm-planillas__tarjetas,
        .adm-dos-numeros, .portal-inicio__cifras) > * {
        border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
        padding: 18px 24px !important; margin: 0 !important;
    }
    body :is(.adm-ciclo__numeros, .adm-semana__numeros, .adm-caja__numeros, .dir-tarjetas, .tablet-numeros, .adm-planillas__tarjetas,
        .adm-dos-numeros, .portal-inicio__cifras) > * + * { border-left: 1px solid var(--linea) !important; }
    body :is(.adm-ciclo__numeros, .adm-semana__numeros, .adm-caja__numeros, .dir-tarjetas, .tablet-numeros, .adm-planillas__tarjetas,
        .adm-dos-numeros, .portal-inicio__cifras) > :first-child { padding-left: 0 !important; }
}
/* La que manda, por pantalla (la primera de su franja salvo el portal, donde es la del medio). */
body .adm-ciclo__numeros > [data-numero="aprobado"], body .adm-semana__numeros > #semana-cumplido, body .adm-caja__numeros > #caja-certificado, body .adm-planillas__tarjetas > [data-planilla="certificacion"], body .dir-tarjetas > :first-child, body .tablet-numeros > :first-child, body .portal-inicio__cifras > :nth-child(2):nth-last-child(2) {
    border-top: 2px solid var(--azul-marca) !important; margin-top: -1px !important;
}
body .adm-ciclo__numeros > [data-numero="aprobado"] .s-tarjeta-numero__numero, body .adm-semana__numeros > #semana-cumplido .s-tarjeta-numero__numero, body .adm-caja__numeros > #caja-certificado .s-tarjeta-numero__numero, body .adm-planillas__tarjetas > [data-planilla="certificacion"] .adm-planilla__cifra, body .dir-tarjetas > :first-child .dir-tarjeta__numero, body .tablet-numeros > :first-child b, body .portal-inicio__cifras > :nth-child(2):nth-last-child(2) .portal-correcciones__valor {
    font-family: var(--fuente-titulos); font-size: var(--letra-cifra-manda) !important; font-weight: 600; line-height: 1.1;
}
/* Las demás cifras de una franja con una que manda: 20 px. */
body :is(.adm-ciclo__numeros, .adm-semana__numeros, .adm-caja__numeros) > :not(:first-child) .s-tarjeta-numero__numero, body .dir-tarjetas > :not(:first-child) .dir-tarjeta__numero, body .tablet-numeros > :not(:first-child) b, body .adm-planillas__tarjetas > :not(:first-child) .adm-planilla__cifra { font-size: var(--letra-cifra) !important; }
@media (max-width: 899px) {
    body :is(.adm-ciclo__numeros, .adm-semana__numeros, .adm-caja__numeros, .dir-tarjetas, .adm-planillas__tarjetas, .portal-inicio__cifras) > * {
        border: 0 !important; border-bottom: 1px solid var(--linea) !important; border-radius: 0 !important; background: transparent !important;
        padding-left: 0 !important; padding-right: 0 !important;
    }
}
/* Dirección · Hoy: la que manda es la del medio, «Plata frenada por calidad». */
@media (min-width: 900px) {
    body .dir-tarjetas:has([data-dir-sabado]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr); }
}
body .dir-tarjetas:has([data-dir-sabado]) > :first-child { border-top: 1px solid var(--linea) !important; margin-top: 0 !important; }
body .dir-tarjetas:has([data-dir-sabado]) > :first-child .dir-tarjeta__numero { font-size: var(--letra-cifra) !important; }
body .dir-tarjetas:has([data-dir-sabado]) > :nth-child(2) { border-top: 2px solid var(--azul-marca) !important; margin-top: -1px !important; }
body .dir-tarjetas:has([data-dir-sabado]) > :nth-child(2) .dir-tarjeta__numero { font-family: var(--fuente-titulos); font-size: var(--letra-cifra-manda) !important; }
/* El «Ver …» de cada cifra de Dirección, con forma de botón (la cifra entera es el enlace). */
body .dir-tarjeta__enlace { align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--boton-alto); padding: 0 var(--espacio-16);
    border-radius: var(--radio-boton); background: var(--azul-marca); color: var(--blanco) !important; font-size: var(--letra-boton); margin-top: var(--espacio-12); }
body .dir-tarjeta { text-decoration: none; }
/* Residente · Certificación: la que manda es «Esta quincena», la tercera. */
@media (min-width: 900px) {
    body .rescert__tarjetas { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.7fr); gap: 0 !important;
        border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
    body .rescert__tarjetas > * { padding: 18px 24px !important; }
    body .rescert__tarjetas > * + * { border-left: 1px solid var(--linea) !important; }
    body .rescert__tarjetas > :first-child { padding-left: 0 !important; }
}
body .rescert__tarjetas > :nth-child(3) { border-top: 2px solid var(--azul-marca) !important; margin-top: -1px; }
body .rescert__tarjetas > :nth-child(3) .rescert__numero { font-size: var(--letra-cifra-manda) !important; }
body .rescert__tarjetas > :not(:nth-child(3)) .rescert__numero { font-size: var(--letra-cifra) !important; }
/* ==== FIN D · B.4 · franja ==== */

/* ==== D · B.4 · Residente (láminas ResHoy, ResAvance, ResTraba, ResReunion, ResCorregir, ResYo, ResCompu, ResPrecios) ====
   Sin tarjetas: filas separadas por una línea fina; la acción principal en azul; «te faltan» con un filete ámbar a la
   izquierda; el nivel del frente en la letra de los títulos. Contenido, el de la app. */
body .hoy-encabezado__titulo { color: var(--texto); font-weight: 600; }
body .hoy-falta { border: 0 !important; border-left: 3px solid var(--estado-atencion-punto) !important; border-radius: 0 !important;
    background: transparent !important; padding: 2px 0 2px var(--espacio-16) !important; }
body .hoy-falta--listo { border-left-color: var(--azul-marca) !important; }
body .hoy-botones { gap: 0; margin-bottom: var(--entre-secciones); }
body .hoy-boton { border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; padding: var(--espacio-12) 0; min-height: 64px; color: var(--texto); }
body .hoy-boton svg.icono { color: var(--azul-marca); }
body .hoy-boton__textos b { font-size: var(--letra-texto-destacado); color: var(--texto); }
body .hoy-boton__flecha { color: var(--secundario); }
body .hoy-boton--principal { border: 0; border-radius: var(--radio-flota); padding: var(--espacio-16) 20px; min-height: 88px; margin-bottom: var(--espacio-12); color: var(--blanco); }
body .hoy-boton--principal svg.icono { color: var(--blanco); }
body .hoy-boton--principal .hoy-boton__textos b { font-size: var(--letra-cifra); color: var(--blanco); font-weight: 700; }
body .hoy-boton--principal .hoy-boton__flecha { color: var(--blanco); }
body .hoy-lista { border: 0 !important; border-radius: 0 !important; overflow: visible; margin-bottom: var(--espacio-24); }
body .hoy-lista__titulo { padding: 0; font-size: var(--letra-texto-destacado); font-weight: 700; color: var(--texto); border-bottom: 1px solid var(--linea); }
body .hoy-lista__fila { padding: 0; min-height: 50px; border-bottom: 1px solid var(--linea); }
body .hoy-lista__fila:last-child { border-bottom: 1px solid var(--linea); }
body .hoy-lista__nivel { font-family: var(--fuente-titulos); font-weight: 600; color: var(--azul-marca) !important; }
body .hoy-trabas { border: 0 !important; background: var(--zona) !important; border-radius: var(--radio-flota) !important; margin-bottom: var(--espacio-12); }
body .hoy-tarjeta__titulo { padding-left: 0 !important; padding-right: 0 !important; }
body .hoy-tarjeta__vacio, body .hoy-tarjeta__pie { padding-left: 0 !important; padding-right: 0 !important; }
/* Avance: las tarjetas de cada frente, como filas. */
body .av-tarjeta { border-bottom: 1px solid var(--linea) !important; border-top: 0 !important; }
body .av-tarjeta--baja { border-left: 3px solid var(--estado-atencion-punto) !important; padding-left: var(--espacio-12) !important; }
body .av-tarjeta__resumen { padding-left: 0; padding-right: 0; }
body .av-tarjeta__form { padding-left: 0; padding-right: 0; }
body .av-tarjeta__nivel { font-weight: 700; color: var(--texto) !important; }
body .av-tarjeta__pct { font-weight: 600; color: var(--texto) !important; }
body .av-pestana { border-radius: var(--radio-boton); }
body .av-pestana[aria-current="page"] { background: var(--blanco); border: 2px solid var(--azul-marca); color: var(--texto); }
/* Trabas: cada traba como fila. */
body .traba { border-bottom: 1px solid var(--linea) !important; }
body .traba__nivel { font-family: var(--fuente-titulos); font-weight: 600; color: var(--azul-marca) !important; }
/* Yo y «Más»: listas con líneas. */
body .yo-mas a, body .yo-mediciones__fila { border-radius: 0; }
body .hoy-encabezado__titulo { font-size: var(--letra-titulo-pagina); }
/* En la computadora, «Te faltan …» es un aviso (zona ámbar, radio 12), como en la lámina ResCompu. */
@media (min-width: 900px) {
    body .hoy-cabeza .hoy-falta { border: 1px solid var(--aviso-borde) !important; border-radius: var(--radio-flota) !important;
        background: var(--aviso-fondo) !important; padding: 10px var(--espacio-16) !important; }
}
/* Los pasos − y + y los atajos: borde fino, la cifra en tinta; «Llegó a la meta» en azul sobre lo seleccionado. */
body .av-paso { border: 1px solid var(--linea-fuerte); color: var(--texto); font-weight: 600; }
body .av-paso:hover:not(:disabled), body .av-paso:focus:not(:disabled) { color: var(--texto); }
body .av-atajo { border-color: var(--linea-fuerte); border-radius: var(--radio-boton); }
body .av-atajo--meta { color: var(--azul-marca); border-color: var(--azul-marca); background: var(--fondo-seleccion); font-weight: 700; }
/* Los números del menú de arriba: discretos, en tinta (el vencido, en la palabra de atención). */
body .marco-sup__numero { background: var(--zona); color: var(--texto); border: 1px solid var(--linea-fuerte); }
body .marco-sup__numero--vencida { background: var(--blanco); color: var(--estado-atencion-texto); border-color: var(--estado-atencion-punto); }
body .marco-barra__numero { background: var(--texto); }
/* ==== FIN D · B.4 · Residente ==== */

/* ==== D · B.4 · El marco en todas las pantallas (láminas: el encabezado de 64 px y la barra del celular) ==== */
body .marco-sup__avatar, body .marco-arriba__avatar, body .marco-menu__avatar { background: var(--fondo-seleccion) !important; color: var(--azul-marca) !important; }
body .marco-barra__boton::after { left: 15% !important; width: 70% !important; height: 2px !important; top: 0; border-radius: 0 !important; }
body .marco-sup { min-height: 64px; }
/* Títulos de bloque: Manrope 700 de 15 px, en tinta, sin trazo debajo (Archivo queda para el título de pantalla y las cifras). */
body .adm-caja__titulo, body .adm-cert__titulo, body .adm-semana__subtitulo, body .adm-para-hacer__titulo, body .rescert__titulo, body .mas__titulo {
    font-family: var(--fuente-texto) !important; font-size: var(--letra-texto-destacado) !important; font-weight: 700 !important;
    color: var(--texto) !important; border-bottom: 0 !important; box-shadow: none !important; padding-bottom: 0 !important;
}
body :is(.adm-caja__titulo, .adm-cert__titulo, .adm-semana__subtitulo, .adm-para-hacer__titulo, .rescert__titulo)::after { content: none !important; }
/* ==== FIN D · B.4 · marco ==== */

/* ==== D · B.4 · Administración (láminas AdmHoy, AdmCert, AdmCertDet, AdmCongelado, AdmSemana, AdmCaja, AdmCelular) ==== */
/* «Desde el celular, solo mirar»: aviso que flota en lo seleccionado (radio 12, sin borde). */
body .adm-solo-mirar, body .se-hace-en-la-computadora { background: var(--fondo-seleccion) !important; border: 0 !important; border-radius: var(--radio-flota) !important; color: var(--texto) !important; }
/* «Antes de aprobar»: el tilde de lo controlado, sin caja. */
body .adm-cert__marca--bien { background: transparent !important; border: 0 !important; color: var(--celeste-marca) !important; }
/* «Para hacer»: filas con línea, el monto en tinta. */
body .adm-para-hacer { padding-top: var(--espacio-16) !important; }
body .adm-tarea { padding-left: 0 !important; padding-right: 0 !important; }
/* ==== FIN D · B.4 · Administración ==== */

/* ==== D · B.4 · Dirección (láminas DirHoy, DirObra, DirCalidad, DirFiscales, DirCelular, DirObra720) ==== */
/* «Para mirar» sin caja: una lista con líneas; «Lo que destraba el sábado» sí flota (zona, radio 12). */
body .dir-mirar { background: transparent !important; border-radius: 0 !important; border-top: 1px solid var(--linea) !important; padding-left: 0 !important; padding-right: 0 !important; }
body .dir-mirar__titulo b { color: var(--texto) !important; font-size: var(--letra-texto-destacado) !important; }
/* «En sombra · solo dirección»: una marca en la zona, sin borde punteado. */
body .dir-sombra { border: 0 !important; background: var(--zona); color: var(--secundario); border-radius: var(--radio-estado) !important; padding: 2px 8px !important; font-weight: 600; }
/* El legajo: fecha, qué y el detalle en tres columnas; en el celular, la fecha y el qué arriba y el detalle abajo. */
body .dir-legajo__fila { grid-template-columns: 64px 160px minmax(0, 1fr) auto; padding: 10px 0 !important; font-size: var(--letra-texto-tabla) !important; }
@media (max-width: 899px) {
    body .dir-legajo__fila { grid-template-columns: 64px minmax(0, 1fr); }
    body .dir-legajo__fila > :nth-child(n+3) { grid-column: 1 / -1; }
}
/* ==== FIN D · B.4 · Dirección ==== */

/* ==== D · B.4 · Fiscal, tablet 1180 × 820 (láminas FisDia, FisVisita, FisFrente, FisHallazgo, FisPendientes, FisComputos, FisCierre) ==== */
/* Los paneles sin caja: el recorrido por piso y el detalle se separan por aire y una línea arriba. */
body .tablet-pisos, body .tablet-piso-detalle, body .tablet-pregunta, body .tablet-ficha, body .tablet-paso, body .tablet-error {
    border: 0 !important; border-top: 1px solid var(--linea) !important; border-radius: 0 !important; background: transparent !important;
    padding-left: 0 !important; padding-right: 0 !important;
}
body .tablet-pisos__titulo { font-size: var(--letra-texto-destacado) !important; }
body .tablet-pisos__titulo span:first-child { color: var(--texto) !important; }
/* Cada piso es un botón de 44 px o más con borde fino (radio 8); el elegido, en lo seleccionado con borde azul. */
body .tablet-piso { border-color: var(--linea-fuerte) !important; border-radius: var(--radio-boton) !important; min-height: 48px; }
body .tablet-piso--elegido { background: var(--fondo-seleccion) !important; border-color: var(--azul-marca) !important; box-shadow: none !important; }
body .tablet-piso--elegido b { color: var(--azul-marca); }
body .tablet-piso-detalle__titulo b { color: var(--texto) !important; }
body .tablet-tarea__rotulo { background: var(--zona) !important; color: var(--texto) !important; border-radius: var(--radio-estado) !important; }
/* ==== FIN D · B.4 · Fiscal ==== */

/* ==== D · B.4 · Configurar la obra (láminas ConfInicio y Conf1 a Conf5) ==== */
/* Las listas de pasos sin caja: filas con línea; el paso de ahora, en lo seleccionado, sin borde. */
body .configurar-inicio__lista { border: 0 !important; border-radius: 0 !important; padding: 0 !important; border-top: 1px solid var(--linea) !important; }
body .configurar-inicio__fila { border-radius: 0 !important; }
body .configurar-inicio__fila--proximo { border: 0 !important; background: var(--fondo-seleccion) !important; }
body .s-pasos__paso--actual .s-pasos__enlace { border-width: 1px !important; color: var(--texto) !important; }
body .s-pasos__paso--actual .s-pasos__marca { background: var(--azul-marca) !important; color: var(--blanco) !important; }
/* La barra del avance de la jornada: el tramo hecho en celeste, como la barra «ahora» del ciclo. */
body .configurar-inicio__barra span { background: var(--celeste-marca) !important; }
/* ==== FIN D · B.4 · Configurar ==== */

/* ==== D · B.4 · Analista (lámina AnaCorrecciones; el resto de sus pantallas son las del residente) ==== */
/* El código de cada corrección es el enlace a su ficha: en el azul de la marca. */
body a.correcciones-codigo, body .correcciones-codigo { color: var(--azul-marca) !important; font-weight: 700; }
/* Las cifras de arriba como franja con divisores finos, en Archivo y tinta. */
body dl.correcciones-cifras dd { font-family: var(--fuente-titulos); font-weight: 600; font-size: var(--letra-cifra-grande); }
/* Los filtros: botones de radio 8 con borde fino; el elegido, en lo seleccionado. */
body .correcciones-filtros a, body .filtros-chip, body .s-pestanas__pestana { border-radius: var(--radio-boton) !important; }
/* ==== FIN D · B.4 · Analista ==== */

/* ==== D · B.4 · Cliente, portal (láminas CliInicio y CliCelular) y Presupuestos (PreAdicionales) ==== */
/* «Para revisar»: en la computadora, una fila por pendiente: el estado, lo que es y el botón a la derecha. */
@media (min-width: 900px) {
    body .portal-pendientes__item { display: grid !important; grid-template-columns: 220px minmax(0, 1fr) auto; grid-template-rows: auto auto;
        column-gap: var(--espacio-24); align-items: center; padding: var(--espacio-12) 0 !important; }
    body .portal-pendientes__item > :first-child { grid-row: 1 / span 2; }
    body .portal-pendientes__titulo { grid-column: 2; }
    body .portal-pendientes__detalle { grid-column: 2; }
    body .portal-pendientes__accion { grid-column: 3; grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center;
        min-height: var(--boton-alto); min-width: 220px; padding: 0 var(--espacio-16); border: 1px solid var(--linea-fuerte);
        border-radius: var(--radio-boton); font-weight: 700; text-decoration: none; }
    body .portal-pendientes__item:first-child .portal-pendientes__accion { background: var(--azul-marca); border-color: var(--azul-marca); color: var(--blanco) !important; }
    /* Las tres cifras: la del medio manda (restricciones a su cargo). */
    body .portal-inicio__cifras:has(> :nth-child(3)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr) !important; }
}
body .portal-pendientes__titulo { font-weight: 700; color: var(--texto); }
body .portal-correcciones__valor { font-family: var(--fuente-titulos); font-weight: 600; color: var(--texto) !important; }
/* ==== FIN D · B.4 · Cliente ==== */

/* ==== D · B.4 · B.5 · El resto de la app (pantallas sin lámina; scripts/reglas_d.py las recorre por rol y ancho) ====
   Zonas de toque: 44 px debajo de 1180 px y en pantallas táctiles, 24 px en la computadora. Los enlaces que van solos
   (no dentro de una frase) se agrandan sin cambiar cómo se ven; los de una frase quedan como están (WCAG 2.5.8). */
body .residente-enlace, body .boton-texto-celeste, body .s-boton--enlace, body .correcciones-ver, body .correcciones-codigo, body .cambios__codigo, body .portada-enlace, body .enlace-atajo, body .hoy-lista__ver, body .tablero-miga a, body .adm-enlace, body .datos-clave__enlace {
    display: inline-flex; align-items: center; min-height: var(--toque-minimo); min-width: var(--toque-minimo);
}
body summary { min-height: var(--toque-minimo); display: flex; align-items: center; }
:root { --toque-minimo: 40px; }  /* computadora: 24 px es el mínimo de D; 40, como los botones, para no achicar lo que ya medía más */
@media (max-width: 1179px), (pointer: coarse) { :root { --toque-minimo: 44px; } }
/* Botones: en la computadora, al ancho de su texto. Los que se estiraban a todo el ancho (avisar una traba; el
   certificado entre 900 y 1099 px, cuando el panel de la derecha baja debajo de la tabla). */
@media (min-width: 900px) {
    body .traba-nueva__enviar, body .reunion-envio__boton, body form .s-boton--principal:only-child { width: auto !important; max-width: max-content; }
}
@media (min-width: 900px) and (max-width: 1179px) {
    body .adm-cert .s-boton { width: auto !important; max-width: max-content; }
}
/* «0 %» de la semana: en gris de notas (el gris claro no llegaba a 4,5:1). */
body table.tabla-datos td.carga-semana--cero { color: var(--terciario) !important; }
/* La cifra que manda con un monto largo: 30 px debajo de 1180 px (40 px no entra en la columna), y se parte si hace falta. */
@media (max-width: 1179px) {
    body :is(.adm-ciclo__numeros > [data-numero="aprobado"] .s-tarjeta-numero__numero, .adm-semana__numeros > #semana-cumplido .s-tarjeta-numero__numero,
        .adm-caja__numeros > #caja-certificado .s-tarjeta-numero__numero, .adm-planillas__tarjetas > [data-planilla="certificacion"] .adm-planilla__cifra,
        .dir-tarjetas:not(:has([data-dir-sabado])) > :first-child .dir-tarjeta__numero, .dir-tarjetas:has([data-dir-sabado]) > :nth-child(2) .dir-tarjeta__numero,
        .rescert__tarjetas > :nth-child(3) .rescert__numero) { font-size: 30px !important; overflow-wrap: anywhere; }
}
/* Ninguna cifra empuja la página de costado: se parte dentro de su columna. */
body .s-tarjeta-numero, body .s-tarjeta-numero__cifras { min-width: 0; }
body .s-tarjeta-numero__numero { overflow-wrap: anywhere; white-space: normal !important; }
/* ==== FIN D · B.4 · B.5 ==== */

/* ==== D · B.4 · B.9 · Arreglos de la revisión independiente (docs/v23/REVISION_v23b.md) ==================== */
/* Alta 1 · Entre 900 y 1179 px el menú de arriba no entra en una línea: va en dos filas (la marca, la obra, la
   empresa y las iniciales arriba; las secciones abajo), como la lámina DirObra720. Nada queda tapado. */
@media (min-width: 900px) and (max-width: 1179px) {
    body .marco-sup { flex-wrap: wrap; height: auto !important; row-gap: 0; padding-top: 4px; }
    body .marco-sup__nav { order: 3; flex: 1 0 100%; overflow: visible; }
    body .marco-sup__derecha { margin-left: auto; }
    body.con-marco:not(.marco-superior) .marco-menu { flex-wrap: wrap; height: auto !important; }
}
/* El nombre de la obra del selector no empuja al menú: una línea, con puntos suspensivos. */
body .marco-sup__obra > summary, body .marco-sup__obra-una, body .marco-obra__nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
/* Alta 2 · Portal y Presupuestos con el menú de arriba: «Mi cuenta», «Su obra» y la obra siguen a la vista. */
body.con-marco:not(.marco-superior) .marco-menu__puesto { display: block !important; font-size: var(--letra-texto-chico); }
body.con-marco:not(.marco-superior) .marco-menu__titulo:not(.marco-menu__titulo--plegable) { display: flex !important; align-items: center; padding: 0 4px; font-size: var(--letra-texto-chico); }
body.con-marco:not(.marco-superior) .marco-obra__iniciales { display: flex !important; }
body.con-marco:not(.marco-superior) .marco-obra__rotulo { display: block !important; font-size: var(--letra-texto-chico); }
/* Alta 3 · Un monto nunca se parte: en una línea; entre 900 y 1179 px la franja va en dos columnas. */
body .s-tarjeta-numero__numero, body .adm-planilla__cifra, body .dir-tarjeta__numero, body .rescert__numero, body .adm-caja__neto-monto, body .adm-dos-numeros__cifra, body .portal-correcciones__valor, body .tablero-numero__valor { white-space: nowrap !important; overflow-wrap: normal !important; }
@media (max-width: 899px) {
    /* En el celular la columna es angosta: el monto corta después de «Gs.» y, si igual no entra, se parte antes que
       correr la pantalla de costado; las cifras de dos columnas van en 20 px. */
    body :is(.s-tarjeta-numero__numero, .adm-planilla__cifra, .dir-tarjeta__numero, .rescert__numero, .adm-caja__neto-monto,
        .adm-dos-numeros__cifra, .portal-correcciones__valor, .tablero-numero__valor) { white-space: normal !important; overflow-wrap: anywhere !important; }
    body .adm-dos-numeros__cifra, body .dir-tarjetas--celular .dir-tarjeta__numero { font-size: var(--letra-cifra) !important; }
}
@media (min-width: 900px) and (max-width: 1179px) {
    body .adm-ciclo__numeros, body .adm-semana__numeros, body .adm-caja__numeros, body .adm-planillas__tarjetas, body .dir-tarjetas, body .rescert__tarjetas {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-flow: row !important; }
    body :is(.adm-ciclo__numeros, .adm-semana__numeros, .adm-caja__numeros, .adm-planillas__tarjetas, .dir-tarjetas, .rescert__tarjetas) > :nth-child(odd) {
        border-left: 0 !important; padding-left: 0 !important; }
}
@media (min-width: 1180px) {
    /* Cuatro cifras en 1180 px: las que no mandan, con menos aire para que el monto completo entre. */
    body :is(.adm-ciclo__numeros, .adm-semana__numeros, .adm-caja__numeros) > * + * { padding-left: 16px !important; padding-right: 8px !important; }
}
/* Los montos de las tablas, en una línea (en la computadora; en el celular las tablas pasan a bloques). */
@media (min-width: 900px) {
    body .s-tabla__numero, body td.num, body td.numero, body .adm-caja__tabla td { white-space: nowrap; }
}
/* Los campos de una tabla, de 44 px de ancho como mínimo. */
body table input:not([type=checkbox]):not([type=radio]) { min-width: var(--toque-minimo); }
/* Media 5 · Dirección · Hoy: la que manda es la del medio también entre 820 y 1179 px. */
@media (max-width: 1179px) {
    body .dir-tarjetas:has([data-dir-sabado]) > :first-child .dir-tarjeta__numero { font-size: var(--letra-cifra) !important; }
}
/* Media 6 · Las cifras de Dirección en Archivo. */
body .dir-tarjeta__numero, body .tablero-numero__valor { font-family: var(--fuente-titulos) !important; font-weight: 600; }
/* Media 7 · Portal: el rótulo de cada cifra arriba del número. */
body .portal-correcciones__cifra { display: flex !important; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; }
/* Medias 9, 14 y 15 · Los pasos de Configurar, las filas de la Reunión y las correcciones vuelven a su ancho. */
body .s-pasos__enlace { width: 100%; box-sizing: border-box; }
/* Media 10 · Las fichas de niveles de Configurar (paso 1) vuelven a verse como fichas. */
body .configurar__ficha { border: 1px solid var(--linea-fuerte) !important; border-radius: var(--radio-estado) !important; padding: 2px 8px !important; }
/* Media 12 · La tablet parada (táctil, 820 px) usa todo el ancho; la columna de 560 px es para el celular y el zoom. */
@media (max-width: 899px) and (pointer: coarse) and (min-width: 700px) {
    body.con-marco .contenido { max-width: none; }
}
/* Media 13 · Un solo ítem activo en el menú de arriba: «Más» no se marca si ya hay una página activa a la vista. */
body .marco-sup__nav:has(a.marco-sup__item[aria-current="page"]) .marco-sup__item--activo { box-shadow: none !important; font-weight: 600; color: var(--secundario) !important; }
/* Media 16 · Opciones de un toque con radio 8 (avisar una traba, el hallazgo del fiscal) y el formulario sin panel. */
body .av-chip span, body .tablet-opcion span { border-radius: var(--radio-boton) !important; }
body .verificando--suelta { background: transparent !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
/* Enlaces de una tabla que van solos en su celda o en negrita: zona de toque mínima, sin cambiar el ancho. */
body td[data-rotulo] > a, body td[data-rotulo] > b > a, body li > b > a:only-child, body p > b > a:only-child { display: inline-flex; align-items: center; min-height: var(--toque-minimo); }
body td[data-rotulo="Pedido"] > a { min-width: var(--toque-minimo); }
/* Bajas · «Para mirar» y «Sin errores» sin caja; el número vencido del menú sin pastilla. */
body .dir-tabla td[colspan], body table td[colspan="8"] { background: transparent !important; }
body .marco-sup__numero--vencida { border: 0 !important; background: transparent !important; padding: 0 !important; }
/* ==== FIN D · B.4 · B.9 ==== */

/* v23c-2 · C2.1 y C2.2 (reglas A, E y G del mapa): el camino de arriba que se toca, la frase del Hoy, sus secciones y
   «Lo demás». Con las clases y tokens de la línea D; el diseño fino es de v23c-3. */
body .camino { margin: 0 0 12px; font-size: var(--letra-texto-chico); color: var(--secundario); }
body .camino__lista { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
body .camino__paso + .camino__paso::before { content: "›"; margin-right: 4px; color: var(--terciario); }
body .camino__paso a { color: var(--azul-marca); text-decoration: underline; display: inline-block; min-height: 24px; padding: 2px 0; }
body .camino__paso [aria-current] { color: var(--texto); }
body .hoy-frase { font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); color: var(--texto); margin: 8px 0 16px; }
body .hoy-seccion { margin: 0 0 20px; }
body .hoy-seccion__titulo { font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); color: var(--texto); margin: 0 0 8px; }
body .hoy-seccion__vacio, body .hoy-seccion__linea { color: var(--secundario); margin: 0; }
body .hoy-seccion__linea { color: var(--texto); }
body .hoy-demas { margin: 24px 0; border-top: 1px solid var(--linea); padding-top: 12px; }
body .hoy-demas__titulo { cursor: pointer; font-weight: var(--peso-texto-destacado); min-height: 44px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
body .hoy-demas__nota { font-weight: var(--peso-texto); color: var(--secundario); font-size: var(--letra-texto-chico); }
body .hoy-demas__rotulo { font-size: var(--letra-texto); font-weight: var(--peso-texto-destacado); margin: 16px 0 8px; }

/* --- v23c-2 · C2.95 · G2: el buscador «¿Qué querés hacer?» (app/buscador.py, js/buscador.js) ------------------------- */
body .buscador { position: relative; display: flex; align-items: center; min-width: 0; }
body .buscador__campo { width: 15rem; max-width: 100%; min-height: var(--tamano-toque); padding: 0 2.25rem 0 var(--espacio-12);
    border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--blanco); color: var(--texto);
    font: var(--letra-texto); font-family: var(--fuente-texto); }
body .buscador__campo:focus { outline: 2px solid var(--celeste-marca); outline-offset: 2px; }
body .buscador__tecla { position: absolute; right: var(--espacio-8); color: var(--secundario); font: var(--letra-texto-chico);
    border: 1px solid var(--linea); border-radius: 4px; padding: 0 var(--espacio-4); pointer-events: none; }
body .buscador__resultados { position: absolute; top: calc(100% + var(--espacio-4)); right: 0; z-index: 60; width: min(32rem, 92vw);
    max-height: 70vh; overflow-y: auto; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta);
    padding: var(--espacio-8) 0; }
body .buscador__resultados--pagina { position: static; width: 100%; max-height: none; box-shadow: none; margin-top: var(--espacio-16); }
body .buscador__grupo { margin: var(--espacio-8) var(--espacio-16) var(--espacio-4); color: var(--secundario); font: var(--letra-rotulo); }
body .buscador__lista { list-style: none; margin: 0; padding: 0; }
body .buscador__enlace { display: flex; flex-direction: column; gap: 2px; min-height: var(--tamano-toque); justify-content: center;
    padding: var(--espacio-4) var(--espacio-16); color: var(--texto); text-decoration: none; }
body .buscador__opcion[aria-selected="true"] .buscador__enlace, body .buscador__enlace:hover { background: var(--fondo-seleccion); }
body .buscador__texto { font: var(--letra-texto-destacado); }
body .buscador__detalle { color: var(--secundario); font: var(--letra-texto-chico); }
body .buscador__vacio { padding: var(--espacio-8) var(--espacio-16); }
body .buscador__vacio-titulo { margin: 0 0 var(--espacio-8); font: var(--letra-texto); }
body .buscador__nota { margin: var(--espacio-8) var(--espacio-16) 0; color: var(--secundario); font: var(--letra-texto-chico); }
body .buscador--pagina .buscador__campo, body .buscador--movil .buscador__campo { width: 100%; }
body .buscador--pagina, body .buscador--movil { width: 100%; margin-bottom: var(--espacio-16); }
body .buscador--movil { display: none; }
body .buscador--movil .buscador__resultados { left: 0; right: auto; width: 100%; }
/* La tablet del fiscal: una lupa que se abre al tocarla. */
body .buscador--lupa .buscador__campo { width: var(--tamano-toque); padding-right: 0; cursor: pointer; }
body .buscador--lupa .buscador__campo:focus { width: 15rem; cursor: text; }
body .buscador--lupa .buscador__tecla { display: none; }
body .buscador-resaltado { outline: 3px solid var(--celeste-marca); outline-offset: 3px; background: var(--fondo-seleccion);
    transition: outline-color .3s, background .3s; }
@media (max-width: 899px) {
    body .marco-sup .buscador { display: none; }
    body .buscador--movil { display: flex; }
}
body .descargar-tabla { display: table; margin: var(--espacio-8) 0 var(--espacio-4) auto; }  /* v23d-1: table, no block: el ancho de su texto (nunca a todo el ancho) */
/* Recién llegado, ronda 1 (alta): la caja no tapa el menú. Desde 1180 px el menú no se achica (no se superpone) y la
   caja es lo que cede espacio, hasta el tamaño de una lupa; al escribir se abre encima, sin correr nada. */
@media (min-width: 1180px) {
    body .marco-sup__nav { flex: 0 0 auto; }
    body .marco-sup__derecha { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
}
body .marco-sup .buscador { flex: 0 1 15rem; min-width: var(--tamano-toque); }
body .marco-sup .buscador__campo { width: 100%; }
body .marco-sup .buscador:focus-within .buscador__campo { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: min(20rem, 70vw); z-index: 61; }
body .marco-sup .buscador:focus-within .buscador__tecla { display: none; }
/* Reglas de D (toque 24 en la computadora, 44 debajo de 1180 px y en pantallas táctiles): el camino de arriba se toca
   cómodo. «Hoy» llega a 24 de ancho; debajo de 1180 px cada paso tiene 44 de alto. */
body .camino__paso a { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; padding: 0 4px; }
@media (max-width: 1179px), (pointer: coarse) {
    body .camino__paso a { min-height: var(--tamano-toque); min-width: var(--tamano-toque); }
    body .camino__lista { align-items: center; }
}
/* Recién llegado, ronda 2 (alta): si el menú y la derecha (búsqueda, obra, empresa e iniciales) no entran en una línea,
   a cualquier ancho, el menú pasa a la segunda fila (como entre 900 y 1179 px). Lo decide js/buscador.js al medir. */
@media (min-width: 900px) {
    body .marco-sup.marco-sup--dos-filas { flex-wrap: wrap; height: auto !important; row-gap: 0; padding-top: 4px; }
    body .marco-sup.marco-sup--dos-filas .marco-sup__nav { order: 3; flex: 1 0 100%; overflow: visible; }
    body .marco-sup.marco-sup--dos-filas .marco-sup__derecha { margin-left: auto; }
}
/* Revisión C2.10: la caja de búsqueda nunca queda en 80 px (si no entra, el menú pasa a la segunda fila); en el celular
   no se muestra la tecla «/». */
@media (min-width: 900px) { body .marco-sup .buscador { min-width: 11rem; } }
@media (max-width: 899px), (pointer: coarse) { body .buscador__tecla { display: none; } }

/* --- v23c-3 · C3.1 a C3.3: piezas comunes de las pantallas nuevas (catálogo, Fiscales, Graves, puntos de error) con la
   escala de C3.4: la frase de arriba 17 px semibold, secciones sin caja, notas 12 px, filas de formulario en grilla. --- */
body .d-frase { font-size: var(--letra-frase); font-weight: var(--peso-frase); color: var(--texto); margin: 8px 0 16px; line-height: 1.4; }
body .d-seccion { margin: 0 0 28px; }
body .d-seccion__titulo { font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); color: var(--texto); margin: 0 0 8px; }
body .d-nota { font-size: var(--letra-texto-chico); color: var(--secundario); margin: 0 0 12px; }
body span.d-nota { margin: 0; }
body .d-formulario-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 12px 16px; align-items: end; margin: 0 0 16px; }
body .d-formulario-grilla .s-campo { margin: 0; }
body .d-formulario-grilla__acciones { display: flex; gap: 8px; align-items: center; }
body .d-formulario-fila { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 16px; }
body .d-formulario-fila .s-campo__etiqueta { flex-basis: 100%; }
body .d-formulario-fila .s-campo__control { width: auto; max-width: 100%; }
body .d-fila--apagada td { color: var(--secundario); }
/* Pantalla 5 · «¿Qué está mal?» de la tablet: las cuatro preguntas en columna y el riesgo que sale solo. */
body .tablet-opciones--columna { flex-direction: column; align-items: flex-start; }
body .tablet-riesgo { font-size: var(--letra-texto); font-weight: var(--peso-frase); color: var(--texto); margin: 0 0 8px; }
body .tablet-opcion input:disabled + span { color: var(--terciario); border-style: dashed; cursor: not-allowed; }
/* Pantalla 6 · «El arreglo» al cerrar una corrección: tres preguntas de un toque y el contador de bocas. */
body .arreglo { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
body .arreglo__titulo { font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); color: var(--texto); padding: 0; margin: 0 0 8px; }
body .arreglo__pregunta { margin: 0 0 12px; }
body .arreglo__minutos { max-width: 9rem; margin-top: 8px; }
body .arreglo__contador { display: flex; align-items: center; gap: 8px; }
body .arreglo__bocas { width: 5rem; text-align: center; }
body .arreglo__menos, body .arreglo__mas { min-width: var(--tamano-toque); min-height: var(--tamano-toque); font-size: 18px; }
@media (min-width: 900px) and (pointer: fine) { body .arreglo__menos, body .arreglo__mas { display: none; } }
body .importar-p7__casilla { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tamano-toque); color: var(--texto); }
body .importar-p7__casilla input { width: 20px; height: 20px; }
body .asociar-fila { padding: 12px 0; border-bottom: 1px solid var(--linea); }
body .asociar-fila:last-child { border-bottom: 0; }
/* Pantalla 1 · «Urgente · Grave abierto» arriba de todo en el Hoy de Dirección: relleno en tinta, punto rojo, la palabra
   en blanco; el botón, nunca rojo. Pantallas 2 y 3: la cifra grande solo para lo que hay que decidir (28 px como máximo). */
body .d-urgente { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 16px; padding: 14px 16px;
    background: var(--texto); color: var(--blanco); border-radius: var(--radio-tarjeta); }
body .d-urgente__texto { margin: 0; flex: 1 1 24rem; font-size: var(--letra-texto); line-height: 1.5; }
body .d-urgente .s-estado__palabra { color: var(--blanco); margin-right: 6px; }
body .d-urgente .s-estado--critico .s-estado__punto { box-shadow: 0 0 0 2px var(--blanco); }
body .d-urgente__boton { background: var(--blanco) !important; color: var(--texto) !important; border-color: var(--blanco) !important; }
body .s-estado--critico .s-estado__punto { background: var(--estado-critico); border-color: var(--estado-critico); }
body .s-estado--critico .s-estado__palabra { color: var(--texto); }
body .d-cifras { margin: 0 0 16px; }
body .d-cifras__manda { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; }
body .d-cifra { font-family: var(--fuente-titulos); font-size: 28px; font-weight: 600; line-height: 1.1; color: var(--texto); }
body .d-cifras__linea { margin: 0; color: var(--secundario); }
body .d-cuenta { margin: 0 0 6px; font-size: var(--letra-texto-tabla); color: var(--texto); }
body .d-detalle { padding-top: 12px; border-top: 1px solid var(--linea); }
body .d-fila--total td { border-top: 1px solid var(--texto); font-weight: 600; }
@media (max-width: 899px), (pointer: coarse) { body .d-cifra { font-size: var(--letra-cifra); } body .d-frase { font-size: var(--letra-texto-destacado); } }

/* ==== v23c-3 · C3.4 · «Manda una frase»: la escala de la computadora, pestañas sin pastillas y rojo solo crítico ======
   (d009 A, reemplaza «una cifra manda»; h001 a h006, h010, h045, h049; puntos 6 a 11 de docs/v23/DESPUES_DE_v23.md)
   En la computadora (900 px o más, con mouse: notebooks de 1000 a 1280 px y pantallas de 1440): título 24 px, la frase de
   arriba 17 px semibold, texto 14, tablas 13, rótulos y notas 12 a 12,5, nada por debajo de 11,5 y no más de 8 tamaños.
   Una cifra grande (28 px como máximo, .d-cifra) SOLO cuando hay algo que decidir con ese número; las cifras de las
   franjas pasan a 20 px y ninguna «manda». Botones de 36 a 40 px y, en lugar de los −/+ del celular, botones de
   computadora. El celular y la tablet siguen con su escala de D. */
@media (min-width: 900px) and (pointer: fine) {
    :root { --letra-cifra-manda: 20px; --letra-texto-tabla: 13px; --letra-rotulo: 12.5px; }
    body .hoy-frase, body .d-frase, body [data-frase-ejecutado] { font-size: var(--letra-frase) !important; font-weight: var(--peso-frase) !important; line-height: 1.4; }
    body .s-tabla, body .s-tabla td { font-size: var(--letra-texto-tabla); }
    body .s-tabla th { font-size: 12px; }
    body :is(.adm-ciclo__numeros, .adm-semana__numeros, .adm-caja__numeros, .dir-tarjetas, .adm-planillas__tarjetas, .rescert__tarjetas, .portal-inicio__cifras) .s-tarjeta-numero__numero,
    body .dir-tarjeta__numero, body .adm-planilla__cifra, body .rescert__numero, body .portada-d__cifra, body .portal-correcciones__valor,
    body .s-tarjeta-numero__numero { font-size: 20px !important; }
    body :is(.adm-ciclo__numeros, .adm-semana__numeros, .adm-caja__numeros, .dir-tarjetas, .adm-planillas__tarjetas, .rescert__tarjetas, .portal-inicio__cifras) > * { border-top-width: 1px !important; border-top-color: var(--linea) !important; margin-top: 0 !important; }
    body .av-paso { height: 40px; min-width: 40px; font-size: 20px; }
    body .av-tarjeta__pct { font-size: 20px; }
    body .tablet-numeros b { font-size: 20px !important; }
    html body :is(.adm-ciclo__numeros > [data-numero="aprobado"] .s-tarjeta-numero__numero, .adm-semana__numeros > #semana-cumplido .s-tarjeta-numero__numero,
        .adm-caja__numeros > #caja-certificado .s-tarjeta-numero__numero, .adm-planillas__tarjetas > [data-planilla="certificacion"] .adm-planilla__cifra,
        .dir-tarjetas > * .dir-tarjeta__numero, .rescert__tarjetas > * .rescert__numero) { font-size: 20px !important; }
    body .tarjeta-vacia__texto { font-size: 13px; }
}

/* h004 · Los títulos de sección arrancan en el mismo borde que el resto (sin la sangría de la caja que ya no está). */
body .adm-para-hacer__cabeza, body .adm-para-hacer__vacio, body .adm-para-hacer__pie, body .adm-descuentos__cabeza { padding-left: 0 !important; padding-right: 0 !important; }

/* h005 y h049 · Pestañas sin cajas ni pastillas: una línea debajo de la activa, como el menú de arriba. */
body .s-pestanas, body .s-pestanas + .s-pestanas { display: flex; flex-wrap: wrap; gap: 0 20px; padding: 0; margin: 0 0 var(--espacio-16);
    background: none !important; border-radius: 0 !important; border-bottom: 1px solid var(--linea); width: auto; max-width: 100%; }
body .s-pestanas__pestana, body .s-pestanas + .s-pestanas .s-pestanas__pestana { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 0;
    margin-bottom: -1px; background: none !important; border: 0; border-bottom: 2px solid transparent; border-radius: 0 !important;
    color: var(--secundario); font-weight: 600; text-decoration: none; box-shadow: none !important; }
body .s-pestanas__pestana[aria-current="page"], body .s-pestanas + .s-pestanas .s-pestanas__pestana[aria-current="page"] {
    background: none !important; color: var(--texto); font-weight: 700; border-bottom: 2px solid var(--azul-marca); }
body .s-pestanas__pestana:hover { color: var(--texto); }
@media (max-width: 899px), (pointer: coarse) {
    body .s-pestanas { flex-wrap: nowrap; overflow-x: auto; }
    body .s-pestanas__pestana, body .s-pestanas + .s-pestanas .s-pestanas__pestana { min-height: var(--tamano-toque); white-space: nowrap; flex: none; }
    body .ajustes__pestanas .s-pestanas { display: flex; flex-wrap: wrap; overflow-x: visible; }
}

/* Puntos 6 y 7 · Rojo solo para lo crítico: «vencido», «sábado no» y el punto de Grave, con su palabra en tinta. Lo que
   antes iba en rojo y no es crítico (no cumplido, devuelta, rechazado, sin facturar, atender hoy) va con punto ámbar
   (el diccionario de _componentes/sistema/estado.html decide la clase). Los botones, nunca rojos. */
body :is(.s-estado--vencido, .s-estado--critico) .s-estado__punto { background: var(--estado-critico) !important; border-color: var(--estado-critico) !important; }
body :is(.s-estado--vencido, .s-estado--critico) .s-estado__palabra { color: var(--texto) !important; }
body .adm-planilla__frase { font-size: var(--letra-texto); font-weight: var(--peso-texto-destacado); color: var(--texto); margin: 4px 0 8px; }
body .dir-numeros-semana { margin: 16px 0; }
body .d-urgente .s-estado--critico .s-estado__palabra, body .d-urgente .s-estado--vencido .s-estado__palabra { color: var(--blanco) !important; }
body .hoy-seccion__linea + .hoy-seccion__linea { margin-top: 4px; }
/* h006 · «dato al dd/mm» una sola vez por pantalla, debajo del título: si el encabezado ya lo dice, las cifras no lo repiten. */
body:has(.s-encabezado[data-dato-al]) .s-tarjeta-numero__dato { display: none; }

/* ==== v23c-3 · C3.5 · Pantalla de inicio A (docs/v23c/INICIO_DEFINITIVA.md): título de 36 px en la computadora y 20 px en
   el celular, centrado, sobre el fondo azul con el corte del edificio (SVG propio). En la computadora, la frase y los tres
   pasos; en el celular, solo el título. Verificado en blanco con el tilde amarillo, en curso en celeste, lo que falta
   punteado; la grúa y la puesta a tierra, en blanco y amarillo. ==== */
body .inicio-a { background: var(--azul-marca); color: var(--blanco); border-radius: var(--radio-tarjeta); padding: 32px 24px 0;
    margin: 8px 0 24px; text-align: center; overflow: hidden; }
body .inicio-a__titulo { font-family: var(--fuente-titulos); font-size: 36px; font-weight: 600; line-height: 1.15; margin: 0 0 12px; color: var(--blanco); }
body .inicio-a__frase { font-size: var(--letra-frase); font-weight: var(--peso-frase); margin: 0 0 16px; color: var(--blanco); }
body .inicio-a__pasos { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 32px; list-style: none; padding: 0; margin: 0 0 16px;
    font-size: var(--letra-texto); color: var(--blanco); counter-reset: paso; }
body .inicio-a__pasos li { counter-increment: paso; }
body .inicio-a__pasos li::before { content: counter(paso) " · "; color: var(--amarillo-acento); font-weight: 700; }
body .inicio-corte { display: block; width: 100%; margin: 0 auto; }
body .inicio-corte--computadora { max-width: 960px; }
body .inicio-corte--celular { display: none; max-width: 260px; }
body .inicio-corte__suelo { stroke: var(--blanco); stroke-width: 2; stroke-opacity: 0.7; }
body .inicio-corte__columna { stroke: var(--blanco); stroke-width: 2; stroke-opacity: 0.35; }
body .inicio-corte__losa--verificado { fill: var(--blanco); }
body .inicio-corte__losa--en-curso { fill: var(--celeste-marca); stroke: var(--blanco); stroke-width: 1; }
body .inicio-corte__losa--falta, body .inicio-corte__losa--colgada { fill: none; stroke: var(--blanco); stroke-width: 1.5; stroke-dasharray: 4 3; stroke-opacity: 0.8; }
body .inicio-corte__tilde { fill: none; stroke: var(--amarillo-acento); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
body .inicio-corte__rotulo { fill: var(--blanco); font-size: 12px; font-family: var(--fuente-texto); }
body .inicio-corte__grua { stroke: var(--amarillo-acento); stroke-width: 3; }
body .inicio-corte__grua--fina { stroke-width: 1.5; }
body .inicio-corte__contrapeso { fill: var(--amarillo-acento); }
body .inicio-corte__cable { stroke: var(--blanco); stroke-width: 1.5; }
body .inicio-corte__tierra { stroke: var(--blanco); stroke-width: 2; stroke-opacity: 0.8; fill: none; }
@media (max-width: 899px) {
    body .inicio-a { padding: 20px 12px 0; }
    body .inicio-a__titulo { font-size: 20px; }
    body .inicio-a__frase, body .inicio-a__pasos { display: none; }
    body .inicio-corte--computadora { display: none; }
    body .inicio-corte--celular { display: block; }
}
@media (max-width: 899px), (pointer: coarse) { body .s-pestanas__pestana { min-width: var(--tamano-toque); justify-content: center; } }

/* v23d-1 · regla de textos 4: el cuadro de ayuda de un botón o enlace en la computadora (_componentes/sistema/ayuda.html,
   static/js/ayuda.js). Tinta y texto chico de la escala; sin sombra; no recibe toques (no tapa ningún control). En el
   celular y la tablet no aparece: el porqué va en la línea chica de debajo (.d-nota). */
.s-ayuda-ancla { position: relative; }
.s-ayuda-ancla:not(li) { display: inline-block; }
.s-ayuda { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: max-content; max-width: 22rem;
    padding: 6px 10px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-campo); background: var(--zona);
    color: var(--tinta); font-size: var(--letra-texto-chico); font-weight: var(--peso-texto-chico); line-height: 1.4;
    text-align: left; white-space: normal; pointer-events: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
    .s-ayuda-ancla--abierta > .s-ayuda { display: block; }
}
/* v23d-1 · texto 12: los campos que dependen del ítem del cliente se esconden con [hidden]. */
.s-campo[hidden] { display: none; }

/* ===== v23d-2 · D (reglas comunes de v23d-2, 6): solo var(--…) de tokens.css, sin cajas con borde en 3 lados y radio,
   sin sombras. Cada pieza, una línea en docs/v23d/COMPONENTES_v23d2.md. ===== */
body .d-nota--linea { display: block; margin: 2px 0 0; }
/* v23h · HC.10: la nota de una celda de números (la retención de IVA de lo que va a entrar) baja de línea en el celular. */
body .s-tabla__numero .d-nota--linea { white-space: normal; }
/* Un campo dentro de una celda de s.tabla («Acumulado a hoy», «Lo que contás»): en el celular, la tarjeta de la fila no se
   ensancha por el rótulo largo del campo. */
@media (max-width: 899px) { body .s-tabla td > .s-campo { min-width: 0; flex: 1 1 60%; text-align: left; white-space: normal; } }
/* El encabezado oculto de s.tabla en el celular: sus títulos apilados, para que una tabla de muchas columnas no ensanche la
   página (sigue oculto a la vista y lo lee el lector de pantalla). */
@media (max-width: 899px) { body .s-tabla thead tr, body .s-tabla thead th { display: block; } }
/* v23d-2c · E2c.1: el nivel del indicador 8 con su palabra (Rendimiento de los equipos), con los fondos --nivel-* de Tableros v2. */
body .d-nivel { display: inline-block; font-size: var(--letra-texto-chico); font-weight: 700; padding: 2px 8px; border-radius: var(--radio-etiqueta); }
body .d-nivel--bajo { background: var(--nivel-bajo-fondo); color: var(--avance-negativo); }
body .d-nivel--aceptable { background: var(--aviso-fondo); color: var(--aviso-texto); }
body .d-nivel--meta { background: var(--fondo-resumen); color: var(--azul-marca); }
body .d-nivel--sobresaliente { background: var(--nivel-sobresaliente-fondo); color: var(--celeste-marca); }
/* v23d-2c · E2c.1: la franja del Tablero de obras, cinco cifras de 20 px y ninguna manda (C3.4); «Entra en 8 semanas» es un
   enlace a la Caja (su envoltura no cuenta como columna aparte). */
@media (min-width: 900px) {
    body .dir-tarjetas.dir-franja { grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); }
    body .dir-tarjetas.dir-franja > :first-child { border-top: 0 !important; margin-top: 0 !important; }
    body .dir-franja__entra > .s-tarjeta-numero { border: 0 !important; padding: 0 !important; background: transparent !important; }
}
body .dir-franja .s-tarjeta-numero__numero { font-size: var(--letra-cifra) !important; }
/* v23d-2c · E2c.5 (pedido del dueño del 07/10; docs/v23c/INICIO_DEFINITIVA.md): la pantalla de ingreso en la computadora,
   en dos columnas y sin tener que bajar. Desde 900 px: a la izquierda el panel azul (sin radio) a todo el alto disponible,
   con el título, la frase, los tres pasos y el corte del edificio, que se achica con el alto sin deformarse; a la derecha
   el formulario, en una columna de 400 px como máximo. Con el dibujo de menos de 800 px de ancho, sin los rótulos N1 a
   N12 (no se leen). Debajo de 900 px, el ingreso del celular no cambia (.ingreso-dos es un bloque más). */
@media (min-width: 900px) {
    body:has(.ingreso-dos) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
    /* Revisión v23d-2d n.º 9: la versión de la app, también en el ingreso, abajo a la derecha sin sumar alto (sin bajar). */
    body:has(.ingreso-dos) .d-version { position: absolute; right: var(--espacio-32); bottom: var(--espacio-16); margin: 0; }
    body:has(.ingreso-dos) .contenido { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; max-width: none;
        margin: 0; padding: 0; box-sizing: border-box; }
    body .ingreso-dos { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc(400px + 2 * var(--espacio-48))); }
    body .ingreso-dos > .inicio-a { display: flex; flex-direction: column; margin: 0; border-radius: 0; padding: var(--espacio-48) var(--espacio-32) 0; }
    body .ingreso-dos .inicio-a__dibujo { flex: 1 1 0; min-height: 240px; container: corte / size; display: flex; align-items: flex-end;
        justify-content: center; }
    body .ingreso-dos .inicio-corte--computadora { width: min(100cqw, calc(100cqh * 24 / 11), 960px); height: auto; max-width: none;
        aspect-ratio: 24 / 11; margin: 0; }
    body .ingreso-dos > .cuenta-acceso--ingreso { align-self: center; justify-self: center; width: 100%; max-width: 400px; margin: 0;
        padding: var(--espacio-32) 0; box-sizing: border-box; }
}
@container corte (width < 800px) or (height < 366.67px) { body .ingreso-dos .inicio-corte__rotulo { display: none; } }
/* v23d-2c · E2c.2 (reglas comunes, 6: «Una obra» en tres columnas): grilla de 3 columnas desde 900 px, 32 px de aire entre
   columnas, una línea de 1 px arriba de cada una, sin fondo; rótulo arriba y dato abajo (<dl>). Debajo de 900 px, una columna. */
body .d-tres-columnas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-24); margin: var(--espacio-16) 0 var(--espacio-24); }
@media (min-width: 900px) { body .d-tres-columnas { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--espacio-32); } }
body .d-columna { border-top: 1px solid var(--linea); padding-top: var(--espacio-12); min-width: 0; }
body .d-columna__datos { margin: 0; }
body .d-columna__dato { padding: var(--espacio-8) 0; }
body .d-columna__dato dt { font-size: var(--letra-rotulo); font-weight: var(--peso-rotulo); color: var(--secundario); }
body .d-columna__dato dd { margin: 2px 0 0; font-size: var(--letra-texto); overflow-wrap: anywhere; }
/* v23d-2c · E2c.4 (Nueva obra): lo cargado en un paso hecho, rótulo arriba y dato abajo, sin caja; y la lista de lo que
   falta para confirmar (un estado por renglón, sin viñetas). */
body .d-resumen { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 8px 24px; margin: 0 0 12px; }
body .d-resumen dt { font-size: var(--letra-texto-chico); color: var(--secundario); }
body .d-resumen dd { margin: 0; font-size: var(--letra-texto); color: var(--texto); overflow-wrap: anywhere; }
body .d-resumen-lista { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
/* v23d-2d · H11: la versión de la app al pie de cada pantalla, chica y gris. */
body .d-version { margin: 32px 0 0; font-size: var(--letra-texto-chico); font-weight: var(--peso-texto-chico); color: var(--terciario); }
/* v23d-2d · E2d.5 (H7): las secciones desplegables del Hoy del residente (<details>, como «Lo demás»): una flecha gris
   antes del título que dice si está cerrada (›) o abierta (⌄); el título conserva el toque de 44 px de hoy-demas__titulo. */
body .hoy-desplegable > summary { list-style: none; }
body .hoy-desplegable > summary::-webkit-details-marker { display: none; }
body .hoy-desplegable > summary::before { content: "›"; display: inline-block; width: var(--espacio-12); color: var(--secundario);
    transition: transform .15s; }
body .hoy-desplegable[open] > summary::before { transform: rotate(90deg); }

/* ===== v23e · D (reglas comunes v23e, 3): solo var(--…) de tokens.css ===== */
/* v23e-c · EC.2: «Usar el nombre de la cuenta» solo con JavaScript (sin JS, el nombre se escribe a mano). */
html:not(.con-js) [data-usar-nombre-cuenta] { display: none; }
/* v23e-e · EE.1 (D9): «Ítems del cliente que cubre» con casillas (tercerizado/_tarea.html). Un <details> cerrado con
   el resumen; adentro, un <fieldset> por ítem y etapa y una fila de casilla por nivel, del alto del toque. */
.d-items__resumen { display: flex; align-items: center; min-height: var(--tamano-toque); cursor: pointer;
    font-size: var(--letra-texto); font-weight: var(--peso-etiqueta-campo); color: var(--azul-marca); }
.d-items__marco, .d-items__grupo { border: 0; margin: 0; padding: 0; min-width: 0; }
.d-items__marco { display: flex; flex-direction: column; gap: var(--espacio-8); padding-top: var(--espacio-8); }
.d-items__grupo { padding-top: var(--espacio-8); }
.d-items__titulo { font-size: var(--letra-texto-chico); font-weight: var(--peso-etiqueta-campo); padding: 0; }
.d-items__casilla { display: flex; align-items: center; gap: var(--espacio-8); min-height: var(--tamano-toque);
    font-size: var(--letra-texto); cursor: pointer; }
.d-items__casilla[hidden], .d-items__grupo[hidden] { display: none; }
.d-items__casilla input { width: var(--espacio-24); height: var(--espacio-24); flex: none; accent-color: var(--azul-marca); }

/* ===== v23f · D (v23f-b, FB.1): solo var(--…) de tokens.css ===== */
/* La fila de Por facturar con el aviso de la factura ya cargada con otro monto: el aviso y la casilla «Cambiar el monto
   de la factura» ocupan su propio renglón (no tapan los otros campos). */
.tabla-por-facturar__formulario:has(.s-campo--error) { flex-wrap: wrap; align-items: flex-start; }
.tabla-por-facturar__formulario:has(.s-campo--error) > .s-campo--error,
.tabla-por-facturar__formulario [data-confirmar-monto] { flex: 1 1 100%; }

/* ===== v23g · D (Caja de cada obra y cobro con ajustes): solo var(--…) de tokens.css, sin cajas, sin sombras y sin alto
   fijo: cada pieza toma el alto de su contenido (align-items: start, para que una fila no estire sus campos). ===== */
.d-cobro { display: flex; flex-direction: column; gap: var(--espacio-12); margin: 0 0 var(--espacio-16); }
.d-cobro__seccion { margin: var(--espacio-16) 0 var(--espacio-24); border-top: 1px solid var(--linea); padding-top: var(--espacio-12); }
.d-cobro__factura { margin: 0; }
.d-cobro__campos, .d-cobro__linea, .d-cobro__filtros, .d-cobro__comprobante { display: grid; gap: var(--espacio-8) var(--espacio-16);
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); align-items: start; }
.d-cobro__filtros { margin: 0 0 var(--espacio-12); align-items: end; }
.d-cobro__filtros > .s-boton { align-self: end; }
.d-cobro__ajustes { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--espacio-8); }
.d-cobro__ajustes > legend { padding: 0; }
.d-cobro__linea { border-top: 1px solid var(--linea); padding-top: var(--espacio-8); }
.d-cobro__cuentas { margin: 0; display: flex; flex-direction: column; max-width: 36rem; }
.d-cobro__cuenta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espacio-16); padding: var(--espacio-4) 0;
    font-size: var(--letra-texto); }
.d-cobro__cuenta dt { color: var(--texto); }
.d-cobro__cuenta dd { margin: 0; text-align: right; white-space: nowrap; }
.d-cobro__cuenta--total { border-top: 1px solid var(--linea-fuerte); font-weight: var(--peso-texto-destacado); }
.d-cobro__cuenta--nota dt { font-size: var(--letra-texto-chico); color: var(--secundario); }
.d-cobro__botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-8); }
.d-cobro__comprobante { margin-top: var(--espacio-4); grid-template-columns: minmax(0, 1fr); }
.d-cobro__cubierta { margin: 0; }
.d-cobro__tarea { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-8) var(--espacio-16); }
.d-anclas { margin: 0 0 var(--espacio-12); }
.d-cobro__contrato > summary { display: flex; align-items: center; min-height: var(--tamano-toque); cursor: pointer; }
/* Una celda con varias piezas (el n.º y su nota, el cobro y sus ajustes): un solo bloque, así en el celular (donde la
   celda es una fila flexible con su rótulo) no se reparten de costado. */
.d-cobro__celda { min-width: 0; overflow-wrap: anywhere; }
.s-tabla td .d-cobro__celda .d-nota--linea { white-space: normal; }

/* v23i · D: la franja del Tablero en el celular de Dirección, en una columna (IB.5, D2). Solo tokens. */
.dir-franja-celular { display: grid; grid-template-columns: 1fr; gap: var(--espacio-8); margin-bottom: var(--espacio-16); }