@font-face {
    font-family: 'Montserrat-Light';
    src: url('fonts/Montserrat-Light.eot');
    src: url('fonts/Montserrat-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/Montserrat-Light.svg#Montserrat-Light') format('svg'),
        url('fonts/Montserrat-Light.ttf') format('truetype'),
        url('fonts/Montserrat-Light.woff') format('woff'),
        url('fonts/Montserrat-Light.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat-Bold';
    src: url('fonts/Montserrat-Bold.eot');
    src: url('fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Montserrat-Bold.svg#Montserrat-Bold') format('svg'),
        url('fonts/Montserrat-Bold.ttf') format('truetype'),
        url('fonts/Montserrat-Bold.woff') format('woff'),
        url('fonts/Montserrat-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat-Regular';
    src: url('fonts/Montserrat-Regular.eot');
    src: url('fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Montserrat-Regular.svg#Montserrat-Regular') format('svg'),
        url('fonts/Montserrat-Regular.ttf') format('truetype'),
        url('fonts/Montserrat-Regular.woff') format('woff'),
        url('fonts/Montserrat-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

* { box-sizing: border-box; }

/* Props (las dejo tal cual las usas) */
@property --angle {
    syntax: '<angle>';
    initial-value: 90deg;
    inherits: true;
}

@property --gradX {
    syntax: '<percentage>';
    initial-value: 50%;
    inherits: true;
}

@property --gradY {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: true;
}

/* ===== Paleta OVIT Client CRM ===== */
:root{
    --d: 2500ms;
    --angle: 90deg;
    --gradX: 100%;
    --gradY: 50%;

    --cp-primary-1: #4A67F0;          /* índigo */
    --cp-primary-2: #3E7AF1;          /* azul */
    --cp-primary-soft: rgba(74,103,240,.14);
    --cp-focus: rgba(74,103,240,.35);

    --cp-bg: #F3F7FF;                 /* fondo */
    --cp-surface: #FFFFFF;            /* tarjeta */
    --cp-surface-2: #EEF4FF;          /* inputs */
    --cp-border: rgba(30,41,59,.14);

    --cp-text: #0F172A;
    --cp-muted: #64748B;

    --cp-dark: #0B1220;
    --cp-danger: #EF4444;
    --cp-success: #22C55E;

    --cp-shadow: 0px 12px 30px rgba(15, 23, 42, .10);

    /* tus c1/c2 para efectos: los “alineo” al look */
    --c1: rgba(74,103,240,.95);
    --c2: rgba(62,122,241,.35);
}

/* Loader */
.loader {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--cp-bg) !important;
    transition: opacity 0.75s, visibility 0.75s;
    z-index: 99991;
}

.loader-title {
    position: fixed;
    width: 75px;
    top: 50;
    left: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.92);
    transition: opacity 0.75s, visibility 0.75s;
    border-radius: 16px;
    box-shadow: var(--cp-shadow);
}

.loader--hidden { opacity: 0; visibility: hidden; }

.loader::after {
    content: "";
    width: 120px;
    height: 120px;
    border: 15px solid rgba(15,23,42,.12);
    border-top-color: var(--cp-primary-2);
    border-radius: 50%;
    animation: loading 0.75s ease infinite;
}

@keyframes loading {
    from { transform: rotate(0turn); }
    to { transform: rotate(1turn); }
}

/* Layout general */
html,
body {
    display: flex;
    align-items: center;
    font-family: 'Montserrat-Bold' !important;
    height: 100%;
    width: 100%;
    /* Fondo estilo screenshot: azul suave */
    background:
        radial-gradient(900px 600px at 15% 20%, rgba(74,103,240,.20) 0%, rgba(74,103,240,0) 55%),
        radial-gradient(900px 600px at 85% 30%, rgba(62,122,241,.18) 0%, rgba(62,122,241,0) 60%),
        linear-gradient(180deg, #EAF1FF 0%, #DCE8FF 40%, #D3E1FF 100%);
}

/* (Si usas animación de borde) */
@keyframes borderRotate {
    100% { --angle: 420deg; }
}

/* Caja fondo para el login */
.cajalogin {
    padding: 10%;
    border-radius: 22px;
    background: rgba(255,255,255,.88);
    border: 1px solid var(--cp-border);
    box-shadow: var(--cp-shadow);
    backdrop-filter: blur(10px);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 1 !important;
}

/* Botón login */
.btn_login {
    background: linear-gradient(135deg, var(--cp-primary-1) 0%, var(--cp-primary-2) 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0px 10px 20px rgba(74,103,240,.18);
    transition: .25s ease;
}

.btn_login:hover {
    background: linear-gradient(135deg, var(--cp-primary-2) 0%, var(--cp-primary-1) 100%) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0px 14px 26px rgba(74,103,240,.22);
}

/* Cilo */
.cilo { z-index: 0 !important; }

/* Texto */
.textologin { color: var(--cp-text); }

/* Form */
.form-signin {
    width: 100%;
    max-width: 30rem;
    padding: 15px;
    margin: auto;
}

.form-signin .checkbox { font-weight: 400; }
.form-signin .form-floating:focus-within { z-index: 2; }

.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg { font-size: 3.5rem; }
}

/*** Logout ****/
.checkmark {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: var(--cp-success);
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px var(--cp-success);
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    position: relative;
    top: 5px;
    right: 5px;
    margin: 0 auto;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: var(--cp-success);
    fill: #BFF7D0;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke { 100% { stroke-dashoffset: 0; } }

@keyframes scale {
    0%, 100% { transform: none; }
    50% { transform: scale3d(1.1, 1.1, 1); }
}

@keyframes fill {
    100% { box-shadow: inset 0px 0px 0px 30px var(--cp-success); }
}

.texto-sesion {
    color: var(--cp-text) !important;
    padding-top: 10px;
}

/** Error ***/
.checkmark_error {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: var(--cp-danger);
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px rgba(239,68,68,.35);
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    position: relative;
    top: 5px;
    right: 5px;
    margin: 0 auto;
}

.checkmark__cross {
    stroke: var(--cp-danger);
    fill: #F7B2B2;
}

@keyframes fill {
    100% { box-shadow: inset 0px 0px 0px 30px rgba(239,68,68,.55); }
}

/* Olvidar contraseña */
.olvidar_contraseña {
    color: var(--cp-primary-2);
    cursor: pointer;
    font-family: 'Montserrat-Regular';
}

.olvidar_contraseña:hover {
    color: var(--cp-primary-1);
    text-decoration: underline;
}

/*Estilos del modal*/
.modal-header {
    background: var(--cp-dark) !important;
    color: white;
    text-transform: capitalize !important;
}

.modal-header .modal-title {
    color: #ffffff !important;
}

.modal-header .btn-close {
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 1em auto !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
}

.modal-header .btn-close:hover,
.modal-header .btn-close:focus {
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 1em auto !important;
    box-shadow: none !important;
    opacity: .85 !important;
}

/* botones Generales*/
.btn-modal {
    color: white !important;
    background: linear-gradient(135deg, var(--cp-primary-1) 0%, var(--cp-primary-2) 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0px 10px 18px rgba(74,103,240,.18);
    transition: .25s ease;
}

.btn-modal:hover {
    color: white !important;
    background: var(--cp-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0px 14px 22px rgba(15, 23, 42, .18);
}