/* ========================================
   CUSTOM STYLES (Complemento a Tailwind)
   ======================================== */

.cesa-logo-inline {
    display: inline-block;
    width: 85px;
    height: 43px;
    vertical-align: -24px;
    margin-left: 1px;
    position: relative;
}

@media (min-width: 768px) and (max-width: 1199px) {
    .cesa-logo-inline {
        width: 90px;
        height: 50.7px;
        vertical-align: -22px;
        margin-left: 5px;
    }
}

/* Desktop - Logo CESA inline */
@media (min-width: 1200px) {
    .cesa-logo-inline {
        width: 121px;
        height: 68.14px;
        vertical-align: -38px;
        margin-left: 5px;
    }
}

.logo-white {
    filter: brightness(0) invert(1);
    position: relative;
    z-index: 1;
}

input:focus {
    outline: none;
}

button {
    transition: all 0.2s ease;
}

body {
    min-height: 100vh;
    margin: 0;
}

input[type="email"],
input[type="password"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

html {
    scroll-behavior: smooth;
}

button:focus-visible,
input:focus-visible,
a:focus-visible {
    outline: 2px solid #013998;
    outline-offset: 2px;
}

.auth-background {
    background-image: url('../images/auth/login-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (min-width: 1200px) {
    .auth-background {
        background-image: url('../images/auth/background-auth-desktop.png');
    }
}

/* ========================================
   ELIMINAR TODOS LOS BORDES Y OUTLINES
   ======================================== */

*,
*:focus,
*:active,
*:focus-visible,
*:focus-within {
    outline: none !important;
    box-shadow: none !important;
}

input,
input:focus,
input:active,
textarea,
textarea:focus,
textarea:active,
select,
select:focus,
select:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

div:focus-within {
    outline: none !important;
    box-shadow: none !important;
}

.border-cesa-blue {
    border: 1px solid #013998 !important;
}

div:has(input:focus),
div:has(input:active) {
    outline: none !important;
    box-shadow: none !important;
    border-color: #013998 !important; 
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: #000000 !important;
    border: none !important;
    outline: none !important;
}