:root{
      --accent:#2D6CDF;
      --bg:#fff;
      --card:#ffffff;
      --muted:#828282;
      --shadow: 0 6px 18px rgba(16,24,40,0.08);
    }
    *{box-sizing:border-box}


    /* Contenedor principal */
    .card{
      width:100%; max-width:1200px; background:var(--card); border-radius:1px; box-shadow:var(--shadow); position:relative; padding-top:36px; overflow:hidden; margin:0 auto;
    }

    /* Pestañas: las hacemos "sobre-salientes" situadas parcialmente fuera del borde superior */
    .tabs{
      display:flex; gap:8px; padding:0 16px; position:relative; z-index:20; justify-content:flex-start; align-items:flex-end;
      margin-bottom:6px; transform:translateY(-18px);
    }
    .tab{
      --h:44px;
      height:var(--h); min-width:56px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center;
      border-radius:10px 10px 0 0; background:linear-gradient(180deg,#ffffff,#fbfdff); border:1px solid rgba(15,23,42,0.06);
      box-shadow:0 4px 10px rgba(2,6,23,0.04); cursor:pointer; font-weight:600; color:var(--muted);
      transform:translateY(6px); transition:all 220ms cubic-bezier(.2,.9,.2,1);
      user-select:none; position:relative;
    }
    .tab:hover{ transform:translateY(0); }
    .tab[aria-selected="true"]{
      background: linear-gradient(180deg,var(--accent), #437be2); color:white; transform:translateY(-6px); box-shadow:0 10px 30px rgba(45,108,223,0.18);
    }

    /* Área de contenido dentro de la tarjeta */
    .content{
      padding:22px 22px 28px 22px; background:linear-gradient(180deg,#ffffff,#fbfdff); border-top-left-radius:6px; border-top-right-radius:6px;
      min-height:260px; max-height:70vh; position:relative; overflow-y:auto; overflow-x:hidden;
    }

    /* Paneles (cada tab muestra un panel). Usamos transición de opacidad para desaparecer/entrar con suavidad */
    .panel{
      position:relative; padding:8px 12px; border-radius:8px; background:transparent; transition:opacity 260ms ease, transform 260ms ease; opacity:0; pointer-events:none; transform:translateY(8px); display:none;
    }
    .panel[aria-hidden="false"]{ opacity:1; pointer-events:auto; transform:translateY(0); display:block; }

    /* Tabla simple y responsiva */
    table{ width:100%; border-collapse:collapse; background:rgba(255,255,255,0.9); border-radius:8px; overflow:hidden; box-shadow:0 4px 14px rgba(2,6,23,0.03); }
    th, td{ padding:10px 12px; text-align:left; font-size:14px; border-bottom:1px solid rgba(15,23,42,0.06); }
    th{ background:linear-gradient(180deg,#fbfdff,#f7f9ff); font-weight:700; color:#05204a }
    tr:last-child td{ border-bottom:0 }

    /* Indicador responsivo para pantallas pequeñas: convertir pestañas en scroll horizontal */
    @media (max-width:600px){
      .tabs{ overflow:auto; padding-bottom:6px }
      .tab{ min-width:48px }
      .card{ padding-top:28px }
      .panel{ inset:18px }
    }

    /* Pequeño estilo de numeración roman en cada celda para ejemplo */
    .muted{ color:var(--muted); font-weight:600 }

    .panel[data-index="8"] ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 24px;
  list-style: disc inside;
  padding-left: 12px;
  margin: 0;
}



.panel[data-index="8"] .extra-content {
  display: contents; /* permite que los <li> sigan participando en el grid */
}

/* Layout para la sección de administración */
.admin-layout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: start;
  min-height: 300px;
}

.left-column, .right-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.center-column {
  display: flex;
  justify-content: center;
  align-items: center;
}

.admin-photo {
  max-width: 300px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.admin-item {
  background: rgba(255,255,255,0.8);
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.admin-item h3 {
  margin: 0 0 8px 0;
  color: var(--accent);
  font-size: 16px;
}

.admin-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .admin-layout {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .admin-photo {
    max-width: 250px;
  }
}

/* Forzar 2 columnas para la sección de staff */
.panel[data-index="1"] .container {
  padding-right:100px;
}

.panel[data-index="1"] .row {
  display: flex;
  flex-wrap: wrap;
}

.panel[data-index="1"] .col-md-6 {
  flex: 0 0 50%;
  max-width: 50%;
  margin-bottom: 20px;
}

/* Reducir tamaño de las tarjetas de staff */
.panel[data-index="1"] .staff {
  transform: scale(.9);
  margin-bottom: 10px;
}

.panel[data-index="1"] .staff-img {
  height:350px !important;
  width: 300px !important;
}

.panel[data-index="1"] .staff h3 {
  font-size: 18px;
  margin-bottom: 5px;
}
.panel[data-index="1"] .staff h4 {
  font-size: 14px;
  line-height: 1.3;
}

.panel[data-index="1"] .staff p {
  font-size: 12px;
  line-height: 1;
}


@media (max-width: 768px) {
  .panel[data-index="1"] .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .panel[data-index="1"] .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .panel[data-index="1"] .staff {
    transform: scale(1);
  }
}

.panel[data-index="2"] .staff-img {
  height:200px !important;
  width: 200px !important;
}