/* Monitor Brasil · capa de experiencia compartida. Datos, semántica cromática y fuentes locales. */
:root {
  --motion-in: 240ms;
  --motion-out: 160ms;
  --motion-feedback: 180ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --barra-alto: 80px;
  --pres-controles-alto: 88px;
  --control: 44px;
  --radio-control: 4px;
  --espacio-xs: 4px;
  --espacio-sm: 8px;
  --espacio-md: 16px;
  --espacio-lg: 24px;
  --espacio-xl: 32px;
  --espacio-seccion: 48px;
}
.od-icon { display: inline-block; inline-size: var(--od-icon-size, 20px); block-size: var(--od-icon-size, 20px); flex: none; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--barra-alto) + var(--espacio-lg)); scrollbar-gutter: stable; }
body { line-height: 1.5; }
::selection { background: var(--suave-activo); color: var(--texto); }
* { scrollbar-color: var(--acero) var(--fondo); scrollbar-width: thin; }
input, select, textarea { accent-color: var(--navy); caret-color: var(--navy); }
button, select, summary { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.solo-lector { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar-contenido { position: fixed; top: var(--espacio-md); left: var(--espacio-md); z-index: 4000; padding: 12px 20px; background: var(--texto); color: var(--tarjeta); transform: translateY(-180%); }
.saltar-contenido:focus { transform: translateY(0); }
.cabecera-identidad { padding: var(--espacio-xl) var(--espacio-lg); align-items: center; }
.cabecera-textos { gap: 12px; }
.cabecera-marca { font-size: 18px; letter-spacing: -.02em; line-height: 1.2; }
.cabecera-sub { font-size: 11px; letter-spacing: .02em; }
.cabecera-nav { padding: var(--espacio-md) 12px; gap: var(--espacio-xs); }
.cabecera-rotulo { padding: var(--espacio-lg) 12px var(--espacio-sm); letter-spacing: .08em; font-size: 11px; }
.cabecera .pestana, .cabecera .pestana[aria-current="page"] { min-height: var(--control); padding: 12px; border: 0; border-radius: var(--radio-control); font-size: 14px; line-height: 1.4; }
.cabecera .pestana[aria-current="page"] { font-weight: 600; color: var(--navy); }
.cabecera .pestana-inicio { display: flex; }
.pestana-num { font-size: 11px; }
.cabecera-ultimo { font-size: 12px; padding: var(--espacio-lg); }
.menu-movil { display: none; }
.barra-pagina { min-height: 80px; padding: var(--espacio-md) var(--margen); gap: var(--espacio-md); background: var(--tarjeta); backdrop-filter: none; }
.barra-titulo-nombre { margin: 0; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.25; }
.barra-titulo-rotulo { display: none; }
.barra-presentar, .accion-secundaria { display: inline-flex; align-items: center; justify-content: center; gap: var(--espacio-sm); min-height: var(--control); height: auto; padding: var(--espacio-sm) var(--espacio-md); font: 500 14px/1.4 var(--fuente); border-radius: var(--radio-control); white-space: nowrap; }
.accion-secundaria { background: var(--tarjeta); color: var(--navy); border: 1px solid var(--borde-fuerte); }
.salto-seccion { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 40%; }
.salto-seccion > span { font-size: 13px; color: var(--texto-2); }
.salto-seccion select { min-width: 0; width: 100%; max-width: 288px; min-height: var(--control); padding: var(--espacio-sm) 12px; border: 1px solid var(--borde); border-radius: var(--radio-control); background: var(--tarjeta); color: var(--texto); font: 400 14px/1.5 var(--fuente); }
.contenedor { gap: var(--espacio-seccion); padding: 0 var(--margen) var(--espacio-seccion); }
.apertura { padding: var(--espacio-lg) 0; }
.indice { gap: var(--espacio-xs) var(--espacio-sm); }
.indice-rotulo { flex-basis: 100%; font: 500 12px/1.5 var(--fuente); letter-spacing: .02em; }
.indice-item { display: inline-flex; align-items: center; min-height: 40px; padding: var(--espacio-sm) 12px; border-radius: var(--radio-control); font-size: 14px; line-height: 1.4; }
.indice-item[aria-current="location"] { color: var(--navy); background: var(--suave-activo); font-weight: 600; }
.indice-num { font-size: 11px; }
.seccion { scroll-margin-top: var(--espacio-lg); padding-top: var(--espacio-lg); border-top-width: 1px; border-color: var(--borde-fuerte); }
.riel { gap: 12px; }
.riel-nombre { font-size: 24px; line-height: 1.25; text-wrap: balance; }
.riel-pregunta { font-size: 16px; line-height: 1.6; }
.riel-frecuencia, .riel-bloque-rotulo, .riel-libre-nota { font-size: 12px; line-height: 1.5; }
.riel-bloque-rotulo { font-family: var(--fuente); letter-spacing: .02em; }
.riel-bloque-cifra { font-size: clamp(28px, 2.2vw, 36px); white-space: nowrap; }
.tarjeta { padding: var(--espacio-md); gap: var(--espacio-sm); border-radius: 4px; }
.tarjeta-cabecera { gap: var(--espacio-sm); }
.tarjeta-cabecera > :first-child { min-width: 0; }
.tarjeta-titulo { font-size: 15px; line-height: 1.4; letter-spacing: 0; text-wrap: pretty; }
.tarjeta-sub { font-size: 12px; line-height: 1.5; }
.tarjeta-pie, .tarjeta-nota { margin: 0; font: 400 11px/1.5 var(--fuente); text-transform: none; letter-spacing: 0; }
.tarjeta-agrandar { display: inline-flex; width: 36px; height: 36px; opacity: 1; color: var(--texto-2); border-color: transparent; transition: none; }
.tarjeta-agrandar .od-icon { width: var(--od-icon-size, 20px); height: var(--od-icon-size, 20px); }
.tarjeta-acciones { flex-wrap: wrap; justify-content: flex-end; max-width: 42%; gap: var(--espacio-xs); }
.tarjeta-ajustar { min-height: 36px; font-size: 12px; padding: var(--espacio-xs) var(--espacio-sm); }
.tarjeta-controles { flex-wrap: wrap; gap: var(--espacio-sm); margin: 0; }
.riel-seg { display: flex; flex-wrap: wrap; border-radius: var(--radio-control); overflow: visible; }
.riel-seg button { flex: 1 1 auto; display: block; min-height: 40px; padding: var(--espacio-sm) 12px; font-size: 13px; line-height: 1.4; border: 0; border-radius: 2px; }
.riel-seg button:focus-visible { outline-offset: 2px; }
.riel-desp, .riel-multi { font-size: 14px; line-height: 1.5; border-radius: var(--radio-control); }
.riel-desp { min-height: var(--control); padding: var(--espacio-sm) 12px; }
.riel-multi > summary { min-height: var(--control); padding: 10px 12px; }
.riel-multi[open] > summary { white-space: normal; overflow: visible; }
.riel-multi-lista { padding: var(--espacio-sm) 12px; }
.riel-multi-lista label { min-height: 36px; padding: var(--espacio-xs) 0; align-items: center; gap: var(--espacio-sm); }
.riel-multi-lista input { width: 16px; height: 16px; flex: none; }
.riel-libre { min-width: 0; }
.leyenda-item { border-radius: 2px; }
.leyenda-item[role="button"]:focus-visible { outline-offset: 3px; }
.tarjeta-zona { isolation: isolate; }
.tarjeta-zona.actualizando::after { content: 'Actualizando…'; position: absolute; top: var(--espacio-sm); right: var(--espacio-sm); z-index: 8; padding: var(--espacio-xs) var(--espacio-sm); background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio-control); color: var(--texto-2); font-size: 12px; }
.esqueleto { display: flex; align-items: center; justify-content: center; background: var(--fondo); color: var(--texto-2); font-size: 14px; border: 1px dashed var(--borde); }
.error-dato { position: relative; min-height: 180px; height: 100%; display: flex; flex-direction: column; gap: var(--espacio-md); align-items: center; justify-content: center; padding: var(--espacio-lg); color: var(--texto); background: var(--fondo); font-size: 14px; }
.error-dato p { margin: 0; max-width: 50ch; line-height: 1.5; }
.preparacion { font-size: 13px; }
.seccion-carga { display: flex; align-items: flex-start; min-height: 360px; padding-top: var(--espacio-lg); color: var(--texto-2); }
.carga-inicial { min-height: 60vh; display: grid; place-content: center; gap: var(--espacio-md); padding: var(--espacio-xl); text-align: center; }
.carga-inicial h1 { font: 600 28px/1.25 var(--fuente-display); margin: 0; }
.carga-inicial p { margin: 0; font-size: 16px; color: var(--texto-2); }
.portada-encabezado { padding-top: var(--espacio-seccion); max-width: 72ch; }
.portada-encabezado h2 { margin: 0 0 var(--espacio-md); font: 600 clamp(32px, 4vw, 48px)/1.1 var(--fuente-display); letter-spacing: -.03em; color: var(--texto); text-wrap: balance; }
.portada-encabezado p { font-size: 16px; line-height: 1.65; margin: 0; color: var(--texto-2); }
.portada-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--espacio-xl); }
.portada-tarjeta { height: auto; min-height: 224px; gap: 12px; padding: var(--espacio-xl) var(--espacio-lg); background: transparent; border: 0; border-top: 1px solid var(--borde-fuerte); border-radius: 0; overflow: visible; }
.portada-nombre { font: 600 24px/1.25 var(--fuente-display); color: var(--texto); letter-spacing: -.02em; }
.portada-pregunta { font-size: 16px; line-height: 1.6; max-width: 60ch; }
.portada-dato { font-size: 12px; color: var(--texto-2); }
.portada-ver { display: inline-flex; align-items: center; gap: var(--espacio-sm); font-size: 14px; min-height: 32px; }
.capa-grande { background: rgb(36 50 74 / .48); padding: var(--espacio-lg); }
.capa-grande .tarjeta-grande { border: 0; border-radius: 8px; width: min(1440px, 100%); height: calc(100dvh - 48px); max-height: 960px; padding: var(--espacio-lg); gap: 12px; }
.tarjeta-grande .tarjeta-agrandar { width: var(--control); height: var(--control); }
.tarjeta-grande .tarjeta-titulo { font-family: var(--fuente-display); }
.tarjeta-grande .tarjeta-zona { min-height: 0; }
.grande-cuerpo { min-height: 0; gap: var(--espacio-lg); }
.def-nombre { font-size: 14px; }
.def-texto { font-size: 13px; line-height: 1.55; }
.def-miembros { font-size: 12px; line-height: 1.5; }
.pres-controles { position: fixed; right: var(--espacio-md); bottom: var(--espacio-md); z-index: 1002; display: flex; align-items: center; gap: var(--espacio-sm); padding: var(--espacio-sm); background: var(--tarjeta); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-control); }
.pres-controles button { min-height: var(--control); padding: var(--espacio-sm) 12px; background: var(--tarjeta); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--radio-control); font: 500 14px/1.4 var(--fuente); }
.pres-controles .pres-posicion { min-width: 56px; text-align: center; font: 400 13px/1.5 var(--fuente-mono); }
.presentacion { scroll-padding-bottom: var(--pres-controles-alto); padding-bottom: var(--pres-controles-alto); }
.tt-html { font-size: 13px; line-height: 1.5; }
@media (hover: hover) {
  .portada-tarjeta:hover { background: var(--tarjeta); }
  .portada-tarjeta:hover .portada-nombre { color: var(--navy); }
  .portada-ver .od-icon { transition: transform var(--motion-feedback) var(--ease-out); }
  .portada-tarjeta:hover .portada-ver .od-icon { transform: translateX(4px); }
  .indice-item:hover, .accion-secundaria:hover, .tarjeta-agrandar:hover, .pres-controles button:hover { background: var(--suave-activo); color: var(--navy); }
  .riel-seg button:not(.activo):hover { background: var(--suave-activo); color: var(--navy); }
}
@media (min-width: 1440px) { .portada-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 901px) and (max-width: 1100px) { .salto-seccion > span { display: none; } .salto-seccion { max-width: 35%; } }
@media (max-width: 1023px) {
  .tarjeta-zona { min-height: 280px; }
  .tarjeta { overflow: visible; }
  .tarjeta-zona > div:has(table) { overflow: auto; }
  .capa-grande .tarjeta-grande { height: calc(100dvh - 48px) !important; min-height: 0; overflow: auto; }
  .tarjeta-grande .tarjeta-zona { min-height: 280px; }
  .tarjeta-agrandar, .tarjeta-ajustar, .riel-seg button { min-height: var(--control); }
  .tarjeta-agrandar { min-width: var(--control); }
}
@media (max-width: 900px) {
  .cabecera-identidad { width: 100%; justify-content: space-between; padding: var(--espacio-md) var(--margen); }
  .cabecera-textos { gap: var(--espacio-sm); }
  .menu-movil { display: inline-flex; align-items: center; gap: var(--espacio-sm); min-height: var(--control); padding: var(--espacio-sm) 12px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-control); background: var(--tarjeta); color: var(--texto); font: 500 14px/1.5 var(--fuente); }
  .cabecera-nav { display: none; }
  .nav-abierto .cabecera-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-sm); padding: var(--espacio-md); }
  .cabecera .pestana { min-width: 0; }
  .barra-pagina { position: sticky; top: 0; flex-wrap: wrap; padding: 12px var(--margen); }
  .barra-titulo { flex: 1; }
  .barra-presentar { order: 1; }
  .salto-seccion { order: 2; flex: 1 1 100%; max-width: none; }
  .salto-seccion select { flex: 1; max-width: none; }
  .indice { display: none; }
  .apertura { display: none; }
  .contenedor { padding-top: var(--espacio-lg); }
}
@media (max-width: 767px) {
  :root { --margen: 16px; --espacio-seccion: 32px; }
  .portada-grilla { grid-template-columns: minmax(0, 1fr); }
  .portada-encabezado { padding-top: var(--espacio-md); }
  .portada-tarjeta { min-height: 0; padding: var(--espacio-lg) 0; }
  .riel { gap: 12px var(--espacio-md); }
  .riel-nombre { flex: 1; min-width: 0; font-size: 22px; }
  .riel-frecuencia { flex-basis: 100%; }
  .riel-bloque { flex-basis: 100%; }
  .tarjeta-titulo { font-size: 16px; }
  .tarjeta-controles { flex-direction: column; align-items: stretch; }
  .capa-grande { padding: 0; }
  .capa-grande .tarjeta-grande { width: 100%; height: 100dvh !important; max-height: none; padding: var(--espacio-md); border-radius: 0; }
  .tarjeta-grande .tarjeta-definiciones { max-height: none !important; overflow: visible !important; }
  .capa-grande .grande-cuerpo { flex: 1 0 auto; }
  .capa-grande .tarjeta-zona { min-height: 50dvh; }
  .pres-controles { right: var(--espacio-sm); bottom: var(--espacio-sm); left: var(--espacio-sm); justify-content: center; }
  .pres-controles button { padding-inline: var(--espacio-sm); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .saltar-contenido, .salto-seccion, .menu-movil, .pres-controles, .solo-lector { display: none !important; }
  .contenedor { padding: 0; gap: 0; }
  .seccion { padding: 48px; }
  .tarjeta { overflow: hidden; }
  .tarjeta-agrandar { display: none; }
}

/* Dentro de las tarjetas el cuerpo sigue en 14 px: las tarjetas tienen alto fijo del diseño y a 16 px
   las tablas largas se montaban sobre la nota (AM3-05-3, AM4-07-3). Fuera de la zona del gráfico rige el 16 px y el 1,5. */
.tarjeta-zona { font-size: 14px; line-height: normal; }