/* ==========================================================================
   Fab-Tabs — Sistema de pestañas anidables para el módulo de Transición
   Energética (Fundación Andrés Bello). Generado por el shortcode [fab_tabs].
   Estructura esperada:
     <div class="fab-tabs" data-fab-tabs>
       <div class="fab-tabs-row" role="tablist">
         <button class="fab-tab-btn" data-tab="id">…</button>
       </div>
       <div class="fab-tabs-content">
         <div class="fab-tab-panel" data-tab="id">…</div>
       </div>
     </div>
   ========================================================================== */

/* ── Variables ────────────────────────────────────────────────────────
   Definiciones --fab-tab-* que referencian las variables globales de
   styles.css (acentos de marca). Se usan para fondo suave (soft) y
   color de acento de cada pestaña activa.
   ──────────────────────────────────────────────────────────────────── */
:root {
  --fab-tab-accent:       var(--accent, #303995);
  --fab-tab-accent-soft:  var(--accent-soft, #E6E6F4);
  --fab-tab-accent-2:     var(--accent-2, #695AC6);
  --fab-tab-accent-2-soft: var(--accent-2-soft, #EEEAFA);
  --fab-tab-accent-3:     var(--accent-3, #88CFE3);
  --fab-tab-accent-3-soft: var(--accent-3-soft, #E8F5F9);
  --fab-tab-accent-4:     var(--accent-4, #D8E022);
  --fab-tab-accent-4-soft: var(--accent-4-soft, #F8FAE0);
  --fab-tab-color-ink:   var(--color-ink, #2A211B);
}

/* Valores por defecto para cualquier grupo de tabs. */
.fab-tabs {
  --fab-tab-soft:  var(--fab-tab-accent-soft);
  --fab-tab-color: var(--fab-tab-accent);
  display: block;
  margin-bottom: 20px;
}

/* ── Clases de color para variantes ──────────────────────────────────
   Agregar .c1 / .c2 / .c3 al botón y al panel para cambiar el color
   sin usar style="" inline.
   ──────────────────────────────────────────────────────────────────── */
.fab-tab-btn--c1,
.fab-tab-panel--c1 {
  --fab-tab-soft:  var(--fab-tab-accent-soft);
  --fab-tab-color: var(--fab-tab-accent);
}
.fab-tab-btn--c2,
.fab-tab-panel--c2 {
  --fab-tab-soft:  var(--fab-tab-accent-2-soft);
  --fab-tab-color: var(--fab-tab-accent-2);
}
.fab-tab-btn--c3,
.fab-tab-panel--c3 {
  --fab-tab-soft:  var(--fab-tab-accent-3-soft);
  --fab-tab-color: var(--fab-tab-accent-3);
}

.fab-tab-btn--c4,
.fab-tab-panel--c4 {
  --fab-tab-soft:  var(--fab-tab-accent-4-soft);
  --fab-tab-color: var(--fab-tab-accent-4);
}

/* ---- Fila de botones --------------------------------------------------- */
.fab-tabs-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid #DAD6CE;
  padding-bottom: 0;
  margin-bottom: 18px;
}

/* Ancho automático por cantidad de pestañas: flex:1 reparte 1/N a cada botón. */
.fab-tabs-row .fab-tab-btn {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: #6D7173;
  padding: 11px 16px;
  border-radius: 6px 6px 0 0;
  transition: background .15s ease, color .15s ease;
}

/* Variante 'auto': cada pestaña crece según su contenido. */
.fab-tabs-mode-auto .fab-tab-btn {
  flex: 0 1 auto;
  white-space: nowrap;
}

.fab-tabs-row .fab-tab-btn:hover:not(.fab-tab-btn--active) {
  color: #2A211B;
}

/* Estado activo: fondo suave + acento definidos por --fab-tab-soft/color por botón. */
.fab-tabs-row .fab-tab-btn.fab-tab-btn--active {
  background: var(--fab-tab-soft, #E6E6F4);
  color: var(--fab-tab-color-ink);
  font-weight: 600;
}

/* ---- Paneles ----------------------------------------------------------- */
.fab-tabs-content {
  display: block;
}

.fab-tab-panel {
  display: none;
}

.fab-tab-panel.fab-tab-panel--active {
  display: block;
}

/* ---- Variante interna (sub-pestañas) ----------------------------------- */
.fab-tabs--inner {
  margin-top: 15px;
}

.fab-tabs--inner .fab-tabs-row {
  border-bottom-color: #E9E5DD;
  margin-bottom: 14px;
}

.fab-tabs--inner .fab-tab-btn {
  font-size: 12px;
  padding: 9px 14px;
  border-radius: 4px 4px 0 0;
}

.fab-stat-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 560px;
    margin: 24px auto 26px;
}

.fab-stat-row .stat-row .stat-box {
    border-top: 3px solid var(--accent);
}

.fab-stat-row .stat-box {
    background: #F2EFEB;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.fab-stat-row .label {
  font-size: 12px;
  color: #6D7173;
  margin: 0 0 4px;
}

.fab-stat-row .value {
  font-size: 23px;
  font-weight: 600;
  color: #2A211B;
  margin: 0;
}

.fab-stat-row.stat-row-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 760px;
}

.fab-tab-inner-content p {
  font-size: 17px;
  color: #4A4038;
  line-height: 1.7;
  margin: 0 0 16px;
  padding: 0;
}

.fab-tab-inner-content .figure-wrap {
    margin: 20px auto 26px;
    max-width: 820px;
}

.fab-tab-inner-content .figure-caption {
    font-size: 11.5px;
    color: var(--stone);
    margin-top: 8px;
    line-height: 1.5;
    text-align: center;
}

.fab-tab-inner-content sup {
    font-size: 10px;
    line-height: 0;
}

.fab-tab-inner-content sup a {
    color: #303995;
    text-decoration: none;
    font-weight: 600;
}

.fab-tab-inner-content .lead-close {
    font-family: "IBM Plex Serif", serif;
    font-size: 19px;
    color: #4A4038;
    line-height: 1.55;
    font-style: italic;
    border-left: 3px solid #303995;
    padding-left: 16px;
}
.fab-tab-inner-content h3 {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 17px;
    color: #4A4038;
    line-height: 1.7;
    margin: 0 0 12px;
    font-weight: 600;
}

.fab-border-color-accent {
    border-color: var(--fab-tab-accent) !important;
}

.fab-border-color-accent-2 {
    border-color: var(--fab-tab-accent-2) !important;
}

.fab-border-color-accent-3 {
    border-color: var(--fab-tab-accent-3) !important;
}

.fab-border-color-accent-4 {
    border-color: var(--fab-tab-accent-4) !important;
}

/* ---- Responsive: apilar pestañas verticalmente en móvil ---------------- */
@media (max-width: 720px) {
  .fab-tabs-row {
    flex-direction: column;
    gap: 2px;
    border-bottom: none;
    margin-bottom: 14px;
  }
  .fab-tabs-row .fab-tab-btn {
    flex: 0 0 auto;
    width: 100%;
    text-align: left;
    font-size: 13px;
    padding: 11px 14px;
    border-radius: 6px;
    border-bottom: 1px solid #E9E5DD;
  }
  .fab-tabs-row .fab-tab-btn.fab-tab-btn--active {
    border-bottom: 1px solid var(--fab-tab-color, #303995);
  }
}

@media (max-width: 480px) {
  .fab-tabs-row {
    gap: 1px;
  }
  .fab-tabs-row .fab-tab-btn {
    font-size: 12px;
    padding: 10px 12px;
  }
}