/* ============================================================
   Grupos "Favoritos" y "Todos" del sidebar (js/sidebar-favoritos.js)
   Los encabezados copian el tono de .sb-nav-title (layout.css): 10px,
   mayusculas, gris suave. Son texto de apoyo, no un item mas.
   ============================================================ */

.sb-grupo { display: flex; flex-direction: column; }
.sb-grupo + .sb-grupo { margin-top: 6px; }

.sb-grupo-cab {
    display: flex; align-items: center; gap: 6px; width: 100%;
    padding: 6px 8px; margin: 0; border: none; background: transparent;
    border-radius: 8px; cursor: pointer;
    font: inherit; font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
    text-transform: uppercase; color: #9ca3af; text-align: left;
}
.sb-grupo-cab:hover { background: #f9fafb; color: #6b7280; }
.sb-grupo-cab:focus-visible { outline: 2px solid #2AA048; outline-offset: 1px; }
.sb-grupo-chevron { font-size: 9px; width: 10px; transition: transform 0.2s; }
.sb-grupo-cerrado .sb-grupo-chevron { transform: rotate(-90deg); }

.sb-grupo-items { display: flex; flex-direction: column; gap: 2px; }

/* Estrella de favorito. Va a la DERECHA DEL ICONO, a la altura de su mitad:
   las esquinas de arriba ya son de los badges (contadores a la derecha, corona
   VIP a la izquierda, los dos en top:2px) y abajo esta el texto, que en los
   nombres largos llega de borde a borde. Visible siempre en un favorito, y en
   el resto al pasar el mouse o con foco; en pantallas tactiles, siempre. */
.sb-fav-btn {
    position: absolute; top: 22px; right: 4px;
    width: 20px; height: 20px; padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 6px; background: transparent;
    color: #9ca3af; font-size: 11px; cursor: pointer;
    opacity: 0; transition: opacity 0.15s;
}
.sb-nav-item:hover .sb-fav-btn,
.sb-fav-btn:focus-visible,
.sb-es-favorito .sb-fav-btn { opacity: 1; }
.sb-es-favorito .sb-fav-btn { color: #f59e0b; }
.sb-fav-btn:hover { background: rgba(0, 0, 0, 0.05); color: #f59e0b; }
.sb-fav-btn:focus-visible { outline: 2px solid #2AA048; outline-offset: 0; }
/* Antes de cargar las preferencias, o si fallaron, no hay control. */
.sb-fav-btn:disabled { display: none; }
@media (hover: none) { .sb-fav-btn { opacity: 1; } }

/* Flechas de reordenar (solo en Favoritos; el JS las oculta en los extremos y
   con un solo favorito). Van a la IZQUIERDA DEL ICONO, en espejo de la
   estrella: misma franja (top:22px, 20px de alto), que ya queda libre de los
   badges de arriba (terminan en 18px) y del texto de abajo (empieza en 50px).
   El icono mas ancho mide 36px y queda centrado en ~123px, o sea que arranca
   en x~43: las dos flechas de 20px, en left:2px y left:22px, llegan a 42px.
   Mismo criterio de visibilidad que la estrella de un item comun: al pasar el
   mouse o con foco, y siempre en pantallas tactiles. */
.sb-fav-mover {
    position: absolute; top: 22px;
    width: 20px; height: 20px; padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 6px; background: transparent;
    color: #6b7280; font-size: 10px; cursor: pointer;
    opacity: 0; transition: opacity 0.15s;
}
.sb-fav-subir { left: 2px; }
.sb-fav-bajar { left: 22px; }
.sb-nav-item:hover .sb-fav-mover,
.sb-nav-item:focus-within .sb-fav-mover { opacity: 1; }
.sb-fav-mover:hover { background: rgba(0, 0, 0, 0.05); color: #111827; }
.sb-fav-mover:focus-visible { outline: 2px solid #2AA048; outline-offset: 0; opacity: 1; }
.sb-fav-mover:disabled { display: none; }
@media (hover: none) { .sb-fav-mover { opacity: 1; } }

.sb-fav-aviso {
    margin: 4px 4px 6px; padding: 6px 8px; border-radius: 8px;
    background: #fef3c7; color: #92400e; font-size: 10px; line-height: 1.3;
}

/* Colapsado (64px): el encabezado queda solo con el chevron, centrado, y
   sigue abriendo y cerrando el grupo. La estrella y el aviso no entran. */
/* Las flechas tampoco: el item mide 48px utiles y el icono de 28px deja 10px
   por lado. Se reordena con el sidebar expandido o en movil. */
.app-sidebar.collapsed .sb-grupo-titulo,
.app-sidebar.collapsed .sb-fav-btn,
.app-sidebar.collapsed .sb-fav-mover,
.app-sidebar.collapsed .sb-fav-aviso { display: none; }
.app-sidebar.collapsed .sb-grupo-cab { justify-content: center; padding: 6px 0; }

/* Movil (.mobile-open, 200-220px, items en fila): vuelve el titulo aunque la
   clase collapsed haya quedado puesta, y la estrella se centra en la fila. */
.app-sidebar.mobile-open .sb-grupo-titulo { display: inline !important; }
.app-sidebar.mobile-open .sb-grupo-cab { justify-content: flex-start !important; padding: 8px 16px !important; }
.app-sidebar.mobile-open .sb-fav-btn:not(:disabled) { display: flex !important; opacity: 1; top: 50%; right: 10px; transform: translateY(-50%); }
.app-sidebar.mobile-open .sb-fav-aviso { display: block; }
/* En la fila del movil las flechas van a la izquierda de la estrella, las tres
   centradas en vertical, y el favorito reserva ese ancho a la derecha para que
   un nombre largo no quede debajo. Sin !important a proposito: le gana a la
   regla de colapsado por especificidad, y el display:none en linea que pone
   el JS en los extremos sigue ganandole a ella. */
.app-sidebar.mobile-open .sb-fav-mover:not(:disabled) { display: flex; }
.app-sidebar.mobile-open .sb-fav-mover { opacity: 1; top: 50%; left: auto; transform: translateY(-50%); }
.app-sidebar.mobile-open .sb-fav-bajar { right: 34px; }
.app-sidebar.mobile-open .sb-fav-subir { right: 58px; }
/* .sb-nav-item.sb-es-favorito y no solo .sb-es-favorito: responsive.css pone
   el padding del item con !important y la misma especificidad, y carga despues. */
.app-sidebar.mobile-open .sb-nav-item.sb-es-favorito { padding-right: 84px !important; }