/* Paleta mínima para que luzca como admin (sin depender de otras vars) */
:root{
    --c-text:#e6f2f7; --c-muted:#9fb5c4; --c-line:#224053;
    --c-chip:#132e3e; --c-card:#0f2533;
  }
  
  .accordion{padding:6px}
  
  /* item contenedor (similar a .node del admin) */
  .accordion .acc-item{
    border:1px solid var(--c-line);
    border-radius:12px;
    background:rgba(16,32,44,.6);
    margin:8px 0;
    overflow:hidden;
  }
  
  /* encabezado botón (similar a .node-head) */
  .accordion .acc-toggle{
    width:100%;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:10px 12px;
    background:linear-gradient(180deg,#0f2633,#0e2130);
    border:0; border-bottom:1px solid #153245;
    color:var(--c-text);
    font:inherit; text-align:left; cursor:pointer;
  }
  .accordion .acc-title{display:flex; align-items:center; gap:8px; font-weight:600}
  .accordion .acc-title i{color:var(--c-muted)}
  
  /* panel acordeón con animación grid (igual al admin) */
  .accordion .acc-panel{
    display:grid; grid-template-rows:0fr; transition:grid-template-rows .24s ease;
  }
  .accordion .acc-item.open > .acc-panel{
    grid-template-rows:1fr;
  }
  .accordion .acc-panel > .panel-inner{
    overflow:hidden; padding:10px 12px;
  }
  
  /* lista de docs */
  .accordion .doc-list{list-style:none; padding:0; margin:0}
  .accordion .doc-item{
    display:flex; align-items:center; gap:8px;
    padding:6px 8px; background:#113045; border-radius:10px;
    margin:6px 0; color:var(--c-text);
  }
  .accordion .doc-item .doc-badge{
    margin-left:auto; background:#0b2a3c; border:1px solid #27485d;
    padding:3px 8px; border-radius:999px; font-size:12px; color:var(--c-muted);
  }
  
  /* niveles (sangría visual leve) */
  .accordion .level2{margin-left:8px}
  .accordion .level3{margin-left:16px}
  
  /* Animación del chevron (como admin, CSP-safe) */
  .accordion .acc-toggle i.fa-chevron-down{
    transition:transform .2s ease;
    will-change:transform;
  }
  .accordion .acc-item.open > .acc-toggle i.fa-chevron-down,
  .accordion .acc-toggle[aria-expanded="true"] i.fa-chevron-down{
    transform:rotate(-180deg);
  }
  
  /* pequeño hover en encabezado */
  .accordion .acc-toggle:hover{filter:brightness(1.05)}
  

  /* === Suavizado del acordeón (ease-out + micro-fade) === */
:root{
  /* puedes ajustar estos dos valores si quieres más/menos suavidad */
  --acc-dur: .36s;
  --acc-ease: cubic-bezier(.22, 1, .36, 1); /* easeOutCubic */
}

/* Animación principal por max-height, más suave */
.accordion .acc-panel{
  display: block !important;      /* anulamos el grid */
  overflow: hidden;
  max-height: 0;                  /* cerrado por defecto */
  transition: max-height var(--acc-dur) var(--acc-ease);
  will-change: max-height;
}

/* Abierto: un tope grande para no cortar anidados */
.accordion .acc-item.open > .acc-panel{
  max-height: 9999px;
}

/* Micro-animación del contenido interno para sensación de fluidez */
.accordion .acc-panel > .panel-inner{
  overflow: visible;              /* que crezca libre */
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity calc(var(--acc-dur) * .75) var(--acc-ease),
    transform var(--acc-dur) var(--acc-ease);
}

/* Cuando abre, aparece suave y baja 4px → 0 */
.accordion .acc-item.open > .acc-panel > .panel-inner{
  opacity: 1;
  transform: translateY(0);
  transition-delay: .04s;         /* un pelín de retardo para que se sienta más natural */
}

/* Chevron a juego con la misma curva/duración */
.accordion .acc-toggle i.fa-chevron-down{
  transition: transform var(--acc-dur) var(--acc-ease);
}

/* Respeto a reduce motion */
@media (prefers-reduced-motion: reduce){
  .accordion .acc-panel{ transition: none; }
  .accordion .acc-panel > .panel-inner{ transition: none; }
  .accordion .acc-toggle i.fa-chevron-down{ transition: none; }
}