/* Styles for login page (separated from blade) */
html,body{height:100%;margin:0;padding:0}
/* Use top-centered focal point to avoid vertical cropping of image text; cover still fills viewport */
/* Use alternate background image */
/* Prefer WebP with PNG fallback */
/* Use only the optimized WebP background (PNG removed) */
body{background-image: url("../images/background_def2.webp"); background-position: center top; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#443627; min-height:100vh}

/* Dim overlay so the login card stands out */
body::before{content:'';position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:0;pointer-events:none}

.card-login{
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    width:100%;
    max-width:820px;
    min-height:480px;
    height:auto;
    margin:6vh auto;
    box-sizing:border-box;
    position:relative;
    z-index:20;
    ;
    display:flex;
    flex-direction:column;
}

/* Central login: responsive sizing (avoid fixed 800x600) */
/* central-login: keep it responsive and inherit general rules */
#central-login.card-login{max-width:820px}
#central-login.card-login *{box-sizing:border-box}
#central-login .card-row{align-items:stretch;min-height:420px}
#central-login .card-left, #central-login .card-right{min-width:0}
#central-login .card-left{overflow:hidden}
#central-login .card-right{overflow:auto}
#central-login .left-image{width:100%;height:100%;object-fit:cover;display:block}

/* Ensure left panel fills vertically and image covers without gaps */
.card-left{display:flex;flex-direction:column;align-items:stretch}
.card-left .left-image{flex:1 1 auto;display:block;width:100%;height:100%;object-fit:cover;margin:0;padding:0}
.left-image{object-fit:cover}

/* Left panel background: dark blue under the image */
.card-left{background:linear-gradient(180deg,#07264a 0%,#03283b 100%);position:relative}
.card-left .left-image{position:relative;z-index:2;background:transparent}
.card-left::after{content:'';position:absolute;left:0;right:0;bottom:0;height:12%;background:linear-gradient(180deg,rgba(3,40,59,0) 0%,rgba(0,10,20,0.18) 100%);z-index:1;pointer-events:none}

/* Buttons */
.btn-primary{
    background:linear-gradient(180deg,#3b82f6 0%,#1e3a8a 100%);
    color:#ffffff;
    border:0;
    padding:.7rem 1.5rem;
    font-weight:600;
    border-radius:8px;
    transition:all .3s ease
}
.btn-primary:hover{
    background:linear-gradient(180deg,#2563eb 0%,#0b2546 100%);
    color:#ffffff;
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(59,130,246,.3)
}

.register-btn{
    background:linear-gradient(180deg,#2563eb 0%,#1e40af 100%);
    color:#fff;
    border:0;
    padding:.6rem 1rem;
    border-radius:8px;
    font-weight:700;
    transition:all .3s ease
}
.register-btn:hover{
    background:linear-gradient(180deg,#1e40af 0%,#153a8a 100%);
    color:#fff;
    transform:translateY(-1px)
}

.left-image{width:100%;height:100%;display:block;object-fit:fill;margin:0;border:0}

/* Toast notifications (top-right) */
.toast-container{position:fixed;top:1rem;right:1rem;z-index:99999;display:flex;flex-direction:column;gap:.5rem;align-items:flex-end}
.toast{min-width:260px;max-width:360px;padding:.8rem 1rem;border-radius:10px;color:#0b1220;box-shadow:0 6px 18px rgba(2,6,23,0.12);display:flex;align-items:flex-start;gap:.75rem;transform:translateX(20px);opacity:0;animation:toast-in .25s forwards}
.toast.success{background:linear-gradient(90deg,#34d399 0%,#10b981 100%);color:#042014}
.toast.error{background:linear-gradient(90deg,#fb7185 0%,#ef4444 100%);color:#2b0508}
.toast .toast-close{margin-left:auto;background:transparent;border:0;color:inherit;font-weight:700;cursor:pointer}
@keyframes toast-in{to{transform:translateX(0);opacity:1}}

/* dismiss animation */
.toast.hide{animation:toast-out .18s forwards}
@keyframes toast-out{to{transform:translateX(20px);opacity:0}}

/* Desktop layout */
@media(min-width:768px){
    .card-row{
        display:flex;
        flex-direction:row;
        flex:1 1 auto;
        align-items:stretch
    }
    .card-left{
        flex:0 0 45%;
        width:45%;
        min-width:0;
        overflow:hidden;
        display:flex;
        flex-direction:column
    }
    .card-right{
        flex:1 1 55%;
        width:55%;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        padding:0;
        overflow:hidden;
        position:relative
    }
    /* Decorative gradient lines: absolutely positioned, don't affect layout */
    .card-right::before,
    .card-right::after{
        content:'';
        position:absolute;
        left:0;
        right:0;
        height:3px;
        z-index:5;
        pointer-events:none;
    }
    .card-right::before{top:0;background:linear-gradient(90deg,#fbbf24 0%,#3b82f6 50%,#ffffff 100%)}
    .card-right::after{bottom:0;background:linear-gradient(90deg,#ffffff 0%,#3b82f6 50%,#fbbf24 100%)}
}

/* Mobile layout */
@media(max-width:767px){
    .card-row{display:block}
    .card-left{height:200px;overflow:hidden}
    .card-right{padding:1.5rem;position:relative}
    .card-login{
        width:95%;
        margin:2rem auto;
        height:auto;
        min-height:auto;
        max-height:none !important
    }
    /* Líneas en móvil también */
    .card-right::before,
    .card-right::after{
        content:'';
        position:absolute;
        left:0;
        right:0;
        height:2px;
        z-index:10
    }
    .card-right::before{
        top:0;
        background:linear-gradient(90deg,#fbbf24 0%,#3b82f6 50%,#ffffff 100%)
    }
    .card-right::after{
        bottom:0;
        background:linear-gradient(90deg,#ffffff 0%,#3b82f6 50%,#fbbf24 100%)
    }
}

/* When layout collapses to single-column (e.g., tablets or zoomed views) show a blue-white gradient background */
@media (max-width:900px){
    body{
        background:linear-gradient(135deg,#081524 0%,#1e3a8a 45%,#ffffff 100%) fixed center / cover no-repeat;
    }
    /* So the gradient is visible but login still stands out */
    body::before{background:rgba(0,0,0,0.28)}
    /* Make the card slightly more opaque to contrast with the gradient */
    .card-login{background:rgba(255,255,255,0.96)}
}

/* Approximate zoom >140%: switch to gradient earlier to keep background subjects visible */
@media (max-width:1375px){
    body{
        background: linear-gradient(135deg,#081524 0%,#1e3a8a 45%,#ffffff 100%) fixed center / cover no-repeat;
    }
    body::before{background:rgba(0,0,0,0.28)}
    .card-login{background:rgba(255,255,255,0.96)}
    /* reduce right-top image area slightly to keep content visible */
    .right-top{flex:0 0 24%;height:24%}
    .right-bottom{padding:1.5rem}
}

/* Header section */
.right-header{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:.5rem;
    margin-bottom:1.25rem;
    text-align:left
}

.slogan-title{
    font-family:Georgia, 'Times New Roman', serif;
    font-size:1.5rem;
    margin:0;
    color:#052c65;
    font-weight:700;
    line-height:1.3
}

.slogan-sub{
    font-size:0.95rem;
    color:#073763;
    margin:0.5rem 0 0;
    line-height:1.5;
    max-width:100%
}

.register-inline{
    color:#D98324;
    font-weight:600;
    text-decoration:none;
    transition:color .3s ease
}
.register-inline:hover{
    color:#b56b1a;
    text-decoration:underline
}

.join-link{
    display:inline-block;
    margin-top:.75rem;
    color:#D98324;
    font-weight:600;
    text-decoration:none;
    transition:color .3s ease
}
.join-link:hover{
    color:#b56b1a;
    text-decoration:underline
}

@media(min-width:768px){
    /* Two-column layout only on sufficiently wide viewports */
    #central-login .card-row{
        display:flex;
        flex-direction:row;
        flex:1 1 auto;
        align-items:stretch
    }
    #central-login .card-left{
        flex:1 1 50%;
        width:50%;
        min-width:0;
    }
    #central-login .card-right{
        flex:1 1 50%;
        width:50%;
        display:flex;
        align-items:center;
        padding:0;
    }
    #central-login .left-image{
        width:100%;
        height:100%;
        display:block;
        object-fit:fill;
        margin:0;
        border:0
    }
}

.right-title{font-weight:700;color:#443627}
.right-sub{color:#706f6c;text-align:left}

/* Right panel division: top image (larger) and bottom content (rest) */
.right-top{
    width:100%;
    /* increase space for the image to make it more prominent */
    flex:0 0 30%;
    height:30%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,#60a5fa 0%,#bfdbfe 100%);
}

.right-top-image{
    width:100%;
    /* allow larger image */
    max-width:420px;
    height:auto;
    object-fit:contain;
    display:block;
    margin:0 auto;
}

.right-bottom{
    width:100%;
    flex:1 1 70%;
    height:70%;
    overflow:auto;
    padding:2rem 2.5rem;
    background:linear-gradient(180deg,#bfdbfe 0%,#ffffff 100%);
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Apply gradient to the entire right panel */
#central-login .card-right{
    background:linear-gradient(180deg,#60a5fa 0%,#ffffff 100%) !important
}

/* Ensure the right-header text aligns well inside the bottom area */
.right-bottom .right-header{
    align-items:flex-start;
    margin-bottom:1.25rem;
    padding-top:0
}

/* Form inputs styling */
.form-label{
    font-weight:600;
    color:#052c65;
    margin-bottom:.5rem;
    font-size:.95rem
}

.form-control{
    border:2px solid #e5e7eb;
    border-radius:8px;
    padding:.7rem 1rem;
    transition:all .3s ease;
    font-size:.95rem
}

.form-control:focus{
    border-color:#3b82f6;
    box-shadow:0 0 0 3px rgba(59,130,246,.1);
    outline:0
}

/* Forgot password link */
.forgot-password{
    display:inline-block;
    margin-top:.75rem;
    color:#3b82f6;
    font-size:.9rem;
    text-decoration:none;
    font-weight:500;
    transition:color .3s ease
}
.forgot-password:hover{
    color:#2563eb;
    text-decoration:underline
}

/* Mobile adjustments */
@media(max-width:767px){
    .right-bottom{
        padding:1.5rem;
        align-items:flex-start
    }
    .right-top{
        flex:0 0 100px;
        height:100px
    }
    .right-top-image{
        max-width:260px
    }
    .slogan-title{
        font-size:1.25rem
    }
    .slogan-sub{
        font-size:.9rem
    }
}

/* Transparent / subtle scrollbars for right panel and internal scroll areas */
.card-right, .right-bottom {
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.12) transparent;
}

/* WebKit-based browsers */
.card-right::-webkit-scrollbar, .right-bottom::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.card-right::-webkit-scrollbar-track, .right-bottom::-webkit-scrollbar-track {
    background: transparent;
}
.card-right::-webkit-scrollbar-thumb, .right-bottom::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.08);
    border-radius: 8px;
    border: 2px solid transparent; /* provide spacing */
    background-clip: padding-box;
}
.card-right::-webkit-scrollbar-thumb:hover, .right-bottom::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.12);
}

/* Hide scrollbar while still scrollable on small screens if desired (optional) */
@media(max-width:600px){
    .card-right::-webkit-scrollbar, .right-bottom::-webkit-scrollbar { display: none; }
    .card-right, .right-bottom { -ms-overflow-style: none; scrollbar-width: none; }
}

/* TomSelect / select styling overrides to look modern */
.ts-control, .tom-select .ts-control {
    border:2px solid #e5e7eb;
    border-radius:8px;
    padding:.35rem .5rem;
    background:#fff;
    box-shadow:none;
}
.ts-control .item {
    background:#eef2ff;
    color:#0b2540;
    padding:.25rem .5rem;
    border-radius:6px;
    margin-right:.25rem;
}
.ts-control input {
    min-width:120px;
}
.ts-dropdown {
    border-radius:8px;
    box-shadow:0 8px 24px rgba(2,6,23,0.12);
    border:1px solid rgba(0,0,0,0.06);
}
.ts-dropdown .option {
    padding:.5rem .75rem;
}
.ts-dropdown .option:hover, .ts-dropdown .active {
    background:linear-gradient(90deg,#eef2ff 0%,#dbeafe 100%);
}
.ts-control.is-focused {
    border-color:#3b82f6;
    box-shadow:0 0 0 4px rgba(59,130,246,0.06);
}