/* assets/css/tabs.css */

/* Contenedor general del bloque de pestañas */
.program-tabs{
  background:transparent;
  color:var(--text);
  max-width:1200px;
  margin:2rem 0 0 0;
}

.program-tabs__title{
  font-size:1rem;
  font-weight:600;
  margin:0 0 1rem 0;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* ====== Cabecera de pestañas ====== */

.tabs{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  position:relative;
  /* para que los .tab__content se posicionen full-width debajo */
  width:100%;
  border:1px solid var(--line);
  border-radius:.9rem;
  background:linear-gradient(180deg,var(--card),#0B1220);
  box-shadow:0 24px 48px rgba(0,0,0,.8);
  padding:1rem;
  gap:1rem 0;
}

/* quitamos radios visualmente */
.tabs input[type=radio]{
  display:none;
}

/* botón de pestaña */
.tab-label{
  flex:1 1 25%;
  min-width:200px;
  cursor:pointer;
  text-align:left;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.4;
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:.75rem;
  padding:.75rem 1rem;
  border-right:1px solid var(--line);
  border-bottom:1px solid transparent;
  border-radius:.5rem;
  transition:all .18s ease;
  background:transparent;
}

/* icono circular delante del texto */
.tab-icon{
  flex-shrink:0;
  width:42px;
  height:42px;
  border-radius:50%;
  border:2px solid var(--acc2);
  color:var(--acc2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0; /* el svg manda */
  box-shadow:0 0 16px rgba(126,160,255,.4);
  background:#0B1220;
}

/* texto al lado del icono */
.tab-text{
  font-weight:600;
  color:var(--text);
  line-height:1.3;
  font-size:.9rem;
}

.tab-label:hover,
.tab-label:focus{
  background:#111826;
  outline:none;
  box-shadow:0 12px 24px rgba(0,0,0,.8);
  color:var(--text);
}

/* ====== Contenido de cada pestaña ====== */

.tab__content{
  display:none;
  width:100%;
  background:#0B1220;
  border:1px solid var(--line);
  border-radius:.75rem;
  padding:1.5rem;
  box-shadow:0 20px 48px rgba(0,0,0,.9);
  animation:tabPop .22s ease;
}

@keyframes tabPop{
  0%{transform:scale(.96);opacity:0}
  60%{transform:scale(1.02);opacity:.6}
  100%{transform:scale(1);opacity:1}
}

.tab-headline{
  color:var(--acc2);
  font-weight:600;
  font-size:1rem;
  line-height:1.4;
  margin:0 0 .5rem 0;
}

.tab-body{
  color:var(--muted);
  font-size:.9rem;
  line-height:1.5;
  margin:0 0 1rem 0;
}

.tab-list{
  margin:0;
  padding-left:1.2rem;
  color:var(--text);
  font-size:.9rem;
  line-height:1.5;
}
.tab-list li{
  margin:.4rem 0;
  color:var(--muted);
}
.tab-list li::marker{
  color:var(--acc2);
}

/* ====== Estado ACTIVO de cada pestaña ======
   Usamos el patrón:
   #progTab1:checked + label + #progTab2 ...
   Para simplificar, vamos a estructurar selectores
*/

/* Pestaña 1 activa */
#progTab1:checked + label.tab-label{
  background:rgba(0,0,0,.4);
  border:1px solid var(--acc2);
  box-shadow:0 16px 40px rgba(0,0,0,.9),0 0 24px rgba(126,160,255,.4);
}
#progTab1:checked + label .tab-icon{
  border-color:var(--acc2);
  color:var(--acc2);
  box-shadow:0 0 24px rgba(126,160,255,.6);
}

/* Mostrar contenido 1 cuando tab1 está check */
#progTab1:checked ~ #progContent1{
  display:block;
}

/* Pestaña 2 activa */
#progTab2:checked + label.tab-label{
  background:rgba(0,0,0,.4);
  border:1px solid var(--acc2);
  box-shadow:0 16px 40px rgba(0,0,0,.9),0 0 24px rgba(126,160,255,.4);
}
#progTab2:checked + label .tab-icon{
  border-color:var(--acc2);
  color:var(--acc2);
  box-shadow:0 0 24px rgba(126,160,255,.6);
}
#progTab2:checked ~ #progContent2{
  display:block;
}

/* Pestaña 3 activa */
#progTab3:checked + label.tab-label{
  background:rgba(0,0,0,.4);
  border:1px solid var(--acc2);
  box-shadow:0 16px 40px rgba(0,0,0,.9),0 0 24px rgba(126,160,255,.4);
}
#progTab3:checked + label .tab-icon{
  border-color:var(--acc2);
  color:var(--acc2);
  box-shadow:0 0 24px rgba(126,160,255,.6);
}
#progTab3:checked ~ #progContent3{
  display:block;
}

/* Pestaña 4 activa */
#progTab4:checked + label.tab-label{
  background:rgba(0,0,0,.4);
  border:1px solid var(--acc2);
  box-shadow:0 16px 40px rgba(0,0,0,.9),0 0 24px rgba(126,160,255,.4);
}
#progTab4:checked + label .tab-icon{
  border-color:var(--acc2);
  color:var(--acc2);
  box-shadow:0 0 24px rgba(126,160,255,.6);
}
#progTab4:checked ~ #progContent4{
  display:block;
}

/* ====== Responsive ====== */
@media(max-width:900px){
  .tab-label{
    flex:1 1 50%;
    min-width:50%;
    border-right:none;
  }
}
@media(max-width:520px){
  .tab-label{
    flex:1 1 100%;
    min-width:100%;
  }
  .tab-text{
    font-size:.85rem;
  }
  .tab-icon{
    width:38px;
    height:38px;
  }
  .tab__content{
    font-size:.9rem;
  }
}