/* ============================================================================
   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;

    /* --- 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);
}

/* --- 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: #F9FAFB;
    border-color: #EEF0F5;
}
.form-control-solid:focus,
.form-select-solid:focus {
    background-color: #FFFFFF;
    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: #DCFCE7 !important;
    color: #166534 !important;
}
.badge-light-warning {
    background-color: #FEF3C7 !important;
    color: #92400E !important;
}
.badge-light-danger {
    background-color: #FEE2E2 !important;
    color: #991B1B !important;
}
.badge-light-info {
    background-color: #E0F2FE !important;
    color: #075985 !important;
}
.badge-light-primary {
    background-color: var(--onesta-orange-light) !important;
    color: var(--onesta-orange-active) !important;
}
.badge-light-secondary {
    background-color: #F1F2F6 !important;
    color: #4B5563 !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 #EEF0F5;
    background-color: #FFFFFF;
}

/* Icono redondo tipo Onesta ONE (notificaciones, etc.) */
.onesta-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #F5F7FA;
    color: #6E7385;
    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-orange-light);
    color: var(--onesta-orange-active);
}
.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 #FFFFFF;
}

/* 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: #F5F7FA;
    transition: background-color .15s ease;
    user-select: none;
}
.onesta-user-pill:hover,
.onesta-user-pill:focus {
    background: var(--onesta-orange-light);
    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: #181C32;
    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;
}
.onesta-brand-sidebar {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 22px;
    font-weight: 300;
    letter-spacing: -0.02em;
    font-style: italic;
    line-height: 1;
}
.onesta-brand-sidebar .brand-tag {
    font-size: 11px;
    font-weight: 700;
    color: var(--onesta-orange);
    letter-spacing: 0.18em;
    font-style: normal;
    vertical-align: super;
}
.onesta-brand-sidebar:hover { color: #FFFFFF; }

/* --- 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: #EEF0F5 !important;
}
.table.table-row-dashed tbody tr:hover {
    background-color: #FAFBFD;
}

/* --- 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 personalizado ------------------------------------------------- */
/* Se aplica solo cuando el layout es "auth" (login page). */

body[data-onesta-page="login"] {
    background:
        radial-gradient(1200px 600px at 10% 10%, rgba(255,107,0,0.15), transparent 60%),
        radial-gradient(900px 500px at 90% 90%, rgba(14,165,233,0.12), transparent 60%),
        linear-gradient(135deg, #0F1119 0%, #1A1B25 50%, #0F1119 100%);
    min-height: 100vh;
}

body[data-onesta-page="login"] .onesta-login-card {
    background: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.35);
    padding: 40px;
    max-width: 460px;
    width: 100%;
}

body[data-onesta-page="login"] .onesta-brand {
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 40px;
}
body[data-onesta-page="login"] .onesta-brand .brand-title {
    font-size: 42px;
    font-weight: 300;
    letter-spacing: -0.02em;
    font-style: italic;
    line-height: 1;
}
body[data-onesta-page="login"] .onesta-brand .brand-tag {
    font-size: 20px;
    font-weight: 600;
    color: var(--onesta-orange);
    letter-spacing: 0.15em;
    margin-left: 8px;
    vertical-align: super;
}

/* --- 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;
    }
}