/* ================================
   CONFIG BASE
================================ */
#componente-toggle {
  --brand: #ffdd11;
  --brand-contrast: #000;
  --btn-radius: 6px;
  --btn-padding: 10px 15%;
  --panel-max-h: 400px;
  position: relative;
}

/* Ocultamos radios */
#componente-toggle .toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ================================
   BOTONES
================================ */
.toggle-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.toggle-btn {
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  border: 2px solid var(--brand);
  cursor: pointer;
  background: transparent;
  transition: background-color .2s ease;
  text-align: center;
}

/* Botón activo */
#toggle-1:checked ~ .toggle-root #button1,
#toggle-2:checked ~ .toggle-root #button2 {
  background: var(--brand);
}

/* ================================
   PANEL CONTAINER
================================ */
/* panel oculto */
.toggle-panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity ease;
    border-radius: 30px !important;
    padding: 3rem 2rem;
}

/* panel visible */
#toggle-1:checked ~ .toggle-root #section1,
#toggle-2:checked ~ .toggle-root #section2 {
    position: relative !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

h2.toggle-title {
    font-size: 30px;
    line-height: 3rem;
}

p.toggle-legend{
    padding-top: 3rem;
    font-size: 18px;
}

h2.panel-title{
    font-size:22px;
    text-align:center;
}

.column-detail {
    padding: 3rem 2rem;
}


/* ================================
   RESPONSIVE
================================ */
@media (max-width: 768px) {
    #componente-toggle{
        padding: 0px 0px 20px 0px !important;    
    }
    
    .toggle-title,
    .toggle-subtitle,
    .toggle-legend{
        text-align: center !important;
    }
    
    h2.toggle-title
    {
        font-size: 1.875rem !important;
        line-height: 2.25rem !important;
    }
    .toggle-legend{
         padding-top: 0rem !important;
    }
    
    .toggle-buttons {
        display: flex !important;
        gap: 10px !important;
        margin-bottom: 0px !important;
        justify-content: center !important;   
    }
    
    .toggle-btn {
        padding: 10px 10% !important;
    }
    
    .column-detail {
        padding: 0rem 1rem !important;
    }
    
    .toggle-panel{
        padding: 1rem 1rem !important;
    }

}