/* ==========================================================================
   Tablero de Iniciativas — Meta 2036
   GOB.DO design tokens + dashboard styles
   ========================================================================== */

/* --- Webfont: Inter (institutional UI typeface) --------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* --- Design tokens (GOB.DO) ----------------------------------------------
   Van sobre las raíces del tablero y NO sobre :root a propósito: en WordPress
   esta hoja se carga dentro del tema y varios nombres son genéricos
   (--font-sans, --color-bg, --gutter…). Definidos en :root le pisarían al tema
   cualquier variable que se llame igual en todo el documento — header y footer
   del sitio incluidos. Las raíces son las mismas de la nota "Base resets" más
   abajo: .tb-page y lo que vive fuera de ella. */
.tb-page,
.tb-mselect__menu,
.tb-tip,
.tb-pwgate {
  /* Brand */
  --gob-institutional-blue: #003876;
  --gob-dark-blue: #031942;
  --gob-action-blue: #006ECE;
  --gob-action-blue-700: #005AB0;
  --gob-ux-highlight: #0076DE;
  --gob-flag-red: #CE1126;
  --gob-flag-blue: #002D62;

  /* Blues */
  --gob-blue-25: #EFF7FF;
  --gob-blue-50: #E2EEFA;
  --gob-blue-100: #CFE3F7;
  --gob-sky: #29ABE2; /* el subrayado de las cifras de gestión */

  /* Slate scale */
  --gob-slate-50: #F8FAFC;
  --gob-slate-100: #F1F5F9;
  --gob-slate-200: #E2E8F0;
  --gob-slate-300: #CBD5E1;
  --gob-slate-400: #94A3B8;
  --gob-slate-500: #64748B;
  --gob-slate-600: #4C586A;
  --gob-slate-700: #334155;
  --gob-slate-900: #0F172A;

  --gob-white: #FFFFFF;

  /* Semantic */
  --color-bg: var(--gob-white);
  --color-text-heading: var(--gob-dark-blue);
  --color-text-body: var(--gob-slate-600);
  --color-text-strong: #131313;
  --color-text-muted: var(--gob-slate-500);
  --color-text-link: var(--gob-action-blue);
  --color-text-label: var(--gob-dark-blue);

  --color-border: var(--gob-slate-200);
  --color-border-strong: var(--gob-slate-300);
  --color-border-input: var(--gob-slate-300);
  --color-input-bg: #EEF2F7;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Type scale — enforces title (20) > body (16) > label (14) everywhere;
     nothing below 12px so it stays legible for older readers. */
  --fs-2xs: 12px;
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-display: 40px;

  --radius-sm: 4px;
  --shadow-focus: 0 0 0 3px rgba(0, 118, 222, 0.35);

  --page-max: 1200px;
  --gutter: 40px;
}

/* --- Formulario de contraseña (páginas protegidas en WordPress) -----------
   Va scopeado a .tb-pwgate (el contenedor que monta la plantilla de WP), no al
   body class de la plantilla: desde que la página usa el header y el footer
   generales del sitio, un `form label` suelto alcanzaría también, por ejemplo,
   el buscador del menú del tema. */
.tb-pwgate form label,
.tb-pwgate input[type="submit"],
.tb-pwgate input[type="password"] {
  width: 100%;
}

/* --- Ajustes propios de WordPress -----------------------------------------
   Solo aplican dentro de WordPress. En local no hay nada que ajustar.

   Van DOS selectores por regla, a propósito:
   - .page-template-page-tablero-meta2036 — la clase que body_class() agrega
     cuando la página usa la plantilla del TEMA (wordpress/build_wp_package.py).
   - .tbm2036-tablero — la que agrega el PLUGIN (TBM2036_Template::body_class),
     que también la pone cuando el tablero entra por shortcode.

   Los dos tienen que convivir mientras dure la migración al plugin: la
   plantilla del tema es el rollback y no puede dejar de funcionar. Cuando se
   retire, se quita el primer selector de cada regla y ya. */
.page-template-page-tablero-meta2036 .tb-page,
.tbm2036-tablero .tb-page {
  /* El alto de la página lo dan el header y el footer del tema; forzar 100vh
     aquí dejaría un hueco largo entre la tabla y el pie del sitio. */
  min-height: 0;
}

.page-template-page-tablero-meta2036 .tb-main,
.tbm2036-tablero .tb-main {
  /* Aire entre el final de la tabla y el footer del sitio. En local no hace
     falta: ahí el footer propio del tablero trae el suyo. */
  padding-bottom: 64px;
}

/* --- Base resets ---------------------------------------------------------
   Ojo con el alcance de lo que se agregue aquí: en WordPress esta hoja se
   carga DENTRO del tema, junto al header y el footer generales del sitio, así
   que una regla sobre elementos pelados (body, h1, button, :focus-visible…)
   se los llevaría por delante y la página dejaría de parecerse al resto del
   sitio. Globales quedan solo las dos que cualquier tema aplica igual
   (box-sizing y el margen del body); el resto va scopeado a las raíces del
   tablero, que son .tb-page más lo que vive fuera de ella: .tb-mselect__menu
   y .tb-tip (app.js los cuelga del <body>) y .tb-pwgate. Si agregas otro
   elemento fuera de .tb-page, súmalo a estas listas. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

.tb-page,
.tb-mselect__menu,
.tb-tip,
.tb-pwgate {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--color-text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tb-page h1 {
  margin: 0;
  font-family: var(--font-display);
}

.tb-page button,
.tb-page select,
.tb-mselect__menu button,
.tb-pwgate input[type="submit"] {
  font-family: inherit;
}

.tb-page :focus-visible,
.tb-mselect__menu :focus-visible,
.tb-tip :focus-visible,
.tb-pwgate :focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

.tb-page select:focus,
.tb-mselect__menu select:focus {
  border-color: var(--gob-action-blue);
  box-shadow: 0 0 0 3px rgba(0, 118, 222, 0.18);
}

.tb-page {
  background: #fff;
  min-height: 100vh;
}

.tb-gut {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* --- Official government banner ------------------------------------------ */
.tb-banner-wrap {
  background: var(--gob-slate-100);
}

.tb-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: var(--fs-sm);
  color: var(--gob-slate-700);
}

.tb-banner__flag {
  display: block;
  border-radius: 1px;
  flex-shrink: 0;
}

/* --- Header -------------------------------------------------------------- */
.tb-header {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}

.tb-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.tb-header__logo {
  height: 52px;
  width: auto;
  display: block;
}

/* --- Main / hero --------------------------------------------------------- */
.tb-main {
  padding-top: 40px;
  padding-bottom: 8px;
}

.tb-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gob-action-blue);
}

.tb-h1 {
  margin: 10px 0 8px;
  font-size: var(--fs-display);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 700;
  color: var(--gob-dark-blue);
}

.tb-lead {
  margin: 0;
  max-width: 1050px;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--color-text-body);
}

.tb-updates {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.tb-update {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--gob-slate-50);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.tb-update svg {
  color: var(--gob-action-blue);
  flex-shrink: 0;
}

.tb-update__label {
  font-weight: 500;
}

.tb-update__date {
  color: var(--gob-dark-blue);
  font-weight: 700;
}

/* --- Cifras de gestión (las cuatro tarjetas azules) --------------------- */
/* Editoriales, no del dataset: ver TBM2036_Cifras. Inertes. */
.tb-gestion {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 30px 0 16px;
}

.tb-gestion__card {
  display: flex;
  flex-direction: column;
  padding: 18px 26px 22px;
  border-radius: 12px;
  background: var(--gob-institutional-blue);
  color: var(--gob-white);
}

.tb-gestion__num {
  align-self: flex-start;
  min-width: 68%;
  padding-bottom: 6px;
  border-bottom: 4px solid var(--gob-sky);
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
}

.tb-gestion__title {
  margin-top: 10px;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.tb-gestion__detail {
  font-size: var(--fs-sm);
  line-height: 1.25;
}

/* --- KPI band ------------------------------------------------------------ */
.tb-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 16px 0 22px;
}

/* sin cifras de gestión, la banda toma el aire que ellas tenían arriba */
.tb-sheet + .tb-kpis {
  margin-top: 30px;
}

.tb-kpi {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--gob-slate-100);
  /* left padding reserva el canal del icono (16px + 8px de gap): el icono
     "cuelga" fuera y label / número / sub quedan alineados en la misma línea */
  padding: 18px 20px 18px 44px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tb-kpi__label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--color-text-label);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.tb-kpi__label svg {
  flex: none;
  margin-top: 1px;
  margin-left: -24px;
}

.tb-kpi__label-text {
  line-height: 1.35;
}

.tb-kpi-num {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1;
  color: var(--gob-dark-blue);
}

.tb-kpi-num--accent {
  color: var(--gob-action-blue);
}

.tb-kpi__sub {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* Las tres tarjetas que además filtran la tabla (app.js -> KPI_FILTROS).
   Activa = su filtro está puesto; la cifra sigue siendo la del plan completo. */
.tb-kpi--filtro {
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.tb-kpi--filtro:hover {
  border-color: var(--color-border-strong);
  background: var(--gob-slate-200);
}

.tb-kpi--filtro:focus {
  outline: none;
}

.tb-kpi--filtro:focus-visible {
  box-shadow: var(--shadow-focus);
}

.tb-kpi--filtro.is-active {
  border-color: var(--gob-action-blue);
  background: var(--gob-blue-25);
  box-shadow: inset 0 0 0 1px var(--gob-action-blue);
}

.tb-kpi--filtro.is-active:focus-visible {
  box-shadow: inset 0 0 0 1px var(--gob-action-blue), var(--shadow-focus);
}

/* --- Shared select ------------------------------------------------------- */
.tb-select-wrap {
  position: relative;
}

.tb-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 40px 0 14px !important;
  line-height: normal !important;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--color-border-input) !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-size: var(--fs-base) !important;
  color: var(--color-text-strong) !important;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}

.tb-select-wrap__chev {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-muted);
}

/* --- Controls toolbar (search · sort · filters) -------------------------- */
.tb-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 40px 0 14px;
}

.tb-search {
  position: relative;
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  align-items: center;
}

.tb-search__ic {
  position: absolute;
  left: 14px;
  color: var(--color-text-muted);
  pointer-events: none;
}

.tb-search__input {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 42px !important;
  line-height: normal !important;
  background: #fff !important;
  border: 1px solid var(--color-border-input) !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-size: var(--fs-base) !important;
  color: var(--color-text-strong) !important;
  outline: none !important;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}

.tb-search__input::placeholder {
  color: var(--gob-slate-400);
}

.tb-search__input:focus {
  border-color: var(--gob-action-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 110, 206, .16) !important;
}

.tb-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.tb-search__clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: var(--gob-slate-100);
  color: var(--color-text-muted);
}

.tb-search__clear[hidden] {
  display: none;
}

.tb-search__clear:hover {
  background: var(--gob-slate-200);
  color: var(--gob-dark-blue);
}

.tb-sortby {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}

.tb-sortby__label {
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-label);
  white-space: nowrap;
}

.tb-select--sort {
  min-width: 210px;
  font-size: var(--fs-sm);
}

.tb-filterbtn {
  height: 46px;
  padding: 0 18px;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #E2ECF8;
  color: var(--gob-dark-blue);
  border: 1px solid var(--color-border-input);
  border-radius: 10px;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.tb-filterbtn:hover {
  background: #fff;
  color: var(--gob-dark-blue);
}

.tb-filterbtn[aria-expanded="true"] {
  background: var(--gob-action-blue);
  border-color: var(--gob-action-blue);
  color: #fff;
}

.tb-filterbtn__badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #fff;
  color: var(--gob-dark-blue);
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.tb-filterbtn__badge[hidden] {
  display: none;
}

/* --- Result bar + active filter chips ------------------------------------ */
/* 40px arriba y abajo: la barra de resultados separa el panel de filtros del
   resumen filtrado / la tabla, y con los 4-14px anteriores las tres secciones se
   leían como un solo bloque. Los márgenes colapsan con los del vecino, así que
   40 es el mínimo efectivo en los cuatro estados (panel abierto/cerrado ×
   con/sin filtros). */
.tb-resultbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 16px 0px 40px 0px;
}

/* Sin filtros la barra queda vacía (ni chips ni "Limpiar todo") y sus 56px de
   margen se verían como un hueco. Se colapsa en CSS y no por JS a propósito: los
   chips son markup servido, así que no pueden depender de que el script corra —
   un app.js cacheado los haría desaparecer. En navegadores sin :has() sólo queda
   el hueco; los chips se ven igual. */
.tb-resultbar:has(#active-chips:empty) {
  display: none;
}

.tb-activechips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.tb-fchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 5px 4px 11px;
  background: var(--gob-blue-25);
  border: 1px solid var(--gob-blue-100);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--gob-dark-blue);
}

.tb-fchip__label {
  color: var(--color-text-muted);
  font-weight: 600;
}

.tb-fchip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(0, 45, 98, .09);
  color: var(--gob-dark-blue);
}

.tb-fchip__x:hover {
  background: var(--gob-action-blue);
  color: #fff;
}

.tb-clearall {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 5px 10px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--gob-action-blue);
}

.tb-clearall[hidden] {
  display: none;
}

.tb-clearall:hover {
  text-decoration: underline;
}

/* --- Filters panel (inline card on desktop, bottom sheet on mobile) ------ */
.tb-sheet[hidden] {
  display: none;
}

.tb-sheet__backdrop {
  display: none;
}

.tb-filters {
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--gob-white);
  box-shadow: 0 8px 24px rgba(3, 25, 66, .06);
  overflow: hidden;
}

/* El título y su estado van juntos y alineados por la línea base; el grupo, centrado
   con el botón de cerrar (más alto que el texto). */
.tb-filters__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 26px;
  border-bottom: 1px solid var(--color-border);
}

.tb-filters__heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 14px;
  min-width: 0;
}

.tb-filters__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--gob-dark-blue);
}

.tb-filters__status {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.tb-filters__close {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.tb-filters__close:hover {
  background: var(--gob-slate-100);
  color: var(--gob-dark-blue);
}

/* Tres grupos sin título, cada uno una rejilla de 3 columnas (2 en tableta, 1 en
   la hoja móvil). Los separa una línea, no aire: así el panel es más bajo. */
.tb-fgroup {
  padding: 26px 26px;
}

.tb-fgroup + .tb-fgroup {
  border-top: 1px solid var(--color-border);
}

.tb-fgroup__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 24px;
  align-items: start;
}

.tb-filters__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 26px;
  border-top: 1px solid var(--color-border);
  background: var(--gob-slate-50);
}

.tb-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

/* `display:flex` de arriba le gana al [hidden] del navegador, así que sin esta regla
   el atributo no oculta nada (mismo motivo que .tb-sheet[hidden] y compañía). Lo usan
   los campos de Clasificación / Pilar, ocultos en el marcado hasta que app.js les
   carga las opciones, para no mostrar un <select> vacío mientras arranca la página. */
.tb-field[hidden] {
  display: none;
}

/* margin: 0 porque el tema le da margin-bottom: 8px a todo <label>: sin esto, los
   campos con <select> quedaban a 15px de su etiqueta y los Sí/No (con <span>) a 7. */
.tb-field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-label);
}

.tb-field__hint {
  font-weight: 500;
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* Nivel de avance — custom multi-select dropdown (menu appended to <body>) */
.tb-chip__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

.tb-mselect__btn {
  display: inline-flex;
  align-items: center;
  text-align: left;
  overflow: hidden;
}

.tb-mselect__btn:focus-visible {
  border-radius: 10px;
}

.tb-mselect__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tb-mselect__text.is-placeholder {
  color: var(--color-text-muted);
}

.tb-mselect__menu {
  position: fixed;
  z-index: 9500;
  /* Por encima de un header sticky del tema de WordPress; debe seguir
     quedando por debajo de .tb-tip (9999) y por encima de .tb-sheet. */
  margin: 0;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--color-border-input);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(3, 25, 66, .20);
  max-height: 340px;
  overflow-y: auto;
}

.tb-mselect__menu[hidden] {
  display: none;
}

.tb-mselect__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px 9px 10px;
  border: none;
  background: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-body);
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}

.tb-mselect__opt:hover {
  background: var(--gob-slate-100);
}

.tb-mselect__opt.is-checked {
  color: var(--gob-dark-blue);
}

.tb-mselect__check {
  width: 18px;
  height: 18px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid var(--color-border-input);
  border-radius: 5px;
  color: #fff;
}

.tb-mselect__opt.is-checked .tb-mselect__check {
  background: var(--gob-action-blue);
  border-color: var(--gob-action-blue);
}

.tb-mselect__check svg {
  opacity: 0;
}

.tb-mselect__opt.is-checked .tb-mselect__check svg {
  opacity: 1;
}

.tb-mselect__optlabel {
  flex: 1 1 auto;
}

.tb-mselect__range {
  flex: none;
  font-weight: 500;
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

/* Segmented control — Categoría + boolean characteristics (Todas/Sí/No) */
/* A todo el ancho de su columna, con las opciones repartidas por igual. */
.tb-seg {
  display: flex;
  padding: 3px;
  gap: 3px;
  background: var(--gob-slate-100);
  border: 1px solid var(--color-border);
  border-radius: 11px;
  width: 100%;
}

.tb-seg__btn {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  flex: 1 1 0;
  min-width: 0;
  height: 36px;
  padding: 0 8px;
  border-radius: 8px;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  transition: background .12s, color .12s, box-shadow .12s;
}

.tb-seg__btn:hover {
  color: var(--gob-dark-blue);
}

.tb-seg__btn.is-active {
  background: #fff;
  color: var(--gob-dark-blue);
  box-shadow: 0 1px 2px rgba(3, 25, 66, .14);
}

/* Footer buttons */
.tb-clear {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 16px;
  background: var(--gob-white);
  border: 1px solid var(--color-border-input);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gob-dark-blue);
}

.tb-clear:hover {
  background: var(--gob-slate-100);
}

.tb-apply {
  height: 44px;
  padding: 0 22px;
  flex: none;
  background: var(--gob-action-blue);
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.tb-apply:hover {
  background: var(--gob-action-blue-700);
}

/* Keep pill/rounded shapes on keyboard focus (override global focus radius) */
.tb-seg__btn:focus-visible {
  border-radius: 8px;
}

.tb-filterbtn:focus-visible,
.tb-apply:focus-visible,
.tb-search__input:focus-visible {
  border-radius: 10px;
}

.tb-fchip__x:focus-visible,
.tb-search__clear:focus-visible,
.tb-filters__close:focus-visible {
  border-radius: 50%;
}

/* --- Table --------------------------------------------------------------- */
.tb-table {
  --row-pad: 14px 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  font-size: var(--fs-sm);
}

.tb-table--dense {
  --row-pad: 9px 14px;
}

.tb-grid {
  grid-template-columns: 46px 1fr 180px 170px 44px 130px;
}

.tb-thead {
  display: grid;
  background: var(--gob-slate-50);
  border-bottom: 2px solid var(--color-border);
}

.tb-th {
  padding: 13px 14px;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-label);
  display: flex;
  align-items: center;
  gap: 6px;
}

.tb-th--num {
  justify-content: flex-end;
  text-align: right;
}

.tb-th--sort {
  cursor: pointer;
}

.tb-th--sort:hover {
  color: var(--gob-action-blue);
}

.tb-th--active {
  color: var(--gob-action-blue);
}

.tb-tr {
  border-top: 1px solid var(--color-border);
}

.tb-tr:first-child {
  border-top: none;
}

.tb-row {
  display: grid;
  align-items: start;
  cursor: pointer;
  background: #fff;
  transition: background .12s;
}

.tb-row:hover {
  background: #F2F7FC;
}

.tb-row--risk {
  background: #F1F4F8;
}

.tb-row--risk:hover {
  background: #EAF0F7;
}

.tb-c-num {
  padding: var(--row-pad);
  text-align: right;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 50px;
}

.tb-c-name {
  padding: var(--row-pad);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--gob-dark-blue);
  line-height: 1.4;
}

.tb-c-alert {
  padding: 0 8px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tb-th--alert {
  justify-content: center;
  padding-left: 4px;
  padding-right: 4px;
}

.tb-alert-flag {
  display: inline-flex;
  color: #B45309;
  cursor: help;
  outline: none;
  border-radius: 3px;
}

.tb-alert-flag:focus-visible {
  box-shadow: 0 0 0 2px rgba(180, 83, 9, .35);
}

.tb-c-comite {
  padding: var(--row-pad);
  font-size: var(--fs-base);
  color: var(--gob-slate-700);
  font-weight: 500;
}

.tb-c-avance {
  padding: var(--row-pad);
}

.tb-c-action {
  padding: var(--row-pad);
  padding-right: 20px;
  text-align: right;
}

.tb-avance {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.tb-avance__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tb-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.tb-score {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--gob-dark-blue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

.tb-bar {
  height: 8px;
  background: var(--gob-slate-200);
  border-radius: 999px;
  overflow: hidden;
}

.tb-bar__fill {
  height: 100%;
  border-radius: 999px;
  transition: width .3s ease;
}

.tb-detailbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #e2e8f0;
  background: #F9FAFC;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gob-institutional-blue);
  white-space: nowrap;
}

.tb-detailbtn__chev {
  transition: transform .15s;
}

.tb-row[aria-expanded="true"] .tb-detailbtn__chev {
  transform: rotate(180deg);
}

/* Accordion wrapper — animates the detail's height open/closed. The JS drives the
   height (0 ↔ scrollHeight ↔ auto); this just defines the collapsed state + easing. */
.tb-detail-wrap {
  height: 0;
  overflow: hidden;
  transition: height .28s ease;
}

.tb-detail-wrap.is-open {
  height: auto;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .tb-detail-wrap {
    transition: none;
  }

  .tb-detailbtn__chev,
  .tb-more__chev {
    transition: none;
  }
}

/* Expandable detail */
.tb-detail {
  background: var(--gob-slate-50);
  padding: 36px 60px 44px 60px;
}

.tb-detail__inner {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.tb-detail__k {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--color-text-label);
}

.tb-detail__k--status {
  color: var(--gob-action-blue);
}

.tb-detail__inst {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-text-body);
  line-height: 1.45;
}

/* "Ficha técnica" — labelled link to the initiative's PDF, shown under Institución responsable.
   A direct child of .tb-more__body so it inherits the same 28px gap as the other blocks. */
.tb-ficha {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--gob-action-blue);
  text-decoration: none;
}

.tb-ficha:hover {
  text-decoration: underline;
  color: var(--gob-dark-blue);
}

.tb-ficha:focus-visible {
  outline: 2px solid var(--gob-action-blue);
  outline-offset: 2px;
  border-radius: 3px;
}

.tb-ficha__ic {
  flex-shrink: 0;
}

/* Institution acronym with a full name available on hover/focus (custom tooltip). */
.tb-inst {
  text-decoration: underline dotted var(--gob-slate-400);
  text-underline-offset: 3px;
  cursor: help;
}

.tb-inst:hover {
  text-decoration-color: var(--gob-action-blue);
  color: var(--gob-dark-blue);
}

.tb-inst:focus-visible {
  outline: 2px solid var(--gob-action-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Custom tooltip element — appended to <body> by app.js, positioned via fixed coords
   so it never gets clipped by the table's overflow:hidden. */
.tb-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  max-width: 300px;
  padding: 8px 11px;
  background: var(--gob-dark-blue);
  color: var(--gob-white);
  font-size: var(--fs-xs);
  line-height: 1.4;
  font-weight: 500;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(3, 25, 66, .28);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(2px);
  transition: opacity .12s ease, transform .12s ease;
}

.tb-tip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Arrow — points down when the tip sits above the target, up when flipped below.
   --tip-arrow (set by app.js) keeps it aligned to the target after edge-clamping. */
.tb-tip::after {
  content: "";
  position: absolute;
  left: var(--tip-arrow, 50%);
  width: 8px;
  height: 8px;
  background: var(--gob-dark-blue);
  transform: translateX(-50%) rotate(45deg);
}

.tb-tip::after {
  top: 100%;
  margin-top: -4px;
}

.tb-tip--below::after {
  top: 0;
  margin-top: -4px;
}

.tb-detail__plazo {
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--color-text-body);
  line-height: 1.45;
}

.tb-detail__p {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-text-body);
}

.tb-detail__desc {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--color-text-body);
}

/* "Más detalles" toggle — collapses descripción / institución / comité */
.tb-more__summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  width: fit-content;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gob-action-blue);
  list-style: none;
}

.tb-more__summary::-webkit-details-marker {
  display: none;
}

.tb-more__summary::marker {
  content: "";
}

.tb-more__summary:hover {
  text-decoration: underline;
}

.tb-more__chev {
  transition: transform .15s;
}

.tb-more[open]>.tb-more__summary .tb-more__chev {
  transform: rotate(180deg);
}

.tb-more__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 24px;
}

/* "Ocultar iniciativa" — collapse button at the foot of the expanded detail so
   the row can be closed without scrolling back up (helps on mobile). */
.tb-detail__collapse {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 9px 18px;
  cursor: pointer;
  border: 1px solid var(--gob-blue-50);
  background: var(--gob-blue-25);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gob-action-blue);
}

.tb-detail__collapse:hover {
  background: var(--gob-blue-50);
}

.tb-detail__collapse:focus-visible {
  outline: 2px solid var(--gob-action-blue);
  outline-offset: 2px;
}

/* Acciones (sub-actions) inside the expanded detail */
.tb-accs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tb-acc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tb-acc {
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.tb-acc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.tb-acc__name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--gob-dark-blue);
  line-height: 1.4;
}

.tb-acc__pct {
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
}

.tb-acc__progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tb-acc__progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.tb-acc__bar {
  height: 6px;
}

.tb-acc__detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tb-acc__meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tb-acc__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tb-acc__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-label);
}

.tb-acc__value {
  font-size: var(--fs-base);
  color: var(--color-text-body);
  line-height: 1.4;
}

.tb-acc__alerta {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--fs-base);
  line-height: 1.45;
  font-weight: 500;
  color: var(--gob-flag-red);
  background: #FCE8EA;
  border-radius: 8px;
  padding: 7px 9px;
}

.tb-acc__alert-ic {
  flex: none;
  margin-top: 1px;
}

.tb-acc__comment {
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--color-text-body);
}

/* Comité members inside the expanded detail */
.tb-comite {
  /* Photos are transparent PNG cards — render them straight on the page, no backing box */
  padding: 4px 0 0;
}

.tb-members {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}

.tb-member {
  margin: 0;
  display: flex;
  justify-content: center;
}

.tb-member__avatar {
  position: relative;
  width: 148px;
  height: 148px;
}

.tb-member__img,
.tb-member__ph {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
}

.tb-member__img {
  object-fit: cover;
}

/* Initials placeholder sits behind the photo; shows when the photo is absent or fails (img removed) */
.tb-member__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 700;
  color: var(--gob-slate-500);
  background: var(--gob-slate-100);
  border-radius: 50%;
}

.tb-member__ph[hidden] {
  display: none;
}

.tb-empty {
  padding: 48px;
  text-align: center;
  color: var(--color-text-muted);
}

/* --- Footer -------------------------------------------------------------- */
.tb-footer {
  background: var(--gob-dark-blue);
  color: #fff;
  margin-top: 48px;
}

.tb-footer__top {
  padding-top: 40px;
  padding-bottom: 32px;
}

.tb-footer__logo {
  height: 48px;
  width: auto;
  display: block;
}

.tb-footer__bar {
  border-top: 1px solid rgba(255, 255, 255, .15);
}

.tb-footer__barinner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.tb-footer__meta {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .7);
}

/* --- Responsive ---------------------------------------------------------- */
/* Filter panel body: 2 columns on wide screens, 1 column when tight */
@media (max-width: 991px) {
  .tb-fgroup__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ≤991: 6 KPI cards keep the 3-col grid (2 rows of 3) */
@media (max-width: 991px) {
  .tb-kpis {
    grid-template-columns: repeat(3, 1fr);
  }

  /* las cuatro de gestión siguen en una fila; solo encoge la cifra */
  .tb-gestion__card {
    padding: 16px 18px 18px;
  }

  .tb-gestion__num {
    font-size: 44px;
  }
}

/* >640: institución responsable + fecha de cumplimiento side by side */
@media (min-width: 641px) {
  .tb-acc__meta {
    flex-direction: row;
    gap: 32px;
  }

  .tb-acc__meta .tb-acc__field {
    flex: 1 1 0;
  }
}

/* ≤720: filters open as a bottom sheet over a dimmed backdrop */
@media (max-width: 720px) {
  .tb-sheet:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 9000;
    /* Ver la nota de z-index en .tb-mselect__menu. */
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .tb-sheet__backdrop {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(3, 25, 66, .5);
    animation: tb-fade .2s ease;
  }

  .tb-filters {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 18px 18px 0 0;
    background: #fff;
    box-shadow: 0 -12px 40px rgba(3, 25, 66, .28);
    animation: tb-slideup .28s cubic-bezier(.22, .61, .36, 1);
  }

  .tb-filters__head {
    flex: none;
    padding: 14px 18px;
  }

  .tb-filters__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tb-fgroup {
    padding: 18px;
  }

  .tb-fgroup__grid {
    grid-template-columns: 1fr;
  }

  .tb-filters__foot {
    flex: none;
    padding: 12px 18px;
    background: #fff;
  }
}

@keyframes tb-slideup {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes tb-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {

  .tb-filters,
  .tb-sheet__backdrop {
    animation: none;
  }
}

body.tb-noscroll {
  overflow: hidden;
}

@media (max-width: 640px) {
  .tb-gut {
    padding-left: 16px;
    padding-right: 16px;
  }

  .tb-main {
    padding-top: 24px;
  }

  .tb-h1 {
    font-size: 28px;
  }

  .tb-lead {
    font-size: var(--fs-base);
  }

  .tb-banner {
    align-items: flex-start;
    font-size: var(--fs-xs);
  }

  .tb-kpis {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .tb-gestion {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 22px;
  }

  .tb-gestion + .tb-kpis {
    margin-top: 12px;
  }

  .tb-gestion__card {
    padding: 14px 14px 16px;
  }

  .tb-gestion__num {
    font-size: 36px;
  }

  .tb-gestion__title,
  .tb-gestion__detail {
    font-size: var(--fs-2xs);
  }

  .tb-kpi {
    padding: 14px 14px 14px 38px;
  }

  .tb-kpi-num {
    font-size: 32px;
  }

  /* toolbar: search, sort y filtros — cada uno en su propia fila */
  .tb-toolbar {
    gap: 10px;
  }

  .tb-search {
    flex: 1 1 100%;
  }

  .tb-sortby {
    flex: 1 1 100%;
    min-width: 0;
  }

  .tb-sortby .tb-select-wrap {
    flex: 1 1 auto;
    min-width: 0;
  }

  .tb-select--sort {
    min-width: 0;
    width: 100%;
  }

  .tb-filterbtn {
    flex: 1 1 100%;
    justify-content: center;
  }

  /* table → stacked cards */
  .tb-thead {
    display: none;
  }

  .tb-row {
    grid-template-columns: 1fr;
    padding: 6px 16px 16px;
  }

  .tb-c-num {
    display: none;
  }

  .tb-c-name {
    padding: 10px 0 0;
  }

  .tb-c-comite {
    padding: 4px 0;
  }

  .tb-c-comite::before {
    content: 'Comité: ';
    color: var(--gob-slate-500);
    font-weight: 600;
  }

  .tb-c-avance {
    padding: 8px 0 2px;
  }

  .tb-c-alert:empty {
    display: none;
  }

  .tb-c-alert {
    padding: 6px 0 0;
    justify-content: flex-start;
    gap: 6px;
    color: #B45309;
    font-size: var(--fs-base);
    font-weight: 600;
  }

  .tb-c-alert::after {
    content: 'Con alertas';
  }

  .tb-c-action {
    padding: 10px 0 0;
    text-align: left;
  }

  .tb-detail {
    padding-left: 16px;
    padding-right: 16px;
  }
}