/* ================================================================
   Home2.css  —  Novaris CR Login Page
   Colors:
     Primary  : #212C5D  (dark navy)
     Accent   : #DB993A  (gold/amber)
     Light bg : #F4F6FB
     Text     : #2D2D2D
================================================================ */

/* ── Reset & base ─────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #F4F6FB;
    color: #2D2D2D;
}

/* ── Two-column wrapper ───────────────────────────────────────── */
.h2-wrapper {
    display: flex;
    min-height: 100vh;
    height: 100%;
}

/* ================================================================
   LEFT PANEL — Hero Slider
================================================================ */
.h2-slider-panel {
    position: relative;
    flex: 0 0 60%;
    max-width: 60%;
    overflow: hidden;
    background: #212C5D;
}

/* ── Brand logo over slider ───────────────────────────────────── */
.h2-brand {
    position: absolute;
    top: 32px;
    left: 40px;
    z-index: 20;
}

.h2-brand-img {
    height: 100px;
    width: auto;
    filter: brightness(0) invert(1); /* white logo over dark bg */
}

/* ── Slides container ─────────────────────────────────────────── */
.h2-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ── Individual slide ─────────────────────────────────────────── */
.h2-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex;
    align-items: flex-end;
}

    .h2-slide.active {
        opacity: 1;
    }

/* Background images — replace paths with your real images */
.h2-slide--1 {
    background-image: url('/images/Home2/slide1.jpg');
}

.h2-slide--2 {
    background-image: url('/images/Home2/slide2.jpg');
}

.h2-slide--3 {
    background-image: url('/images/Home2/slide3.jpg');
}

/* Dark gradient overlay */
.h2-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to bottom, rgba(33, 44, 93, 0.55) 0%, rgba(33, 44, 93, 0.80) 60%, rgba(33, 44, 93, 0.95) 100% );
}

/* ── Slide text content ───────────────────────────────────────── */
.h2-slide-content {
    position: relative;
    z-index: 10;
    padding: 0 48px 80px 48px;
    color: #fff;
}

.h2-slide-tag {
    display: inline-block;
    background: #DB993A;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.h2-slide-title {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 14px;
    color: #fff;
}

.h2-slide-sub {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 400;
}

/* ── Dots navigation ──────────────────────────────────────────── */
.h2-dots {
    position: absolute;
    bottom: 32px;
    left: 48px;
    z-index: 20;
    display: flex;
    gap: 8px;
}

.h2-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.6);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, border-color 0.3s, transform 0.3s;
}

    .h2-dot.active {
        background: #DB993A;
        border-color: #DB993A;
        transform: scale(1.3);
    }

/* ================================================================
   RIGHT PANEL — Login form
================================================================ */
.h2-login-panel {
    flex: 0 0 40%;
    max-width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 40px 24px;
    box-shadow: -8px 0 32px rgba(33, 44, 93, 0.08);
}

.h2-login-box {
    width: 100%;
    max-width: 380px;
}

/* Logo inside login box — hidden on desktop, shown on mobile */
.h2-login-logo {
    
    text-align: center;
    margin-bottom: 24px;
}

    .h2-login-logo img {
        height: 100px;
        width: auto;
    }

/* ── Login titles ─────────────────────────────────────────────── */
.h2-login-title {
    font-size: 1.85rem;
    font-weight: 700;
    color: #212C5D;
    margin-bottom: 6px;
}

.h2-login-subtitle {
    font-size: 1rem;
    color: #7A8499;
    margin-bottom: 32px;
}

/* ── Form fields ──────────────────────────────────────────────── */
.h2-field-group {
    margin-bottom: 22px;
}

.h2-label {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #212C5D;
    margin-bottom: 7px;
    letter-spacing: 0.3px;
}

    .h2-label i {
        color: #DB993A;
        margin-right: 4px;
    }

.h2-input {
    display: block;
    width: 100%;
    padding: 13px 16px;
    font-size: 1rem;
    border: 1.5px solid #DDE2EE;
    border-radius: 8px;
    background: #F8F9FC;
    color: #2D2D2D;
    transition: border-color 0.25s, box-shadow 0.25s;
    outline: none;
}

    .h2-input:focus {
        border-color: #212C5D;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(33, 44, 93, 0.10);
    }

    .h2-input::placeholder {
        color: #B0B8CC;
    }

/* ── Password eye toggle ─────────────────────────────────────── */
.h2-input-eye {
    position: relative;
}

    .h2-input-eye .h2-input {
        padding-right: 44px;
    }

.h2-eye-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #7A8499;
    font-size: 1rem;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

    .h2-eye-btn:hover {
        color: #212C5D;
    }

/* ── Validation messages ─────────────────────────────────────── */
.h2-validation {
    display: block;
    font-size: 0.88rem;
    color: #D9534F;
    margin-top: 4px;
}

/* ── Login button ─────────────────────────────────────────────── */
.h2-btn-login {
    display: block;
    width: 100%;
    padding: 15px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #212C5D 0%, #2e3f85 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: background 0.25s, transform 0.15s, box-shadow 0.25s;
    margin-top: 8px;
}

    .h2-btn-login:hover {
        background: linear-gradient(135deg, #1a2349 0%, #253472 100%);
        box-shadow: 0 6px 20px rgba(33, 44, 93, 0.30);
        transform: translateY(-1px);
    }

    .h2-btn-login:active {
        transform: translateY(0);
    }

    .h2-btn-login i {
        margin-right: 6px;
    }

/* ── Recovery link ────────────────────────────────────────────── */
.h2-recovery-link {
    text-align: center;
    margin-top: 20px;
}

    .h2-recovery-link a {
        font-size: 0.95rem;
        color: #DB993A;
        text-decoration: none;
        font-weight: 600;
        transition: color 0.2s;
    }

        .h2-recovery-link a:hover {
            color: #c27e28;
            text-decoration: underline;
        }

    .h2-recovery-link i {
        margin-right: 4px;
    }

/* ── Footer ───────────────────────────────────────────────────── */
.h2-login-footer {
    text-align: center;
    margin-top: 36px;
    font-size: 0.85rem;
    color: #B0B8CC;
}

/* ================================================================
   MODAL — Recuperar Contraseña
================================================================ */
.h2-modal-dialog {
    max-width: 440px;
}

.h2-modal-content {
    border: none;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(33, 44, 93, 0.22);
}

.h2-modal-header {
    background: linear-gradient(135deg, #212C5D 0%, #2e3f85 100%);
    border: none;
    padding: 24px 28px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.h2-modal-icon {
    width: 44px;
    height: 44px;
    background: rgba(219, 153, 58, 0.20);
    border: 1.5px solid rgba(219, 153, 58, 0.50);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .h2-modal-icon i {
        font-size: 1.2rem;
        color: #DB993A;
    }

.h2-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

.h2-modal-subtitle {
    font-size: 0.80rem;
    color: rgba(255,255,255,0.70);
    margin: 0;
}

.h2-modal-body {
    padding: 28px 28px 8px 28px;
    background: #fff;
}

.h2-modal-footer {
    padding: 16px 28px 24px 28px;
    background: #fff;
    border: none;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* ── Secondary button (cancel) ───────────────────────────────── */
.h2-btn-secondary {
    padding: 11px 20px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #212C5D;
    background: #F4F6FB;
    border: 1.5px solid #DDE2EE;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

    .h2-btn-secondary:hover {
        background: #e8ebf5;
    }

/* ── Success state ─────────────────────────────────────────────── */
.h2-modal-success-icon {
    margin-bottom: 12px;
}

    .h2-modal-success-icon i {
        font-size: 3rem;
        color: #27AE60;
    }

.h2-modal-success-msg {
    font-size: 0.92rem;
    color: #444;
    line-height: 1.6;
}

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 900px) {
    .h2-wrapper {
        flex-direction: column;
    }

    .h2-slider-panel {
        flex: 0 0 40vh;
        max-width: 100%;
        min-height: 40vh;
    }

    .h2-login-panel {
        flex: 1;
        max-width: 100%;
        box-shadow: none;
        padding: 32px 20px;
    }

    .h2-slide-title {
        font-size: 1.5rem;
    }

    .h2-slide-content {
        padding: 0 28px 60px 28px;
    }

    .h2-brand {
        top: 20px;
        left: 24px;
    }

    .h2-login-logo {
        display: block;
    }
}

@media (max-width: 480px) {
    .h2-slider-panel {
        min-height: 34vh;
    }

    .h2-slide-title {
        font-size: 1.25rem;
    }

    .h2-slide-sub {
        display: none;
    }

    .h2-login-title {
        font-size: 1.3rem;
    }
}

/* ================================================================
   SUCCESS BOX — Recordatorio2 / confirmation state
================================================================ */
.h2-success-box {
    text-align: center;
    padding: 24px 0 8px 0;
}

.h2-success-icon {
    margin-bottom: 16px;
}

    .h2-success-icon i {
        font-size: 3.5rem;
        color: #27AE60;
    }

.h2-success-msg {
    font-size: 0.98rem;
    color: #444;
    line-height: 1.7;
}