/**
 * Capital Institucional Presenter — Estilos
 * Paleta y tipografía alineadas con cpt-institucional.css existente.
 *
 * BEM: .cap-inst como bloque raíz.
 * Fallback CSS-only: paneles se muestran expandidos si JS no carga.
 */

/* ── Variables del sistema visual ───────────────────────────────────────────── */
.cap-inst {
  --inst-color-primary:      #0071ab;   /* Azul institucional principal        */
  --inst-color-secondary:    #05a0dd;   /* Azul claro (cabeceras de subnivel)  */
  --inst-color-accent:       #e14556;   /* Rojo acento (links de recursos)     */
  --inst-color-text:         #333333;   /* Texto base                          */
  --inst-color-text-muted:   #606060;   /* Texto secundario / contenido        */
  --inst-color-bg:           #ffffff;
  --inst-color-bg-panel:     #f5f5f5;   /* Fondo de headers de acordeón        */
  --inst-color-bg-content:   #f2f2f2;   /* Fondo del cuerpo expandido          */
  --inst-color-border:       #dddddd;
  --inst-color-header-text:  #ffffff;   /* Texto sobre cabeceras azules        */
  --inst-font-family:        "Montserrat", Arial, sans-serif;
  --inst-font-size-base:     0.9rem;
  --inst-font-size-titulo:   1.125rem;
  --inst-radius:             4px;
  --inst-transition:         0.3s ease;

  font-family: var(--inst-font-family);
  font-size:   var(--inst-font-size-base);
  color:       var(--inst-color-text);
  line-height: 1.6;
}

/* ── Contenido principal ────────────────────────────────────────────────────── */
.cap-inst__contenido {
  overflow-x: scroll;
  font-size:  var(--inst-font-size-base);
  color:      var(--inst-color-text-muted);
  margin-bottom: 1em;
}

.cap-inst__contenido b,
.cap-inst__contenido strong { font-weight: bold; }

.cap-inst__contenido h2,
.cap-inst__contenido h3,
.cap-inst__contenido h4,
.cap-inst__contenido h5,
.cap-inst__contenido h6 {
  margin-top:    2rem;
  margin-bottom: 1rem;
}

.cap-inst__contenido img {
  max-width: 100%;
  height:    auto;
}

.cap-inst__contenido ul,
.cap-inst__contenido ol {
  margin-bottom: 1.5rem;
  padding-left:  2rem;
}

.cap-inst__contenido ul li,
.cap-inst__contenido ol li { margin-bottom: 0.5rem; }

/* Tablas */
.cap-inst__contenido table {
  border-collapse: collapse;
  width:           100%;
  table-layout:    fixed;
  font-size:       var(--inst-font-size-base);
  min-width:       350px;
  margin-bottom:   1em;
}

.cap-inst__contenido table th,
.cap-inst__contenido table td {
  padding:    0.3em;
  border:     1px solid var(--inst-color-border);
  text-align: left;
  overflow:   hidden;
}

.cap-inst__contenido table th {
  background-color: var(--inst-color-text-muted);
  color:            #ffffff;
}

.cap-inst__contenido table tbody tr:nth-child(even) { background-color: #f2f2f2; }
.cap-inst__contenido table tbody tr:hover            { background-color: #dddddd; }

/* ── Lista de recursos ──────────────────────────────────────────────────────── */
.cap-inst__recursos {
  list-style:   none;
  margin:       0 0 1em 1rem;
  padding:      1em 0.5em;
  border-left:  2px solid var(--inst-color-border);
  color:        var(--inst-color-text-muted);
  font-size:    1rem;
}

.cap-inst__recurso-item {
  margin-bottom:  0.5rem;
  display:        flex;
  flex-direction: column;
  gap:            0.2rem;
}

.cap-inst__recurso-label {
  font-size:   0.8125rem;
  color:       var(--inst-color-text-muted);
  font-weight: 600;
}

.cap-inst__recurso-descripcion {
  color:     var(--inst-color-text-muted);
  font-size: 1rem;
}

.cap-inst__recurso-archivo,
.cap-inst__recurso-enlace {
  display:               inline-flex;
  align-items:           center;
  gap:                   0.35rem;
  text-decoration-color: var(--inst-color-accent);
  color:                 var(--inst-color-text);
  font-size:             1rem;
}

.cap-inst__recurso-archivo:hover,
.cap-inst__recurso-enlace:hover {
  text-decoration: underline;
  color:           var(--inst-color-primary);
}

.cap-inst__icono { font-size: 1rem; line-height: 1; }

/* ── Acordeón de hijos (modo hijos_acordeon) ────────────────────────────────── */
.cap-inst__acordeon { margin-top: 2rem; }

.cap-inst__panel {
  border-radius: var(--inst-radius);
  margin-bottom: 0;
}

/* Header — fondo gris claro (#f5f5f5), igual que .institucional-accordion .accordion-header */
.cap-inst__panel-header {
  display:          flex;
  justify-content:  space-between;
  align-items:      center;
  padding:          15px;
  background-color: #05a0dd;
  color:            #ffffff;
  cursor:           pointer;
  border-bottom:    1px solid #ffffff;
}

.cap-inst__panel-header:hover,
.cap-inst__panel-header.is-open { background: #0071ab; }

.cap-inst__panel-titulo {
  font-size: var(--inst-font-size-titulo);
  color:     #ffffff;
  margin:    0;
  flex:      1;
}

.cap-inst__panel-link {
  color:           var(--inst-color-primary);
  text-decoration: underline;
}

.cap-inst__acordeon .cap-inst__panel-link{
  color: #fff;
}

.cap-inst__panel-link:hover { color: #005080; }

/* Botón toggle — igual que .toggle-nietos */
.cap-inst__toggle {
  background:  none;
  border:      none;
  font-size:   1.5rem;
  font-weight: bold;
  cursor:      pointer;
  padding:     0 10px;
  color:       #ffffff;
  transition:  transform var(--inst-transition);
  line-height: 1;
  flex-shrink: 0;
}

.cap-inst__toggle-icon::before    { content: '+'; }
.cap-inst__toggle[aria-expanded="true"] .cap-inst__toggle-icon::before { content: '−'; }

/* Cuerpo del panel — fondo #f2f2f2, overflow scroll */
.cap-inst__panel-cuerpo {
  background-color: var(--inst-color-bg-content);
  overflow:         scroll;
  max-height:       2000px;
  transition:       max-height var(--inst-transition);
  padding:          1em;
}

.cap-inst__panel-cuerpo:not([hidden]) { display: block; }

.cap-inst__link-row {
  padding:          12px 15px;
  background-color: #f5f5f5;
  border-bottom:    1px solid #dddddd;
}

.cap-inst__link-row:hover {
  background-color: #eeeeee;
}

/* ── Acordeón de links (modo hijos_links) ───────────────────────────────────── */
.cap-inst__links-acordeon {
  margin-top: 2rem;
}

/* Subniveles anidados — indentación progresiva */
.cap-inst__links-acordeon--depth-2,
.cap-inst__links-acordeon--depth-3,
.cap-inst__links-acordeon--depth-4 {
  margin-left:  1rem;
  border-left:  2px solid #dddddd;
  padding-left: 0.75rem;
  margin-top:   0;
  background: #ffffff;
}

.cap-inst__links-acordeon--depth-2 .cap-inst__link-header {
  background-color: #ffffff;
}

.cap-inst__link-panel {
  border-radius: 4px;
  margin-bottom: 0.25rem;
}

/* Cabecera — fondo #f5f5f5, letra #0071ab */
.cap-inst__link-header {
  display:          flex;
  justify-content:  space-between;
  align-items:      center;
  padding:          15px;
  background-color: #f5f5f5;
  cursor:           pointer;
  border-bottom:    1px solid #dddddd;
}

.cap-inst__link-header:hover,
.cap-inst__link-header.is-open {
  background-color: #e8e8e8;
}

.cap-inst__link-titulo {
  font-size: 1.125rem;
  margin:    0;
  flex:      1;
}

.cap-inst__link {
  color:           #0071ab;
  text-decoration: underline;
}

.cap-inst__link:hover {
  color: #005080;
}

/* Botón toggle — color azul sobre fondo gris */
.cap-inst__toggle--link {
  color: #0071ab;
}

.cap-inst__toggle--link:hover {
  color: #005080;
}

/* Cuerpo del panel de links */
.cap-inst__link-cuerpo {
  background-color: #fff;
  overflow:         scroll;
  max-height:       1500px;
  transition:       max-height 0.3s ease;
  padding:          0.5em 0;
}

.cap-inst__link-cuerpo:not([hidden]) {
  display: block;
}