/* ==========================================================================
   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;

  /* 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 la plantilla de WordPress -------------------------
   Solo aplican dentro de WordPress (body class que agrega body_class() para
   page-tablero-meta2036.php). En local no hay nada que ajustar. */
.page-template-page-tablero-meta2036 .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 {
  /* 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;
}

/* --- Section heading (rotula cada bloque de cifras) ---------------------- */
.tb-sectionhead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 30px 0 0;
}

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

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

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

.tb-kpi {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  /* 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);
}

/* --- 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: 26px 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;
}

/* --- Filtered results summary -------------------------------------------
   Contraparte secundaria del "Resumen general": misma familia visual (tarjeta
   blanca, borde de 1px, radio 12px) pero en una sola pieza horizontal, con
   cifras más pequeñas, sin iconos por métrica y sin interacción — informa, no
   filtra. Cada celda lleva su referencia global al lado de la cifra y una
   barra que dibuja la misma proporción. Ver renderFilteredSummary().         */
.tb-fsum {
  display: block;
  margin: 0 0 16px;
  /* el padding vive en __head / __grid para que el separador horizontal
     bajo el encabezado llegue de borde a borde de la tarjeta */
  padding: 0;
  background: var(--gob-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

/* .tb-fsum fija display:block, así que el atributo [hidden] necesita su
   propia regla para ganarle (misma trampa que .tb-field[hidden]). */
.tb-fsum[hidden] {
  display: none;
}

.tb-fsum__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--color-border);
}

/* El icono vive DENTRO del h2 (no como hermano) para que nunca quede huérfano
   en su propia línea cuando el título envuelve en pantallas angostas. */
.tb-fsum__title svg {
  flex: none;
  color: var(--gob-action-blue);
}

.tb-fsum__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.25;
  color: var(--gob-dark-blue);
}

/* "70 de 85 iniciativas": el alcance de la selección, en la misma línea del
   título. Es el dato que resume la tarjeta, no una explicación del cálculo. */
.tb-fsum__meta {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.tb-fsum__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  /* sin padding vertical: el aire de arriba y abajo lo pone cada celda, para que
     los separadores verticales lleguen de la línea del encabezado al pie de la
     tarjeta en vez de medir sólo lo que ocupa el texto */
  padding: 0 22px;
}

.tb-fsum__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 16px 20px;
  border-left: 1px solid var(--color-border);
  min-width: 0;
}

.tb-fsum__stat:first-child {
  padding-left: 0;
  border-left: none;
}

.tb-fsum__stat:last-child {
  padding-right: 0;
}

.tb-fsum__lbl {
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.3;
  color: var(--gob-slate-600);
}

/* La referencia ("general 44%") envuelve a dos líneas cuando no cabe al lado de
   la cifra; por eso crece hacia abajo y es la barra la que se ancla al pie de la
   celda (margin-top:auto), no el bloque entero: así todas las cifras de la fila
   comparten la misma línea y las barras siguen alineadas entre sí. */
.tb-fsum__value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 0 7px;
  margin: 0;
}

/* 32px: bien por debajo de los 40px del resumen general (la jerarquía
   secundaria se mantiene), pero con suficiente peso para leerse de un vistazo. */
.tb-fsum__num {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--gob-dark-blue);
}

.tb-fsum__ref {
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text-muted);
}

/* Barra de proporción: selección sobre el total global (en "Avance promedio",
   el porcentaje en sí). Es decorativa — la cifra y su referencia ya dicen lo
   mismo en texto —, de ahí el aria-hidden en el marcado. */
.tb-fsum__bar {
  position: relative;
  display: block;
  height: 5px;
  /* auto = al pie de la celda, ver .tb-fsum__value (el gap de la columna
     garantiza la separación mínima con la cifra) */
  margin-top: auto;
  border-radius: 999px;
  background: var(--gob-slate-200);
  overflow: visible;
}

.tb-fsum__bar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--gob-dark-blue);
  transition: width .18s ease-out;
}

/* Marca del promedio general sobre la barra de avance: deja ver si la
   selección va por encima o por debajo del plan completo. */
.tb-fsum__bar-tick {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 13px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--gob-dark-blue);
  transform: translateY(-50%);
}

.tb-fsum__stat--accent .tb-fsum__lbl,
.tb-fsum__stat--accent .tb-fsum__num {
  color: var(--gob-action-blue);
}

.tb-fsum__stat--accent .tb-fsum__bar-fill {
  background: var(--gob-action-blue);
}

/* El rojo sólo entra cuando la selección tiene alertas (is-risk desde app.js);
   en cero la celda se lee igual que las demás. */
.tb-fsum__stat--risk.is-risk .tb-fsum__lbl,
.tb-fsum__stat--risk.is-risk .tb-fsum__num {
  color: var(--gob-flag-red);
}

.tb-fsum__stat--risk.is-risk .tb-fsum__bar-fill {
  background: var(--gob-flag-red);
}
/* --- 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(--gob-blue-50);
  border-radius: 14px;
  background: none;
  overflow: hidden;
}

.tb-filters__head {
  display: none;
}

/* header only in the mobile sheet */
.tb-filters__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--gob-dark-blue);
}

.tb-filters__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: var(--gob-slate-100);
  color: var(--gob-dark-blue);
  cursor: pointer;
}

.tb-filters__close:hover {
  background: var(--gob-slate-200);
}

/* Filters — a two-column grid (rows of two); collapses to one column when tight. */
.tb-filters__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 26px;
  padding: 22px;
  align-items: start;
}

.tb-filters__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  border-top: 1px solid var(--gob-blue-50);
  background: rgba(255, 255, 255, .45);
}

.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;
}

.tb-field__label {
  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) */
.tb-seg {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--gob-slate-100);
  border: 1px solid var(--color-border);
  border-radius: 11px;
  width: fit-content;
  max-width: 100%;
}

.tb-seg__btn {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  height: 36px;
  padding: 0 16px;
  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: none;
  border: none;
  border-radius: 8px;
  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: 900px) {
  .tb-filters__body {
    grid-template-columns: 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);
  }

  /* el resumen filtrado sigue la misma cadencia: 3 columnas, 2 filas */
  .tb-fsum__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .tb-fsum__stat:nth-child(3n+1) {
    padding-left: 0;
    border-left: none;
  }

  .tb-fsum__stat:nth-child(3n) {
    padding-right: 0;
  }
}

/* >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 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    padding: 16px 18px;
    border-bottom: 1px solid var(--color-border);
  }

  .tb-filters__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px;
    gap: 24px;
  }

  .tb-filters__foot {
    flex: none;
    background: #fff;
  }

  .tb-seg {
    width: 100%;
  }

  .tb-seg__btn {
    flex: 1 1 0;
    padding: 0 8px;
  }
}

@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-fsum__head {
    padding: 14px 16px;
  }

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

  .tb-fsum__grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 16px;
  }

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

  /* a dos columnas las etiquetas largas envuelven; reservando dos líneas para
     todas, las cifras de una misma fila arrancan a la misma altura */
  .tb-fsum__lbl {
    min-height: 2.6em;
  }

  /* con 2 columnas el separador vertical va en la columna par: hay que
     deshacer antes la cadencia de 3 que dejó el breakpoint de 991 */
  .tb-fsum__stat:nth-child(3n+1) {
    padding-left: 14px;
    border-left: 1px solid var(--color-border);
  }

  .tb-fsum__stat:nth-child(3n) {
    padding-right: 14px;
  }

  .tb-fsum__stat:nth-child(odd) {
    padding-left: 0;
    border-left: none;
  }

  .tb-fsum__stat:nth-child(even) {
    padding-right: 0;
  }

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

  .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;
  }
}