/* ============================================================================
   NOTIFICACIONES — Gestión Gama
   Botón base: Uiverse.io by asgardOP (adaptado)
   ----------------------------------------------------------------------------
   Botón en la sidebar y panel desplegable con el listado de notificaciones.

   Estado actual: SOLO VISUAL. Las notificaciones son de ejemplo y el filtrado
   por pestañas ocurre en el navegador. Cuando se implemente la funcionalidad,
   el listado vendrá del servidor y las pestañas pedirán cada conjunto por HTMX.

   No declara colores literales: todos vienen de temas.css, de modo que el
   componente acompaña el cambio de tema.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   BOTÓN EN LA SIDEBAR

   Comparte la estructura de .sidebar-item —cuadro de icono más etiqueta— para
   que se lea como parte del mismo menú y no como un elemento ajeno. Lo que lo
   distingue es el separador inferior y el punto de aviso.
   --------------------------------------------------------------------------- */
.sidebar-notificaciones {
    position: relative;
    margin: 8px 7px 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--linea);
}

/* El botón en sí reutiliza las reglas de .sidebar-item, que ya está definido en
   sidebar.css. Acá solo se ajusta lo propio de este caso. */
.sidebar-notificaciones .sidebar-item {
    width: 100%;
}

/* Estado abierto: se resalta igual que el ítem activo, para que quede claro de
   dónde salió el panel que está en pantalla. */
.sidebar-notificaciones .sidebar-item.panel-abierto {
    background: var(--input-bg);
    border-color: var(--acento);
}

.sidebar-notificaciones .sidebar-item.panel-abierto::before {
    height: 100%;
}

.sidebar-notificaciones .sidebar-item.panel-abierto .icono-caja {
    background: var(--icono-bg-activo);
    border-color: var(--acento);
}

.sidebar-notificaciones .sidebar-item.panel-abierto .icono-caja svg,
.sidebar-notificaciones .sidebar-item.panel-abierto .etiqueta {
    color: var(--acento);
}

/* ---------------------------------------------------------------------------
   PUNTO DE AVISO

   Señala que hay notificaciones sin leer. Va en morado y no en el dorado del
   sistema a propósito: el dorado es el color de la interfaz y se repite en
   bordes, iconos y textos activos, así que un aviso en ese mismo tono se
   perdería entre todo lo demás. El morado no aparece en ningún otro lugar, y
   por eso el ojo lo encuentra de inmediato.

   Se oculta con display cuando no hay pendientes; el atributo data-pendientes
   del botón es el que lo controla.
   --------------------------------------------------------------------------- */
.notif-punto {
    position: absolute;
    top: 6px;
    right: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--notif-aviso);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

/* Onda expansiva. Es un pseudo-elemento que crece y se desvanece en bucle,
   partiendo del centro del punto. El translate del 50% lo mantiene centrado
   mientras cambia de tamaño. */
.notif-punto::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 1px;
    border-radius: 50%;
    background-color: var(--notif-aviso);
    animation: notif-onda 1.6s ease-out infinite;
}

@keyframes notif-onda {
    0% {
        width: 2px;
        height: 2px;
        opacity: 0.85;
    }
    100% {
        width: 26px;
        height: 26px;
        opacity: 0;
    }
}

/* Sin notificaciones pendientes no se muestra ningún aviso. */
.sidebar-item[data-pendientes="0"] .notif-punto {
    display: none;
}

/* En modo colapsado el punto se corre hacia el centro, porque el botón pierde
   el ancho de la etiqueta y quedaría fuera del recuadro del icono. */
body.sidebar-colapsada .notif-punto {
    right: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .notif-punto::before {
        animation: none;
    }
}

/* ---------------------------------------------------------------------------
   PANEL

   Se ubica pegado al borde derecho de la sidebar y ocupa el alto de la ventana
   menos un margen. position: fixed lo mantiene en su lugar mientras el
   contenido de la pantalla hace scroll.
   --------------------------------------------------------------------------- */
.notif-panel {
    position: fixed;
    top: 14px;
    bottom: 14px;
    left: calc(var(--sidebar-ancho) + 10px);
    width: 340px;
    max-width: calc(100vw - var(--sidebar-ancho) - 24px);

    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-sombra);

    display: flex;
    flex-direction: column;
    z-index: 200;

    /* Oculto por defecto. El desplazamiento hacia la izquierda da la sensación
       de que el panel sale de la sidebar en lugar de aparecer de la nada.
       visibility evita que, estando oculto, intercepte clics o sea alcanzable
       con el tabulador. */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-12px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease,
                left 0.25s ease;
}

.notif-panel.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Acompaña el colapso de la sidebar para no quedar despegado de ella. */
body.sidebar-colapsada .notif-panel {
    left: calc(var(--sidebar-ancho-min) + 10px);
    max-width: calc(100vw - var(--sidebar-ancho-min) - 24px);
}

/* Franja dorada superior, igual que en el resto de los contenedores. */
.notif-panel::before {
    content: "";
    display: block;
    height: 2px;
    flex-shrink: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--acento-oscuro) 20%,
        var(--acento) 50%,
        var(--acento-oscuro) 80%,
        transparent 100%
    );
}

/* ---------------------------------------------------------------------------
   ENCABEZADO DEL PANEL
   --------------------------------------------------------------------------- */
.notif-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px 10px;
    flex-shrink: 0;
}

.notif-encabezado h2 {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--input-texto);
    margin: 0;
}

/* Acción para marcar todo como leído. Discreta por defecto, se destaca al
   pasar el mouse: es una acción secundaria que no debe competir con el
   contenido. */
.notif-marcar-todo {
    background: transparent;
    border: 1px solid transparent;
    color: var(--texto-secundario);
    font-family: inherit;
    font-size: 0.55rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.notif-marcar-todo:hover {
    color: var(--acento);
    border-color: var(--acento);
}

/* ---------------------------------------------------------------------------
   PESTAÑAS

   El gerente ve una pestaña adicional, "Gestión", con los registros de
   auditoría (RF-19). El template la incluye solo para ese rol, así que el CSS
   no necesita saber nada al respecto: la grilla se reparte entre las que haya.
   --------------------------------------------------------------------------- */
.notif-pestanas {
    display: flex;
    border-bottom: 1px solid var(--linea);
    flex-shrink: 0;
}

.notif-pestana {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--texto-secundario);
    font-family: inherit;
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 10px 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.notif-pestana:hover {
    color: var(--input-texto);
}

.notif-pestana.activa {
    color: var(--acento);
    border-bottom-color: var(--acento);
}

/* ---------------------------------------------------------------------------
   LISTADO

   Ocupa el alto restante y hace scroll por su cuenta, de modo que el
   encabezado y las pestañas queden siempre visibles.
   --------------------------------------------------------------------------- */
.notif-lista {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    list-style: none;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--linea);
    cursor: pointer;
    transition: background 0.15s ease;
    position: relative;
}

.notif-item:hover {
    background: var(--input-bg);
}

.notif-item .notif-icono {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--texto-secundario);
}

.notif-item .notif-cuerpo {
    min-width: 0;
    flex: 1;
}

.notif-item .notif-texto {
    font-size: 0.72rem;
    color: var(--texto-secundario);
    margin: 0;
    line-height: 1.4;
}

.notif-item .notif-fecha {
    display: block;
    font-size: 0.55rem;
    letter-spacing: 0.6px;
    color: var(--texto-secundario);
    opacity: 0.7;
    margin-top: 4px;
}

/* ---- Estado sin leer ----
   Se distingue por tres señales a la vez: texto en color pleno, mayor peso
   tipográfico y una barra de acento a la izquierda. Redundar es deliberado:
   con una sola señal, la diferencia entre leída y no leída resulta demasiado
   sutil al recorrer la lista de un vistazo. */
.notif-item.sin-leer .notif-texto {
    color: var(--input-texto);
    font-weight: 500;
}

.notif-item.sin-leer .notif-icono {
    color: var(--acento);
}

.notif-item.sin-leer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: var(--notif-aviso);
}

/* ---- Icono según estado ----
   Los dos sobres —abierto y cerrado— están siempre en el DOM y el CSS decide
   cuál mostrar, igual que en el indicador de fraccionable del inventario. Así
   el marcado de todas las notificaciones es idéntico y la lógica de
   presentación queda enteramente en la hoja de estilos. */
.notif-item .icono-leida,
.notif-item .icono-sin-leer {
    display: none;
}

.notif-item .icono-leida {
    display: block;
}

.notif-item.sin-leer .icono-leida {
    display: none;
}

.notif-item.sin-leer .icono-sin-leer {
    display: block;
}

/* Oculta las notificaciones que no corresponden a la pestaña activa. La
   alternativa —quitarlas del DOM— obligaría a volver a pedirlas al cambiar de
   pestaña; con este enfoque el cambio es instantáneo. */
.notif-item.oculta {
    display: none;
}

/* ---------------------------------------------------------------------------
   ESTADO VACÍO
   --------------------------------------------------------------------------- */
.notif-vacio {
    padding: 40px 20px;
    text-align: center;
    color: var(--texto-secundario);
}

.notif-vacio svg {
    width: 30px;
    height: 30px;
    opacity: 0.3;
    margin-bottom: 10px;
}

.notif-vacio p {
    font-size: 0.68rem;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   AJUSTES EN MODO COLAPSADO

   Con la sidebar cerrada, el bloque de notificaciones debe alinear su icono
   exactamente con los del menú de abajo. Sus márgenes propios lo desplazaban:
   acá se igualan al padding horizontal de .sidebar-nav para que todos los
   iconos queden sobre la misma vertical.
   --------------------------------------------------------------------------- */
body.sidebar-colapsada .sidebar-notificaciones {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

body.sidebar-colapsada .sidebar-notificaciones .sidebar-item {
    justify-content: center;
    padding: 5px 0;
}

/* El punto se corre hacia el borde del recuadro del icono: sin la etiqueta al
   lado, la posición anterior lo dejaba flotando en el vacío. */
body.sidebar-colapsada .notif-punto {
    top: 3px;
    right: 13px;
}

/* ---------------------------------------------------------------------------
   RESPONSIVE (RNF-08)

   En pantallas angostas el panel ocupa todo el ancho disponible: a 340px fijos
   quedaría fuera de la ventana.
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
    .notif-panel {
        left: calc(var(--sidebar-ancho-min) + 6px);
        right: 6px;
        width: auto;
        max-width: none;
    }
}