/* Estilos para v-text-field y v-select de Vuetify 2 */
:root {
    --primary: #4C6FFF;
    --primary-rgb: 76, 111, 255;
    --secondary: #777; /*#FF6B6B;*/
    --secondary-rgb: 255, 107, 107;
    --accent: #FFD166;
    --accent-rgb: 255, 209, 102;
    --dark: #1A1F36;
    --light: #F7FAFF;
    --success: #10B981;
    --warning: #F59E0B;
    --error: #EF4444;
    --disabled: #f3f6fc;
    --neutro: #777777;
    --text-primary: #444444;
}

body, html, fieldset, input, select, textarea, option {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    font-weight: normal !important;
}

.contenedor {min-height: 100vh;}

.fondo {
 width: calc(100% - 750px);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 position: relative;
 z-index: 1;
}

.login-logo {
    z-index: 2;
    height: 84px;
    margin-top: 6% !important;
    margin-left: 6% !important;
}
.compact-form { transform: scale(0.875); }
@media(max-width:1024px) { .login-logo { height: 60px; } }
@media(max-width:640px) {
    .login-logo {
        height: 36px;
        margin-top: 3% !important;
        margin-left: 6% !important;
    } .fondo { height:70px; } }



fieldset {
    border: none !important;
    background: white !important;
    border-radius: 15px !important;
    margin: .36rem !important;
    padding: 1.5rem 2rem 1.5rem 2rem !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(76, 111, 255, 0.08) !important;
    position: relative !important;
    max-width:600px;
}

@media(max-width:640px) {
    fieldset {
        top: -15% !important;
    }
}

    .titulo {
        color: var(--dark) !important;
    }

    a {
        font-size: .9rem !important;
    }

        a:hover {
            color: var(--dark) !important;
        }

    /* Contenedor principal del input */
    .v-text-field .v-input__control .v-input__slot,
    .v-select .v-input__control .v-input__slot {
        margin: 0 !important;
        border: 1px solid #CCC !important;
        border-radius: 6px !important;
        padding: 0 6px !important;
        background: #fff !important;
        min-height: 27px !important;
        height: 39px !important;
        box-sizing: border-box !important;
    }

    /* Input interno */
    .v-text-field input,
    .v-text-field textarea,
    .v-select .v-select__selection {
        color: #333 !important;
        outline: none !important;
        padding: 0 !important;
        margin: 0 !important;
        height: 27px !important;
        line-height: 27px !important;
        font-size: 14px !important;
    }

    /* Fieldset del outlined (si se usa) */
    .v-text-field--outlined fieldset, .v-select--outlined fieldset {
        display: none !important;
    }

    /* Íconos */
    .v-text-field .v-icon, .v-select .v-icon {
        font-size: 18px !important;
        color: var(--secondary) !important;
    }

    /* Estados de error y éxito (opcional) */
    .v-text-field.error--text > .v-input__control > .v-input__slot,
    .v-select.error--text > .v-input__control > .v-input__slot {
        background: color-mix(in srgb, var(--error) 9%, transparent) !important;
        border-bottom: 1px solid var(--error) !important;
    }

    /* Remover mensajes de error/ayuda por defecto */
    .v-text-field .v-messages, .v-select .v-messages {
        padding-top: 3px !important;
    }


    /* ========================================= */
    /* ESTILOS PARA BOTONES VUETIFY 2 */
    /* ========================================= */

    /* Botón principal de Vuetify */
    .v-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        font-weight: normal !important;
        font-size: 14px !important;
        letter-spacing: 0.036em !important;
        border: none !important;
        border-radius: 6px !important;
        padding: 7px 18px !important;
        cursor: pointer !important;
        background-color: var(--primary) !important;
        color: #fff !important;
        transition: background-color 0.3s ease !important;
        font-family: Arial, Helvetica, sans-serif !important;
        flex-wrap: nowrap !important;
        min-width: auto !important;
        height: auto !important;
        min-height: auto !important;
        box-shadow: none !important;
        text-transform: none !important;
    }

        /* Contenido interno del botón */
        .v-btn .v-btn__content {
            font-weight: normal !important;
            font-size: 15px !important;
            letter-spacing: 0.036em !important;
            font-family: Arial, Helvetica, sans-serif !important;
            text-transform: none !important;
        }

        /* Remover overlay por defecto de Vuetify */
        .v-btn:before {
            display: none !important;
        }

        /* Estados hover y active */
        .v-btn:hover {
            /*background-color: var(--primary-dark, #1976d2) !important;*/
            background-color: color-mix(in srgb, var(--primary) 87%, black) !important;
            box-shadow: 0 6px 6px rgba(var(--primary-rgb), 0.25) !important;
        }

        .v-btn:active,
        .v-btn:focus {
            background-color: var(--primary-dark, #1976d2) !important;
        }

        /* Botón disabled */
        .v-btn:disabled,
        .v-btn.v-btn--disabled {
            background-color: #ccc !important;
            color: #666 !important;
            cursor: not-allowed !important;
            opacity: 0.6 !important;
        }

        /* Botones con variantes de color específicas */
        .v-btn.primary {
            background-color: var(--primary) !important;
        }

        .v-btn.secondary {
            background-color: var(--secondary, #424242) !important;
        }

        .v-btn.success {
            background-color: var(--success, #4caf50) !important;
        }