/* ===========================
   BCNPROPS – Sidebar (v4)
   =========================== */

:root{
  --bp-bg: #0f1113;
  --bp-bg-soft: #171a1d;
  --bp-text: #eaecef;
  --bp-text-dim: #a7b0ba;
  --bp-accent: #ff8a00;
  --bp-accent-2: #ffa733;
  --bp-stroke: #23282d;
  --bp-hover: #1b2026;
  --bp-shadow: 0 14px 30px rgba(0,0,0,.28);
  --bp-radius: 16px;

  /* offsets para sticky (ajusta si cambia el alto del header o quieres más respiro con el footer) */
  --bp-top-offset: 86px;     /* separación superior bajo el header */
  --bp-bottom-gap: 24px;     /* separación inferior antes del footer */
}

/* ---------- Contenedor principal (asegura sidebar a la IZQUIERDA) ---------- */
@media (min-width: 901px){
  .layout{
    display: grid !important;
    grid-template-columns: 360px minmax(0,1fr) !important; /* columna fija + contenido fluido */
    gap: 28px !important;
    align-items: start;
    width: 100% !important;
    max-width: none !important;  /* evita centrado por max-width del wrapper */
    margin: 0 !important;
    padding: 12px 16px 32px !important;
    padding-left: 0 !important;  /* SIN padding a la izquierda = pegado al borde */
  }
  .layout__sidebar{
    display: block !important;
    order: 1;
    margin-left: 0 !important;   /* por si alguna hoja daba margen */
  }
  .layout__content{
    order: 2;
    min-width: 0;
  }
}

/* ---------- Contenedor del Sidebar ---------- */
.bp-sidebar{
  position: sticky !important;                 /* siempre pegado bajo el header */
  top: var(--bp-top-offset);
  /* Visibilidad de alto hasta casi el footer */
  max-height: calc(100dvh - var(--bp-top-offset) - var(--bp-bottom-gap));
  min-height: calc(100dvh - var(--bp-top-offset) - var(--bp-bottom-gap));
  overflow: auto;

  width: 100%;
  background: #fff7e0; /* fondo cálido claro */
  border: 1.5px solid #ffefcc;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(255,150,0,0.12);
  color: #333;
  padding: .75rem;
}

/* Scrollbar discreto */
.bp-sidebar::-webkit-scrollbar{ width: 10px; }
.bp-sidebar::-webkit-scrollbar-track{ background: #fff4e0; border-radius: 10px; }
.bp-sidebar::-webkit-scrollbar-thumb{ background: #f7a43a; border-radius: 10px; }
.bp-sidebar::-webkit-scrollbar-thumb:hover{ background: #e68100; }

/* ---------- Cabecera ---------- */
.bp-sidebar__head{
  display: flex; align-items: center; gap: .5rem;
  padding: .2rem .25rem .6rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: .6rem;
}
.bp-sidebar__title{
  font-weight: 800; letter-spacing: .3px;
  color: #fff;
  background: linear-gradient(90deg, #f7921e, #ffa733);
  box-shadow: 0 4px 10px rgba(255,138,0,0.25);
  border-radius: 999px;
  padding: .35rem .7rem;
}

/* 🧹 Botón hamburguesa (3 líneas) – oculto */
.bp-sidebar__toggle{ display: none !important; }

/* ---------- Grupos (padres) ---------- */
.bp-group{
  border: 1px solid rgba(255,255,255,.05);
  background: #fffdfa;
  border: 1px solid #ffefcc;
  border-radius: 14px;
  overflow: hidden;
  margin: .5rem 0;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.bp-group.is-open{
  border-color: #f7921e;
  box-shadow: 0 6px 14px rgba(255,138,0,0.15);
  background: #fff8eb;
}

.bp-group__header{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .65rem;
  width: 100%;
  cursor: pointer;
  user-select: none;
  padding: .78rem .9rem;
  border: 0;
  background: transparent;
  color: #111;
  font-weight: 700;
  letter-spacing: .2px;
}

.bp-group__header:hover {
  background: #ffe2b7;
  border-radius: 12px;
}

/* Icono carpeta (padres) */
.bp-group__header::before{
  content:"";
  width: 1.25rem; height: 1.05rem;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v7.5A3.5 3.5 0 0 1 17.5 20h-11A3.5 3.5 0 0 1 3 16.5V7z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v7.5A3.5 3.5 0 0 1 17.5 20h-11A3.5 3.5 0 0 1 3 16.5V7z'/%3E%3C/svg%3E") no-repeat center / contain;
  background: linear-gradient(180deg, var(--bp-accent), #e07100);
  border-radius: 3px;
  filter: drop-shadow(0 2px 6px rgba(255,138,0,.25));
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.bp-group:hover .bp-group__header::before{ transform: translateY(-1px); }

/* chevron del grupo padre */
.bp-group__chev{
  transform: rotate(0deg);
  transition: transform .2s ease;
  color: var(--bp-text-dim);
  font-weight: 900;
}
.bp-group.is-open .bp-group__chev{ transform: rotate(90deg); }

/* ---------- Lista hijas ---------- */
.bp-list{
  display: none;
  list-style: none;
  margin: 0; padding: .4rem .35rem .7rem;
}
.bp-group.is-open .bp-list{ display: block; }

/* Enlaces hijas (2º nivel) */
.bp-link{
  display: grid;
  grid-template-columns: 1.3rem 1fr auto;
  align-items: center;
  gap: .6rem;
  padding: .52rem .55rem;
  margin: .18rem;
  border-radius: 12px;
  text-decoration: none;
  color: #444;
  transition: background .18s ease, color .18s ease, transform .05s ease;
}
.bp-link:hover{
  background: #ffe9cc;
  color: #000;
  transform: translateX(1px);
}

/* Icono álbum/polaroid (hijas) */
.bp-link::before{
  content:"";
  width: 1.05rem; height: 1.05rem;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm3 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-2 8h14l-4.2-5.6-3.3 4.1-2.3-3.1L5 16z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm3 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-2 8h14l-4.2-5.6-3.3 4.1-2.3-3.1L5 16z'/%3E%3C/svg%3E") no-repeat center/contain;
  background: linear-gradient(180deg, #91a4ff, #6f82ff);
  border-radius: 2px;
  filter: drop-shadow(0 1px 3px rgba(111,130,255,.28));
}

/* Activo */
.bp-item.is-active > .bp-link{
  background: linear-gradient(90deg, #fff2d9, #ffe9cc);
  color: #000;
  border: 1px solid #f7921e;
}

/* ---------- Nietas (3er nivel) ---------- */
/* NUEVO: Toggle como línea completa + chevron (sustituye los círculos naranjas) */
.bp-nest-toggle{
  display: block;
  width: calc(100% - .9rem);     /* respeta bordes del grupo */
  height: 18px;
  margin: 6px .45rem 4px .45rem; /* simétrico con padding de .bp-link */
  padding: 0;
  border: 0;
  background: transparent;
  position: relative;
  cursor: pointer;
}

/* Línea */
.bp-nest-toggle::before{
  content:"";
  position:absolute;
  inset: calc(50% - 1px) 0 auto 0;  /* línea centrada vertical */
  height: 2px;
  background: linear-gradient(90deg, transparent, #f7921e, transparent);
  border-radius: 999px;
  opacity:.9;
  transition: opacity .2s ease, transform .2s ease;
}

/* Chevron */
.bp-nest-toggle::after{
  content:"";
  position:absolute;
  right: -2px; top: 50%;
  transform: translateY(-50%) rotate(0deg);
  width: 12px; height: 12px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat center/contain;
  background: linear-gradient(180deg, var(--bp-accent), var(--bp-accent-2));
  filter: drop-shadow(0 1px 4px rgba(255,138,0,.35));
  transition: transform .18s ease;
}

.bp-nest-toggle:hover::before{ opacity: 1; transform: scaleY(1.05); }
/* Al abrir (flecha “arriba”) */
.bp-item.show-nested > .bp-nest-toggle::after{
  transform: translateY(-50%) rotate(180deg);
}

/* Lista anidada */
.bp-item .bp-nested{ display: none; padding-left: 1.6rem; }
.bp-item.show-nested .bp-nested{ display: block; }

/* Enlaces nietos */
.bp-link--nested{
  display: grid;
  grid-template-columns: 1rem 1fr;
  align-items: center;
  gap: .5rem;
  padding: .4rem .4rem;
  margin: .12rem .35rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--bp-text-dim);
  transition: background .18s ease, color .18s ease;
}
.bp-link--nested:hover{ background:#20262d; color: var(--bp-text); }

/* Icono stack (nietas) */
.bp-link--nested::before{
  content:"";
  width: .9rem; height: .9rem;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 3l9.5 4.5L12 12 2.5 7.5 12 3zm0 6l9.5 4.5L12 18 2.5 13.5 12 9zm0 6l9.5 4.5L12 24 2.5 19.5 12 15z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 3l9.5 4.5L12 12 2.5 7.5 12 3zm0 6l9.5 4.5L12 18 2.5 13.5 12 9zm0 6l9.5 4.5L12 24 2.5 19.5 12 15z'/%3E%3C/svg%3E") no-repeat center/contain;
  background: linear-gradient(180deg, #7ed6a2, #42c185);
  border-radius: 2px;
  filter: drop-shadow(0 1px 3px rgba(66,193,133,.25));
}

/* ---------- Estados / accesibilidad ---------- */
.bp-group:hover{ border-color: rgba(255,255,255,.08); }
.bp-group__header:focus-visible,
.bp-link:focus-visible,
.bp-link--nested:focus-visible,
.bp-nest-toggle:focus-visible{
  outline: 2px solid var(--bp-accent);
  outline-offset: 2px;
}

/* ---------- Móvil: sidebar oculto ---------- */
@media (max-width: 900px){
  .layout{ display: block !important; }
  .layout__sidebar{ display: none !important; }
}

/* (Compat: ocultar antiguas clases de icono si existían) */
.bp-icon{ display:none; }


.bp-group__chev,
.bp-nest-toggle::after {
  background: linear-gradient(180deg, #f7921e, #ffa733);
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
}