/*
 * CBTI · componentes del tema (header, footer, botones, íconos, encabezados de sección, tarjetas).
 * Valores tomados de los estilos en línea del diseño "Web CBTI v3"; los tokens viven en cbti-design.css.
 * Los estados hover/press marcados [DERIVADO] no estaban en el render estático: salen de los tokens
 * --accent-strong, --lift-hover y --press-scale del propio sistema.
 */

/* ---------- Base sobre Woostify ---------- */
/* Woostify fija la base en 14px y line-height 28px; el diseño trabaja sobre 16px y "normal". */
html { font-size: 16px; }
body.cbti { background: var(--surface-page); font-family: var(--font-body); font-size: 16px; line-height: normal; color: var(--text-body); word-break: normal; }
/* Woostify pinta h1–h6 de gris; en el diseño heredan. (0,0,3): gana a Woostify, pierde ante cualquier clase. */
html body :is(h1, h2, h3, h4, h5, h6) { color: inherit; line-height: normal; }
html body blockquote { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; quotes: none; }
html body blockquote::before, html body blockquote::after { content: none; }
body.cbti .site-content { padding: 0; }
body.cbti.cbti-full .site-content > .woostify-container,
body.cbti.cbti-full .site-content > .woostify-container > .content-area,
body.cbti.cbti-full .site-main { max-width: none; width: 100%; padding: 0; margin: 0; }
body.cbti.cbti-full .site-main > article,
body.cbti.cbti-full .site-main > article > .entry-content { margin: 0; padding: 0; }
.cbti-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Ícono (máscara SVG del set del diseño) ---------- */
.cbti-ico {
	display: inline-block; flex: 0 0 auto;
	width: var(--s, 20px); height: var(--s, 20px);
	background-color: var(--c, currentColor);
	-webkit-mask: var(--i) center / contain no-repeat;
	mask: var(--i) center / contain no-repeat;
}

/* ---------- Botón ---------- */
/* :is(a, button) iguala la especificidad de a[href="#"] del diseño (táctil ≤900px) y gana por orden.
   Las variantes van como .cbti-btn.cbti-btn--x para ganarle a esta regla (si no, pierden el borde). */
:is(a, button).cbti-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px; padding: 12px 22px; min-height: 44px;
	font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: 0.9375rem;
	letter-spacing: var(--tracking-button); line-height: 1; text-decoration: none; white-space: nowrap;
	border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer;
	transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
	--s: 17px;
}
.cbti-btn.cbti-btn--sm { gap: 6px; padding: 8px 14px; min-height: 34px; font-size: 0.8125rem; --s: 15px; }
.cbti-btn.cbti-btn--lg { gap: 10px; padding: 16px 30px; min-height: 54px; font-size: 1.0625rem; --s: 20px; }
.cbti-btn.cbti-btn--primary, .cbti-btn.cbti-btn--primary:visited { background: var(--accent); color: #fff !important; }
.cbti-btn.cbti-btn--navy, .cbti-btn.cbti-btn--navy:visited { background: var(--navy-800); color: #fff !important; }
.cbti-btn.cbti-btn--outline-dark, .cbti-btn.cbti-btn--outline-dark:visited { background: transparent; border-color: rgba(255, 255, 255, 0.42); color: #fff !important; }
.cbti-btn.cbti-btn--outline, .cbti-btn.cbti-btn--outline:visited { background: transparent; border-color: var(--border-strong); color: var(--navy-800) !important; }
/* [DERIVADO] */
.cbti-btn.cbti-btn--primary:hover { background: var(--accent-strong); }
.cbti-btn.cbti-btn--navy:hover { background: var(--navy-700); }
.cbti-btn.cbti-btn--outline-dark:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.7); }
.cbti-btn.cbti-btn--outline:hover { border-color: var(--navy-800); }
.cbti-btn:active { transform: scale(var(--press-scale)); }
.cbti-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Encabezado de sección ---------- */
.cbti-sh { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; text-align: left; max-width: 780px; font-family: var(--font-body); }
.cbti-sh__row { display: flex; align-items: center; gap: var(--space-3); }
.cbti-rule { display: block; flex: 0 0 auto; width: 40px; height: 4px; background: var(--grad-tricolor-h); border-radius: var(--radius-xs); }
.cbti-rule--lg { width: 48px; }
.cbti-eyebrow { font-size: var(--text-eyebrow); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-accent); }
.cbti-eyebrow--dark { color: var(--text-on-dark-muted); }
.cbti-sh__title { margin: 0; font-family: var(--font-display); font-size: var(--text-display-3); font-weight: var(--weight-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-heading); color: var(--text-strong); }
.cbti-sh__sub { margin: 0; font-size: var(--text-body-lg); line-height: var(--leading-body); color: var(--text-muted); text-wrap: pretty; }

/* ---------- Tarjeta, badge, chip ---------- */
.cbti-card {
	position: relative; height: 100%; box-sizing: border-box;
	background: var(--surface-card); color: var(--text-body);
	border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
	padding: var(--space-6); font-family: var(--font-body); box-shadow: var(--shadow-xs); overflow: hidden;
	transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.cbti-card--lg { padding: var(--space-8); }
.cbti-card--flush { padding: 0; }
a.cbti-card { display: block; text-decoration: none; }
a.cbti-card:hover, .cbti-card--hover:hover { box-shadow: var(--shadow-md); transform: var(--lift-hover); } /* [DERIVADO] */
.cbti-h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--weight-bold); color: var(--text-strong); line-height: var(--leading-heading); }
.cbti-badge {
	display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-xs);
	font-family: var(--font-body); font-size: var(--text-eyebrow); font-weight: var(--weight-bold); letter-spacing: 0.08em; text-transform: uppercase;
	background: var(--navy-100); color: var(--navy-700);
}
.cbti-badge--green { background: var(--green-050); color: var(--green-700); }
.cbti-badge--red { background: var(--red-050); color: var(--red-600); }
.cbti-badge--gold { background: var(--gold-050); color: var(--gold-600); }
/* Etiqueta de rubro (la clase .cbti-chip del diseño es otro componente: el filtro del directorio). */
.cbti-tag {
	display: inline-flex; align-items: center; gap: 6px; height: 30px; min-height: 30px; padding: 0 12px; border-radius: var(--radius-pill);
	font-family: var(--font-body); font-size: var(--text-caption); font-weight: var(--weight-medium);
	background: var(--white); color: var(--text-body) !important; border: 1px solid var(--border-subtle); text-decoration: none;
}
a.cbti-tag:hover { border-color: var(--navy-800); } /* [DERIVADO] */

/* ---------- Header ---------- */
.cbti-header { position: sticky; top: 0; z-index: 40; background: var(--surface-page); border-bottom: 1px solid var(--border-subtle); }
.admin-bar .cbti-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .cbti-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .cbti-header { top: 0; } }
.cbti-header__tri { height: 3px; background: var(--grad-tricolor-h); }
.cbti-header__in { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); min-height: 72px; display: flex; align-items: center; gap: var(--space-6); }
.cbti-header__brand { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; text-decoration: none; }
.cbti-header__nav { gap: var(--space-6); margin-left: auto; flex-wrap: wrap; }
.cbti-header__link { display: flex; flex-direction: column; gap: 5px; font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--text-muted) !important; text-decoration: none; }
.cbti-header__link::after { content: ""; height: 2px; background: transparent; transition: background var(--dur-base) var(--ease-standard); }
.cbti-header__link:hover, .cbti-header__link.is-active { color: var(--text-strong) !important; }
.cbti-header__link.is-active::after { background: var(--accent); }
.cbti-header__cta { align-items: center; }
.cbti-header__mob { margin-left: auto; align-items: center; gap: var(--space-3); }
.cbti-header__toggle {
	display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0;
	border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-page); cursor: pointer;
}
.cbti-header__toggle:hover, .cbti-header__toggle:focus { background: var(--surface-page); }
.cbti-header__toggle .cbti-ico { --s: 22px; --c: var(--text-strong); }
.cbti-header__toggle .cbti-ico--close { display: none; }
.cbti-header__toggle[aria-expanded="true"] .cbti-ico--open { display: none; }
.cbti-header__toggle[aria-expanded="true"] .cbti-ico--close { display: inline-block; }
.cbti-header__panel { border-top: 1px solid var(--border-subtle); background: var(--surface-page); padding: var(--space-4) var(--space-6) var(--space-6); flex-direction: column; gap: var(--space-1); }
.cbti-header__panel[hidden] { display: none !important; }
.cbti-header__panel a { display: block; padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--text-strong) !important; text-decoration: none; }
.cbti-header__panel a:last-child { border-bottom: 0; }

/* ---------- Footer ---------- */
.cbti-footer { background: var(--surface-inverse-deep); color: var(--text-on-dark); }
.cbti-footer__in { max-width: var(--container); margin: 0 auto; padding: var(--space-20) var(--space-6) var(--space-10); }
.cbti-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--space-12); }
.cbti-footer__logo { height: 48px; width: auto; display: block; }
.cbti-footer__name { margin-top: var(--space-4); font-size: var(--text-body-sm); line-height: 1.3; font-weight: var(--weight-semibold); color: var(--text-on-dark); }
.cbti-footer__about { margin: var(--space-5) 0 0; max-width: 320px; font-size: var(--text-body-sm); line-height: var(--leading-body); color: var(--text-on-dark-muted); }
.cbti-footer__social { display: flex; gap: var(--space-2); margin-top: var(--space-5); flex-wrap: wrap; }
.cbti-footer__social a { font-size: var(--text-caption); font-weight: var(--weight-semibold); color: rgba(255, 255, 255, 0.88) !important; padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-on-dark); text-decoration: none; transition: border-color var(--dur-base) var(--ease-standard); }
.cbti-footer__social a:hover { border-color: rgba(255, 255, 255, 0.5); } /* [DERIVADO] */
.cbti-footer__h { font-size: var(--text-eyebrow); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-on-dark-muted); margin-bottom: var(--space-4); }
.cbti-footer__links { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.cbti-footer__links a { font-size: var(--text-body-sm); color: rgba(255, 255, 255, 0.86) !important; text-decoration: none; }
.cbti-footer__links a:hover { color: #fff !important; } /* [DERIVADO] */
/* En el diseño estos enlaces son href="#" y reciben la regla táctil de 40px (≤900px); con destino real se mantiene. */
@media (max-width: 900px) { .cbti-footer__links a { min-height: 40px; display: inline-flex; align-items: center; } }
.cbti-footer__bottom { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--border-on-dark); display: flex; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; font-size: var(--text-caption); color: var(--text-on-dark-muted); }
.cbti-footer__bottom a { color: inherit !important; text-decoration: none; }
.cbti-footer__bottom a:hover { color: #fff !important; }
.cbti-footer__bottom .cbti-footer__credit a { color: rgba(255, 255, 255, 0.86) !important; font-weight: var(--weight-semibold); }

/* ---------- Noticias (blog nativo) ---------- */
.cbti-article > p, .cbti-article > ul, .cbti-article > ol { margin: 0 0 var(--space-5); font-size: var(--text-body); line-height: 1.75; color: var(--text-body); }
.cbti-article > h2, .cbti-article > h3 { margin: var(--space-10) 0 var(--space-4); font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--text-strong); line-height: var(--leading-heading); }
.cbti-article > h2 { font-size: var(--text-h2); }
.cbti-article > h3 { font-size: var(--text-h3); }
.cbti-article a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.cbti-article img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.cbti-article__img { margin: 0 0 var(--space-8); }
.cbti-article blockquote { margin: 0 0 var(--space-5); padding-left: var(--space-5); border-left: 4px solid var(--accent); font-size: var(--text-body-lg); color: var(--text-strong); }
.cbti-pager { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-10); flex-wrap: wrap; }
.cbti-pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--text-strong) !important; text-decoration: none; }
.cbti-pager .page-numbers.current { background: var(--navy-800); border-color: var(--navy-800); color: #fff !important; }

/* ---------- Páginas y entradas genéricas (blog nativo) ---------- */
body.cbti .site-content > .woostify-container { padding-top: var(--space-16); padding-bottom: var(--space-16); }
body.cbti .entry-title, body.cbti .page-header .entry-title { font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--text-strong); letter-spacing: var(--tracking-heading); }
/* En el diseño "← Noticias" es href="#" y recibe la regla táctil de 40px (≤900px). */
@media (max-width: 900px) { .cbti-back { min-height: 40px; } }