/* ============================================================================
   Onesta ONE theme overrides para Intranet Onesta.
   Se carga DESPUÉS de los CSS de Metronic para pisar variables y componentes.
   Pensado para armonizar con el design system del portal Onesta ONE:
   naranja primario, sidebar oscuro con acento cálido, esquinas suaves,
   estados de color coherentes.
   ============================================================================ */

:root {
    /* --- Marca ---
       Naranja Onesta como color primario (reemplaza el azul Metronic). */
    --onesta-orange:         #FF6B00;
    --onesta-orange-hover:   #E85D00;
    --onesta-orange-active:  #CC5100;
    --onesta-orange-light:   #FFF1E5;
    --onesta-orange-lighter: #FFF8F0;

    /* --- Sidebar --- */
    --onesta-sidebar-bg:            #1A1B25;
    --onesta-sidebar-bg-hover:      #23252F;
    --onesta-sidebar-heading:       #6E7385;
    --onesta-sidebar-text:          #B5B7C0;
    --onesta-sidebar-text-active:   #FFFFFF;
    --onesta-sidebar-icon:          #7E82A0;

    /* --- Superficies que cambian con el tema ---
       Estos son los que el modo oscuro reescribe. Sus valores oscuros salen de
       las variables de Metronic (--bs-gray-100, --bs-gray-200, ...) para que lo
       nuestro y lo suyo oscurezcan al mismo tono y no queden dos grises. */
    --onesta-superficie:       #FFFFFF;   /* header, fondo de input enfocado */
    --onesta-superficie-suave: #F5F7FA;   /* botones redondos, píldora de usuario */
    --onesta-superficie-input: #F9FAFB;   /* inputs solid en reposo */
    --onesta-superficie-hover: #FAFBFD;   /* renglón de tabla bajo el cursor */
    --onesta-borde:            #EEF0F5;
    --onesta-texto-fuerte:     #181C32;

    /* Naranja de marca en su papel de TINTE sobre una superficie (fondo de
       badge, hover de icono). Va aparte de --onesta-orange-light a propósito:
       ese alimenta los botones de Metronic, y tocarlo para el modo oscuro
       cambiaría cómo se ven los botones sólidos. */
    --onesta-marca-tenue:      #FFF1E5;
    --onesta-marca-tenue-fg:   #CC5100;

    /* --- Estados --- */
    --onesta-success: #22C55E;
    --onesta-warning: #F59E0B;
    --onesta-danger:  #EF4444;
    --onesta-info:    #0EA5E9;

    /* --- Radios ---
       Onesta ONE usa esquinas más suaves que el default Metronic. */
    --onesta-radius-sm: 6px;
    --onesta-radius:    10px;
    --onesta-radius-lg: 14px;

    /* Overrides globales de Metronic */
    --kt-primary:              var(--onesta-orange);
    --kt-primary-active:       var(--onesta-orange-hover);
    --kt-primary-light:        var(--onesta-orange-light);
    --kt-primary-inverse:      #FFFFFF;
    --kt-primary-clarity:      rgba(255, 107, 0, 0.20);
    --kt-primary-light-active: #FFE1CC;

    --kt-link:                 var(--onesta-orange);
    --kt-link-hover:           var(--onesta-orange-hover);

    --kt-success:              var(--onesta-success);
    --kt-success-active:       #16A34A;
    --kt-success-light:        #DCFCE7;

    --kt-warning:              var(--onesta-warning);
    --kt-warning-active:       #D97706;
    --kt-warning-light:        #FEF3C7;

    --kt-danger:               var(--onesta-danger);
    --kt-danger-active:        #DC2626;
    --kt-danger-light:         #FEE2E2;

    --kt-info:                 var(--onesta-info);
    --kt-info-active:          #0284C7;
    --kt-info-light:           #E0F2FE;

    /* Tokens semánticos de Bootstrap/Metronic.
       Este bundle pinta el fondo de los botones con `.btn.btn-primary { background: var(--bs-primary) }`,
       por eso hay que pisar --bs-primary (no basta --kt-* ni --bs-btn-*). */
    --bs-primary:            var(--onesta-orange);
    --bs-primary-active:     var(--onesta-orange-hover);
    --bs-primary-light:      var(--onesta-orange-light);
    --bs-primary-inverse:    #FFFFFF;
    --bs-primary-rgb:        255, 107, 0;

    --bs-success:            var(--onesta-success);
    --bs-success-active:     #16A34A;
    --bs-success-light:      #DCFCE7;
    --bs-success-inverse:    #FFFFFF;

    --bs-warning:            var(--onesta-warning);
    --bs-warning-active:     #D97706;
    --bs-warning-light:      #FEF3C7;
    --bs-warning-inverse:    #FFFFFF;

    --bs-danger:             var(--onesta-danger);
    --bs-danger-active:      #DC2626;
    --bs-danger-light:       #FEE2E2;
    --bs-danger-inverse:     #FFFFFF;

    --bs-info:               var(--onesta-info);
    --bs-info-active:        #0284C7;
    --bs-info-light:         #E0F2FE;
    --bs-info-inverse:       #FFFFFF;

    --bs-link-color:         var(--onesta-orange);
    --bs-link-color-rgb:     255, 107, 0;
    --bs-link-hover-color:   var(--onesta-orange-hover);
}

/* ============================================================================
   MODO OSCURO

   Metronic trae su propio tema oscuro y lo activa con data-bs-theme="dark" en
   el <html> (lo pone KTThemeMode y lo persiste en localStorage). Aquí solo se
   reescriben las variables NUESTRAS; todo lo que ya usa clases de Metronic
   oscurece solo.

   Los valores salen de las variables que Metronic define para oscuro, no de
   grises inventados: si mañana cambian su paleta, esto la sigue.

   La pantalla de login NO entra aquí. Tiene su propio fondo oscuro fijo y no
   tiene interruptor: su tarjeta clara es el diseño, no un descuido.
   ============================================================================ */

[data-bs-theme="dark"] {
    --onesta-superficie:       #1B1C22;   /* = --bs-gray-100 en oscuro */
    --onesta-superficie-suave: #26272F;   /* = --bs-gray-200 */
    --onesta-superficie-input: #1B1C22;
    --onesta-superficie-hover: #1B1C22;
    --onesta-borde:            #26272F;
    --onesta-texto-fuerte:     #F5F5F5;   /* = --bs-gray-900, que en oscuro es claro */

    /* El tinte de marca pasa a ser translúcido: un pastel sólido sobre fondo
       oscuro se ve como un parche. Y el texto se aclara para que contraste. */
    --onesta-marca-tenue:      rgba(255, 107, 0, .18);
    --onesta-marca-tenue-fg:   #FF9248;

    /* Mismo criterio para los badges de estado. */
    --onesta-badge-success-bg: rgba(34, 197, 94, .18);
    --onesta-badge-success-fg: #4ADE80;
    --onesta-badge-warning-bg: rgba(245, 158, 11, .18);
    --onesta-badge-warning-fg: #FBBF24;
    --onesta-badge-danger-bg:  rgba(239, 68, 68, .18);
    --onesta-badge-danger-fg:  #F87171;
    --onesta-badge-info-bg:    rgba(14, 165, 233, .18);
    --onesta-badge-info-fg:    #38BDF8;
    --onesta-badge-neutral-bg: #26272F;
    --onesta-badge-neutral-fg: #A1A5B7;
}

/* --- Botones -------------------------------------------------------------- */

.btn {
    border-radius: var(--onesta-radius-sm);
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Metronic hardcodea las variables Bootstrap del botón (--bs-btn-*).
   Pisamos las variables directamente para que hover/active/focus hereden Onesta. */
.btn-primary {
    --bs-btn-bg:                 var(--onesta-orange);
    --bs-btn-border-color:       var(--onesta-orange);
    --bs-btn-color:              #FFFFFF;
    --bs-btn-hover-bg:           var(--onesta-orange-hover);
    --bs-btn-hover-border-color: var(--onesta-orange-hover);
    --bs-btn-hover-color:        #FFFFFF;
    --bs-btn-active-bg:          var(--onesta-orange-active);
    --bs-btn-active-border-color: var(--onesta-orange-active);
    --bs-btn-active-color:       #FFFFFF;
    --bs-btn-disabled-bg:         var(--onesta-orange);
    --bs-btn-disabled-border-color: var(--onesta-orange);
    --bs-btn-disabled-color:     #FFFFFF;
    --bs-btn-focus-shadow-rgb:   255, 107, 0;
}

.btn-light-primary {
    --bs-btn-bg:                 var(--onesta-orange-light);
    --bs-btn-border-color:       transparent;
    --bs-btn-color:              var(--onesta-orange-active);
    --bs-btn-hover-bg:           var(--onesta-orange);
    --bs-btn-hover-border-color: var(--onesta-orange);
    --bs-btn-hover-color:        #FFFFFF;
    --bs-btn-active-bg:          var(--onesta-orange-active);
    --bs-btn-active-border-color: var(--onesta-orange-active);
    --bs-btn-active-color:       #FFFFFF;
}

/* Estados success / warning / danger / info: mismo tratamiento para
   que sus tonos hover coincidan con la paleta Onesta refinada. */
.btn-success {
    --bs-btn-bg: var(--onesta-success);
    --bs-btn-border-color: var(--onesta-success);
    --bs-btn-hover-bg: #16A34A;
    --bs-btn-hover-border-color: #16A34A;
    --bs-btn-active-bg: #15803D;
    --bs-btn-active-border-color: #15803D;
    --bs-btn-color: #FFFFFF;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-color: #FFFFFF;
}
.btn-warning {
    --bs-btn-bg: var(--onesta-warning);
    --bs-btn-border-color: var(--onesta-warning);
    --bs-btn-hover-bg: #D97706;
    --bs-btn-hover-border-color: #D97706;
    --bs-btn-active-bg: #B45309;
    --bs-btn-active-border-color: #B45309;
    --bs-btn-color: #FFFFFF;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-color: #FFFFFF;
}
.btn-danger {
    --bs-btn-bg: var(--onesta-danger);
    --bs-btn-border-color: var(--onesta-danger);
    --bs-btn-hover-bg: #DC2626;
    --bs-btn-hover-border-color: #DC2626;
    --bs-btn-active-bg: #B91C1C;
    --bs-btn-active-border-color: #B91C1C;
    --bs-btn-color: #FFFFFF;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-color: #FFFFFF;
}

.btn-light-success {
    --bs-btn-bg: #DCFCE7;
    --bs-btn-color: #166534;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--onesta-success);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-border-color: var(--onesta-success);
}
.btn-light-warning {
    --bs-btn-bg: #FEF3C7;
    --bs-btn-color: #92400E;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--onesta-warning);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-border-color: var(--onesta-warning);
}
.btn-light-danger {
    --bs-btn-bg: #FEE2E2;
    --bs-btn-color: #991B1B;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--onesta-danger);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-border-color: var(--onesta-danger);
}
.btn-light-info {
    --bs-btn-bg: #E0F2FE;
    --bs-btn-color: #075985;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--onesta-info);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-border-color: var(--onesta-info);
}

/* --- Cards ---------------------------------------------------------------- */

.card {
    border-radius: var(--onesta-radius);
    border-color: #E8EAF0;
}

.card-header {
    border-radius: var(--onesta-radius) var(--onesta-radius) 0 0;
    border-bottom-color: #F1F2F6;
}

/* --- Inputs --------------------------------------------------------------- */

.form-control,
.form-select {
    border-radius: var(--onesta-radius-sm);
    border-color: #E4E6EF;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--onesta-orange);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15);
}

.form-control-solid,
.form-select-solid {
    background-color: var(--onesta-superficie-input);
    border-color: var(--onesta-borde);
}
.form-control-solid:focus,
.form-select-solid:focus {
    background-color: var(--onesta-superficie);
    border-color: var(--onesta-orange);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15);
}

/* --- Badges (estados de solicitud) ---------------------------------------- */

.badge {
    border-radius: 999px;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
}

.badge-light-success {
    background-color: var(--onesta-badge-success-bg) !important;
    color: var(--onesta-badge-success-fg) !important;
}
.badge-light-warning {
    background-color: var(--onesta-badge-warning-bg) !important;
    color: var(--onesta-badge-warning-fg) !important;
}
.badge-light-danger {
    background-color: var(--onesta-badge-danger-bg) !important;
    color: var(--onesta-badge-danger-fg) !important;
}
.badge-light-info {
    background-color: var(--onesta-badge-info-bg) !important;
    color: var(--onesta-badge-info-fg) !important;
}
.badge-light-primary {
    background-color: var(--onesta-marca-tenue) !important;
    color: var(--onesta-marca-tenue-fg) !important;
}
.badge-light-secondary {
    background-color: var(--onesta-badge-neutral-bg) !important;
    color: var(--onesta-badge-neutral-fg) !important;
}

/* --- Sidebar oscuro (dark-sidebar) --------------------------------------- */

[data-kt-app-layout="dark-sidebar"] .app-sidebar {
    background-color: var(--onesta-sidebar-bg) !important;
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link {
    color: var(--onesta-sidebar-text);
    border-radius: var(--onesta-radius-sm);
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-icon,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-icon i {
    color: var(--onesta-sidebar-icon);
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link:hover {
    background-color: var(--onesta-sidebar-bg-hover);
    color: #FFFFFF;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link:hover .menu-icon,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link:hover .menu-icon i {
    color: #FFFFFF;
}

/* Item activo: naranja sólido, texto blanco, como en el mockup Onesta ONE.
   Solo la clase `.active` (la gestiona Blazor NavLink: siempre un único link
   activo y limpia el anterior). NO usamos `.hover`/`.here` porque esas las
   agrega el JS de Metronic y se quedan pegadas al navegar en SPA. */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active {
    background-color: var(--onesta-orange) !important;
    color: #FFFFFF !important;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active .menu-icon i {
    color: #FFFFFF !important;
}

/* Heading de sección (MÓDULOS ACTIVOS, MI EQUIPO, etc.) */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-heading {
    color: var(--onesta-sidebar-heading);
    font-size: 11px;
    letter-spacing: 0.06em;
}

/* --- Header --------------------------------------------------------------- */

.app-header {
    border-bottom: 1px solid var(--onesta-borde);
    background-color: var(--onesta-superficie);
}

/* Icono redondo tipo Onesta ONE (notificaciones, etc.) */
.onesta-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--onesta-superficie-suave);
    color: var(--bs-gray-600);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease;
}
.onesta-icon-btn:hover {
    background-color: var(--onesta-marca-tenue);
    color: var(--onesta-marca-tenue-fg);
}
.onesta-notif-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background-color: var(--onesta-orange);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--onesta-superficie);
}

/* Píldora usuario: avatar naranja + nombre + chevron (como Onesta ONE) */
.onesta-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px 5px 5px;
    border-radius: 999px;
    background: var(--onesta-superficie-suave);
    transition: background-color .15s ease;
    user-select: none;
}
.onesta-user-pill:hover,
.onesta-user-pill:focus {
    background: var(--onesta-marca-tenue);
    outline: none;
}

.onesta-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--onesta-orange);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.onesta-user-name {
    font-weight: 600;
    color: var(--onesta-texto-fuerte);
    font-size: 14px;
}

/* --- Branding en sidebar (reemplazo del logo Metronic demo) ------------- */

.app-sidebar-logo {
    background-color: var(--onesta-sidebar-bg) !important;
    border-bottom-color: rgba(255,255,255,0.05) !important;
}
/* Logo real arriba, palabra INTRANET debajo. El PNG es a color y aqui va sobre
   fondo oscuro, por eso se blanquea con filtro en vez de mantener otro archivo. */
.onesta-brand-sidebar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-decoration: none;
    line-height: 1;
}
.onesta-brand-sidebar img {
    width: 120px;
    max-width: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
.onesta-brand-sidebar .brand-tag {
    font-size: 11px;
    font-weight: 700;
    color: var(--onesta-orange);
    letter-spacing: 0.18em;
    font-style: normal;
    padding-left: 2px;
}
.onesta-brand-sidebar:hover { opacity: .9; }

/* --- Tablas -------------------------------------------------------------- */

.table.table-row-dashed thead th {
    color: #6E7385;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid #EEF0F5 !important;
}
.table.table-row-dashed tbody tr:not(:last-child) > td {
    border-bottom-style: dashed !important;
    border-bottom-color: var(--onesta-borde) !important;
}
.table.table-row-dashed tbody tr:hover {
    background-color: var(--onesta-superficie-hover);
}

/* --- Enlaces ------------------------------------------------------------- */

a { color: var(--onesta-orange); }
a:hover { color: var(--onesta-orange-hover); }

/* --- Modal --------------------------------------------------------------- */

.modal-content {
    border-radius: var(--onesta-radius-lg);
    border: none;
    box-shadow: 0 25px 60px rgba(20, 24, 40, 0.18);
}
.modal-header {
    border-bottom: 1px solid #F1F2F6;
    padding: 1rem 1.5rem;
}
.modal-footer {
    border-top: 1px solid #F1F2F6;
    padding: 1rem 1.5rem;
}

/* --- Login / pantallas de acceso ----------------------------------------- */
/* Fondo oscuro a pantalla completa con una franja diagonal naranja a la
   derecha. El contenido va alineado a la izquierda, no centrado. */

.onesta-auth {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
    background: linear-gradient(160deg, #161B2C 0%, #0D1018 60%, #090B11 100%);
}

/* Dos cuñas superpuestas: la naranja completa y encima una casi opaca del
   color del fondo, desfasada. Lo que queda a la vista es la franja delgada. */
.onesta-auth-band,
.onesta-auth-band-dark {
    position: absolute;
    top: 0;
    right: 0;
    width: 1400px;
    height: 1400px;
    pointer-events: none;
}
.onesta-auth-band {
    background: linear-gradient(135deg, var(--onesta-orange) 0%, #FF9A3D 100%);
    clip-path: polygon(70% 0%, 100% 0%, 100% 100%, 30% 100%);
    opacity: .9;
}
.onesta-auth-band-dark {
    background: rgba(11, 14, 22, .94);
    clip-path: polygon(74% 0%, 100% 0%, 100% 100%, 34% 100%);
}

.onesta-auth-inner {
    position: relative;
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 40px 24px 32px 64px;
}

/* Logo + separador + palabra INTRANET */
.onesta-auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.onesta-auth-brand img {
    width: 120px;
    object-fit: contain;
    /* El logo es a color; aquí va sobre fondo oscuro, así que se blanquea. */
    filter: brightness(0) invert(1);
}
.onesta-auth-brand span {
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    color: var(--onesta-orange);
    letter-spacing: .12em;
    border-left: 1px solid rgba(255, 255, 255, .25);
    padding-left: 12px;
}

.onesta-auth-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 420px;
    width: 100%;
}

.onesta-auth-footer {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .55);
}

/* --- Tarjeta del formulario --- */

.onesta-login-card {
    background: #FDFDFC;
    border-radius: 16px;
    box-shadow: 0 26px 60px -18px rgba(0, 0, 0, .5);
    padding: 36px 38px 32px;
    width: 100%;
}

.onesta-login-card h1 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: #2B2A28;
}
.onesta-login-card .onesta-login-sub {
    margin: 0 0 24px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #7A7671;
}

.onesta-login-card .form-label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: #3D3A37;
}

.onesta-auth .onesta-login-card input.form-control {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    border-radius: 9px;
    border: 1px solid rgba(0, 0, 0, .1);
    background: #F7F6F4;
    font-size: 14px;
    line-height: 1.4;
    color: #322F2C;
}
.onesta-auth .onesta-login-card input.form-control::placeholder { color: rgba(122, 118, 113, .75); }
.onesta-auth .onesta-login-card input.form-control:focus {
    outline: none;
    background: #FFFFFF;
    border-color: var(--onesta-orange);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, .12);
}

.onesta-login-card .onesta-login-link {
    display: block;
    text-align: right;
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--onesta-orange);
    text-decoration: none;
}
.onesta-login-card .onesta-login-link:hover { opacity: .8; }

.onesta-auth .onesta-login-card button.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px !important;
    border: none;
    border-radius: 9px;
    background: var(--onesta-orange);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 12px 26px -8px rgba(255, 107, 0, .55) !important;
}
.onesta-auth .onesta-login-card button.btn-primary:hover {
    background: var(--onesta-orange-hover);
    box-shadow: 0 14px 30px -8px rgba(255, 107, 0, .65) !important;
}

/* En pantallas chicas la diagonal estorba y el margen izquierdo es excesivo:
   se quita la franja y la tarjeta se centra. */
@media (max-width: 767.98px) {
    .onesta-auth-band,
    .onesta-auth-band-dark { display: none; }

    .onesta-auth-inner { padding: 32px 20px 24px; }
    .onesta-auth-brand { justify-content: center; }
    .onesta-auth-body  { max-width: 100%; margin: 0 auto; }
    .onesta-auth-footer { text-align: center; }
    .onesta-login-card { padding: 28px 22px 24px; }
}

/* --- Sidebar fijo, siempre expandido --------------------------------------
   Bloquea cualquier intento de minimizar (cookie, hover, JS de Metronic).
   El ancho se fuerza a 265px (default de Metronic dark-sidebar) para escritorio.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* Ancho fijo del sidebar sin importar minimize/hover */
    body .app-sidebar,
    body[data-kt-app-sidebar-minimize="on"] .app-sidebar,
    body[data-kt-app-sidebar-hoverable="true"] .app-sidebar {
        width: 265px !important;
        min-width: 265px !important;
    }

    /* El wrapper de contenido debe respetar ese ancho */
    body .app-wrapper,
    body[data-kt-app-sidebar-minimize="on"] .app-wrapper,
    body[data-kt-app-sidebar-hoverable="true"] .app-wrapper {
        margin-left: 265px !important;
    }

    /* Menús: forzar visibilidad de títulos e íconos aunque minimize esté ON */
    body[data-kt-app-sidebar-minimize="on"] .app-sidebar .menu-title,
    body[data-kt-app-sidebar-minimize="on"] .app-sidebar .menu-arrow,
    body[data-kt-app-sidebar-minimize="on"] .app-sidebar .menu-heading,
    body[data-kt-app-sidebar-minimize="on"] .app-sidebar .menu-content {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    body[data-kt-app-sidebar-minimize="on"] .app-sidebar .menu-link {
        justify-content: flex-start !important;
    }

    /* Ocultar cualquier resto de toggle que pudiera colar el JS */
    #kt_app_sidebar_toggle { display: none !important; }

    /* El logo del sidebar debe compartir el fondo oscuro; sin esto queda
       una franja blanca en la esquina superior izquierda porque el div
       .app-sidebar-logo no hereda color y el body es blanco. */
    .app-sidebar-logo {
        background-color: var(--onesta-sidebar-bg) !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    }

    /* El sidebar debe ir por encima del header para que la franja del logo
       nunca quede tapada, aunque el header se estire. */
    .app-sidebar { z-index: 120 !important; }
    .app-header  { z-index: 100 !important; }

    /* Altura fija del header: 74px. Overriding el data-kt-sticky-minimize de
       Metronic para evitar que el header se colapse al hacer scroll y esconda
       el saludo del usuario. */
    #kt_app_header,
    body[data-kt-sticky-app-header-minimize="on"] #kt_app_header {
        min-height: 74px !important;
        height: 74px !important;
        transition: none !important;
    }
    #kt_app_header .app-container {
        min-height: 74px !important;
    }
}

/* --- Favoritos del sidebar ------------------------------------------------
   La estrella vive dentro del .menu-item y solo se ve al pasar el mouse; si ya
   es favorito se queda visible para que el estado sea evidente sin hover.
   -------------------------------------------------------------------------- */

.onesta-item-menu { position: relative; }

.onesta-fav-btn {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, .35);
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, color .12s ease, background-color .12s ease;
}

.onesta-item-menu:hover .onesta-fav-btn { opacity: 1; }
.onesta-fav-btn:hover {
    color: var(--onesta-orange);
    background: rgba(255, 255, 255, .08);
}

/* Ya es favorito: siempre visible y en naranja. */
.onesta-fav-btn.es-fav {
    opacity: 1;
    color: var(--onesta-orange);
}

/* --- Aviso de pendientes en el sidebar -----------------------------------
   Numero rojo a la derecha del titulo. Se corre a la izquierda al pasar el
   mouse para no quedar debajo de la estrella de favorito, que es absoluta y
   ocupa los 32px de la derecha.
   -------------------------------------------------------------------------- */

.onesta-badge-alerta {
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: 4px;
    min-width: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--bs-danger, #F1416C);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    transition: margin-right .12s ease;
}

.onesta-item-menu:hover .onesta-badge-alerta { margin-right: 30px; }

/* El texto no debe quedar debajo de la estrella. */
.onesta-item-menu:hover .menu-link .menu-title,
.onesta-item-menu .onesta-fav-btn.es-fav ~ .menu-link .menu-title { padding-right: 22px; }

/* --- Aire entre el header y el titulo de cada pantalla --------------------
   Metronic trae una regla que pone .app-content { padding-top: 0 } cuando el
   layout declara toolbar. Nosotros no dibujamos toolbar, y aun quitando el
   atributo los 30px de fabrica quedan cortos: el h1 de las paginas no trae
   margen propio, asi que el titulo queda montado en la linea del header.

   Se fija aqui, con !important, para que el espacio no dependa de que algun
   layout vuelva a declarar el atributo.

   Va dentro de @media screen a proposito: Metronic resetea el padding en
   impresion (.app-print-content-only .app-content { padding: 0 !important }) y
   esta regla, al ser mas especifica, se lo ganaria y meteria un hueco arriba
   en las hojas impresas.
   -------------------------------------------------------------------------- */

@media screen and (min-width: 992px) {
    #kt_app_content.app-content {
        padding-top: 44px !important;
    }
}

@media screen and (max-width: 991.98px) {
    #kt_app_content.app-content {
        padding-top: 28px !important;
    }
}


/* --------------------------------------------------------------------------
   Scroll horizontal ARRIBA de las tablas anchas (exploradores de sabanas).

   El truco: se voltea verticalmente el contenedor (la barra, que vive en su
   borde inferior, aparece arriba) y se vuelve a voltear la tabla para que el
   contenido se lea normal. Solo afecta el eje Y, asi que arrastrar la barra y
   el scroll con shift+rueda se comportan igual que siempre.
   -------------------------------------------------------------------------- */

.scroll-arriba {
    transform: scaleY(-1);
}

.scroll-arriba > table {
    transform: scaleY(-1);
}