/* =========================================================
   Transportes Tobón — pantalla de ingreso
   ---------------------------------------------------------
   Computador: la marca a la izquierda, la tarjeta de vidrio en el
   centro y la foto del camión a la derecha.
   Celular: logo arriba, la foto debajo y la tarjeta montada sobre ella.
   La foto sale de los diseños del dueño (wwwroot/img/login-camion*.jpg).
   ========================================================= */

:root {
    --naranja: #f97316;
    --naranja-2: #fb923c;
    --azul-noche: #0b1a31;
    --azul-marca: #0f2440;
    --azul-texto: #1e3a5f;
}

* { box-sizing: border-box; }

/* Las franjas y la foto se salen a propósito por los bordes: que no corran la página de lado. */
html { overflow-x: clip; }

body.login {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    overflow-x: hidden;
    font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
    color: #fff;
    background:
        radial-gradient(900px 520px at 78% 28%, rgba(249, 115, 22, .20), transparent 62%),
        radial-gradient(700px 500px at 10% 90%, rgba(37, 99, 235, .18), transparent 60%),
        linear-gradient(160deg, #15355f 0%, #0e2546 45%, var(--azul-noche) 100%);
}

.solo-movil { display: none !important; }

/* ---------- La foto ---------- */
.foto-camion { position: absolute; top: 0; right: 0; bottom: 0; width: 50vw; z-index: 0; }
.foto-camion img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: 30% 55%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .55) 16%, #000 36%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .55) 16%, #000 36%);
    animation: fotoEntra 1.1s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes fotoEntra { from { opacity: 0; transform: translateX(40px) scale(1.03); } }

/* ---------- Franjas de la marca ---------- */
.franja { position: fixed; z-index: 1; pointer-events: none; }
.franja-arriba {
    top: -70px; left: -130px; width: 430px; height: 150px;
    background: linear-gradient(90deg, var(--naranja) 0 22%, transparent 22% 31%, #1d4ed8 31% 47%, transparent 47%);
    transform: rotate(-36deg);
    opacity: .95;
}
.franja-abajo { display: none; }

/* ---------- La rejilla ---------- */
.login-rejilla {
    position: relative; z-index: 2;
    min-height: 100vh; min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 450px minmax(0, 1fr);
    align-items: center;
    gap: 48px;
    padding: 48px 5vw;
}

/* ---------- La marca ---------- */
.login-marca { animation: subir .8s cubic-bezier(.22, 1, .36, 1) .05s both; }
.logo-grande { display: flex; align-items: center; gap: 22px; }
.logo-icono {
    width: 100px; height: 100px; flex: 0 0 100px;
    border-radius: 24px;
    display: grid; place-items: center;
    background: linear-gradient(140deg, var(--naranja-2), var(--naranja) 55%, #ea580c);
    box-shadow: 0 16px 34px rgba(249, 115, 22, .45);
    font-size: 50px; color: #fff;
}
.logo-texto { display: flex; flex-direction: column; line-height: .95; }
.logo-linea1 { font-size: 44px; font-weight: 800; letter-spacing: -.01em; }
.logo-linea2 { font-size: 58px; font-weight: 800; color: var(--naranja); letter-spacing: -.02em; }
.logo-linea2 small { font-size: 28px; color: #fff; font-weight: 700; letter-spacing: 0; }
.logo-lema { margin-top: 20px; font-size: 13px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }

.eslogan { margin: 64px 0 0; font-size: 30px; font-weight: 500; line-height: 1.15; position: relative; }
.eslogan-script {
    display: block;
    font-family: "Caveat", cursive; font-weight: 700;
    font-size: 50px; color: var(--naranja);
    transform: rotate(-3deg); transform-origin: left;
    margin-top: 2px;
}
.subrayado { display: block; width: 300px; height: 18px; overflow: visible; }
.subrayado path {
    fill: none; stroke: var(--naranja); stroke-width: 3.5; stroke-linecap: round;
    stroke-dasharray: 320; stroke-dashoffset: 320;
    animation: trazar 1.2s ease-out .6s forwards;
}
@keyframes trazar { to { stroke-dashoffset: 0; } }

.virtudes { list-style: none; padding: 0; margin: 52px 0 0; display: flex; gap: 26px; }
.virtudes li { width: 96px; text-align: center; font-size: 12.5px; line-height: 1.3; color: rgba(255, 255, 255, .9); }
.virtudes span {
    display: grid; place-items: center;
    width: 66px; height: 66px; margin: 0 auto 10px;
    border-radius: 18px;
    background: rgba(15, 36, 64, .55);
    border: 1px solid rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font-size: 26px;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.virtudes li:hover span { transform: translateY(-4px); border-color: var(--naranja); background: rgba(249, 115, 22, .15); }

.firma { margin-top: 54px; font-family: "Caveat", cursive; font-size: 32px; font-weight: 600; transform: rotate(-4deg); transform-origin: left; display: inline-block; }
.firma .subrayado { width: 250px; margin-top: -4px; }

/* ---------- La tarjeta de vidrio ---------- */
.tarjeta-ingreso {
    position: relative;
    padding: 36px 34px 26px;
    border-radius: 28px;
    text-align: center;
    color: var(--azul-marca);
    background: linear-gradient(160deg, rgba(255, 255, 255, .86), rgba(222, 232, 246, .74));
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 34px 80px rgba(5, 15, 35, .55), inset 0 1px 0 rgba(255, 255, 255, .9);
    animation: subir .7s cubic-bezier(.22, 1, .36, 1) .15s both;
}
@keyframes subir { from { opacity: 0; transform: translateY(26px); } }

.ti-icono {
    width: 78px; height: 78px; margin: 0 auto;
    border-radius: 20px;
    display: grid; place-items: center;
    background: linear-gradient(140deg, var(--naranja-2), var(--naranja) 55%, #ea580c);
    box-shadow: 0 12px 26px rgba(249, 115, 22, .4);
    color: #fff; font-size: 38px;
}
.ti-titulo { margin: 18px 0 4px; font-size: 25px; font-weight: 800; letter-spacing: -.01em; color: var(--azul-marca); }
.ti-subtitulo { margin: 0; font-size: 14.5px; color: #4b5d79; font-weight: 500; }
.ti-raya { width: 64px; height: 3px; border-radius: 3px; margin: 14px auto 18px; background: var(--naranja); }

.tarjeta-ingreso form { text-align: left; }

.ti-etiqueta { display: flex; align-items: center; gap: 8px; margin: 14px 0 7px; font-size: 13.5px; font-weight: 600; color: var(--azul-texto); }
.ti-etiqueta .bi { font-size: 16px; }

.ti-campo {
    display: flex; align-items: center;
    height: 56px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(15, 36, 64, .09);
    box-shadow: inset 0 1px 2px rgba(15, 36, 64, .05);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ti-campo > .bi {
    flex: 0 0 56px; height: 60%;
    display: grid; place-items: center;
    border-right: 1px solid rgba(15, 36, 64, .1);
    font-size: 19px; color: var(--azul-texto);
}
.ti-campo input {
    flex: 1; min-width: 0; height: 100%;
    border: 0; background: transparent; outline: none;
    padding: 0 14px;
    font: 500 15.5px "Montserrat", sans-serif;
    color: var(--azul-marca);
}
.ti-campo input::placeholder { color: #8796ad; }
.ti-campo:focus-within { border-color: var(--naranja); box-shadow: 0 0 0 4px rgba(249, 115, 22, .18); }
/* El autollenado del navegador pinta amarillo: se deja igual que el resto */
.ti-campo input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; -webkit-text-fill-color: var(--azul-marca); }

.ti-ojo { flex: 0 0 52px; height: 100%; border: 0; background: transparent; color: var(--azul-texto); font-size: 19px; border-radius: 0 15px 15px 0; cursor: pointer; }
.ti-ojo:hover { color: var(--naranja); }

.ti-recordar { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font-size: 14px; font-weight: 500; color: var(--azul-texto); cursor: pointer; user-select: none; }
.ti-recordar input { position: absolute; opacity: 0; pointer-events: none; }
.ti-recordar .caja {
    width: 22px; height: 22px; border-radius: 6px;
    display: grid; place-items: center;
    border: 2px solid #9fb0c8; background: #fff;
    color: transparent; font-size: 15px;
    transition: all .15s ease;
}
.ti-recordar input:checked + .caja { background: #2563eb; border-color: #2563eb; color: #fff; }
.ti-recordar input:focus-visible + .caja { box-shadow: 0 0 0 3px rgba(37, 99, 235, .3); }

.ti-boton {
    position: relative;
    width: 100%; height: 60px; margin-top: 22px;
    border: 0; border-radius: 17px;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    font: 700 19px "Montserrat", sans-serif; color: #fff;
    background: linear-gradient(90deg, #f97316, #fb923c 50%, #f97316);
    background-size: 200% 100%;
    box-shadow: 0 14px 28px rgba(249, 115, 22, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, background-position .5s ease;
}
.ti-boton .bi { font-size: 22px; }
.ti-boton .flecha { position: absolute; right: 22px; transition: transform .2s ease; }
.ti-boton:hover { background-position: 100% 0; box-shadow: 0 18px 34px rgba(249, 115, 22, .55); }
.ti-boton:hover .flecha { transform: translateX(4px); }
.ti-boton:active { transform: scale(.98); }
.ti-boton:disabled { opacity: .85; cursor: progress; }

.ti-seguro { margin-top: 18px; text-align: center; font-size: 13px; color: #5b6b85; }
.ti-seguro .bi { font-size: 15px; margin-right: 4px; }

.ti-aviso { margin: 4px 0 6px; padding: 10px 12px; border-radius: 12px; background: #fff7e6; border: 1px solid #fde3b0; color: #8a5a00; font-size: 13.5px; }
.ti-error { margin: 4px 0 6px; padding: 10px 12px; border-radius: 12px; background: #fdecec; border: 1px solid #f9c9c9; color: #b91c1c; font-size: 13.5px; }
.ti-error ul { margin: 0; padding-left: 18px; }
.ti-error.validation-summary-valid { display: none; }
.ti-error-campo { display: block; margin-top: 5px; font-size: 12.5px; color: #dc2626; }

/* ---------- Pantallas medianas: la marca más pequeña ---------- */
@media (max-width: 1279.98px) {
    .login-rejilla { grid-template-columns: minmax(0, 1fr) 420px; padding-right: 4vw; }
    .logo-icono { width: 80px; height: 80px; flex-basis: 80px; font-size: 40px; }
    .logo-linea1 { font-size: 34px; }
    .logo-linea2 { font-size: 44px; }
    .virtudes { gap: 14px; }
    .foto-camion { width: 62vw; opacity: .55; }
}

@media (max-width: 991.98px) and (min-width: 768px) {
    .login-rejilla { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .login-marca { display: flex; flex-direction: column; align-items: center; }
    .eslogan, .virtudes, .firma { display: none; }
    .tarjeta-ingreso { width: 100%; max-width: 450px; }
    .foto-camion { width: 100vw; opacity: .35; }
}

/* =========================================================
   Celular
   ========================================================= */
@media (max-width: 767.98px) {
    .solo-pc { display: none !important; }
    .solo-movil { display: block !important; }

    body.login {
        background:
            radial-gradient(500px 300px at 85% 30%, rgba(249, 115, 22, .22), transparent 65%),
            linear-gradient(180deg, #14325a 0%, #0d2342 50%, var(--azul-noche) 100%);
    }

    .franja-arriba { top: -60px; left: -150px; width: 330px; height: 120px; }
    .franja-abajo {
        display: block;
        right: -160px; bottom: 120px;
        width: 420px; height: 160px;
        background: linear-gradient(90deg, transparent 0 30%, #1d4ed8 30% 55%, transparent 55% 62%, var(--naranja) 62%);
        transform: rotate(-28deg);
        opacity: .9;
        position: absolute;
    }

    /* La foto, debajo del logo y corrida a la derecha (como en el diseño): el camión
       completo, y a la izquierda queda cielo para el eslogan. Se desvanece por los bordes. */
    /* Alto = ancho ÷ 1,75 (la proporción de la foto): se ve completa, sin recortar el camión. */
    .foto-camion { top: 186px; bottom: auto; left: 12%; right: auto; width: 92%; height: calc(92vw / 1.75); }
    .foto-camion img {
        object-position: 0% 50%;
        -webkit-mask-image: radial-gradient(ellipse 80% 78% at 55% 50%, #000 66%, transparent 100%);
        mask-image: radial-gradient(ellipse 80% 78% at 55% 50%, #000 66%, transparent 100%);
        animation-name: fotoEntraMovil;
    }
    @keyframes fotoEntraMovil { from { opacity: 0; transform: scale(1.06); } }

    .login-rejilla {
        display: block;
        min-height: 0;
        padding: calc(env(safe-area-inset-top, 0px) + 30px) 18px calc(env(safe-area-inset-bottom, 0px) + 30px);
    }

    .login-marca { text-align: left; }
    .logo-grande { justify-content: center; gap: 14px; }
    .logo-icono { width: 72px; height: 72px; flex-basis: 72px; border-radius: 18px; font-size: 36px; }
    .logo-linea1 { font-size: 31px; }
    .logo-linea2 { font-size: 40px; }
    .logo-linea2 small { font-size: 20px; }
    .logo-lema { text-align: center; margin-top: 14px; font-size: 10.5px; letter-spacing: .28em; }

    /* El eslogan va sobre el cielo de la foto, a la izquierda */
    .eslogan { margin: 34px 0 0 2px; font-size: 18px; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); max-width: 52%; }
    .eslogan-script { font-size: 29px; }
    .eslogan .subrayado { width: 170px; }

    .tarjeta-ingreso { margin-top: 96px; padding: 26px 20px 20px; border-radius: 26px; }
    .ti-icono { width: 64px; height: 64px; font-size: 32px; border-radius: 17px; }
    .ti-titulo { font-size: 22px; margin-top: 14px; }
    .ti-subtitulo { font-size: 13.5px; }
    .ti-campo { height: 54px; }
    .ti-campo input { font-size: 16px; }   /* 16px: el iPhone no hace zoom al tocar */
    .ti-boton { height: 58px; font-size: 18px; }

    .login-pie { margin-top: 26px; text-align: center; }
    .login-pie .virtudes { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .login-pie .virtudes li { width: auto; font-size: 11.5px; }
    .login-pie .virtudes span { width: 56px; height: 56px; border-radius: 16px; font-size: 23px; margin-bottom: 8px; }
    .login-pie .firma { margin-top: 26px; font-size: 27px; transform: rotate(-3deg); transform-origin: center; }
    .login-pie .firma .subrayado { width: 220px; margin: -2px auto 0; }
}

@media (prefers-reduced-motion: reduce) {
    .foto-camion img, .login-marca, .tarjeta-ingreso { animation: none !important; }
    .subrayado path { animation: none; stroke-dashoffset: 0; }
}