/**
 * LOGIN MINIMALISTA - ESTILO GOOGLE/APPLE
 * Diseño limpio y profesional
 */

/* ========================================
   VARIABLES
======================================== */

:root {
    --login-primary: #1a73e8;
    --login-primary-dark: #1557b0;
    --login-text: #202124;
    --login-text-secondary: #5f6368;
    --login-border: #dadce0;
    --login-bg: #f8f9fa;
    --login-white: #ffffff;
    --login-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    --login-shadow-lg: 0 10px 40px rgba(0,0,0,0.12);
    --login-radius: 8px;
}

* {
    box-sizing: border-box;
}

/* ========================================
   FONDO
======================================== */

#fondP {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    z-index: -1;
}

#fondP .fnd {
    position: absolute;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.08) 0%, transparent 50%);
}

/* ========================================
   CONTENEDOR
======================================== */

.log-cont {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 1000;
}

.login-box {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* ========================================
   CARD DEL LOGIN
======================================== */

.login-box-body {
    background: var(--login-white);
    border-radius: 12px;
    padding: 48px 40px;
    box-shadow: var(--login-shadow-lg);
    animation: slideUp 0.4s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   LOGO
======================================== */

.logo-empresa {
    text-align: center;
    margin-bottom: 32px;
}

.logo-empresa img {
    max-width: 140px;
    height: auto;
}

/* ========================================
   MENSAJE OCULTO
======================================== */

.login-box-msg {
    display: none !important;
}

/* ========================================
   FORMULARIO
======================================== */

.login-u,
#form-login {
    width: 100%;
}

.login-u .form-group,
#form-login .form-group {
    margin-bottom: 20px;
    position: relative;
}

.login-u .form-group:last-of-type,
#form-login .form-group:last-of-type {
    margin-bottom: 24px;
}

/* ========================================
   ICONOS - SIN FONDO
======================================== */

.form-control-icon,
.login-u .form-group span.fas,
.login-u .form-group span.fa,
.login-u .has-feedback span,
#form-login .has-feedback span,
.ico1,
.ico2 {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 16px !important;
    color: var(--login-text-secondary) !important;
    z-index: 10 !important;
    pointer-events: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* ========================================
   INPUTS LIMPIOS
======================================== */

.login-u .form-control,
#form-login .form-control,
.login-u input[type="text"],
.login-u input[type="password"],
#form-login input[type="text"],
#form-login input[type="password"] {
    width: 100% !important;
    height: 48px !important;
    padding: 12px 16px 12px 44px !important;
    border: 1px solid var(--login-border) !important;
    border-radius: var(--login-radius) !important;
    font-size: 15px !important;
    color: var(--login-text) !important;
    background: var(--login-white) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    box-shadow: none !important;
    outline: none !important;
}

.login-u .form-control:hover,
#form-login .form-control:hover {
    border-color: #bdc1c6 !important;
}

.login-u .form-control:focus,
#form-login .form-control:focus {
    border-color: var(--login-primary) !important;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15) !important;
}

.login-u .form-control::placeholder,
#form-login .form-control::placeholder {
    color: var(--login-text-secondary) !important;
}

/* Focus cambia color del icono */
.login-u .form-group:focus-within .form-control-icon,
.login-u .form-group:focus-within .ico1,
.login-u .form-group:focus-within .ico2,
.login-u .has-feedback:focus-within span,
#form-login .has-feedback:focus-within span {
    color: var(--login-primary) !important;
}

/* ========================================
   BOTON INGRESAR
======================================== */

.content-fluid {
    width: 100%;
}

.btn-flat,
#logUser {
    width: 100% !important;
    height: 48px !important;
    background: var(--login-primary) !important;
    background-image: none !important;
    border: none !important;
    border-radius: var(--login-radius) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background 0.2s, box-shadow 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.btn-flat:hover,
#logUser:hover {
    background: var(--login-primary-dark) !important;
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.3) !important;
}

.btn-flat:active,
#logUser:active {
    transform: scale(0.98);
}

.btn-flat i,
#logUser i {
    margin-left: 8px !important;
    font-size: 16px !important;
}

/* ========================================
   VERIFICACION SUNAT
======================================== */

.verifica-sunat {
    text-align: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--login-border);
}

.verifica-sunat img {
    max-width: 100px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.verifica-sunat img:hover {
    opacity: 0.8;
}

/* ========================================
   RESULTADO LOGIN
======================================== */

#resultLogin {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: var(--login-radius);
    font-size: 14px;
    text-align: center;
}

#resultLogin.alert-danger {
    background: #fce8e6;
    color: #c5221f;
    border: 1px solid #f5c6cb;
}

#resultLogin.alert-success {
    background: #e6f4ea;
    color: #137333;
    border: 1px solid #c3e6cb;
}

/* ========================================
   INPUTS OCULTOS
======================================== */

#conectado,
#cpublica,
input[type="hidden"] {
    display: none !important;
}

/* ========================================
   BOTON ACTUALIZAR BASE DATOS
======================================== */

#actualizarBaseD {
    background: var(--login-primary) !important;
    border: none !important;
    border-radius: var(--login-radius) !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    color: #fff !important;
}

/* ========================================
   LOADING
======================================== */

#login-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.login-loader-content {
    text-align: center;
}

.login-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--login-border);
    border-top-color: var(--login-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.login-loading-text {
    color: var(--login-text);
    font-size: 16px;
    font-weight: 500;
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 480px) {
    .login-box-body {
        padding: 32px 24px;
        border-radius: 8px;
    }

    .logo-empresa img {
        max-width: 120px;
    }

    .login-u .form-control,
    #form-login .form-control {
        height: 44px !important;
        font-size: 14px !important;
    }

    .btn-flat,
    #logUser {
        height: 44px !important;
        font-size: 14px !important;
    }
}

/* ========================================
   OVERRIDE CONFLICTOS
======================================== */

/* Asegurar que no haya fondos oscuros en iconos */
.log-cont .form-control-icon,
.login-box .form-control-icon,
.log-cont .ico1,
.log-cont .ico2,
.login-box .ico1,
.login-box .ico2,
.log-cont .has-feedback span,
.login-box .has-feedback span,
#form-login .has-feedback span.fas,
#form-login .has-feedback span.fa {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Evitar estilos de Bootstrap para iconos */
.login-u .has-feedback .form-control-feedback,
#form-login .has-feedback .form-control-feedback {
    display: none !important;
}

/* Remover cualquier estilo de AdminLTE que interfiera */
.log-cont .form-group.has-feedback span.form-control-feedback {
    display: none !important;
}