/* ── Fuente global ── */
*, *::before, *::after { box-sizing: border-box; }
body, button, input, select, textarea {
    font-family: 'Montserrat', sans-serif;
}

/* ───────────────────────────
   BODY — fondo gris tenue
─────────────────────────────*/
.login-body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ───────────────────────────
   FONDO GRIS — centra el inner
─────────────────────────────*/
.login-container {
    width: 100%;
    min-height: 100vh;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ───────────────────────────
   INNER — max 600×400, centrado
─────────────────────────────*/
.login-inner {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 600px;
    display: flex;
    overflow: hidden;
}

/* ───────────────────────────
   LOGO — esquina superior izquierda del contenedor
─────────────────────────────*/
.login-brand {
    position: absolute;
    top: 36px;
    left: 40px;
    z-index: 2;
}
.login-brand-logo {
    height: 30px;
    object-fit: contain;
    object-position: left center;
}

/* ───────────────────────────
   WATERMARK — solo dentro de login-right, alrededor del card
─────────────────────────────*/
.login-wm {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.lw {
    position: absolute;
    color: #c0c0c0;
    opacity: 0.22;
    font-size: 30px;
}


/* izquierda del card */
.lw-16 { top: 84%; left: 13%; transform: rotate(8deg); }
.lw-17 { top: 83%; left: 22%; transform: rotate(-18deg); }
.lw-18 { top: 81%; left: 30%; transform: rotate(22deg); }
.lw-19 { top: 84%; left: 37%; transform: rotate(-14deg); }
.lw-20 { top: 83%; left: 45%; transform: rotate(16deg); }
.lw-21 { top: 80%; left: 53%; transform: rotate(-6deg); }
.lw-12 { top: 84%; left: 61%; transform: rotate(15deg); }
.lw-13 { top: 81%; left: 70%; transform: rotate(-20deg); }
.lw-10 { top: 78%; left: 79%; transform: rotate(20deg); }
.lw-11 { top: 84%; left: 82%; transform: rotate(-8deg); }
.lw-28 { top: 81%; left: 90%; transform: rotate(24deg); }
/* debajo del card */
.lw-29 { top: 25%;  left: 1%;  transform: rotate(-16deg); }
.lw-14 { top: 13%; left: 5%;  transform: rotate(10deg); }
.lw-15 { top: 20%; left: 6%;  transform: rotate(-25deg); }
.lw-22 { top: 30%; left: 6%; transform: rotate(20deg); }
.lw-23 { top: 40%; left: 8%; transform: rotate(-30deg); }
.lw-24 { top: 54%; left: 3%; transform: rotate(12deg); }
.lw-25 { top: 60%; left: 9%; transform: rotate(-20deg); }
.lw-9  { top: 64%; left: 2%;  transform: rotate(20deg); }
.lw-26 { top: 70%; left: 5%; transform: rotate(10deg); }
.lw-27 { top: 80%; left: 6%; transform: rotate(-8deg); }
.lw-30 { top: 75%; left: 1%; transform: rotate(18deg); }
.lw-1  { top: 36%;  left: 1%;  transform: rotate(-15deg); }
.lw-2  { top: 46%; left: 2%;  transform: rotate(20deg); }
.lw-3  { top: 15%; left: 15%;  transform: rotate(20deg); }
.lw-4  { top: 17%; left: 25%;  transform: rotate(20deg); }
.lw-5  { top: 16%; left: 36%;  transform: rotate(20deg); }
.lw-6  { top: 16%; left: 44%;  transform: rotate(20deg); }
.lw-7  { top: 14%; left: 61%;  transform: rotate(20deg); }
.lw-8  { top: 17%; left: 70%;  transform: rotate(20deg); }
/* ── Reflejo derecho (mirror de columna izquierda) ── */
.lw-31 { top: 13%; left: 90%; transform: rotate(-10deg); }
.lw-32 { top: 20%; left: 89%; transform: rotate(25deg); }
.lw-33 { top: 27%; left: 93%; transform: rotate(16deg); }
.lw-34 { top: 32%; left: 89%; transform: rotate(-20deg); }
.lw-35 { top: 36%; left: 92%; transform: rotate(15deg); }
.lw-36 { top: 40%; left: 87%; transform: rotate(30deg); }
.lw-37 { top: 45%; left: 91%; transform: rotate(-20deg); }
.lw-38 { top: 54%; left: 92%; transform: rotate(-12deg); }
.lw-39 { top: 59%; left: 86%; transform: rotate(20deg); }
.lw-40 { top: 62%; left: 92%; transform: rotate(-10deg); }
.lw-41 { top: 68%; left: 89%; transform: rotate(-18deg); }
.lw-42 { top: 74%; left: 91%; transform: rotate(8deg); }
/* ── Reflejo superior (mirror de fila inferior) ── */
.lw-43 { top: 8%;  left: 13%; transform: rotate(-8deg); }
.lw-44 { top: 9%;  left: 22%; transform: rotate(18deg); }
.lw-45 { top: 11%; left: 30%; transform: rotate(-22deg); }
.lw-46 { top: 8%;  left: 37%; transform: rotate(14deg); }
.lw-47 { top: 9%;  left: 45%; transform: rotate(-16deg); }
.lw-48 { top: 12%; left: 53%; transform: rotate(6deg); }
.lw-49 { top: 8%;  left: 61%; transform: rotate(-15deg); }
.lw-50 { top: 11%; left: 70%; transform: rotate(20deg); }
.lw-51 { top: 14%; left: 79%; transform: rotate(-20deg); }
.lw-52 { top: 8%;  left: 82%; transform: rotate(8deg); }
.lw-53 { top: 51%; left: 87%; transform: rotate(-24deg); }

/* ───────────────────────────
   PANEL IZQUIERDO
   texto centrado verticalmente
─────────────────────────────*/
.login-left {
    flex: 0 0 38%;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 40px;
}

/* Bloque de texto — 3 líneas */
.login-text-block {
    margin-bottom: 20px;
}
.lt-1 {
    font-size: 16px;
    font-weight: 800;
    color: #000000;
    margin: 0;
    line-height: 1.4;
}
.lt-2 {
    font-size: 16px;
    font-weight: 800;
    color: #000000;
    margin: 0 0 6px;
    line-height: 1.4;
}
.lt-3 {
    font-size: 24px;
    font-weight: 800;
    color: #F77206;
    margin: 0;
    line-height: 1.2;
}

/* Soporte */
.login-support-block { margin-top: 16px; }
.login-support-line {
    font-size: 12px;
    color: #8c8c8c;
    margin: 0 0 2px;
}
.login-support-link {
    font-size: 12px;
    color: #F77206;
    text-decoration: none;
    font-weight: 500;
    display: block;
}
.login-support-link:hover {
    color: #d4620a;
    text-decoration: underline;
}

/* ───────────────────────────
   PANEL DERECHO
─────────────────────────────*/
.login-right {
    flex: 1;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    overflow: hidden;
}

/* ── Card — flotante con shadow prominente ── */
.login-card {
    position: relative;
    z-index: 2;               /* encima del watermark */
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .18), 0 2px 12px rgba(0, 0, 0, .10);
    padding: 40px 36px 28px;
    width: 100%;
    max-width: 380px;
}

.login-card-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px;
    line-height: 1.2;
}
.login-card-subtitle {
    font-size: 12px;
    color: #8c8c8c;
    margin: 0 0 28px;
    line-height: 1.6;
}

/* ── Alerts ── */
.login-alert {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    padding: 9px 12px;
    border-radius: 7px;
    margin-bottom: 16px;
    line-height: 1.4;
}
.login-alert-error {
    background: #fff2f0;
    border: 1px solid #ffa39e;
    color: #cf1322;
}
.login-alert-success {
    background: #f6ffed;
    border: 1px solid #b7eb8f;
    color: #389e0d;
}

/* ── Inputs (Ant Design style) ── */
.login-field { margin-bottom: 14px; }
.login-field-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.88);
    margin-bottom: 4px;
}
.login-input {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 11px;
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
    color: rgba(0, 0, 0, 0.88);
    background: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    outline: none;
    line-height: 1.5714;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),
                box-shadow   0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.login-input:hover {
    border-color: #f5841f;
}
.login-input:focus {
    border-color: #F77206;
    box-shadow: 0 0 0 2px rgba(247, 114, 6, 0.1);
    background: #ffffff;
}
.login-input::placeholder { color: rgba(0, 0, 0, 0.25); }

/* ── Toggle ver/ocultar contraseña ── */
.login-field-password { position: relative; }
.login-field-password .login-input { padding-right: 36px; }
.login-password-toggle {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
    line-height: 1;
    user-select: none;
}
.login-password-toggle:hover { color: rgba(0, 0, 0, 0.88); }

/* ── Botón (Ant Design primary style) ── */
.login-btn {
    display: block;
    width: 100%;
    height: 40px;
    margin-top: 20px;
    padding: 0 15px;
    background: #F77206;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #F77206;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 0;
    line-height: 1.5714;
    transition: color            0.2s cubic-bezier(0.645, 0.045, 0.355, 1),
                background      0.2s cubic-bezier(0.645, 0.045, 0.355, 1),
                border-color    0.2s cubic-bezier(0.645, 0.045, 0.355, 1),
                box-shadow      0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.login-btn:hover {
    background: #f5841f;
    border-color: #f5841f;
    box-shadow: none;
}
.login-btn:active {
    background: #d4620a;
    border-color: #d4620a;
}

/* ── Footer versión ── */
.login-card-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}
.login-version {
    font-size: 10px;
    color: #bfbfbf;
    letter-spacing: 0.3px;
}

/* ───────────────────────────
   RESPONSIVE
─────────────────────────────*/
@media screen and (max-width: 767px) {
    .login-container { flex-direction: column; height: auto; min-height: 100vh; }
    .login-brand     { top: 20px; left: 20px; }
    .login-left      { flex: 0 0 auto; padding: 80px 24px 32px; justify-content: flex-start; }
    .login-right     { padding: 24px 16px 40px; }
    .login-card      { max-width: 100%; }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .login-left  { flex: 0 0 45%; }
    .login-card  { max-width: 340px; }
}