/* LOS NUMEROS DEL MENU ("Aprobaciones 10").

   POR QUE ESTE ARCHIVO EXISTE: las clases de Bootstrap no alcanzan. gestor-moderno.css redefine
   .badge para una version SUAVE pensada para fondo claro -fondo rojo al 11%, texto rojo oscuro,
   borde indigo y 8,8px de fuente- y sobre el sidebar oscuro (#0f172a) eso queda ilegible: se ve
   un contorno lavado con un numero que no se lee.

   POR QUE LLEVA !important: gestor-moderno.css pisa .badge con !important. Sin esto gana el, y
   el badge del menu vuelve a desaparecer. Es la misma razon por la que ese archivo esta marcado
   para desarmar de a pedazos y no de un saque.

   EL SELECTOR ARRANCA EN .nav-sidebar A PROPOSITO: asi este archivo no puede afectar ningun otro
   badge de la aplicacion, que son decenas y estan bien como estan. */

.nav-sidebar .sm-menu-badge {
    background-color: #ef4444 !important;
    color: #fff !important;
    border: 0 !important;

    /* 11px es el piso para que un numero de dos digitos se lea de un vistazo sin mirarlo. */
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    letter-spacing: .01em;

    /* min-width para que "3" y "24" tengan la misma pinta: sin esto un digito solo queda como
       una pastillita angosta y el menu se ve desprolijo cuando hay badges de distinto largo. */
    min-width: 20px;
    padding: 1px 6px !important;
    border-radius: 10px !important;
    text-align: center;

    /* Separa el numero del texto del item y lo manda al margen derecho. */
    margin-left: auto;
    flex: none;
}

/* En un MODULO el numero va antes de la flechita de desplegar, no pegado al borde: si se fuera
   al extremo quedaria abajo de la flecha. */
.nav-sidebar li.has-treeview > a .sm-menu-badge {
    margin-left: auto;
    margin-right: 8px;
}

/* Y LOS DE PANTALLA SE CORREN LO MISMO, para que todos los numeros del menu queden en una sola
   columna. Sin esto los de modulo terminan 33px antes que los de pantalla -que es lo que ocupan
   la flecha y su margen- y la lista se ve despareja. Es distinto de como lo hace AdminLTE de
   fabrica, a proposito: alli el badge de una pantalla llega hasta el borde. */
.nav-sidebar li:not(.has-treeview) .sm-menu-badge {
    margin-right: 33px;
}

/* El item activo del menu tiene fondo claro; el rojo pleno ahi vibra. Se le baja un punto. */
.nav-sidebar .nav-link.active .sm-menu-badge {
    background-color: #dc2626 !important;
}

/* ---------------------------------------------------------------------------
   LA CAMPANA DE PENDIENTES (Controles/NavbarGestor.ascx)

   Reemplaza las filas de Alertas y Aprobaciones que estaban en el menu. Sigue el
   lenguaje del dropdown de usuario del framework -esquinas de .75rem, borde
   #e2e8f0, encabezado sobre #f8fafc, hover #f1f5f9-: es su vecino en la misma
   barra y tienen que parecer del mismo sistema.
   --------------------------------------------------------------------------- */

.sm-campana > .sm-campana-btn {
    position: relative;
}

.sm-campana > .sm-campana-btn > .fa-bell {
    font-size: 1.05rem;
    color: #64748b;
    transition: color .12s;
}

.sm-campana.sm-campana-activa > .sm-campana-btn > .fa-bell {
    color: #ef4444;
}

/* El globito. Absoluto y con borde del color de la barra para que se despegue del
   icono: si empujara, la barra entera se correria sola al llegar un pendiente. */
.sm-campana .sm-campana-total:not(:empty) {
    position: absolute;
    top: .15rem;
    right: .1rem;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    background-color: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    border: 1px solid #fff;
    border-radius: 9px;
}

/* ---- el panel ---- */

.sm-campana-menu {
    min-width: 330px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.sm-campana-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    padding: .75rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
}

.sm-campana-titulo {
    font-size: .8rem;
    font-weight: 600;
    color: #111827;
}

.sm-campana-resumen {
    font-size: .72rem;
    color: #94a3b8;
}

/* ---- cada fila ---- */

.sm-campana-fila {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem 1rem;
    text-decoration: none;
    border-bottom: 1px solid #f8fafc;
    transition: background .12s;
}

.sm-campana-fila:last-child {
    border-bottom: 0;
}

.sm-campana-fila:hover {
    background: #f1f5f9;
}

/* El icono en un circulo suave: da el color de la fila sin gritar, y alinea los
   textos en una columna aunque los iconos tengan anchos distintos. */
.sm-campana-icono {
    flex: none;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: .85rem;
}

/* La gravedad la manda el centro de alertas (danger/warning/info) y acá se traduce a color.
   Rojo para lo que ya pasó, ámbar para lo que está por pasar, azul para lo informativo. */
.sm-campana-peligro {
    background: #fef2f2;
    color: #dc2626;
}

.sm-campana-aviso {
    background: #fffbeb;
    color: #d97706;
}

.sm-campana-info {
    background: #eff6ff;
    color: #2563eb;
}

.sm-campana-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.sm-campana-nombre {
    font-size: .85rem;
    font-weight: 600;
    color: #374151;
}

/* La linea de abajo dice QUE hay adentro. Sin esto "Alertas 3" no informa nada:
   el usuario tiene que entrar para enterarse de que se trata. */
.sm-campana-detalle {
    font-size: .72rem;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sm-campana-num {
    margin-left: auto;
    flex: none;
    min-width: 22px;
    padding: 2px 7px;
    background-color: #ef4444;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
    border-radius: 11px;
}

/* El panel sólo lista lo que TIENE algo, así que un número vacío no debería pasar; si pasa,
   que no deje un óvalo rojo sin contenido. */
.sm-campana-num:empty {
    display: none;
}

/* Más de cuatro familias y el panel se vuelve una pantalla: scrollea, y el encabezado queda. */
.sm-campana-cuerpo {
    max-height: 320px;
    overflow-y: auto;
}

/* ---- todo al dia ---- */

.sm-campana-vacio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1rem;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    font-size: .75rem;
    color: #94a3b8;
}

.sm-campana-vacio > i {
    color: #22c55e;
}
/* ── EL MEGAFONO DE NOVEDADES ──
   Lo dibuja NovedadesHelper.HtmlItemBarra (Controles/NavbarGestor.ascx), al lado de la campana.
   Mismo boton que la campana y el panel usa las mismas clases de adentro (.sm-campana-menu,
   -header, -fila). El li NO lleva .sm-campana: gestor-menu-badges.js hace querySelector de esa
   clase y se quedaria con este. El punto rojo queda mientras la ultima publicacion no se abrio. */
.sm-novedades > .sm-novedades-btn {
    position: relative;
    padding-left: .7rem;
    padding-right: .7rem;
}
.sm-novedades > .sm-novedades-btn > .fa-bullhorn {
    font-size: 1rem;
    color: #64748b;
}
.sm-novedades.sm-novedades-sinver > .sm-novedades-btn > .fa-bullhorn {
    color: #6366f1;
}
.sm-novedades-punto {
    display: none;
    position: absolute;
    top: .45rem;
    right: .4rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #dc3545;
    box-shadow: 0 0 0 2px #fff;
}
.sm-novedades-sinver .sm-novedades-punto {
    display: block;
}
.sm-novedades-conteo {
    padding: .45rem .9rem;
    font-size: .72rem;
    color: #64748b;
    border-bottom: 1px solid #f1f5f9;
}
.sm-novedades-conteo b {
    color: #334155;
}
.sm-novedades-nuevo { background: #dcfce7; color: #047857; }
.sm-novedades-mejora { background: #e0e7ff; color: #4338ca; }
.sm-novedades-correccion { background: #fef3c7; color: #b45309; }
.sm-novedades-pie {
    display: block;
    padding: .55rem .9rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: .74rem;
    font-weight: 600;
    color: #4338ca;
    text-align: center;
    text-decoration: none !important;
}
.sm-novedades-pie:hover {
    background: #eef2f7;
}