/* =============================================================================
   Login moderno de Remuneraciones, con la identidad visual de fullcollege.cl
   -----------------------------------------------------------------------------
   Paleta y tipografia tomadas del sitio oficial:
     azul marca  #055a8d  (hover #043e62, acento #0a7bbf, fondo tenue #eaf3f9)
     verde marca #28b463  (fondo tenue #e8f8ee)
     textos      #0f172a / #334155 / #64748b   bordes #e2e8f0   fondo #f1f5f9
     fuentes     Quicksand (titulos y botones) + Inter (textos y campos)

   IMPORTANTE: el formulario lo arma js/securearea.js con Content.Form (MooTools)
   y le pone left/top/width inline. Aqui SOLO se cambia su aspecto con CSS: la
   logica del login no se toca. Por eso se usa :has(.classLogin) para apuntar al
   contenedor sin afectar otros Content.Form (recuperar clave, comunicados, etc).
   El sistema exige Chrome (ver securearea.php), que soporta :has().

   Los acentos van como escapes (\00f3 = o con tilde) porque securearea.php se
   sirve como iso-8859-1 y un caracter UTF-8 literal saldria corrupto.
   ============================================================================= */

:root {
    --fc-azul: #055a8d;
    --fc-azul-osc: #043e62;
    --fc-azul-acento: #0a7bbf;
    --fc-azul-tenue: #eaf3f9;
    --fc-verde: #28b463;
    --fc-verde-osc: #1f8f4e;
    --fc-verde-tenue: #e8f8ee;
    --fc-texto: #0f172a;
    --fc-texto-2: #334155;
    --fc-texto-3: #64748b;
    --fc-borde: #e2e8f0;
    --fc-fondo: #f1f5f9;
    --fc-panel: 56%;          /* ancho del panel de marca */
    --fc-card: 420px;         /* ancho de la tarjeta de acceso */
}

/* ---- Fondo general: reemplaza la foto de img/fondoremu.png (style.css) ---- */
body.gray-bg {
    background: var(--fc-fondo) !important;
    background-image: none !important;
    font-family: 'Inter', system-ui, sans-serif;
    min-height: 100vh;
}

/* ---- Panel de marca (izquierda) ---------------------------------------- */
.login-marca {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--fc-panel);
    background: linear-gradient(145deg, var(--fc-azul) 0%, var(--fc-azul-osc) 100%);
    color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 7vw;
    z-index: 0;
}
/* blobs organicos, como los de la web */
.login-marca::before,
.login-marca::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}
.login-marca::before {
    width: 520px; height: 520px;
    right: -180px; top: -160px;
    background: radial-gradient(circle at 35% 35%, rgba(40,180,99,.55), rgba(40,180,99,0) 68%);
}
.login-marca::after {
    width: 460px; height: 460px;
    left: -160px; bottom: -180px;
    background: radial-gradient(circle at 60% 40%, rgba(10,123,191,.75), rgba(10,123,191,0) 70%);
}

.login-marca > * { position: relative; z-index: 1; max-width: 560px; }

.login-marca .pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 7px 16px;
    border-radius: 9999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
    font: 600 13px 'Quicksand', sans-serif;
    letter-spacing: .3px;
    margin-bottom: 26px;
}
.login-marca .pill i { color: #7ee2a8; }

.login-marca h1 {
    font: 700 44px/1.15 'Quicksand', sans-serif;
    margin: 0 0 18px;
    color: #fff;
}
.login-marca h1 span { color: #7ee2a8; }

.login-marca .bajada {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255,255,255,.85);
    margin: 0 0 34px;
}

.login-marca ul { list-style: none; padding: 0; margin: 0; }
.login-marca li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: rgba(255,255,255,.92);
    margin-bottom: 14px;
}
.login-marca li i {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #7ee2a8;
    flex-shrink: 0;
}

.login-marca .pie {
    position: absolute;
    left: 7vw; bottom: 28px;
    font-size: 13px;
    color: rgba(255,255,255,.6);
}

/* ---- Tarjeta de acceso (derecha) --------------------------------------- */
/* Centrada en la columna que deja libre el panel de marca. */
.c-frm:has(.classLogin) {
    left: calc(var(--fc-panel) + (100% - var(--fc-panel) - var(--fc-card)) / 2) !important;
    width: var(--fc-card) !important;
    top: 11vh !important;
    z-index: 2;
    /* el contenedor de Content trae fondo y sombra propios, que asomaban como un
       cuadrado detras de las esquinas redondeadas de la tarjeta */
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

.c-frm:has(.classLogin) > .ibox {
    background: #fff;
    border: 1px solid var(--fc-borde);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.04);
    padding: 38px 36px 26px;
    overflow: hidden;
    margin: 0;
}

/* La franja de titulo vacia pasa a ser la cabecera: logo + "Inicia sesion" */
.c-frm:has(.classLogin) .ibox-title {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}
.c-frm:has(.classLogin) .ibox-title > *,
.c-frm:has(.classLogin) .ibox-tools { display: none !important; }

.c-frm:has(.classLogin) .ibox-title::before {
    content: '';
    display: block;
    height: 46px;
    background: url('images/logo-fullcollege.png') no-repeat left center / contain;
    margin-bottom: 28px;
}
.c-frm:has(.classLogin) .ibox-title::after {
    content: 'Inicia sesi\00f3n';
    display: block;
    text-transform: none;
    font: 700 26px 'Quicksand', sans-serif;
    color: var(--fc-texto);
    margin-bottom: 4px;
}

.classLogin.ibox-content {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}
.classLogin::before {
    content: 'Ingresa con tu RUT y contrase\00f1 a para continuar.';
    display: block;
    font-size: 14px;
    color: var(--fc-texto-3);
    margin-bottom: 24px;
}

.classLogin .form-group { margin: 0 0 14px !important; }
.classLogin .form-group > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }

/* ---- Campos -------------------------------------------------------------- */
.classLogin .form-control {
    height: 50px !important;
    border-radius: 12px !important;
    border: 1.5px solid var(--fc-borde) !important;
    background: #f8fafc !important;
    color: var(--fc-texto) !important;
    font: 400 15px 'Inter', sans-serif !important;
    padding: 0 16px !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.classLogin .form-control::placeholder { color: #94a3b8; }
.classLogin .form-control:focus {
    border-color: var(--fc-azul-acento) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(10,123,191,.14) !important;
    outline: none;
}

/* ---- Botones ------------------------------------------------------------- */
.classLogin .btn-login-aci {
    height: 50px !important;
    border-radius: 9999px !important;
    font: 700 15px 'Quicksand', sans-serif !important;
    text-transform: none !important;
    letter-spacing: .2px;
    transition: background .15s, color .15s, border-color .15s, transform .1s;
    box-shadow: none !important;
}
.classLogin .btn-login-aci:active { transform: translateY(1px); }

/* Ingresar: accion principal, azul marca */
.classLogin .btn-primary.btn-login-aci {
    background: var(--fc-azul) !important;
    border: 0 !important;
    color: #fff !important;
    margin-top: 6px;
}
.classLogin .btn-primary.btn-login-aci:hover { background: var(--fc-azul-osc) !important; }

/* Rol funcionario: secundaria, verde marca en contorno */
.classLogin .btn-warning.btn-login-aci {
    background: var(--fc-verde-tenue) !important;
    border: 1.5px solid var(--fc-verde) !important;
    color: var(--fc-verde-osc) !important;
}
.classLogin .btn-warning.btn-login-aci:hover {
    background: var(--fc-verde) !important;
    color: #fff !important;
}

/* Recuperar contrasena / Instrucciones: enlaces discretos */
.classLogin .btn-blue.btn-login-aci {
    height: auto !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--fc-azul) !important;
    font: 600 14px 'Quicksand', sans-serif !important;
    padding: 6px 0 !important;
}
.classLogin .btn-blue.btn-login-aci:hover {
    color: var(--fc-azul-acento) !important;
    text-decoration: underline;
}

/* ---- Pantallas chicas: se oculta el panel y la tarjeta ocupa el centro ---- */
@media (max-width: 1000px) {
    .login-marca { display: none; }
    .c-frm:has(.classLogin) {
        left: 50% !important;
        margin-left: calc(var(--fc-card) / -2);
        top: 6vh !important;
    }
}
@media (max-width: 480px) {
    .c-frm:has(.classLogin) {
        left: 4% !important;
        width: 92% !important;
        margin-left: 0;
    }
    .c-frm:has(.classLogin) > .ibox { padding: 28px 22px 20px; }
}