/* =========================================================
   CASA HOME — ACCESO Y REGISTRO DE CLIENTE

   Misma forma que tecomser.pe: una sola tarjeta blanca centrada,
   con el logo arriba, etiquetas en caja alta normal y botones a
   todo el ancho.

   Se carga DESPUES de la hoja propia de cada pagina, asi que aqui
   solo hace falta ganar por orden, sin !important salvo donde la
   hoja anterior lo use.
========================================================= */

body.lp-body,
.mcx-pagina,
.lp-right{
    background:#f6f7f9 !important;
    color:#111827;
}

/* El registro centraba tambien desde el body. Con dos capas centrando
   y ambas a 100vh salia barra de desplazamiento de mas; centra solo el
   contenedor. */
body.lp-body{
    display:block;
    min-height:0;
    padding:0;
    align-items:initial;
    justify-content:initial;
}

/* La tarjeta va centrada en la pantalla, no pegada arriba. El minimo
   deja aire cuando el formulario es corto y no estorba cuando crece. */
.mcx-pagina,
.lp-right{
    width:100%;
    min-height:100vh;
    padding:40px 16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

/* El registro dibujaba manchas de color detras de la tarjeta. */
.lp-right::before,
.lp-right::after,
.lp-bg,
.lp-blob{display:none !important}

/* ---------------------------------------------------------
   LA TARJETA
   Antes eran dos columnas con un panel azul a la izquierda.
   Tecomser usa una sola, estrecha y centrada.
--------------------------------------------------------- */
.mcx-login,
.lp-card{
    width:100%;
    max-width:520px;
    margin:0 auto;
    display:block;
    padding:34px 32px 28px;
    border:1px solid #e5e7eb;
    border-radius:16px;
    background:#fff;
    box-shadow:0 1px 2px rgba(16,24,40,.04);
    overflow:visible;
}

/* El panel azul de la izquierda no existe en Tecomser. */
.mcx-left{display:none}

/* El acceso solo tiene dos campos: con 440px va sobrado. El registro
   los reparte en dos columnas y necesita mas sitio. */
.mcx-login{max-width:440px}

.mcx-right{
    width:100%;
    padding:0;
    background:transparent;
}

/* ---------------------------------------------------------
   LOGO Y TITULARES
--------------------------------------------------------- */
.mcx-logo-top{
    margin:0 auto 18px;
    display:block;
    text-align:center;
}

.mcx-logo-top a,
.lp-card-logo a{
    display:inline-block;
    width:auto;
    line-height:0;
}

/* El registro fijaba el logo en 230px de ancho; con solo cambiar el
   alto quedaba estirado. Se manda el ancho tambien. */
.mcx-logo-top img,
.lp-card-logo img{
    height:34px;
    width:auto;
    max-width:70%;
    display:inline-block;
    object-fit:contain;
}

.lp-card-logo{
    margin-bottom:16px;
    text-align:center;
}

.mcx-top,
.lp-form-header{
    margin-bottom:22px;
    text-align:center;
}

.mcx-top h2,
.lp-form-header h1,
.lp-form-header h2{
    color:#111827;
    font-size:22px;
    font-weight:700;
    letter-spacing:-.2px;
    line-height:1.25;
}

.mcx-top p,
.lp-form-header p{
    max-width:340px;
    margin:6px auto 0;
    color:#6b7280;
    font-size:14px;
    line-height:1.5;
}

/* El rotulo en mayusculas sobre el titulo no lo lleva Tecomser. */
.lp-form-eyebrow{display:none}

/* ---------------------------------------------------------
   CAMPOS
   Etiqueta encima en caja normal, ayuda debajo en gris pequeño.
--------------------------------------------------------- */
.mcx-campo,
.lp-field{
    margin-bottom:15px;
    position:relative;
}

.mcx-campo label,
.lp-field label{
    margin-bottom:6px;
    display:block;
    color:#374151;
    font-size:13.5px;
    font-weight:600;
    letter-spacing:0;
    text-transform:none;
}

.mcx-input{
    position:relative;
    display:block;
    padding:0;
    border:0;
    background:transparent;
}

/* Los iconos dentro del campo los quita Tecomser: el campo va limpio. */
.mcx-input > .icon,
.lp-field-ico{display:none}

.mcx-input input,
.lp-field input,
.lp-field select,
.lp-field textarea{
    width:100%;
    height:46px;
    padding:0 14px;
    border:1px solid #d1d5db;
    border-radius:10px;
    background:#fff;
    color:#111827;
    font-family:inherit;
    font-size:14px;
    font-weight:400;
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
}

.lp-field textarea{
    height:auto;
    min-height:92px;
    padding:12px 14px;
    line-height:1.5;
}

.mcx-input input::placeholder,
.lp-field input::placeholder,
.lp-field textarea::placeholder{color:#9ca3af}

.mcx-input input:focus,
.lp-field input:focus,
.lp-field select:focus,
.lp-field textarea:focus{
    border-color:#111827;
    box-shadow:0 0 0 3px rgba(17,24,39,.07);
}

.lp-field-hint{
    margin-top:5px;
    display:block;
    color:#9ca3af;
    font-size:12px;
    line-height:1.45;
}

/* Ver la contraseña: solo el ojo, sin caja. */
.mcx-show{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#6b7280;
    cursor:pointer;
}

.mcx-show:hover{background:#f3f4f6;color:#111827}

/* El prefijo y el campo van en su propia fila, debajo de la etiqueta. */
.lp-phone-row{
    grid-row:2;
    grid-column:1;
    display:flex;
    align-items:stretch;
}

/* El registro reservaba 72px a la izquierda porque el prefijo iba
   superpuesto dentro del campo. Ahora el prefijo es un desplegable
   aparte, asi que ese hueco solo aplastaba el numero. */
.lp-phone-row input{
    flex:1 1 auto;
    width:auto !important;
    min-width:0;
    padding:0 14px !important;
    border-radius:0 10px 10px 0 !important;
}

/* La contraseña: el ojo dentro del campo, sin tapar la etiqueta. */
.lp-pass-wrap{
    grid-row:2;
    grid-column:1;
    position:relative;
    display:block;
}

.lp-pass-wrap input{width:100%;padding-right:44px}

.lp-pass-toggle{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#6b7280;
    cursor:pointer;
}

.lp-pass-toggle:hover{background:#f3f4f6;color:#111827}
.lp-pass-toggle svg{width:17px;height:17px}

/* La barra de fuerza, debajo del campo. */
.lp-pass-strength{
    grid-row:3;
    grid-column:1;
    margin-top:7px;
    display:flex;
    gap:5px;
}

.lp-strength-bar{
    flex:1;
    height:4px;
    border-radius:999px;
    background:#e5e7eb;
}

.lp-pass-wrap ~ .lp-field-hint{grid-row:4}

/* ---------------------------------------------------------
   ENLACES Y BOTONES
--------------------------------------------------------- */
.mcx-bottom{
    margin:-4px 0 18px;
    display:flex;
    justify-content:flex-end;
}

.mcx-link{
    color:#2563eb;
    font-size:13px;
    font-weight:500;
    text-decoration:none;
}

.mcx-link:hover{text-decoration:underline}

.mcx-btn,
.lp-btn{
    width:100%;
    height:48px;
    min-height:48px;
    margin:0;
    padding:0 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:0;
    border-radius:10px;
    background:#1f2937;
    color:#fff;
    font-family:inherit;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:background .15s ease;
}

.mcx-btn:hover,
.lp-btn:hover{background:#111827}

/* El secundario: blanco con borde, del mismo tamaño. */
.mcx-btn-secundario,
.lp-btn-secundario{
    background:#fff;
    border:1px solid #d1d5db;
    color:#111827;
    text-decoration:none;
}

.mcx-btn-secundario:hover,
.lp-btn-secundario:hover{background:#f9fafb;border-color:#9ca3af}

/* La raya con la "o" en medio. */
.mcx-separador{
    margin:18px 0;
    display:flex;
    align-items:center;
    gap:12px;
    color:#9ca3af;
    font-size:13px;
}

.mcx-separador::before,
.mcx-separador::after{
    content:"";
    flex:1;
    height:1px;
    background:#e5e7eb;
}

/* ---------------------------------------------------------
   PIE DE LA TARJETA
--------------------------------------------------------- */
.mcx-foot,
.lp-footer,
.lp-login-cta{
    margin-top:16px;
    padding-top:0;
    border-top:0;
    color:#9ca3af;
    font-size:12.5px;
    text-align:center;
}

.mcx-foot a,
.lp-footer a,
.lp-login-cta a{
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:#374151;
    font-weight:600;
    text-decoration:underline;
}

.mcx-link-registro{
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    color:#374151 !important;
    font-weight:600;
    text-decoration:underline;
}

/* ---------------------------------------------------------
   AVISOS
--------------------------------------------------------- */
.mcx-error,
.lp-alert{
    margin-bottom:16px;
    padding:11px 14px;
    border:1px solid #fecaca;
    border-radius:10px;
    background:#fef2f2;
    color:#b91c1c;
    font-size:13.5px;
    text-align:left;
}

/* ---------------------------------------------------------
   MOVIL
--------------------------------------------------------- */
@media(max-width:520px){
    .mcx-pagina,
    .lp-right{
        min-height:0;
        padding:26px 12px 44px;
        justify-content:flex-start;
    }

    .mcx-login,
    .lp-card{
        max-width:none;
        padding:24px 18px 22px;
        border-radius:14px;
    }
}

/* ---------------------------------------------------------
   REGISTRO: DE ETIQUETA FLOTANTE A ETIQUETA ENCIMA

   El registro monta cada campo con la etiqueta dentro, flotando al
   escribir. El acceso la lleva encima. Se reordena con una rejilla,
   sin tocar el marcado.
--------------------------------------------------------- */
.lp-field{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr);
}

.lp-field > label{
    grid-row:1;
    position:static;
    transform:none;
    width:auto;
    margin-bottom:6px;
    padding:0;
    background:transparent;
    color:#374151;
    font-size:13.5px;
    font-weight:600;
    letter-spacing:0;
    text-transform:none;
    pointer-events:auto;
}

.lp-field > input,
.lp-field > select,
.lp-field > textarea{
    grid-row:2;
    grid-column:1;
}

.lp-field-hint{grid-row:3}

/* El boton de consultar el DNI comparte celda con el campo y se pega
   a su derecha: asi no depende de medidas calculadas a mano. */
.lp-dni-consultar{
    grid-row:2;
    grid-column:1;
    z-index:2;
    justify-self:end;
    align-self:center;
    height:34px;
    margin-right:6px;
    padding:0 14px;
    border:0;
    border-radius:8px;
    background:#1f2937;
    color:#fff;
    font-family:inherit;
    font-size:12.5px;
    font-weight:600;
    cursor:pointer;
}

.lp-dni-consultar:hover{background:#111827}

.lp-dni-field > input{padding-right:112px}

/* Los pasos 1 y 2, en la misma linea gris del resto. */
.lp-stepper{
    margin-bottom:20px;
    display:flex;
    gap:8px;
}

.lp-step-indicator{
    flex:1;
    height:42px;
    padding:0 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid #e5e7eb;
    border-radius:10px;
    background:#fff;
    color:#6b7280;
    font-size:13px;
    font-weight:600;
}

.lp-step-indicator.active{
    border-color:#111827;
    background:#f9fafb;
    color:#111827;
}

/* Titulo de cada bloque de campos. */
.lp-seccion{
    margin:20px 0 12px;
    padding-top:16px;
    display:flex;
    align-items:center;
    gap:8px;
    border-top:1px solid #f1f3f5;
    color:#111827;
    font-size:13.5px;
    font-weight:600;
    letter-spacing:0;
    text-transform:none;
}

.lp-seccion svg{width:16px;height:16px;color:#6b7280}
.lp-seccion:first-of-type{margin-top:0;padding-top:0;border-top:0}

/* Dos campos por fila cuando hay sitio. */
.lp-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 14px;
}

@media(max-width:520px){
    .lp-grid{grid-template-columns:minmax(0,1fr)}
}

/* Enlaces del pie de la tarjeta. */
.lp-ley{
    margin-top:14px;
    color:#9ca3af;
    font-size:12px;
    line-height:1.6;
    text-align:center;
}

.lp-ley a{color:#6b7280;text-decoration:underline}

/* El registro pinta una capa ::before que al pasar por encima tiñe el
   boton de #786d55 y lo levanta. El acceso solo oscurece. */
.lp-btn::before{display:none !important}

.lp-btn:hover{
    transform:none !important;
    box-shadow:none !important;
    background:#111827 !important;
}

.lp-btn:disabled{opacity:.5;cursor:not-allowed}

/* El campo del registro traia su propio alto y radio. */
.lp-field > input,
.lp-field > select{
    height:46px !important;
    border-radius:10px !important;
}

/* ---------------------------------------------------------
   CONSENTIMIENTOS

   Son obligatorios, asi que tienen que leerse y verse marcados sin
   esfuerzo. Casilla cuadrada, texto a tamaño normal y el enlace de
   leer como enlace, no como pastilla.
--------------------------------------------------------- */
.lp-terminos{
    margin:20px 0;
    padding-top:16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    border-top:1px solid #f1f3f5;
}

.lp-termino-btn{
    width:100%;
    padding:13px 14px !important;
    display:flex;
    align-items:flex-start;
    gap:11px;
    border:1px solid #d1d5db !important;
    border-radius:10px !important;
    background:#fff !important;
    color:#374151 !important;
    font-family:inherit;
    font-size:13.5px;
    font-weight:400;
    line-height:1.45;
    text-align:left;
    cursor:pointer;
}

.lp-termino-btn:hover{border-color:#9ca3af !important;background:#f9fafb !important}

/* Cuadrada, no redonda: se distingue de un boton de opcion. */
.lp-termino-btn .lp-term-ico{
    flex:0 0 20px;
    width:20px !important;
    height:20px !important;
    margin-top:1px;
    border:1.5px solid #9ca3af !important;
    border-radius:6px !important;
    background:#fff;
    display:grid;
    place-items:center;
}

.lp-termino-btn .lp-term-ico svg{width:12px;height:12px;color:transparent}

.lp-termino-btn.ok{
    border-color:#111827 !important;
    background:#f9fafb !important;
    color:#111827 !important;
}

.lp-termino-btn.ok .lp-term-ico{
    border-color:#111827 !important;
    background:#111827;
}

.lp-termino-btn.ok .lp-term-ico svg{color:#fff}

/* Sin marcar y con el formulario enviado: rojo, para que se note. */
.lp-termino-btn.invalid{
    border-color:#ef4444 !important;
    background:#fef2f2 !important;
    color:#b91c1c !important;
}

.lp-termino-btn.invalid .lp-term-ico{border-color:#ef4444 !important}

.lp-term-link{
    margin-left:auto;
    flex-shrink:0;
    padding:0 !important;
    background:transparent !important;
    color:#2563eb !important;
    font-size:12.5px !important;
    font-weight:600 !important;
    text-decoration:underline;
    white-space:nowrap;
}

.lp-term-link:hover{background:transparent !important;color:#1d4ed8 !important}

/* ---------------------------------------------------------
   BUSCADOR DE PAIS

   Con doscientos paises el desplegable nativo no se maneja, asi que
   se sustituye por un boton con panel y buscador.
--------------------------------------------------------- */
.lp-pais{position:relative;flex:0 0 auto}

.lp-pais-boton{
    height:46px;
    min-width:86px;
    padding:0 10px 0 12px;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:7px;
    border:1px solid #d1d5db;
    border-right:0;
    border-radius:10px 0 0 10px;
    background:#f9fafb;
    color:#374151;
    font-family:inherit;
    font-size:13.5px;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
}

.lp-pais-boton:hover{background:#f3f4f6}
.lp-pais-boton i{color:#6b7280;font-size:11px}

.lp-pais-panel{
    position:absolute;
    z-index:40;
    top:calc(100% + 6px);
    left:0;
    width:290px;
    max-width:min(290px,86vw);
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
    box-shadow:0 12px 32px rgba(16,24,40,.14);
    overflow:hidden;
}

.lp-pais-buscar{
    position:relative;
    padding:10px;
    border-bottom:1px solid #f1f3f5;
}

.lp-pais-buscar i{
    position:absolute;
    left:22px;
    top:50%;
    transform:translateY(-50%);
    color:#9ca3af;
    font-size:12px;
    pointer-events:none;
}

.lp-pais-buscar input{
    width:100%;
    height:38px !important;
    padding:0 12px 0 32px !important;
    border:1px solid #d1d5db !important;
    border-radius:9px !important;
    background:#fff !important;
    color:#111827;
    font-family:inherit;
    font-size:13.5px;
    outline:none;
}

.lp-pais-buscar input:focus{border-color:#111827 !important}

.lp-pais-lista{
    margin:0;
    padding:6px;
    max-height:248px;
    list-style:none;
    overflow-y:auto;
}

.lp-pais-op{
    padding:8px 10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border-radius:8px;
    color:#374151;
    font-size:13.5px;
    cursor:pointer;
}

.lp-pais-op:hover{background:#f3f4f6}

.lp-pais-op.elegido{
    background:#111827;
    color:#fff;
}

.lp-pais-nombre{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.lp-pais-codigo{
    flex:0 0 auto;
    color:#9ca3af;
    font-size:12.5px;
    font-weight:600;
}

.lp-pais-op.elegido .lp-pais-codigo{color:rgba(255,255,255,.75)}

.lp-pais-vacio{
    padding:16px 12px;
    color:#9ca3af;
    font-size:13px;
    text-align:center;
}

@media(max-width:520px){
    .lp-pais-panel{width:min(290px,80vw)}
}

/* ---------------------------------------------------------
   PERUANO O EXTRANJERO
--------------------------------------------------------- */

/* Un elemento con display:grid o flex ignora el atributo hidden: la
   regla del navegador ([hidden]{display:none}) es mas debil y pierde.
   Por eso se veian a la vez el DNI y los campos de extranjero. */
[hidden]{display:none !important}
.lp-doctipo{
    margin-bottom:16px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.lp-doctipo-op{
    min-height:64px;
    padding:12px 10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid #d1d5db;
    border-radius:10px;
    background:#fff;
    color:#374151;
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    text-align:center;
    cursor:pointer;
    transition:.15s ease;
}

.lp-doctipo-op i{color:#9ca3af;font-size:16px}
.lp-doctipo-op:hover{border-color:#9ca3af;background:#f9fafb}

.lp-doctipo-op.activo{
    border-color:#111827;
    background:#f9fafb;
    color:#111827;
}

.lp-doctipo-op.activo i{color:#111827}

/* El desplegable del tipo de documento, con la misma cara que los
   campos de al lado. */
.lp-field select{
    width:100%;
    height:46px;
    padding:0 34px 0 14px;
    border:1px solid #d1d5db;
    border-radius:10px;
    background:#fff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
        no-repeat right 12px center;
    color:#111827;
    font-family:inherit;
    font-size:14px;
    outline:none;
    -webkit-appearance:none;
    appearance:none;
    cursor:pointer;
}

.lp-field select:focus{border-color:#111827}

@media(max-width:520px){
    .lp-doctipo{grid-template-columns:minmax(0,1fr)}
    .lp-doctipo-op{flex-direction:row;min-height:48px}
}