/* ===========================================================================
   panel-shell.css — SHELL del panel (sidebar + navbar)
   ===========================================================================
   Estructura CALCADA del panel de Grupo Ajuste (grupoajuste.com/panel):
   sidebar oscuro fijo en desktop, colapsable a iconos, cajón deslizante en
   móvil, y navbar blanco pegado arriba DENTRO de la columna de contenido.

   Pero con la PALETA DE MULTIJC (morada/índigo), no con el navy de GA.

   POR QUE ESTA EN CSS PROPIO Y NO EN TAILWIND:
   el panel de apipopeye corre sobre Bootstrap 5.3, y Tailwind no puede
   convivir con Bootstrap en la misma página (p.ej. `p-4` vale 1.5rem en
   Bootstrap y 1rem en Tailwind). Escribirlo a mano deja las 13 vistas
   existentes intactas.

   TODAS las clases van con prefijo `pj-` justamente para no pisar ninguna
   utilidad de Bootstrap.

   Se carga DESPUES de styles.css: reusa sus variables (--bg-surface,
   --border-color, etc.) para que el modo oscuro siga funcionando solo.
   Los IDs (#appSidebar, #sidebarOverlay, #hamburgerBtn, ...) se conservan
   para que el JS de scripts.js siga andando sin cambios.
   =========================================================================== */

:root {
    /* Sidebar CLARO, con la misma paleta del landing de multijc (blanco +
       violeta de acento). Antes era oscuro (#1a1540) y el salto landing→panel
       se sentia como otro producto; el violeta volvio a ser acento, no fondo.
       El look anterior esta en _backup_JC/20260901_menuclaro/. */
    --pj-side-bg: #fdfcff;
    --pj-side-bg-deep: #f7f5fd;
    --pj-side-border: #eeebf8;
    --pj-side-text: #5f5b84;
    --pj-side-text-hover: #2a2550;
    --pj-side-hover: #f6f3fd;
    --pj-side-active: #f2ecfe;        /* lavanda del landing */
    --pj-side-active-ink: #4c1d95;    /* violeta profundo: 9.4:1 sobre el lavanda */
    --pj-side-accent: #7c3aed;        /* acento de marca: icono + marca de posicion */
    --pj-side-label: #8f8ab3;
    --pj-side-icon: #9d98bf;

    --pj-side-w: 256px;   /* w-64 de conta */
    --pj-side-w-min: 72px;
    --pj-top-h: 64px;   /* h-16 de conta */
}

/* ---------------------------------------------------------------------------
   1. ARMAZON: sidebar y contenido lado a lado (en desktop)
   --------------------------------------------------------------------------- */
.pj-shell {
    display: flex;
    min-height: 100vh;
    background-color: var(--bg-body);
}

.pj-col {
    /* min-width:0 es imprescindible: sin él, una tabla ancha estira el flex
       item y rompe el layout en vez de hacer scroll dentro. */
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------------------
   2. SIDEBAR
   --------------------------------------------------------------------------- */
.pj-side {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    width: var(--pj-side-w);
    max-width: 86vw;
    display: flex;
    flex-direction: column;
    background-color: var(--pj-side-bg);
    color: var(--pj-side-text-hover);
    transform: translateX(-100%);
    /* se animan los 3 anchos, no solo width: el aside es flex-item y el
       algoritmo flex ignora width a secas (mismo detalle que en GA) */
    transition: transform .2s ease, width .2s ease, min-width .2s ease, max-width .2s ease;
}

/* móvil: se abre con .show (la clase que ya togglea scripts.js) */
.pj-side.show {
    transform: translateX(0);
    box-shadow: 0 16px 40px rgba(16, 24, 40, .35);
}

@media (min-width: 992px) {
    .pj-side {
        position: sticky;
        top: 0;
        height: 100vh;
        transform: none;
        flex: 0 0 auto;
        border-right: 1px solid var(--pj-side-border);
    }

    /* colapsado: solo iconos */
    .pj-side.pj-min {
        width: var(--pj-side-w-min);
        min-width: var(--pj-side-w-min);
        max-width: var(--pj-side-w-min);
    }

    .pj-side.pj-min .pj-side-brandtext,
    .pj-side.pj-min .pj-nav-label,
    .pj-side.pj-min .pj-side-foot,
    .pj-side.pj-min .pj-btn-min {
        display: none !important;
    }

    .pj-side.pj-min .pj-side-brand { justify-content: center; }
    .pj-side.pj-min .pj-nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
    .pj-side.pj-min .pj-btn-max { display: flex !important; }
}

/* --- cabecera de marca --- */
.pj-side-head {
    height: var(--pj-top-h);
    flex: none;
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 0 .875rem;
    border-bottom: 1px solid var(--pj-side-border);
}

.pj-side-brand {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.pj-side-mark {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--accent-gradient);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .2px;
}

.pj-side-brandtext { min-width: 0; line-height: 1.15; }

.pj-side-name {
    display: block;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pj-side-sub {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--pj-side-label);
    white-space: nowrap;
}

/* botones de contraer / expandir / cerrar */
.pj-btn-min,
.pj-btn-max,
.pj-btn-close {
    margin-left: auto;
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #a8a3c6;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.pj-btn-min:hover,
.pj-btn-max:hover,
.pj-btn-close:hover {
    background-color: var(--pj-side-hover);
    color: var(--pj-side-accent);
}

.pj-btn-min { display: none; }
.pj-btn-max { display: none; margin: 0 auto; }

@media (min-width: 992px) {
    .pj-btn-min { display: grid; }
    .pj-btn-close { display: none; }
}

/* fila del botón expandir cuando está colapsado */
.pj-max-row {
    display: none;
    flex: none;
    border-bottom: 1px solid var(--pj-side-border);
    padding: .35rem 0;
}

@media (min-width: 992px) {
    .pj-side.pj-min .pj-max-row { display: block; }
}

/* --- navegación --- */
.pj-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .875rem .625rem 1rem;
    /* la barra la maneja el scroll sutil (ver el bloque al final) */
}

.pj-nav-item {
    /* relative: el activo marca la posicion con una barra de 2.5px (::before) */
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .7rem;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--pj-side-text);
    text-decoration: none;
    transition: background-color .15s, color .15s;
    white-space: nowrap;
}

.pj-nav-item + .pj-nav-item { margin-top: 2px; }

.pj-nav-item:hover {
    background-color: var(--pj-side-hover);
    color: var(--pj-side-text-hover);
}

.pj-nav-item:hover .pj-ico { color: var(--pj-side-accent); }

.pj-nav-item.active {
    background-color: var(--pj-side-active);
    color: var(--pj-side-active-ink);
    font-weight: 600;
}

.pj-nav-item.active .pj-ico { color: var(--pj-side-accent); }

/* marca de posicion: barra solida pegada al borde izquierdo del item */
.pj-nav-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 2.5px;
    border-radius: 0 3px 3px 0;
    background-color: var(--pj-side-accent);
}

/* colapsado el item se centra: ahi la barra estorba */
.pj-side.pj-min .pj-nav-item.active::before { display: none; }

.pj-nav-item .pj-ico { flex: none; color: var(--pj-side-icon); transition: color .15s; }

.pj-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* --- secciones del menu ---------------------------------------------------
   El menu se agrupa por lo que el usuario viene a hacer (General / Mi cuenta /
   Desarrolladores / Administracion), porque va a ir creciendo. El rotulo es
   senalizacion, no adorno: va discreto y no compite con los items.        */
.pj-nav-group-label {
    margin: 0 0 .35rem;
    padding: 0 .7rem;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pj-side-label);
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}

.pj-nav-group + .pj-nav-group { margin-top: 1.15rem; }

/* Colapsado el sidebar mide 72px: el rotulo no entra, asi que se oculta y la
   separacion entre secciones la toma una linea. Sin esto quedaria texto
   suelto y recortado sobre el riel de iconos. */
@media (min-width: 992px) {
    .pj-side.pj-min .pj-nav-group-label { display: none; }

    .pj-side.pj-min .pj-nav-group + .pj-nav-group {
        margin-top: .5rem;
        padding-top: .5rem;
        border-top: 1px solid var(--pj-side-border);
    }
}

/* pie del sidebar */
.pj-side-foot {
    flex: none;
    padding: .7rem 1rem;
    border-top: 1px solid var(--pj-side-border);
    background-color: var(--pj-side-bg-deep);
    font-size: 11px;
    color: var(--pj-side-label);
    white-space: nowrap;
}

/* overlay del cajón móvil */
.pj-overlay {
    position: fixed;
    inset: 0;
    z-index: 1030;
    background-color: rgba(9, 12, 24, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.pj-overlay.show { opacity: 1; visibility: visible; }

@media (min-width: 992px) {
    .pj-overlay { display: none; }
}

/* ---------------------------------------------------------------------------
   3. NAVBAR (dentro de la columna de contenido)
   --------------------------------------------------------------------------- */
.pj-top {
    position: sticky;
    top: 0;
    z-index: 1020;
    height: var(--pj-top-h);
    flex: none;
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: 0 .75rem;
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-xs);
}

@media (min-width: 576px) { .pj-top { padding: 0 1.25rem; } }

.pj-burger {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.pj-burger:hover { background-color: var(--bg-surface-hover); color: var(--text-primary); }

@media (min-width: 992px) { .pj-burger { display: none; } }

.pj-title {
    margin: 0;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pj-top-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .625rem;
}

/* chip "En línea" (calcado de GA, con el punto que late) */
.pj-online {
    display: none;
    align-items: center;
    gap: .4rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    background-color: rgba(22, 163, 74, .10);
    color: #15803d;
    font-size: 11.5px;
    font-weight: 600;
}

@media (min-width: 576px) { .pj-online { display: inline-flex; } }

.pj-dot { position: relative; width: 8px; height: 8px; flex: none; }

.pj-dot::before,
.pj-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background-color: #22c55e;
}

.pj-dot::before {
    background-color: #4ade80;
    opacity: .75;
    animation: pj-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes pj-ping {
    75%, 100% { transform: scale(2.2); opacity: 0; }
}

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

/* ---------------------------------------------------------------------------
   4. CONTENIDO
   --------------------------------------------------------------------------- */
.pj-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1rem;
}

/* conta: p-4 sm:p-6, o sea TOPE en 24px; antes subia a 28/32px y quedaba flojo */
@media (min-width: 576px) { .pj-main { padding: 1.5rem; } }

/* El layout viejo empujaba el contenido con margin-top por el navbar fijo.
   Ahora el navbar es sticky DENTRO de la columna, así que ese margen sobra. */
body.pj-body { padding: 0; margin: 0; }
body.pj-body.sidebar-open { overflow: hidden; }

@media (min-width: 992px) {
    body.pj-body.sidebar-open { overflow: auto; }
}

/* ===========================================================================
   5. NAVBAR — botón "Ir a la web", avatar y menú de cuenta
   ===========================================================================
   Calcado del panel de Grupo Ajuste (medidas equivalentes a sus clases
   Tailwind: w-60, rounded-xl, shadow-2xl, ring-1 ring-black/5, px-4 py-2.5...).
   Los IDs se conservan: scripts.js abre/cierra con la clase .show por ID.
   =========================================================================== */

/* --- botón "Ir a la web" (equivale al "Ir a Tienda" de GA) --- */
.pj-goweb {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .7rem;
    border: 1px solid var(--border-color-strong);
    border-radius: 9px;
    background-color: transparent;
    color: var(--text-primary);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s, background-color .15s;
}

.pj-goweb:hover {
    border-color: var(--accent-1);
    background-color: var(--bg-surface-hover);
    color: var(--text-primary);
}

.pj-goweb i { font-size: 14px; }
.pj-goweb span { display: none; }

@media (min-width: 576px) { .pj-goweb span { display: inline; } }

/* --- disparador del menú de cuenta: avatar + chevron --- */
.pj-acct { position: relative; }

.pj-acct-btn {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.pj-avatar {
    flex: none;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    /* GA usa un tono sólido de su navy; acá el equivalente en el morado */
    background-color: #2a2160;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.pj-acct-caret {
    display: none;
    font-size: 12px;
    color: var(--text-tertiary);
    transition: transform .15s, color .15s;
}

@media (min-width: 576px) { .pj-acct-caret { display: block; } }

.pj-acct-btn:hover .pj-acct-caret { color: var(--text-primary); }

/* rota cuando el menú está abierto */
.pj-acct-btn[aria-expanded="true"] .pj-acct-caret { transform: rotate(180deg); }

/* --- el menú --- */
.pj-acct-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1050;
    width: 240px;
    max-width: 92vw;
    overflow: hidden;
    border-radius: 12px;
    background-color: var(--bg-surface);
    box-shadow: 0 25px 50px -12px rgba(16, 24, 40, .25), 0 0 0 1px rgba(0, 0, 0, .05);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.pj-acct-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pj-acct-head {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.pj-acct-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pj-acct-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* items: mismo alto y sangría que GA (px-4 py-2.5, gap-2.5) */
.pj-acct-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .625rem 1rem;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s;
}

.pj-acct-item:hover { background-color: var(--bg-surface-hover); color: var(--text-primary); }

.pj-acct-item .pj-ico-sm { flex: none; color: var(--text-tertiary); }

.pj-acct-item.active { color: var(--accent-1); font-weight: 600; }
.pj-acct-item.active .pj-ico-sm { color: var(--accent-1); }

/* el switch del modo oscuro va en la misma fila, empujado a la derecha */
.pj-acct-item.pj-acct-switch { cursor: default; }
.pj-acct-item.pj-acct-switch:hover { background-color: transparent; }
.pj-acct-item .pj-acct-spacer { margin-left: auto; }

/* separador antes de cerrar sesión, como en GA */
.pj-acct-sep { border-top: 1px solid var(--border-color); }

.pj-acct-item.pj-danger { color: #dc2626; }
.pj-acct-item.pj-danger .pj-ico-sm { color: #dc2626; }
.pj-acct-item.pj-danger:hover { background-color: rgba(220, 38, 38, .07); color: #dc2626; }

/* en oscuro el rojo del hover se ve mejor algo más apagado */
[data-bs-theme="dark"] .pj-acct-item.pj-danger:hover { background-color: rgba(248, 113, 113, .12); }
[data-bs-theme="dark"] .pj-acct-item.pj-danger,
[data-bs-theme="dark"] .pj-acct-item.pj-danger .pj-ico-sm { color: #f87171; }

.pj-acct-menu form { margin: 0; }

/* ---------------------------------------------------------------------------
   6. Modo claro / oscuro como botón de ícono en el navbar
   ---------------------------------------------------------------------------
   El <input id="themeSwitch"> sigue existiendo (oculto) porque scripts.js
   escucha su evento 'change'; el <label> es el botón visible. Así el modo
   oscuro sigue funcionando sin tocar una línea de JS.
   --------------------------------------------------------------------------- */
.pj-theme {
    flex: none;
    width: 34px;
    height: 34px;
    margin: 0;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.pj-theme:hover { background-color: var(--bg-surface-hover); color: var(--text-primary); }

/* el checkbox real, fuera de vista pero accesible por teclado */
.pj-theme input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.pj-theme:focus-within {
    outline: 2px solid var(--accent-1);
    outline-offset: 2px;
}

/* en claro se ve la luna (ir a oscuro); en oscuro, el sol (volver a claro) */
.pj-theme-sun { display: none; }

[data-bs-theme="dark"] .pj-theme-moon { display: none; }
[data-bs-theme="dark"] .pj-theme-sun { display: block; }

/* ---------------------------------------------------------------------------
   7. Bloque anclado al pie del sidebar (Administración)
   ---------------------------------------------------------------------------
   Va FUERA del <nav> que scrollea, así queda siempre visible al fondo,
   como el "Configuración" de conta.
   --------------------------------------------------------------------------- */
.pj-side-pin {
    flex: none;
    padding: .5rem .625rem;
    border-top: 1px solid var(--pj-side-border);
}

/* ---------------------------------------------------------------------------
   8. SCROLL SUTIL (calcado de conta / Grupo Ajuste)
   ---------------------------------------------------------------------------
   La barra es invisible en reposo; el thumb aparece mientras se desplaza o
   al acercar el cursor a su borde. La clase .scroll-activo la pone y la quita
   public/js/scroll-sutil.js.

   Reemplaza la barra gorda por defecto de Windows.
   --------------------------------------------------------------------------- */
/* Las reglas base viven ahora en public/css/scroll-sutil.css, porque el sitio
   publico tambien las usa. Aqui abajo quedan solo los ajustes del panel. */

/* El sidebar ahora es claro: el thumb va en violeta atenuado (antes iba en
   blanco, que sobre el fondo claro quedaba invisible). */
.pj-side .scroll-activo,
.pj-nav.scroll-activo {
    scrollbar-color: rgba(124, 58, 237, .28) transparent;
}

.pj-nav.scroll-activo::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, .28);
    background-clip: content-box;
}

.pj-nav.scroll-activo::-webkit-scrollbar-thumb:hover {
    background: rgba(124, 58, 237, .45);
    background-clip: content-box;
}

/* ---------------------------------------------------------------------------
   9. Iconos SVG (mismo estilo que conta: outline, stroke 1.7)
   --------------------------------------------------------------------------- */
.pj-ico { width: 20px; height: 20px; flex: none; }
.pj-ico-sm { width: 16px; height: 16px; flex: none; }
.pj-burger .pj-ico { width: 22px; height: 22px; }
.pj-acct-caret { width: 16px; height: 16px; }

/* ---------------------------------------------------------------------------
   10. Tarjetas de indicadores del inicio (KPI)
   ---------------------------------------------------------------------------
   Estructura calcada de las tarjetas de conta: icono 40x40 en cuadro tintado
   arriba-izquierda, título en gris (SIN mayúsculas), valor grande en el color
   de la tarjeta y un pie chico. Borde de 1px en lugar de sombra; el hover
   tiñe el borde.

   El problema del diseño anterior: el icono iba a la derecha y los títulos en
   MAYÚSCULAS partían en dos líneas, dejando las tarjetas desparejas.

   La grilla usa auto-fit/minmax: se acomoda sola de 1 a 4 columnas según el
   ancho, sin media queries, y todas quedan de la misma altura.
   --------------------------------------------------------------------------- */
.pj-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pj-kpi {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: 1.25rem;   /* p-5 de conta */
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background-color: var(--bg-surface);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.pj-kpi:hover {
    border-color: var(--accent-1);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.pj-kpi:active { transform: translateY(1px); }

.pj-kpi-ico {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
}

.pj-kpi-svg { width: 20px; height: 20px; }

/* min-width:0 es lo que evita que un valor largo desborde la tarjeta */
.pj-kpi-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pj-kpi-title {
    font-size: 13.5px;
    line-height: 1.3;
    color: var(--text-secondary);
}

.pj-kpi-value {
    margin-top: .15rem;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.5px;
    /* que el número y su dato secundario queden en la misma línea base */
    display: flex;
    align-items: baseline;
    gap: .35rem;
    flex-wrap: wrap;
}

/* el "/ 3 offline" y el año: chicos, al lado del número, sin robarle peso */
.pj-kpi-extra {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--text-tertiary);
    white-space: nowrap;
}

.pj-kpi-foot {
    margin-top: .2rem;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--text-tertiary);
}

/* --- tonos: fondo tintado al 10% y el icono en el color pleno --- */
.pj-t-indigo { background-color: rgba(79, 70, 229, .10); color: #4f46e5; }
.pj-t-verde  { background-color: rgba(22, 163, 74, .10); color: #15803d; }
.pj-t-rojo   { background-color: rgba(220, 38, 38, .10); color: #dc2626; }
.pj-t-ambar  { background-color: rgba(217, 119, 6, .12); color: #b45309; }

.pj-c-indigo { color: #4338ca; }
.pj-c-verde  { color: #15803d; }
.pj-c-rojo   { color: #dc2626; }
.pj-c-ambar  { color: #b45309; }

/* en oscuro los tonos plenos quedan apagados: se aclaran */
[data-bs-theme="dark"] .pj-c-indigo { color: #a5b4fc; }
[data-bs-theme="dark"] .pj-c-verde  { color: #6ee7b7; }
[data-bs-theme="dark"] .pj-c-rojo   { color: #fca5a5; }
[data-bs-theme="dark"] .pj-c-ambar  { color: #fcd34d; }

/* ---------------------------------------------------------------------------
   11. Neutralizar el gutter de Bootstrap dentro del contenido
   ---------------------------------------------------------------------------
   .container-fluid mete 12px de padding lateral (--bs-gutter-x / 2). Sumado a
   los 24px de .pj-main daba 36px: 12 más que conta.

   Antes no se veía porque el .row original traía margen negativo de -12px
   que lo cancelaba. Al reemplazar las tarjetas por una grilla propia (sin ese
   margen), los 12px quedaron a la vista.

   Se anula el padding del container y NO se toca el par row/col: el .row
   sigue con su -12px y las columnas con su +12px, así el borde externo queda
   en 0 y entre columnas se mantiene el gutter de 24px.
   --------------------------------------------------------------------------- */
.pj-main > .content { padding: 0; }
.pj-main .container-fluid,
.pj-main .container { padding-left: 0; padding-right: 0; }

/* Boton Ingresar de la barra: solo lo ve quien entra sin sesion,
   hoy nada mas en la Documentacion, que es publica. */
.pj-ingresar {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 10px;
    background: #7c3aed;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .13s;
}

.pj-ingresar:hover { background: #6d28d9; color: #fff; }
.pj-ingresar svg { width: 16px; height: 16px; }

/* Badge pastel rojo del menu: cantidad de recibos por revisar (solo admin) */
.pj-nav-item { position: relative; }

.pj-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fde3e3;
    color: #c0322f;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
}

/* con el menu contraido el numero no cabe: se vuelve un puntito */
.pj-min .pj-badge {
    position: absolute;
    top: 6px;
    right: 8px;
    min-width: 8px;
    height: 8px;
    padding: 0;
    font-size: 0;
}