@import url('https://rsms.me/inter/inter-ui.css');
::selection{background:#00DC2A;color:#fff}
body{
  background-color:rgba(0,0,0,.6);
  background-size:cover;
  background-image:url("https://mediosconvalor.github.io/mcv/img/background/clientes.jpg");
  background-repeat:no-repeat;
  font-family:'Inter UI',sans-serif;
  margin:0;padding:0;
  min-height: 100vh;
}
body:before{content:'';position:fixed;top:0;bottom:0;left:0;right:0;background-color:rgba(31, 35, 43, 0.85); backdrop-filter: blur(4px);}

.page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  box-sizing: border-box;
  position: relative;
  width: 100%;
}

/* Card Principal */
.login-card {
    display: flex;
    width: 100%;
    max-width: 860px;
    height: 480px; /* Fixed height for desktop */
    background: #FFFFFF; /* White background */
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    overflow: hidden;
    position: relative;
    z-index: 10;
}

/* Columna Izquierda (Logo) */
.card-left {
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F9FAFB; /* Very light gray */
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    border-right: 1px solid #E5E7EB;
}
.card-left::after { display: none; }

.logo-mcv {
    max-width: 80%;
    height: auto;
}

/* Columna Derecha (Formulario) */
.card-right {
    width: 55%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #FFFFFF;
    color: #1F2937; /* Dark text */
    box-sizing: border-box;
    position: relative;
}

.form-container {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
}

/* Inputs */
.input-group {
    margin-bottom: 15px;
}
.input-group label {
    display: block;
    color: #4B5563; /* Darker label */
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.input-icon {
    position: absolute;
    left: 14px;
    width: 20px;
    height: 20px;
    color: #9CA3AF;
}
.input-wrapper input {
    width: 100%;
    background: #F3F4F6; /* Light input bg */
    border: 1px solid #E5E7EB; /* Light border */
    border-radius: 8px;
    padding: 12px 12px 12px 44px;
    color: #1F2937; /* Dark text */
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
    box-sizing: border-box;
}
#password{padding-right:44px}
.password-toggle{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border-radius:8px;
    border:0;
    background:transparent;
    color:#6B7280;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.password-toggle:hover{background:rgba(0,0,0,0.05)}
.password-toggle:active{transform:translateY(-50%) scale(0.98)}
.password-toggle svg{width:18px;height:18px}
.password-toggle .icon-eye-off{display:none}
.password-toggle.is-on .icon-eye{display:none}
.password-toggle.is-on .icon-eye-off{display:block}
.input-wrapper input:focus {
    background: #FFFFFF;
    border-color: #00DC2A;
    box-shadow: 0 0 0 2px rgba(0, 220, 42, 0.2);
}
.input-wrapper input::placeholder {
    color: #9CA3AF;
}

/* Botones */
#submit {
    width: 100%;
    padding: 14px;
    background-color: #00DC2A;
    color: #FFFFFF;
    border: none;
    border-radius: 50px; /* Pill shape */
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s, transform 0.1s;
    margin-top: 5px;
}
#submit:hover {
    background-color: #00b322;
}
#submit:active {
    transform: scale(0.98);
}

.separator {
    text-align: center;
    margin: 14px 0;
    color: #9CA3AF;
    font-size: 12px;
}

.btn-mcv-login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    background-color: transparent;
    color: #374151; /* Darker text */
    border: 1px solid #D1D5DB;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    box-sizing: border-box;
    transition: all 0.2s;
}
.btn-mcv-login:hover {
    background-color: #F9FAFB;
    border-color: #9CA3AF;
}
.btn-mcv-login img {
    height: 16px;
    margin-right: 8px;
    filter: none; /* Original colors */
}

/* Links & Footer */
.forgot-password {
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
}
.forgot-password a {
    color: #6B7280;
    text-decoration: none;
    transition: color 0.2s;
}
.forgot-password a:hover {
    color: #00DC2A;
}

.card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid #E5E7EB;
    padding: 15px 40px;
    font-size: 11px;
    color: #6B7280;
    box-sizing: border-box;
}
.footer-item {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}
.footer-item svg {
    margin-right: 6px;
    color: #9CA3AF;
}

/* Mensajes de error/éxito */
.messages {
    min-height: 0;
    margin-bottom: 5px;
}
.success-message, .error-message {
    font-size: 13px;
    text-align: center;
}
.success-message { color: #00DC2A; }
.error-message { color: #ef4444; }

/* Responsive Mobile */
@media (max-width: 768px) {
    .page {
        align-items: center; /* Center vertically on mobile too, or flex-start if content is tall */
    }
    .login-card {
        flex-direction: column;
        height: auto; /* Fluid height */
        max-width: 400px;
    }
    .card-left {
        width: 100%;
        padding: 30px 20px 10px;
        background: #FFFFFF;
        justify-content: center;
        height: auto;
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid #F3F4F6;
    }
    .card-left::after { display: none; }
    .logo-mcv {
        max-width: 180px;
    }
    .card-right {
        width: 100%;
        padding: 20px 30px 40px;
    }
    .form-container {
        max-width: 100%;
    }
}

/* Modals */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:50}
.modal-content{background:#2A2F38;color:#fff;border-radius:12px;max-width:520px;width:90%;padding:24px;border:1px solid #4B5563; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);}
.modal-title{font-weight:700;margin-bottom:12px; font-size: 18px;}
.modal-body{margin-bottom:20px;line-height:1.5; color: #D1D5DB;}
.btn{background: #00DC2A; border:none; color:white; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600;}
.btn:hover{background: #00b322;}