/* Fold · avi-19 · LA PANTALLA «VALOR DEL MES» (informe-mensual.js, PC-C, d23, 18/10/2026). Va dentro de la hoja de siempre (overlay,
   hoja-overlay: estilos.css), con los colores del tema (--texto, --texto-2, --costura, --acento-texto) en los dos modos. Secciones
   separadas por costuras finas, sin tarjetas, sin versalitas y sin barra de desplazamiento propia (se desplaza la hoja, como todas).
   El color nunca es la única señal: «firme / no firme» y cada aviso lo dicen con palabras. Controles de 44 px. Con la hoja estrecha (cuerpo hasta
   40rem, y a 320 px sin desbordar), cada fila de tabla se apila: cada celda con el nombre de su columna delante (data-imv-col); la
   tabla sigue siendo tabla para el lector de pantalla (roles explícitos en informe-mensual.js). Clases con el prefijo imv-; nada de
   lo de las demás pantallas se retoca. */

.imv-hoja .imv-titulo { margin: 0; }
.imv-titulo:focus { outline: none; }
.imv-titulo:focus-visible { box-shadow: var(--anillo-foco); border-radius: var(--r-control, 8px); }
.imv-estado { margin: 0; padding: 10px 20px 0; line-height: 1.45; color: var(--texto); overflow-wrap: anywhere; font-feature-settings: 'tnum' 1; }
.imv-estado:empty { display: none; }
.imv-estado:focus { outline: none; }
.imv-estado:focus-visible { box-shadow: var(--anillo-foco); border-radius: var(--r-control, 8px); }
.imv-error { margin: 0; padding: 10px 20px 0; color: var(--ambar-texto); line-height: 1.45; overflow-wrap: anywhere; }
.imv-error:empty { display: none; }
/* El cuerpo es el contenedor de las tablas: se apilan según el ancho de la HOJA, no el de la ventana (la hoja de siempre mide 480 px). */
.imv-cuerpo { min-width: 0; container-type: inline-size; }
/* En pantalla ancha, la hoja se ensancha (como la Agenda) para que las tablas quepan a lo ancho. */
@media (min-width: 861px) { .imv-hoja { width: min(760px, 100vw); } }

.imv-selector { display: grid; gap: 4px; margin: 0 0 var(--e-3, 12px); max-width: 26rem; }
.imv-etiqueta { font-size: .86rem; font-weight: 600; color: var(--texto); }
.imv-select { font: inherit; min-height: 44px; width: 100%; max-width: 100%; padding: 0 10px; color: var(--texto); background: var(--superficie, transparent);
  border: 1px solid var(--costura-fuerte, var(--costura)); border-radius: var(--r-control, 8px); }
.imv-select:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 2px; }
.imv-ayuda { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--texto-2); }

.imv-seccion { padding: var(--e-3, 12px) 0; border-top: 1px solid var(--costura); min-width: 0; }
.imv-h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 650; line-height: 1.35; color: var(--texto); overflow-wrap: anywhere; }
.imv-periodo, .imv-linea, .imv-explica, .imv-pregunta { margin: 0 0 6px; line-height: 1.5; color: var(--texto); max-width: 72ch; overflow-wrap: anywhere; font-feature-settings: 'tnum' 1; }
.imv-periodo { color: var(--texto-2); font-size: .9rem; }
.imv-nota { margin: 6px 0 0; font-size: .84rem; line-height: 1.45; color: var(--texto-2); max-width: 72ch; overflow-wrap: anywhere; }
.imv-vacio { margin: var(--e-3, 12px) 0; line-height: 1.5; color: var(--texto); max-width: 72ch; overflow-wrap: anywhere; }
.imv-avisos, .imv-fuera { margin: 4px 0 8px; padding-left: 1.1rem; line-height: 1.45; color: var(--texto); max-width: 72ch; }
.imv-aviso, .imv-fuera li { margin: 0 0 4px; overflow-wrap: anywhere; font-feature-settings: 'tnum' 1; }
.imv-fuera { color: var(--texto-2); font-size: .9rem; }
/* «Cifra firme» / «no firme»: con palabras; el borde solo acompaña. */
.imv-firmeza { display: inline-block; margin: 0 0 6px; padding: 1px 8px; font-size: .82rem; font-weight: 600; line-height: 1.5; color: var(--texto);
  border: 1px solid var(--costura-fuerte, var(--costura)); border-radius: var(--r-pastilla, 999px); }
.imv-no-firme { border-style: dashed; color: var(--ambar-texto); }

.imv-acciones { display: grid; gap: 6px; margin: 8px 0 0; justify-items: start; }
.imv-confirmar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; }
.imv-confirmar .imv-pregunta { flex-basis: 100%; }
.imv-boton { font: inherit; font-size: .9rem; min-height: 44px; padding: 0 14px; color: var(--texto); background: transparent; cursor: pointer; max-width: 100%;
  border: 1px solid var(--costura-fuerte, var(--costura)); border-radius: var(--r-control, 8px); white-space: normal; text-align: left; }
.imv-boton:hover { border-color: var(--acento-texto); }
.imv-boton:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 2px; }
.imv-boton:disabled { opacity: .55; cursor: default; }

/* Las tablas: a lo ancho cuando caben; en estrecho, apiladas. */
.imv-tabla { width: 100%; margin: 8px 0 0; border-collapse: collapse; font-size: .88rem; line-height: 1.45; color: var(--texto); font-feature-settings: 'tnum' 1; }
.imv-caption { caption-side: top; text-align: left; padding: 0 0 4px; font-size: .84rem; color: var(--texto-2); overflow-wrap: anywhere; }
.imv-tabla th, .imv-tabla td { padding: 6px 8px 6px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--costura); overflow-wrap: anywhere; }
.imv-tabla thead th { font-size: .8rem; font-weight: 600; color: var(--texto-2); }
.imv-tabla tbody th { font-weight: 600; }
/* El mes que se está viendo (aria-current en la fila): en negrita y con una raya a la izquierda, no solo con color. */
.imv-elegida th, .imv-elegida td { font-weight: 650; }
.imv-elegida th { box-shadow: inset 3px 0 0 var(--acento-texto); padding-left: 8px; }

@container (max-width: 40rem) {
  .imv-tabla, .imv-tabla tbody, .imv-tabla tr, .imv-tabla th, .imv-tabla td, .imv-caption { display: block; width: auto; }
  /* Las cabeceras de columna siguen ahí para el lector de pantalla, pero no ocupan sitio: cada celda dice la suya delante. */
  .imv-thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .imv-tabla tbody tr { padding: 6px 0; border-bottom: 1px solid var(--costura); }
  .imv-tabla tbody th, .imv-tabla tbody td { padding: 2px 0; border-bottom: 0; }
  .imv-tabla tbody td::before { content: attr(data-imv-col) ': '; color: var(--texto-2); font-weight: 600; }
  .imv-selector { max-width: none; }
}