/* ==========================================================================
   LOGIN COLOMBIAMAR — pantalla de acceso al portal del expositor
   --------------------------------------------------------------------------
   Autocontenido: no depende de Bootstrap ni de la plantilla "loginstyles",
   que traía un style.css de 1.400 líneas para pintar dos campos. Reusa los
   mismos tokens que el portal (css/portal-colombiamar.css) para que el salto
   del login al panel no se note: paleta naval, Montserrat en los títulos,
   Lato en el texto y la misma geometría de bordes y sombras.
   ========================================================================== */

:root {
    --pc-navy-900: #081c38;
    --pc-navy-800: #0d2c52;
    --pc-navy-700: #123a68;
    --pc-navy-600: #174c87;
    --pc-azul: #1b62ad;
    --pc-cian: #06c1f3;
    --pc-cian-oscuro: #0aa5d0;

    --pc-tinta: #10233d;
    --pc-tinta-suave: #4a5b70;
    --pc-apagado: #8a97a8;

    --pc-fondo: #f4f7fb;
    --pc-superficie: #ffffff;
    --pc-tinte: #eef2f7;
    --pc-borde: #d7dfea;
    --pc-borde-suave: #e7edf5;

    --pc-ok: #1a9d6b;
    --pc-ok-tinte: #e8f7f0;
    --pc-error: #d0342c;
    --pc-error-tinte: #fdeceb;

    --pc-radio: 10px;
    --pc-radio-sm: 8px;
    --pc-sombra: 0 1px 2px rgba(16, 35, 61, .04), 0 8px 24px rgba(16, 35, 61, .06);

    --pc-titulo: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --pc-texto: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: var(--pc-texto);
    font-size: 15px;
    line-height: 1.55;
    color: var(--pc-tinta);
    background: var(--pc-fondo);
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   1. ESTRUCTURA — formulario a la izquierda, fotografía a la derecha
   ========================================================================== */

.lg-pagina {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
}

/* Columna + `safe center`: el contenido queda centrado cuando cabe, pero si la
   pantalla es más baja que la tarjeta se ancla arriba en vez de recortar el
   logo por arriba y el pie por abajo. */
.lg-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 36px 24px 44px;
    background: var(--pc-superficie);
}

.lg-caja {
    width: 100%;
    max-width: 430px;
}

/* La foto es decorativa: en pantallas anchas ocupa la mitad derecha; en móvil
   se reduce a una banda para no empujar el formulario fuera de la vista. */
.lg-foto {
    position: relative;
    grid-row: 1;
    min-height: 190px;
    background-color: var(--pc-navy-800);
    background-position: center center;
    background-size: cover;
    overflow: hidden;
}

/* Velo naval: sube el contraste del texto y amarra la foto a la paleta. */
.lg-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 28, 56, .30) 0%, rgba(8, 28, 56, .82) 100%);
}

.lg-foto-texto {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px 28px 32px;
    color: #fff;
}

.lg-foto-titulo {
    font-family: var(--pc-titulo);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 8px;
}

.lg-foto-sub {
    margin: 0;
    max-width: 46ch;
    color: #cfe1f4;
    font-size: 15px;
}

.lg-foto-datos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.lg-dato {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    color: #eaf3fb;
    font-size: 13px;
    letter-spacing: .01em;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.lg-dato svg { flex: none; opacity: .85; }

/* En pantallas estrechas la foto es solo una cabecera de identidad: si además
   lleva bajada y datos, empuja el formulario fuera de la primera pantalla. */
@media (max-width: 991px) {
    .lg-foto { min-height: 150px; }
    .lg-foto-texto { padding: 20px 24px 22px; }
    .lg-foto-titulo { font-size: 21px; margin: 0; }
    .lg-foto-sub,
    .lg-foto-datos { display: none; }
}

@media (min-width: 992px) {
    .lg-pagina {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        height: 100vh;
    }

    .lg-panel {
        justify-content: center;
        justify-content: safe center;
        overflow-y: auto;
        padding: 34px 52px;
    }

    .lg-foto {
        grid-column: 2;
        min-height: 0;
    }

    .lg-foto-texto { padding: 48px 44px 44px; }
    .lg-foto-titulo { font-size: 32px; }
}

@media (min-width: 1400px) {
    .lg-pagina { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); }
}

/* ==========================================================================
   2. BIENVENIDA
   ========================================================================== */

.lg-marca {
    display: inline-block;
    margin-bottom: 22px;
}

.lg-marca img {
    display: block;
    height: 40px;
    width: auto;
}

.lg-kicker {
    margin: 0 0 6px;
    font-family: var(--pc-titulo);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pc-cian-oscuro);
}

.lg-titulo {
    margin: 0 0 10px;
    font-family: var(--pc-titulo);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--pc-navy-900);
}

.lg-lead {
    margin: 0;
    color: var(--pc-tinta-suave);
}

.lg-lista {
    list-style: none;
    margin: 16px 0 0;
    padding: 13px 16px;
    border: 1px solid var(--pc-borde-suave);
    border-radius: var(--pc-radio);
    background: var(--pc-tinte);
}

.lg-lista li {
    position: relative;
    padding-left: 26px;
    font-size: 14px;
    color: var(--pc-tinta-suave);
}

.lg-lista li + li { margin-top: 7px; }

/* Palomita dibujada con dos bordes: nada de iconos por fuente para cuatro
   viñetas. */
.lg-lista li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 6px;
    width: 11px;
    height: 6px;
    border-left: 2px solid var(--pc-cian-oscuro);
    border-bottom: 2px solid var(--pc-cian-oscuro);
    transform: rotate(-45deg);
}

.lg-separador {
    height: 1px;
    margin: 18px 0 16px;
    border: 0;
    background: var(--pc-borde-suave);
}

/* ==========================================================================
   3. FORMULARIO
   ========================================================================== */

.lg-form-titulo {
    margin: 0 0 16px;
    font-family: var(--pc-titulo);
    font-size: 18px;
    font-weight: 700;
    color: var(--pc-navy-900);
}

.lg-campo { margin-bottom: 14px; }

.lg-etiqueta {
    display: block;
    margin-bottom: 6px;
    font-family: var(--pc-titulo);
    font-size: 13px;
    font-weight: 600;
    color: var(--pc-navy-800);
}

.lg-control { position: relative; }

.lg-control-icono {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pc-apagado);
    pointer-events: none;
    line-height: 0;
}

.lg-input {
    width: 100%;
    height: 48px;
    padding: 0 14px 0 42px;
    border: 1px solid var(--pc-borde);
    border-radius: var(--pc-radio);
    background: var(--pc-superficie);
    font-family: var(--pc-texto);
    font-size: 15px;
    color: var(--pc-tinta);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.lg-input::placeholder { color: var(--pc-apagado); }

.lg-input:focus {
    outline: none;
    border-color: var(--pc-cian-oscuro);
    box-shadow: 0 0 0 3px rgba(6, 193, 243, .18);
}

.lg-control:focus-within .lg-control-icono { color: var(--pc-cian-oscuro); }

/* Chrome pinta el autocompletado de amarillo y se lleva por delante el borde
   y la tipografía del campo. La sombra interior lo tapa sin tocar el valor. */
.lg-input:-webkit-autofill,
.lg-input:-webkit-autofill:hover,
.lg-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--pc-tinta);
    -webkit-box-shadow: 0 0 0 40px var(--pc-superficie) inset;
    caret-color: var(--pc-tinta);
    font-family: var(--pc-texto);
}

.lg-input.is-invalid {
    border-color: var(--pc-error);
    background: #fffafa;
}

.lg-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(208, 52, 44, .15);
}

/* Deja sitio al botón del ojo. */
.lg-input--clave { padding-right: 46px; }

.lg-ver-clave {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--pc-radio-sm);
    background: transparent;
    color: var(--pc-apagado);
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

.lg-ver-clave:hover { color: var(--pc-navy-700); background: var(--pc-tinte); }

.lg-ver-clave:focus-visible {
    outline: 2px solid var(--pc-cian-oscuro);
    outline-offset: 2px;
}

.lg-ayuda-error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--pc-error);
}

/* --- Fila de "recordarme" y "olvidé la contraseña" --- */

.lg-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 4px 0 22px;
}

.lg-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--pc-tinta-suave);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.lg-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.lg-check-caja {
    position: relative;
    flex: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--pc-borde);
    border-radius: 5px;
    background: var(--pc-superficie);
    transition: border-color .15s ease, background .15s ease;
}

.lg-check-caja::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(.6);
    opacity: 0;
    transition: opacity .12s ease, transform .12s ease;
}

.lg-check input:checked + .lg-check-caja {
    border-color: var(--pc-azul);
    background: var(--pc-azul);
}

.lg-check input:checked + .lg-check-caja::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.lg-check input:focus-visible + .lg-check-caja {
    box-shadow: 0 0 0 3px rgba(6, 193, 243, .25);
}

.lg-enlace {
    color: var(--pc-azul);
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.lg-enlace:hover {
    color: var(--pc-navy-700);
    border-bottom-color: currentColor;
}

/* --- Botón --- */

.lg-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: var(--pc-radio);
    background: linear-gradient(135deg, var(--pc-navy-700) 0%, var(--pc-azul) 100%);
    color: #fff;
    font-family: var(--pc-titulo);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(23, 76, 135, .22);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.lg-boton:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(23, 76, 135, .28);
}

.lg-boton:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(23, 76, 135, .22); }

.lg-boton:focus-visible {
    outline: 2px solid var(--pc-cian);
    outline-offset: 3px;
}

/* --- Avisos --- */

.lg-aviso {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: var(--pc-radio-sm);
    font-size: 14px;
}

.lg-aviso ul { margin: 6px 0 0; padding-left: 18px; }
.lg-aviso li + li { margin-top: 4px; }

.lg-aviso--error {
    border-color: rgba(208, 52, 44, .35);
    background: var(--pc-error-tinte);
    color: #92211c;
}

.lg-aviso--ok {
    border-color: rgba(26, 157, 107, .35);
    background: var(--pc-ok-tinte);
    color: #10684a;
}

/* --- Pie --- */

.lg-pie {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--pc-borde-suave);
    font-size: 14px;
    color: var(--pc-tinta-suave);
}

.lg-pie p { margin: 0; }
.lg-pie p + p { margin-top: 6px; }

.lg-pie a { color: var(--pc-azul); text-decoration: none; }
.lg-pie a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .lg-boton, .lg-input, .lg-check-caja, .lg-check-caja::after, .lg-ver-clave {
        transition: none;
    }
    .lg-boton:hover { transform: none; }
}

/* ==========================================================================
   4. REGISTRO DE EXPOSITOR (WEB-26)
   --------------------------------------------------------------------------
   Misma composición de dos mitades que el acceso: cambia el ancho de la caja
   —nueve campos en una columna de 430 px serían un rollo interminable— y se
   añaden la rejilla de dos columnas y los controles que el login no usa
   (desplegables y el par indicativo + teléfono).
   ========================================================================== */

.lg-caja--ancha { max-width: 620px; }

@media (min-width: 1400px) {
    /* La mitad izquierda crece con la caja; si no, el formulario ancho queda
       pegado a los bordes mientras la foto se lleva media pantalla. */
    .lg-pagina--registro { grid-template-columns: minmax(0, 720px) minmax(0, 1fr); }
}

.lg-rejilla {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 16px;
}

@media (min-width: 620px) {
    .lg-rejilla { grid-template-columns: 1fr 1fr; }
}

.lg-campo--completo { grid-column: 1 / -1; }

/* Indicativo y número son un solo dato partido en dos controles: van pegados y
   comparten la etiqueta del teléfono. */
.lg-telefono {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 8px;
}

.lg-select {
    width: 100%;
    height: 48px;
    padding: 0 38px 0 14px;
    border: 1px solid var(--pc-borde);
    border-radius: var(--pc-radio);
    background-color: var(--pc-superficie);
    /* Flecha propia: la nativa cambia de forma en cada sistema y no sigue la
       paleta. `appearance: none` la quita en los tres motores. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%234a5b70' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    font-family: var(--pc-texto);
    font-size: 15px;
    color: var(--pc-tinta);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.lg-select:focus {
    outline: none;
    border-color: var(--pc-cian-oscuro);
    box-shadow: 0 0 0 3px rgba(6, 193, 243, .18);
}

.lg-select.is-invalid { border-color: var(--pc-error); background-color: #fffafa; }

/* El indicativo es estrecho: sin sitio para la flecha, el "+57" se recortaría. */
.lg-select--indicativo { padding-right: 30px; background-position: right 10px center; }

.lg-pista {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--pc-apagado);
}

.lg-check--bloque {
    align-items: flex-start;
    margin: 6px 0 20px;
}

.lg-check--bloque .lg-check-caja { margin-top: 2px; }
.lg-check--bloque a { color: var(--pc-azul); }

/* --- Enlace de vuelta al acceso --- */

.lg-volver {
    /* `flex` y no `inline-flex`: en línea se quedaba pegado al logo, que va
       justo después y también es inline. */
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
    color: var(--pc-tinta-suave);
    font-size: 14px;
    text-decoration: none;
}

.lg-volver:hover { color: var(--pc-azul); }

/* ==========================================================================
   5. ACUSE DE LA SOLICITUD
   ========================================================================== */

.lg-acuse-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--pc-ok-tinte);
    color: var(--pc-ok);
}

.lg-resumen {
    margin: 22px 0 0;
    padding: 16px 18px;
    border: 1px solid var(--pc-borde-suave);
    border-radius: var(--pc-radio);
    background: var(--pc-tinte);
}

.lg-resumen dl {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 14px;
    margin: 0;
}

.lg-resumen dt {
    font-family: var(--pc-titulo);
    font-size: 13px;
    font-weight: 600;
    color: var(--pc-tinta-suave);
}

.lg-resumen dd {
    margin: 0;
    font-size: 14px;
    color: var(--pc-tinta);
    word-break: break-word;
}

.lg-pasos {
    counter-reset: paso;
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
}

.lg-pasos li {
    position: relative;
    padding-left: 38px;
    font-size: 14px;
    color: var(--pc-tinta-suave);
}

.lg-pasos li + li { margin-top: 14px; }

.lg-pasos li::before {
    counter-increment: paso;
    content: counter(paso);
    position: absolute;
    left: 0;
    top: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--pc-navy-700);
    color: #fff;
    font-family: var(--pc-titulo);
    font-size: 13px;
    font-weight: 700;
}

.lg-pasos strong {
    display: block;
    color: var(--pc-navy-900);
    font-family: var(--pc-titulo);
    font-size: 14px;
    font-weight: 600;
}

/* --- Botón secundario (perfil bajo, para "volver al acceso") --- */

.lg-boton--secundario {
    margin-top: 24px;
    background: var(--pc-superficie);
    border: 1px solid var(--pc-borde);
    color: var(--pc-navy-800);
    box-shadow: none;
}

.lg-boton--secundario:hover {
    filter: none;
    background: var(--pc-tinte);
    border-color: var(--pc-borde);
    box-shadow: none;
}

/* ==========================================================================
   6. LLAMADA AL REGISTRO (en el acceso)
   --------------------------------------------------------------------------
   Era un enlace de texto perdido en el pie. Quien llega sin cuenta es
   precisamente el que no puede pasar de esta pantalla, así que la salida tiene
   que verse: bloque propio con borde y botón, pero en tono bajo para que no
   compita con "Entrar al portal".
   ========================================================================== */

.lg-cta-registro {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid var(--pc-borde-suave);
    border-radius: var(--pc-radio);
    background: var(--pc-tinte);
    text-align: center;
}

.lg-cta-registro p {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--pc-tinta-suave);
}

.lg-cta-registro .lg-boton {
    height: 44px;
    font-size: 14px;
    text-decoration: none;
}