/* ========================================
   TRANSPARENCIA — layout de dos columnas (sidebar + contenido) y sidebar
   "Índice de secciones". Medidas según Figma (archivo "Web-INACOOP",
   node 740-15079).
   ======================================== */

.inacoop-transparencia__layout {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  max-width: 72.5rem;
  /* 1160px, igual que .inacoop-page-header__inner */
  margin: 0 auto;
  padding: 2.5rem 0 5rem;
}

.inacoop-transparencia__sidebar {
  flex: 0 0 16.25rem;
  /* 260px */
  position: sticky;
  top: 175px;
}

.inacoop-transparencia__content {
  flex: 1 1 0;
  min-width: 0;
}

/* Sidebar */
.inacoop-transparencia-sidebar {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 0.75rem;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1);
  padding: 0.75rem 0;
  font-family: Asap, sans-serif;
}

.inacoop-transparencia-sidebar .inacoop-transparencia-sidebar__group+.inacoop-transparencia-sidebar__group {
  margin-top: 0.125rem;
}

.inacoop-transparencia-sidebar .inacoop-transparencia-sidebar__section {
  display: block;
  padding: 0.5rem 0.75rem 0.5rem 0.875rem;
  border-left: 2px solid transparent;
  border-radius: 0 0.5rem 0.5rem 0;
  color: #401e5e;
  font-size: 0.8125rem;
  line-height: 1.5;
  text-decoration: none;
}

.inacoop-transparencia-sidebar .inacoop-transparencia-sidebar__section:hover {
  background: #f5f5f5;
}

.inacoop-transparencia-sidebar .inacoop-transparencia-sidebar__group.is-open>.inacoop-transparencia-sidebar__section {
  background: #e8f4f8;
  border-left-color: #401e5e;
}

.inacoop-transparencia-sidebar .inacoop-transparencia-sidebar__group.is-open>.inacoop-transparencia-sidebar__section:hover {
  background: #e8f4f8;
}

.inacoop-transparencia-sidebar .inacoop-transparencia-sidebar__items {
  list-style: none;
  margin: 0.125rem 0 0;
  padding: 0;
}

.inacoop-transparencia-sidebar .inacoop-transparencia-sidebar__item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem 0.375rem 1.25rem;
  color: #555;
  font-size: 0.8125rem;
  line-height: 1.5;
  text-decoration: none;
}

.inacoop-transparencia-sidebar .inacoop-transparencia-sidebar__item:hover .inacoop-transparencia-sidebar__item-label {
  color: #401e5e;
}

.inacoop-transparencia-sidebar .inacoop-transparencia-sidebar__item-bullet {
  color: #0077a3;
}

/* Scroll-spy: item cuya sección está actualmente en viewport (ver
   initSidebarScrollSpy en transparencia.js). Mismo idioma visual que el
   nav-link activo de institucional (texto violeta + bold), sin fondo
   propio para no competir con el highlight celeste del grupo -- que ya
   indica "estás en Transparencia Activa", esto indica "en Cometidos". */
.inacoop-transparencia-sidebar .inacoop-transparencia-sidebar__item.is-active .inacoop-transparencia-sidebar__item-label {
  color: #401e5e;
  font-weight: 600;
}

/* ========================================
   Trigger mobile "En esta página: {actual}" (Figma node 740-15779). En
   desktop no existe (display:none acá abajo); en mobile reemplaza al
   sidebar visualmente, que se colapsa detrás de él y se abre como panel
   -- mismos estilos que el sidebar de desktop, sólo cambia si está
   visible (ver initMobileSidebarTrigger en transparencia.js).
   ======================================== */

#inacoop-transparencia .inacoop-transparencia-mobile-trigger {
  display: none;
}

@media (max-width: 900px) {
  .inacoop-transparencia__layout {
    flex-direction: column;
    padding: 1.25rem 1.25rem 3rem;
    gap: 1.25rem;
  }

  .inacoop-transparencia__sidebar {
    position: static;
    flex-basis: auto;
    width: 100%;
  }

  #inacoop-transparencia button.inacoop-transparencia-mobile-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 3rem; /* 48px */
    margin: 0;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid #dde6ea;
    border-radius: 0.75rem;
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1);
    font-family: Asap, sans-serif;
    cursor: pointer;
  }

  .inacoop-transparencia-mobile-trigger__icon {
    flex-shrink: 0;
  }

  .inacoop-transparencia-mobile-trigger__label {
    flex-shrink: 0;
    color: #666;
    font-weight: 500;
    font-size: 0.9375rem; /* 15px */
    line-height: 1.5;
  }

  .inacoop-transparencia-mobile-trigger__current {
    overflow: hidden;
    color: #401e5e;
    font-weight: 500;
    font-size: 0.9375rem; /* 15px */
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .inacoop-transparencia-mobile-trigger__chevron {
    flex-shrink: 0;
    margin-left: auto;
    transition: transform 0.2s ease;
  }

  .inacoop-transparencia-mobile-trigger.is-open .inacoop-transparencia-mobile-trigger__chevron {
    transform: rotate(180deg);
  }

  /* El panel desplegable ES el <nav> del sidebar, sin duplicar markup --
     por eso el selector de hermano adyacente en vez de una clase propia. */
  .inacoop-transparencia-sidebar {
    display: none;
    margin-top: 0.5rem;
  }

  .inacoop-transparencia-mobile-trigger.is-open + .inacoop-transparencia-sidebar {
    display: block;
  }
}

/* Contenido — encabezado y bajada de "Transparencia Activa"
   (Figma node 768-24 desktop / 768-28 mobile). */
.inacoop-transparencia__content .inacoop-transparencia-content__heading {
  margin: 0;
  color: #0077a3;
  font-family: Asap, sans-serif;
  font-weight: 700;
  font-size: 1.875rem;
  /* 30px */
  line-height: 1.5;
}

.inacoop-transparencia__content .inacoop-transparencia-content__intro {
  margin: 0.75rem 0 0;
  max-width: 32.625rem;
  /* 522px */
  color: #555;
  font-family: Asap, sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  /* 15px */
  line-height: 1.625;
}

.inacoop-transparencia__content .inacoop-transparencia-content__section+.inacoop-transparencia-content__section {
  margin-top: 2.5rem;
}

@media (max-width: 767px) {
  .inacoop-transparencia__content .inacoop-transparencia-content__heading {
    font-size: 1.375rem;
    /* 22px */
  }

  .inacoop-transparencia__content .inacoop-transparencia-content__intro {
    max-width: none;
  }
}

/* ========================================
   Acordeón de "Transparencia Activa" (Figma node 740-15180 desktop /
   740-15804 mobile). Cada item es independiente -- a diferencia del
   acordeón del sidebar, acá pueden quedar varios (o todos) abiertos a la
   vez; ver initAccordions() en transparencia.js.
   Mismo patrón de reseteo de <button> que .inacoop-institucional__area-header
   en institucional (prefijo con el id del wrapper para ganarle a los
   estilos de <button> de hello-biz).
   ======================================== */

.inacoop-transparencia-accordion {
  margin-top: 1.5rem;
}

#inacoop-transparencia .inacoop-transparencia-accordion__item {
  border: 1px solid rgba(0, 119, 163, 0.4);
  border-radius: 0.75rem;
  overflow: hidden;
}

#inacoop-transparencia .inacoop-transparencia-accordion__item+.inacoop-transparencia-accordion__item {
  margin-top: 1rem;
}

#inacoop-transparencia .inacoop-transparencia-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 3.5rem;
  /* 56px */
  padding: 1rem 1.25rem;
  background-color: #f0f7fb;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  font: inherit;
  cursor: default;
  /* hello-biz pone white-space: nowrap en todos los <button>: sin esto el
     título no baja de línea y se corta en mobile. */
  white-space: normal;
}

#inacoop-transparencia button.inacoop-transparencia-accordion__header {
  cursor: pointer;
}

#inacoop-transparencia .inacoop-transparencia-accordion__title {
  font-family: Asap, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  /* 16px */
  line-height: 1.375;
  /* 22px */
  color: #0077a3;
}

#inacoop-transparencia .inacoop-transparencia-accordion__chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

#inacoop-transparencia .inacoop-transparencia-accordion__item.is-open .inacoop-transparencia-accordion__chevron {
  transform: rotate(180deg);
}

#inacoop-transparencia .inacoop-transparencia-accordion__panel {
  padding: 1rem 20px 1.25rem;
  background-color: #fff;
  border-top: 1px solid #e8e8e8;
}

#inacoop-transparencia .inacoop-transparencia-accordion__panel>*+* {
  margin-top: 1rem;
}

#inacoop-transparencia .inacoop-transparencia-accordion__group-label {
  margin: 0 0 0.5rem;
  font-family: Asap, sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  /* 12px */
  line-height: 1.5;
  letter-spacing: 0.06rem;
  /* ~0.96px a 12px */
  text-transform: uppercase;
  color: #888;
}

#inacoop-transparencia .inacoop-transparencia-accordion__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  max-width: 24rem;
  /* 384px */
  width: 100%;
  min-height: 2.75rem;
  /* 44px */
  padding: 0 1rem;
  border: 1px solid #e8e8e8;
  border-radius: 0.5rem;
  color: #401e5e;
  font-family: Asap, sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  /* 15px */
  line-height: 1.5;
  text-decoration: none;
}

#inacoop-transparencia .inacoop-transparencia-accordion__link:hover {
  border-color: #0077a3;
}

#inacoop-transparencia .inacoop-transparencia-accordion__group-links,
#inacoop-transparencia .inacoop-transparencia-accordion__downloads-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#inacoop-transparencia .inacoop-transparencia-accordion__download {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.625rem;
  /* 10px */
  color: #0077a3;
  font-family: Asap, sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  /* 15px */
  line-height: 1.375;
  /* 20.625px */
  text-decoration: none;
}

#inacoop-transparencia .inacoop-transparencia-accordion__download:hover {
  text-decoration: underline;
}

#inacoop-transparencia .inacoop-transparencia-accordion__download-icon {
  flex-shrink: 0;
  margin-top: 0.25rem;
  /* alinea con la primera línea del texto, como en Figma (pt-4px) */
}

#inacoop-transparencia .inacoop-transparencia-accordion__image {
  width: 100%;
  aspect-ratio: 890 / 538;
  /* proporción real del organigrama exportado */
  border: 1px solid #e8e8e8;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

#inacoop-transparencia .inacoop-transparencia-accordion__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#inacoop-transparencia .inacoop-transparencia-accordion__image+.inacoop-transparencia-accordion__downloads {
  margin-top: 1.25rem;
  /* 20px, como en Figma -- más que el gap genérico entre bloques */
}

/* ========================================
   Acordeón anidado por año ("YearAccordion", dentro de un block 'years' --
   ej. "Informes de auditoría" en Información de gestión). Reutiliza el
   marcador .inacoop-transparencia-accordion__toggle para el JS (ver
   initContentAccordion en transparencia.js) pero tiene su propio estilo,
   más chico y neutro que el acordeón de items de nivel 1.
   ======================================== */

#inacoop-transparencia .inacoop-transparencia-accordion__years-list .inacoop-transparencia-year+.inacoop-transparencia-year {
  margin-top: 0.5rem;
}

#inacoop-transparencia .inacoop-transparencia-year {
  border: 1px solid #e8e8e8;
  border-radius: 0.5rem;
  overflow: hidden;
}

#inacoop-transparencia .inacoop-transparencia-year__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 3.25rem;
  /* 52px */
  padding: 0.75rem 1rem;
  background-color: #fff;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  font: inherit;
  cursor: default;
  /* hello-biz pone white-space: nowrap en todos los <button>: sin esto el
     título no baja de línea y se corta en mobile. */
  white-space: normal;
}

#inacoop-transparencia button.inacoop-transparencia-year__header {
  cursor: pointer;
}

#inacoop-transparencia .inacoop-transparencia-year__label {
  font-family: Asap, sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  /* 15px */
  line-height: 1.5;
  /* 22.5px */
  color: #401e5e;
}

#inacoop-transparencia .inacoop-transparencia-year__chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

#inacoop-transparencia .inacoop-transparencia-year.is-open .inacoop-transparencia-year__chevron {
  transform: rotate(180deg);
}

#inacoop-transparencia .inacoop-transparencia-year__panel {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.75rem 1rem;
  background-color: #fff;
  border-top: 1px solid #e8e8e8;
}

/* El atributo [hidden] por sí solo no alcanza: la regla de arriba fija
   "display: flex" con más especificidad que el estilo por default de
   [hidden] del user-agent, así que sin esto el panel quedaría visible
   igual estando hidden. */
#inacoop-transparencia .inacoop-transparencia-year__panel[hidden] {
  display: none;
}

#inacoop-transparencia .inacoop-transparencia-year__panel:empty {
  display: none;
}

/* Actas de Directorio: una fila por mes con las fechas como botones */
#inacoop-transparencia .inacoop-transparencia-actas__mes {
  display: grid;
  grid-template-columns: 7rem 1fr;
  align-items: start;
  gap: 0.75rem;
  padding: 0.375rem 0;
}

#inacoop-transparencia .inacoop-transparencia-actas__mes .inacoop-transparencia-actas__mes-label {
  margin: 0;
  padding-top: 0.375rem;
  color: #401e5e;
  font-family: Asap, sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.375;
}

#inacoop-transparencia .inacoop-transparencia-actas__fechas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#inacoop-transparencia .inacoop-transparencia-actas__fechas .inacoop-transparencia-actas__fecha {
  display: inline-block;
  padding: 0.3125rem 0.75rem;
  border: 1px solid #b8d8e8;
  border-radius: 0.5rem;
  background-color: #fff;
  color: #0077a3;
  font-family: Asap, sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.375;
  text-decoration: none;
  white-space: nowrap;
}

#inacoop-transparencia .inacoop-transparencia-actas__fechas .inacoop-transparencia-actas__fecha:hover,
#inacoop-transparencia .inacoop-transparencia-actas__fechas .inacoop-transparencia-actas__fecha:focus-visible {
  border-color: #0077a3;
  background-color: #f5f9fc;
}

@media (max-width: 767px) {
  #inacoop-transparencia .inacoop-transparencia-actas__mes {
    grid-template-columns: 1fr;
    gap: 0.375rem;
  }

  #inacoop-transparencia .inacoop-transparencia-actas__mes .inacoop-transparencia-actas__mes-label {
    padding-top: 0;
  }
}

/* ========================================
   "Transparencia Pasiva" — sección estática (Figma node 740-15484
   desktop / 740-16108 mobile). Reutiliza
   .inacoop-transparencia-accordion__download(-icon)/-links para los PDF
   de "Marco normativo" (ver reglas de esa familia más arriba).
   ======================================== */

#inacoop-transparencia .inacoop-transparencia-pasiva {
  background: #e8f4f8;
  border-top: 4px solid #0077a3;
  padding: 3rem 1.5rem;
}

#inacoop-transparencia .inacoop-transparencia-pasiva__inner {
  max-width: 48.75rem; /* 780px */
}

#inacoop-transparencia .inacoop-transparencia-pasiva__inner > * + * {
  margin-top: 1.25rem;
}

#inacoop-transparencia .inacoop-transparencia-pasiva__heading {
  margin: 0;
  color: #0077a3;
  font-family: Asap, sans-serif;
  font-weight: 700;
  font-size: 1.75rem; /* 28px */
  line-height: 1.5;
}

#inacoop-transparencia .inacoop-transparencia-pasiva__intro {
  margin: 0;
  max-width: 32.625rem; /* 522px */
  color: #444;
  font-family: Asap, sans-serif;
  font-weight: 400;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.625;
}

#inacoop-transparencia .inacoop-transparencia-pasiva__card {
  background: #fff;
  border: 1px solid #c5dde8;
  border-radius: 0.75rem;
  padding: 1.25rem;
}

#inacoop-transparencia .inacoop-transparencia-pasiva__card-title {
  margin: 0;
  color: #401e5e;
  font-family: Asap, sans-serif;
  font-weight: 600;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.5;
}

#inacoop-transparencia .inacoop-transparencia-pasiva__card-text {
  margin: 0.75rem 0 0;
  color: #555;
  font-family: Asap, sans-serif;
  font-weight: 400;
  font-size: 0.875rem; /* 14px */
  line-height: 1.625;
}

#inacoop-transparencia .inacoop-transparencia-pasiva__card-text strong {
  font-weight: 600;
}

#inacoop-transparencia .inacoop-transparencia-pasiva__checklist {
  display: flex;
  flex-direction: column;
  gap: 0.375rem; /* 6px */
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

#inacoop-transparencia .inacoop-transparencia-pasiva__checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem; /* 8px */
  color: #555;
  font-family: Asap, sans-serif;
  font-weight: 400;
  font-size: 0.875rem; /* 14px */
  line-height: 1.5;
}

#inacoop-transparencia .inacoop-transparencia-pasiva__checklist img {
  flex-shrink: 0;
  margin-top: 0.1875rem; /* 3px, alinea con la primera línea */
}

#inacoop-transparencia .inacoop-transparencia-pasiva__card-footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e8e8e8;
}

#inacoop-transparencia .inacoop-transparencia-pasiva__card-footer-label {
  margin: 0 0 0.5rem;
  color: #666;
  font-family: Asap, sans-serif;
  font-weight: 400;
  font-size: 0.8125rem; /* 13px */
  line-height: 1.5;
}

#inacoop-transparencia .inacoop-transparencia-pasiva__card-footer-label--cc {
  margin-top: 0.5rem;
}

#inacoop-transparencia .inacoop-transparencia-pasiva__card-footer-text {
  margin: 0;
  color: #333;
  font-family: Asap, sans-serif;
  font-weight: 400;
  font-size: 0.875rem; /* 14px */
  line-height: 1.5;
}

#inacoop-transparencia .inacoop-transparencia-pasiva__mail-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem; /* 6px */
  color: #0077a3;
  font-family: Asap, sans-serif;
  font-weight: 600;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.5;
  text-decoration: underline;
}

#inacoop-transparencia .inacoop-transparencia-pasiva__links {
  margin-top: 0.5rem;
}

#inacoop-transparencia .inacoop-transparencia-pasiva__contact {
  background: #401e5e;
  border-radius: 0.75rem;
  padding: 1.25rem;
  color: #fff;
}

#inacoop-transparencia .inacoop-transparencia-pasiva__contact-eyebrow {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-family: Asap, sans-serif;
  font-weight: 600;
  font-size: 0.8125rem; /* 13px */
  line-height: 1.5;
  letter-spacing: 0.065rem; /* ~1.04px a 13px */
  text-transform: uppercase;
}

#inacoop-transparencia .inacoop-transparencia-pasiva__contact-name {
  margin: 0.75rem 0 0;
  color: #fff;
  font-family: Asap, sans-serif;
  font-weight: 600;
  font-size: 1.0625rem; /* 17px */
  line-height: 1.5;
}

#inacoop-transparencia .inacoop-transparencia-pasiva__contact-mail {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* 8px */
  margin-top: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  font-family: Asap, sans-serif;
  font-weight: 400;
  font-size: 0.875rem; /* 14px */
  line-height: 1.5;
  text-decoration: underline;
}

#inacoop-transparencia .inacoop-transparencia-pasiva__contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

#inacoop-transparencia .inacoop-transparencia-pasiva__contact-col > * + * {
  margin-top: 0.25rem;
}

#inacoop-transparencia .inacoop-transparencia-pasiva__contact-label {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-family: Asap, sans-serif;
  font-weight: 600;
  font-size: 0.6875rem; /* 11px */
  line-height: 1.5;
  letter-spacing: 0.017rem; /* ~0.275px a 11px */
  text-transform: uppercase;
}

#inacoop-transparencia .inacoop-transparencia-pasiva__contact-value {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-family: Asap, sans-serif;
  font-weight: 400;
  font-size: 0.8125rem; /* 13px */
  line-height: 1.5;
}

#inacoop-transparencia a.inacoop-transparencia-pasiva__contact-value {
  display: block;
  text-decoration: underline;
}

@media (max-width: 767px) {
  #inacoop-transparencia .inacoop-transparencia-pasiva {
    border-top-width: 3px;
    padding: 2rem 1rem;
  }

  #inacoop-transparencia .inacoop-transparencia-pasiva__heading {
    font-size: 1.375rem; /* 22px */
  }

  #inacoop-transparencia .inacoop-transparencia-pasiva__intro {
    max-width: none;
  }

  #inacoop-transparencia .inacoop-transparencia-pasiva__contact-grid {
    grid-template-columns: 1fr;
  }
}