/* ==========================================================
   css/directores.css — Gobierno corporativo: perfiles de directores.
   Hoja INDEPENDIENTE: solo la carga inversores/gobierno-corporativo/,
   para poder publicarla sin tocar main.css / inversores.css (compartidos
   con otros desarrollos). Repite las pocas reglas base del modal que
   necesita (body.modal, .btn-close) para no depender de la version de
   main.css que haya en el servidor.
   ========================================================== */

/* --- base del modal (mismas reglas que main.css) --- */
body.modal { padding-top: 0 !important; }
body.modal > section,
body.modal header,
body.modal footer { display: none; }
body.modal div[role="button"] { display: none; }
.director-modal { opacity: 0; }
body.modal .director-modal:not(.visuallyhidden) {
  opacity: 1;
  transition: opacity 800ms ease-out;
}

/* ==========================================================
   Gobierno corporativo — Directorio: boton "Ver perfil" y
   modal con el perfil de cada director.
   Mismo lenguaje visual que el "recuadro modal" de socios
   (css/nosotros.css, .socios): fondo #f7f7f7, borde izquierdo
   rojo de 15px, h4 en negrita, h5 con linea azul debajo.
   ========================================================== */

/* --- tabla: sexta columna con el boton ---
   Diseño propio (no el azul general de [class^="btn"] de main.css):
   normal = contorno azul, fondo blanco, texto azul;
   hover  = fondo rojo, texto blanco. Se pisan las reglas generales
   (color !important, drop-shadow y display:block) con mas especificidad. */
.directorio .btn-perfil {
  display: inline-block;
  padding: 8px 20px;
  border: 2px solid var(--blue);
  border-radius: 8px;
  background-color: #fff;
  color: var(--blue) !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  filter: none;
  transition: background-color 250ms, border-color 250ms, color 250ms;
}
.directorio .btn-perfil:hover,
.directorio .btn-perfil:focus-visible {
  background-color: var(--red);
  border-color: var(--red);
  color: #fff !important;
  filter: none;
}

@media screen and (min-width: 600px) {
  .directorio ul {
    grid-template-columns: 2.2fr 1.4fr 1.4fr 1fr 1fr 130px;
    align-items: center;
  }
  .directorio ul li:last-child {
    padding: 0 var(--gap) 0 0;
    text-align: right;
  }
}

@media screen and (max-width: 599px) {
  /* mas aire alrededor de "Ver perfil" en mobile */
  /* #tab-content por especificidad: pisa "#tab-content ul li {padding:0 0 5px}" */
  #tab-content .directorio ul li:last-child:not(:empty) {
    padding-top: 26px;
    padding-bottom: 14px;
  }
  .directorio ul li:last-child .btn-perfil {
    font-size: 15px;
    padding: 9px 22px;
  }
}

/* --- modal --- */
.director-modal:not(.visuallyhidden) {
  padding: 10vw;
  top: 0;
  left: 0;
  z-index: 9999 !important;
  min-height: 100vh;
  background-color: #f7f7f7;
  border-left: 15px solid var(--red);
}

/* caja de contenido centrada en la pantalla (desktop) */
.director-modal-inner {
  max-width: 860px;
  margin: 0 auto;
}

.director-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
  margin-bottom: 30px;
}

.director-foto {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: var(--box-shadow);
}

.director-iniciales {
  display: grid;
  place-content: center;
  background-color: var(--blue-2);
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 1px;
}

.director-modal h4 {
  margin: 0 0 8px;
  font-weight: bold;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.15;
  color: var(--blue-2);
}

.director-modal h5 {
  margin: 0;
  padding-bottom: 14px;
  border-bottom: solid var(--blue-2) 5px;
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 22px);
  color: var(--dark);
}

.director-periodo {
  display: flex;
  gap: 40px;
  margin: 0 0 40px;
}
.director-periodo dt {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--blue);
}
.director-periodo dd {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--dark);
}

/* parrafos separados por una linea sutil */
.director-bio p {
  margin: 0;
  padding: 22px 0;
  text-align: justify;
}
.director-bio p + p {
  border-top: 1px solid var(--light);
}
.director-bio p:first-child {
  padding-top: 0;
  font-weight: 500;
  color: var(--blue-2);
  font-size: calc(var(--fs) + .4vw);
  line-height: 1.4;
}

/* CERRAR: mismo aspecto que el boton general [class^="btn"] + .btn-close
   de main.css (azul, hover rojo), definido aca completo */
.director-modal .btn-close {
  position: fixed;
  right: 5%;
  top: 5vw;
  margin: 0;
  padding: 12px 25px;
  border: 0;
  background-color: var(--blue-2);
  color: #fff !important;
  font-family: var(--font1);
  font-size: var(--fs);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 400ms;
}
.director-modal .btn-close:hover,
.director-modal .btn-close:focus-visible {
  background-color: var(--red);
}

@media screen and (max-width: 599px) {
  .director-modal:not(.visuallyhidden) {
    padding: 22vw 7vw 12vw;
    border-left-width: 8px;
  }
  .director-head {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .director-foto {
    width: 96px;
    height: 96px;
  }
  .director-iniciales {
    font-size: 32px;
  }
  .director-periodo {
    gap: 30px;
    margin-bottom: 30px;
  }
}