/* Layout propio del router /censos — tipografía, pastillas, tarjetas y
   tabla ya los da css/reporte.css (Design System GOB.PE, ver shared/base.html);
   acá solo va la disposición de columnas. */

.censo-layout {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md, 1rem);
  padding: var(--sp-md, 1rem);
  max-width: 1200px;
  margin: 0 auto;
  /* body es flex-column (shared/base.html) — crece para empujar el pie de
     página al fondo de la ventana cuando el contenido es corto. */
  flex: 1;
  width: 100%;
  box-sizing: border-box;
}

.censo-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.censo-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.censo-pills a.rpt-pill {
  text-decoration: none;
}

.censo-cuerpo {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.censo-modulos {
  flex: 0 0 280px;
}

.censo-temas {
  list-style: none;
  margin: 0;
  padding: 0;
  flex-direction: column;
  gap: 0.5rem;
}

/* `display: flex` solo cuando NO está oculto: puesto en la regla base de
   arriba, gana por especificidad al `[hidden]{display:none}` de la hoja
   del navegador (misma especificidad, pero esta regla carga después) y
   los temas de todos los módulos quedaban visibles a la vez. */
.censo-temas:not([hidden]) {
  display: flex;
}

.censo-tema-item {
  cursor: pointer;
  padding: 0.6rem 0.85rem;
}

.censo-tema-item .rpt-label,
.censo-tema-item .rpt-note {
  margin: 0;
}

.censo-tema-item .rpt-note {
  margin-top: 0.2rem;
}

.censo-tema-item:hover,
.censo-tema-item:focus-visible,
.censo-tema-item.on {
  border-color: var(--color-primary);
  background: var(--color-bg-blue);
}

.censo-resultado {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 780px) {
  .censo-cuerpo {
    flex-direction: column;
  }
  .censo-modulos {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* Fila de subsección (2.1, 2.2, ...) dentro de la tabla VSE 2017/2007 —
   mismo criterio de encabezado intermedio que ya usaba el sitio legado. */
.rpt-subtitulo td {
  background: var(--color-bg-alt);
  padding-top: 12px;
}