:root {
    --pano-dark-slate: #2D3E50;
    --pano-light-blue: #0195D1;
    --pano-green: #339933;
    --pano-dark-gray: #595959;
}

body {
    background-color: #f8f9fa;
    color: var(--pano-dark-gray);
}

/* Primary Color Overrides */
.text-primary {
    color: var(--pano-light-blue) !important;
}
.btn-primary {
    background-color: var(--pano-light-blue) !important;
    border-color: var(--pano-light-blue) !important;
}
.btn-primary:hover {
    background-color: #017dae !important;
    border-color: #017dae !important;
}

/* Success/Action Color Overrides */
.text-success {
    color: var(--pano-green) !important;
}
.btn-success {
    background-color: var(--pano-green) !important;
    border-color: var(--pano-green) !important;
}
.btn-success:hover {
    background-color: #277727 !important;
    border-color: #277727 !important;
}

/* Login Card Styling */
.login-card {
    border-top: 4px solid var(--pano-light-blue);
    border-radius: 4px;
}

/* Restricción global de border radius para botones y tarjetas */
.card, .btn, .form-control, .badge {
    border-radius: 4px !important;
}

/* Hacer el focus de los inputs más delgado y elegante */
.form-control:focus {
    border-color: var(--pano-light-blue);
    box-shadow: 0 0 0 1px rgba(1, 149, 209, 0.5);
}

/* Fijar el tamaño exacto del login en pantallas grandes (LG, XL, XXL) */
@media (min-width: 992px) {
    .login-wrapper {
        width: 826px !important;
        max-width: 826px !important;
        flex: 0 0 auto;
    }
    .login-wrapper .card {
        height: 487px !important;
        min-height: 487px !important;
    }
}

/* =============================================
   LOGOS
   ============================================= */
.logo-sidebar {
    max-width: 180px;
    height: auto;
    display: block;
    margin: 0 auto;
    animation: logoEntrance 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards, logoFloating 3s ease-in-out infinite 0.8s;
}

.logo-login {
    max-width: 300px;
    height: auto;
    display: block;
    margin: 0 auto 1.5rem auto;
    animation: logoEntrance 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards, logoFloating 3s ease-in-out infinite 0.8s;
}

@keyframes logoEntrance {
    0%   { opacity: 0; transform: translateY(30px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes logoFloating {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

/* =============================================
   RESPONSIVE — TABLET (< 992px)
   Ajustes suaves sin romper el desktop
   ============================================= */
@media (max-width: 991.98px) {
    /* Login: quitar altura fija — la card se adapta al contenido */
    .login-wrapper .card {
        height: auto !important;
        min-height: auto !important;
    }
    /* Más padding interior para el panel del formulario */
    .login-wrapper .col-lg-6.bg-white {
        padding: 2rem 1.75rem !important;
    }
    /* Logo más pequeño en tablet */
    .logo-login {
        max-width: 220px;
    }

    /* Sidebar flota sobre el contenido — el main nunca se mueve */
    .main-content,
    .main-content.expanded {
        margin-left: 50px !important;
        width: calc(100% - 50px) !important;
    }
    /* Cuando el sidebar está abierto, flota encima con sombra */
    .sidebar:not(.collapsed) {
        width: 215px !important;
        z-index: 1050 !important;
        position: fixed !important;
        box-shadow: 3px 0 16px rgba(0, 0, 0, 0.18) !important;
    }
}

/* =============================================
   RESPONSIVE — TELÉFONO (< 576px)
   ============================================= */
@media (max-width: 575.98px) {
    /* Login: sin márgenes laterales, card a ancho completo */
    .login-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .login-wrapper .card {
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .login-wrapper .col-lg-6.bg-white {
        padding: 1.75rem 1.25rem !important;
    }
    /* Logo reducido en teléfono */
    .logo-login {
        max-width: 170px;
        margin-bottom: 1rem !important;
    }

    /* Header: truncar nombre de usuario largo */
    .pd-user-name {
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px !important;
    }
    .pd-user-role {
        display: none !important;
    }

    /* Perfil: columnas de contraseña apiladas en una sola línea */
    .perfil-password-cols > .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Botones de login más altos para el dedo */
    #formLoginNormal .btn {
        min-height: 48px;
        font-size: 15px;
    }
    #formLoginNormal .form-control {
        min-height: 46px;
        font-size: 15px;
    }
}

/* =============================================
   RESPONSIVE — MÓVIL GENERAL (< 768px)
   ============================================= */
@media (max-width: 767.98px) {
    /* iOS: font-size >= 16px evita el auto-zoom en inputs */
    .form-control,
    .form-select {
        font-size: 16px !important;
    }
    /* Áreas táctiles mínimas en botones */
    .btn:not(.btn-sm):not(.btn-link) {
        min-height: 42px;
    }
    /* Breadcrumb compacto */
    .breadcrumb {
        font-size: 13px;
    }
    /* Reducir padding de card-body p-4 en cards del perfil */
    .card-body.p-4 {
        padding: 0.85rem !important;
    }
    /* Reducir padding card-header */
    .card-header.py-3 {
        padding-top: 0.65rem !important;
        padding-bottom: 0.65rem !important;
    }
    /* Botón "Guardar Cambios" al 100% en perfil — usando clase específica */
    .perfil-form-actions {
        text-align: left !important;
    }
    .perfil-form-actions .btn {
        width: 100%;
        justify-content: center;
    }
    /* Botón de huella en login: área táctil grande */
    #btnLoginHuella {
        min-width: 52px;
        min-height: 48px;
        font-size: 1.4rem;
    }
}

/* =============================================
   OVERLAY para sidebar en móvil
   ============================================= */
#sidebarOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1049;
    cursor: pointer;
}
#sidebarOverlay.active {
    display: block;
}