/* Login moderno Mys Inventarios - /usuarios/login.html */
:root {
    --mys-primary: #F0563D;
    --mys-primary-dark: #d83f12;
    --mys-text: #24324b;
    --mys-muted: #667085;
    --mys-border: #dfe5ee;
    --mys-soft: #f7f9fc;
}

html, body.login-body {
    min-height: 100%;
    height: 100%;
    margin: 0;
    background: linear-gradient(135deg, #f4f7fb 0%, #eef2f7 100%) !important;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--mys-text);
}

.login-modern-page {
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    padding: clamp(4px, 1.2vh, 10px);
    display: flex;
    box-sizing: border-box;
}

.login-modern-shell {
    min-height: 0;
    height: 100%;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(20, 35, 60, .12);
    padding: clamp(8px, 1.5vh, 14px) 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.4vh, 18px);
    overflow: hidden;
}

.login-modern-main {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(360px, 42%) minmax(500px, 1fr);
    /*gap: 64px;*/
    align-items: stretch;
    min-height: 0;
}

.login-left-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(6px, 1.2vh, 10px);
    min-height: 0;
    padding: 8px 0 !important;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 28px;
    flex-shrink: 0;
}

.login-brand-icon {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.login-brand-title {
    color: var(--mys-primary);
    font-size: 34px;
    line-height: 1;
    font-weight: 700;
    font-style: italic;
    letter-spacing: .4px;
    font-family: "Segoe Script", "Brush Script MT", cursive;
}

.login-brand-subtitle {
    color: #667085;
    font-size: clamp(12px, 1.7vh, 15px);
    margin-top: 4px;
}

.login-card-modern {
    width: 100%;
    max-width: 590px;
    background: #fff;
    border: 1px solid rgba(222, 230, 240, .85);
    border-radius: 15px;
    padding: clamp(18px, 3.2vh, 44px) clamp(22px, 2.8vw, 40px) clamp(18px, 3vh, 40px);
    box-shadow: 0 24px 55px rgba(26, 38, 66, .10);
    box-sizing: border-box;
}

.login-card-title {
    font-size: clamp(20px, 2.7vh, 24px);
    line-height: 1.15;
    margin: 0 0 clamp(6px, 1vh, 12px);
    color: #25324d;
    font-weight: 800;
}

.login-card-lead {
    color: var(--mys-muted);
    font-size: clamp(13px, 1.8vh, 16px);
    margin: 0 0 clamp(14px, 2.5vh, 34px);
}

.login-modern-form label,
.login-modern-label {
    display: block;
    font-size: clamp(12px, 1.7vh, 15px);
    color: #4c5870;
    font-weight: 700;
    margin: 0 0 clamp(5px, .9vh, 10px);
}

.login-modern-field {
    margin-bottom: clamp(7px, 1.2vh, 10px);
}

.login-input-wrap {
    position: relative;
}

.login-input-icon,
.login-password-eye {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #778196;
    z-index: 2;
    font-size: 19px;
}

.login-input-icon { left: 19px; }
.login-password-eye { right: 18px; }

.login-modern-form .ui-inputfield,
.login-modern-form input[type="text"],
.login-modern-form input[type="password"] {
    width: 100% !important;
    height: clamp(42px, 6.5vh, 64px) !important;
    border: 1px solid var(--mys-border) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    padding: 0 52px !important;
    font-size: clamp(13px, 1.8vh, 16px) !important;
    color: #48556c !important;
}

.login-modern-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 2px 0 clamp(12px, 2.4vh, 30px);
    color: #657085;
    font-size: 14px;
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 9px;
}

.login-remember input {
    width: 18px;
    height: 18px;
    accent-color: var(--mys-primary);
}

.login-forgot,
.login-modern-page a {
    color: #0b5bd3 !important;
    text-decoration: none !important;
}

.login-submit.ui-button,
.login-register-button.ui-button {
    width: 100% !important;
    height: clamp(42px, 5.8vh, 50px) !important;
    border-radius: 8px !important;
    font-size: clamp(13px, 1.8vh, 16px) !important; 
    text-transform: none !important;
    background: linear-gradient(180deg, #ff641c 0%, #f04400 100%) !important;
    border: 0 !important;
    box-shadow: 0 12px 24px rgba(240, 86, 61, .24) !important;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: clamp(14px, 2.8vh, 38px) 0 clamp(12px, 2.2vh, 26px);
    color: #667085;
    font-size: 14px;
    justify-content: center;
}

.login-divider:before,
.login-divider:after {
    content: "";
    height: 1px;
    flex: 1;
    background: #e2e7ef;
}

.login-register-button.ui-button {
    background: #fff !important;
    color: var(--mys-primary) !important;
    border: 1px solid #d8dee8 !important;
    box-shadow: none !important;
    font-size: 17px !important;
}

.login-register-button .ui-icon,
.login-submit .ui-icon { display: none !important; }

.login-hero {
    position: relative;
    overflow: hidden;
    min-height: 0;
    height: 100%;
    border-radius: 10px;
    background:
        radial-gradient(circle at 86% 6%, rgba(255,255,255,.12) 0 2px, transparent 3px) 0 0 / 20px 20px,
        linear-gradient(145deg, rgba(255, 255, 255, .12) 0 22%, transparent 22% 100%),
        linear-gradient(135deg, #ff6a22 0%, var(--mys-primary) 48%, #f13900 100%);
    color: #fff;
    box-shadow: 0 18px 42px rgba(240, 86, 61, .23);
}

.login-hero:before {
    content: "";
    position: absolute;
    left: 57%; top: 22%;
    width: 560px; height: 560px;
    border-radius: 50%;
    background: rgba(255,255,255,.09);
}

.login-hero-content {
    position: relative;
    z-index: 2;
    max-width: 520px;
   /* padding: 126px 0 0 94px;*/
       padding: clamp(18px, 4vh, 42px) 0 0 clamp(24px, 3vw, 35px);
}

.login-hero h1 {
    margin: 0 0 clamp(12px, 2.6vh, 28px);
    font-size: clamp(30px, 5.2vh, 48px);
    line-height: 1.25;
   /* font-weight: 900;*/
    color: #fff;
}

.login-hero-lead {
    font-size: clamp(14px, 2.2vh, 20px);
    line-height: 1.35;
    margin: 0 0 clamp(16px, 3vh, 48px);
    color: #fff;
}

.login-hero-cta.ui-button {
    width: 350px !important;
    height: clamp(44px, 6vh, 58px) !important;
    border-radius: 10px !important;
    background: rgba(167, 45, 0, .45) !important;
    border: 0 !important;
    color: #fff !important;
    font-size: clamp(13px, 1.8vh, 16px) !important;
    font-weight: 800 !important;
    box-shadow: 0 12px 28px rgba(116, 32, 0, .25) !important;
    text-transform: none !important;
}

.login-benefits {
    margin-top: clamp(18px, 4vh, 72px);
    display: grid;
    gap: clamp(14px, 3vh, 42px);
}

.login-benefit {
    display: grid;
    grid-template-columns: clamp(48px, 7vh, 76px) 1fr;
    gap: clamp(12px, 2vw, 24px);
    align-items: center;
}

.login-benefit-icon {
    width: clamp(48px, 7vh, 76px);
    height: clamp(48px, 7vh, 76px);
    border-radius: 50%;
    background: #fff;
    color: var(--mys-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(20px, 3.2vh, 32px);
    box-shadow: 0 13px 24px rgba(104, 23, 0, .2);
}

.login-benefit h3 {
    margin: 0 0 8px;
    font-size: clamp(15px, 2.2vh, 20px);
    color: #fff;
}

.login-benefit p {
    margin: 0;
    font-size: clamp(12px, 1.8vh, 16px);
    line-height: 1.35;
    color: #fff;
}

.login-dashboard-mock {
    position: absolute;
    right: 20px;
    top: clamp(24px, 5vh, 50px);
    width: clamp(270px, 28vw, 700px);
    transform: rotate(2deg);
    background: #f7f9fc;
    border: 18px solid #fff;
    border-radius: 24px;
    box-shadow: 0 22px 40px rgba(81, 22, 0, .25);
    overflow: hidden;
    z-index: 1;
}

.login-window-dots {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 18px;
    background: #f3f5f9;
}

.login-window-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #c8d0dc;
}

.login-dashboard-body { display: flex; min-height: clamp(300px, 48vh, 440px); }
.login-dashboard-sidebar { width: 72px; background: #344154; }
.login-dashboard-sidebar div { height: 48px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); }
.login-dashboard-sidebar div.active { background: var(--mys-primary); color: #fff; }
.login-dashboard-content { flex: 1; padding: 24px; color: #25324d; }
.login-dashboard-content h4 { margin: 0 0 18px; font-size: 15px; }
.login-kpi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.login-kpi { background: #fff; border-radius: 9px; padding: 18px 16px; box-shadow: 0 7px 18px rgba(18, 38, 63, .08); }
.login-kpi small { color: #7b8494; }
.login-kpi strong { display: block; margin-top: 9px; font-size: 24px; }
.login-chart, .login-table-mock { margin-top: 18px; background: #fff; border-radius: 9px; padding: 17px; box-shadow: 0 7px 18px rgba(18, 38, 63, .08); }
.login-chart-line { height: 92px; background: linear-gradient(135deg, transparent 45%, rgba(34,96,205,.18) 46%, transparent 55%), linear-gradient(to bottom, #edf1f7 1px, transparent 1px) 0 0/100% 23px; border-bottom: 2px solid #dfe5ee; position: relative; }
.login-chart-line:after { content: ""; position:absolute; left:10px; right:10px; top:36px; height:3px; background:#2d67d6; border-radius: 50%; transform: skewY(-12deg); }
.login-table-mock span { display:block; height: 10px; margin: 13px 0; background: #e6ebf3; border-radius: 12px; }

.login-legal-footer {
    min-height: clamp(38px, 6vh, 70px);
    flex-shrink: 0;
    border-radius: 10px;
    background: #f7f9fc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667085;
    font-size: clamp(12px, 1.8vh, 16px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    text-align: center;
    padding: 6px 22px;
}

.login-legal-footer i { margin-right: 12px; color: #8b95a7; }
.login-legal-footer a { color: var(--mys-primary) !important; font-weight: 700; }

.login-brand img {
    width: min(300px, 52vw);
    max-height: clamp(44px, 9vh, 96px);
    object-fit: contain;
}

.login-modern-form {
    display: flex;
    flex-direction: column;
}

.login-card-modern .ui-growl,
.login-modern-form .ui-growl {
    font-size: 12px;
}

@media (max-height: 760px) and (min-width: 1201px) {
    .login-modern-main { grid-template-columns: minmax(330px, 40%) minmax(470px, 1fr); }
    .login-card-modern { max-width: 520px; }
    .login-input-icon, .login-password-eye { font-size: 16px; }
    .login-input-icon { left: 15px; }
    .login-password-eye { right: 14px; }
    .login-modern-form .ui-inputfield,
    .login-modern-form input[type="text"],
    .login-modern-form input[type="password"] { padding: 0 44px !important; }
    .login-dashboard-mock { transform: rotate(2deg) scale(.88); transform-origin: top right; }
}

@media (max-height: 680px) and (min-width: 1201px) {
    .login-benefits { grid-template-columns: 1fr; gap: 10px; }
    .login-benefit p br, .login-hero-lead br { display: none; }
    .login-dashboard-mock { display: none; }
    .login-hero-content { max-width: 760px; }
}

@media (max-width: 1200px) {
    .login-modern-main { grid-template-columns: 1fr; }
    .login-left-column { align-items: center; }
    .login-brand { padding-left: 0; align-self: flex-start; }
    .login-hero { display: none; }
}

@media (max-width: 680px) {
    .login-modern-page { padding: 0; height: auto; min-height: 100dvh; }
    .login-modern-shell { min-height: 100dvh; height: auto; border-radius: 0; padding: 16px 14px; overflow: visible; }
    .login-card-modern { padding: 22px 16px; }
    .login-card-title { font-size: 22px; }
    .login-brand img { width: min(240px, 70vw); }
    .login-modern-actions-row { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (max-height: 620px) {
    .login-modern-page { height: auto; min-height: 100dvh; }
    .login-modern-shell { height: auto; min-height: 100dvh; overflow: visible; }
}