/* ========================================================= (solo entrada)
   Mobile: acordeón default + dark headers (y borde negro al abrir)
   ========================================================= */

/* ====== DESKTOP / TABLET GRANDE (>=577px) ====== */
@media (min-width: 577px){

  /* Contenedor: grid 2 columnas reales */
  [data-rlta-element="container"][data-rlta-type="tabs"][data-rlta-state="ready"]{
    display: grid !important;
    grid-template-columns: 260px 1fr !important;
    column-gap: 2.5rem !important;
    align-items: stretch !important;

    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* Oculta scroller si aparece */
  [data-rlta-element="container"][data-rlta-type="tabs"][data-rlta-state="ready"] > [data-rlta-element="button-scroller"]{
    display: none !important;
  }

  /* Columna izquierda */
  [data-rlta-element="container"][data-rlta-type="tabs"][data-rlta-state="ready"] > [data-rlta-element="button-list"]{
    grid-column: 1 !important;

    height: 100% !important;
    align-self: stretch !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;

    gap: 1rem !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    position: relative !important;
  }

  /* Botones: solo texto */
  [data-rlta-element="container"][data-rlta-type="tabs"][data-rlta-state="ready"] [data-rlta-element="button"]{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    margin: 0 !important;
    padding: 0 !important;

    cursor: pointer !important;
    user-select: none !important;

    width: 100% !important;
    text-align: left !important;
  }

  /* Texto (con transición) */
  [data-rlta-element="container"][data-rlta-type="tabs"][data-rlta-state="ready"]
  [data-rlta-element="button"] [data-rlta-element="heading"]{
    margin: 0 !important;
    padding: 0 !important;

    display: block !important;
    width: 100% !important;

    font-size: 30px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;

    color: #777 !important;
    background: transparent !important;

    white-space: normal !important;
    text-align: left !important;

    transition: color 880ms ease, opacity 880ms ease !important;
  }

  /* Activo claro */
  [data-rlta-element="container"][data-rlta-type="tabs"][data-rlta-state="ready"]
  [data-rlta-element="button"][data-rlta-state="open"] [data-rlta-element="heading"]{
    color: #000 !important;
    font-weight: 700 !important;
  }

  /* Oscuro: inactivo gris / activo blanco */
  html[data-bs-theme="dark"]
  [data-rlta-element="container"][data-rlta-type="tabs"][data-rlta-state="ready"]
  [data-rlta-element="button"] [data-rlta-element="heading"]{
    color: #9aa0a6 !important;
  }

  html[data-bs-theme="dark"]
  [data-rlta-element="container"][data-rlta-type="tabs"][data-rlta-state="ready"]
  [data-rlta-element="button"][data-rlta-state="open"] [data-rlta-element="heading"]{
    color: #ffffff !important;
    font-weight: 700 !important;
  }

  /* Columna derecha */
  [data-rlta-element="container"][data-rlta-type="tabs"][data-rlta-state="ready"] > [data-rlta-element="panels"]{
    grid-column: 2 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;

    min-width: 0 !important;
    align-self: stretch !important;
  }

  /* Panel sin caja */
  [data-rlta-element="container"][data-rlta-type="tabs"][data-rlta-state="ready"] [data-rlta-element="panel"]{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;
  }

  /* ----- Fade suave (entrada) ----- */
  @keyframes rltaFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Cerrados: invisibles */
  [data-rlta-element="container"][data-rlta-type="tabs"][data-rlta-state="ready"]
  [data-rlta-element="panel"][data-rlta-state="closed"]
  [data-rlta-element="panel-content"]{
    opacity: 0 !important;
  }

  /* Abierto: entra con desvanecimiento lento */
  [data-rlta-element="container"][data-rlta-type="tabs"][data-rlta-state="ready"]
  [data-rlta-element="panel"][data-rlta-state="open"]
  [data-rlta-element="panel-content"]{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;

    animation: rltaFadeIn 1600ms cubic-bezier(.2,.8,.2,1) both !important;
    will-change: opacity;
  }
}

/* ====== MÓVIL (<=576px): acordeón default + dark headers ====== */
@media (max-width: 576px){

  /* Encabezados acordeón en oscuro */
  html[data-bs-theme="dark"]
  [data-rlta-element="container"][data-rlta-type="accordions"][data-rlta-state="ready"]
  > [data-rlta-element="button"]{
    background: #2C2E36 !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.18) !important;
  }

  html[data-bs-theme="dark"]
  [data-rlta-element="container"][data-rlta-type="accordions"][data-rlta-state="ready"]
  > [data-rlta-element="button"] [data-rlta-element="heading"]{
    color: #ffffff !important;
  }

  /* Al abrir: borde NEGRO */
  html[data-bs-theme="dark"]
  [data-rlta-element="container"][data-rlta-type="accordions"][data-rlta-state="ready"]
  > [data-rlta-element="button"]:not([data-rlta-state="closed"]){
    background: #14151A !important;
    color: #EDEFF5 !important;
    border-color: #000000 !important;
  }
}