/**
 * 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;
  --inst-color-secondary:    #05a0dd;
  --inst-color-accent:       #e14556;
  --inst-color-text:         #333333;
  --inst-color-text-muted:   #606060;
  --inst-color-bg:           #ffffff;
  --inst-color-bg-panel:     #f5f5f5;
  --inst-color-bg-content:   #f2f2f2;
  --inst-color-border:       #dddddd;
  --inst-color-header-text:  #ffffff;
  --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; }

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

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

.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: '−'; }

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

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

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

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

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

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