/* =========================================================
   ACCESO DE CLIENTES

   Es login.css con las clases renombradas de cg- a mcx-. Aquellas
   chocaban de frente con las del sitio: .cg-left, .cg-right, .cg-top,
   .cg-btn y .cg-form ya existian en el slider, en la barra superior y
   en media docena de hojas mas, asi que la pagina salia descuadrada,
   con el texto partido palabra por palabra.

   Se anade ademas el envoltorio que centra la tarjeta: la hoja
   original daba por hecho que era una pagina suelta, sin la cabecera
   ni el pie del sitio.
========================================================= */

.mcx-pagina{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:70vh;
    padding:48px 20px 64px;
    background:#f4f6fb;
}

@media(max-width:768px){
    .mcx-pagina{ padding:26px 12px 36px; min-height:0; }
}

/* =========================================================
RESET
========================================================= */

*{

margin:0;
padding:0;

box-sizing:border-box;

font-family:
'Segoe UI',
sans-serif;

}

/* =========================================================
HTML
========================================================= */
/* =========================================================
BODY
========================================================= */
/* =========================================================
BACKGROUND
========================================================= */
/* =========================================================
LOGIN
========================================================= */

.mcx-login{

position:relative;

width:100%;
max-width:1080px;

background:#ffffff;

border-radius:40px;

overflow:hidden;

display:grid;

grid-template-columns:
430px 1fr;

box-shadow:
0 30px 80px rgba(0,0,0,.35);

z-index:2;

}

/* =========================================================
LEFT
========================================================= */

.mcx-left{

background:#1a2b61;

padding:60px 42px;

position:relative;

display:flex;
flex-direction:column;
justify-content:center;

overflow:hidden;

}

/* =========================================================
CIRCLE
========================================================= */

.mcx-left::before{

content:'';

position:absolute;

width:420px;
height:420px;

border-radius:50%;

background:
rgba(255,255,255,.05);

top:-140px;
right:-140px;

}

/* =========================================================
LOGO
========================================================= */

.mcx-logo{

display:flex;
align-items:center;
justify-content:flex-start;

margin-bottom:28px;

position:relative;

z-index:2;

background:transparent;

}

/* =========================================================
IMG LOGO
========================================================= */

.mcx-logo img{

width:230px;

height:auto;

display:block;

object-fit:contain;

}

/* =========================================================
TEXT LEFT
========================================================= */

.mcx-left p{

font-size:15px;

line-height:1.9;

color:
rgba(255,255,255,.88);

max-width:330px;

position:relative;

z-index:2;

}

/* =========================================================
RIGHT
========================================================= */

.mcx-right{

padding:60px;

display:flex;
flex-direction:column;
justify-content:center;

overflow-y:auto;

}

/* =========================================================
TOP
========================================================= */

.mcx-top{

margin-bottom:18px;

}

/* =========================================================
TITLE
========================================================= */

.mcx-top h2{

font-size:48px;

font-weight:900;

letter-spacing:-1px;

color:#0f172a;

margin-bottom:12px;

line-height:1;

}

/* =========================================================
TEXT
========================================================= */

.mcx-top p{

font-size:15px;

line-height:1.8;

color:#64748b;

max-width:420px;

}

/* =========================================================
ERROR
========================================================= */

.mcx-error{

background:#fef2f2;

border:1px solid #fecaca;

padding:15px 18px;

border-radius:18px;

font-size:13px;

font-weight:700;

color:#b91c1c;

display:flex;
align-items:center;

gap:10px;

margin-bottom:22px;

}

/* =========================================================
FORM
========================================================= */

.mcx-form{

display:flex;
flex-direction:column;

gap:20px;

}

/* =========================================================
CAMPO
========================================================= */

.mcx-campo{

display:flex;
flex-direction:column;

gap:9px;

}

/* =========================================================
LABEL
========================================================= */

.mcx-campo label{

font-size:11px;

font-weight:800;

letter-spacing:.5px;

text-transform:uppercase;

color:#475569;

}

/* =========================================================
INPUT
========================================================= */

.mcx-input{

position:relative;

}

/* =========================================================
ICON
========================================================= */

.mcx-input .icon{

position:absolute;

left:18px;
top:50%;

transform:translateY(-50%);

font-size:15px;

color:#64748b;

}

/* =========================================================
INPUT
========================================================= */

.mcx-input input{

width:100%;

height:64px;

padding:
0 56px
0 52px;

border-radius:22px;

border:1px solid #dbe2ea;

background:#fff;

font-size:15px;

font-weight:700;

outline:none;

transition:.2s;

color:#0f172a;

}

.mcx-input input::placeholder{

color:#94a3b8;

font-weight:600;

}

.mcx-input input:focus{

border-color:#1a2b61;

box-shadow:
0 0 0 5px rgba(26, 43, 97,.08);

}

/* =========================================================
SHOW PASSWORD
========================================================= */

.mcx-show{

position:absolute;

right:20px;
top:50%;

transform:translateY(-50%);

cursor:pointer;

font-size:15px;

color:#64748b;

user-select:none;

}

/* =========================================================
BOTTOM
========================================================= */

.mcx-bottom{

display:flex;
justify-content:space-between;
align-items:center;

gap:12px;

margin-top:-4px;

flex-wrap:wrap;

}

/* =========================================================
LINK
========================================================= */

.mcx-link{

font-size:13px;

font-weight:700;

text-decoration:none;

color:#1a2b61;

transition:.2s;

}

.mcx-link:hover{

opacity:.8;

}

/* =========================================================
BOTON REGISTRO
========================================================= */

.mcx-link-registro{

background:#1a2b61;

color:#fff !important;

padding:10px 14px;

border-radius:12px;

display:inline-flex;
align-items:center;
justify-content:center;

font-size:12px;

font-weight:700;

}

.mcx-link-registro:hover{

background:#142353;

transform:translateY(-1px);

}

/* =========================================================
BUTTON
========================================================= */

.mcx-btn{

width:100%;

height:64px;

border:none;

border-radius:22px;

background:#1a2b61;

color:#fff;

font-size:15px;

font-weight:800;

display:flex;
align-items:center;
justify-content:center;

gap:10px;

cursor:pointer;

transition:.2s;

margin-top:4px;

}

.mcx-btn:hover{

background:#142353;

transform:translateY(-2px);

}

/* =========================================================
FOOT
========================================================= */

.mcx-foot{

margin-top:26px;

padding-top:24px;

border-top:1px solid #e5e7eb;

font-size:12px;

line-height:1.8;

color:#64748b;

}

/* =========================================================
MOBILE
========================================================= */

@media(max-width:900px){
/* LOGIN */

.mcx-login{

width:calc(100% - 10px);

max-width:430px;

margin:auto;

border-radius:24px;

display:flex;
flex-direction:column;

overflow:hidden;

transform:translateY(-18px);

}

/* LEFT */

.mcx-left{

padding:18px 16px 14px;

align-items:center;

text-align:center;

}

/* CIRCULO */

.mcx-left::before{

width:240px;
height:240px;

top:-100px;
right:-100px;

}

/* LOGO */

.mcx-logo{

justify-content:center;

margin-bottom:10px;

width:100%;

}

.mcx-logo img{

width:220px;

max-width:100%;

}

/* TEXT */

.mcx-left p{

font-size:11px;

line-height:1.6;

max-width:100%;

text-align:center;

}

/* RIGHT */

.mcx-right{

padding:18px 16px 14px;

}

/* TOP */

.mcx-top{

margin-bottom:14px;

}

/* TITLE */

.mcx-top h2{

font-size:28px;

margin-bottom:8px;

}

/* TEXT */

.mcx-top p{

font-size:11px;

line-height:1.5;

}

/* FORM */

.mcx-form{

gap:13px;

}

/* LABEL */

.mcx-campo label{

font-size:9px;

}

/* INPUT */

.mcx-input input{

height:46px;

border-radius:14px;

font-size:12px;

padding:
0 42px
0 42px;

}

/* ICON */

.mcx-input .icon{

left:14px;

font-size:13px;

}

/* OJO */

.mcx-show{

right:14px;

font-size:13px;

}

/* LINKS */

.mcx-bottom{

gap:10px;

}

.mcx-link{

font-size:11px;

}

.mcx-link-registro{

font-size:11px;

padding:8px 12px;

}

/* BUTTON */

.mcx-btn{

height:48px;

border-radius:15px;

font-size:13px;

}

/* ERROR */

.mcx-error{

padding:10px 12px;

font-size:11px;

border-radius:12px;

margin-bottom:14px;

}

/* FOOT */

.mcx-foot{

margin-top:14px;

padding-top:12px;

font-size:10px;

line-height:1.4;

text-align:center;

}

}