@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
    --tl-blue: #0A3E78;
    --tl-blue-deep: #082F5C;
    --tl-teal: #18B8C8;
    --tl-orange: #F59A23;
    --tl-mist: #F3F4F6;
    --tl-white: #FFFFFF;
    --tl-ink: #10233B;
    --tl-ink-soft: #526277;
    --tl-ink-muted: #7E8A9A;
    --tl-night: var(--tl-blue-deep);
    --tl-night-2: #0A3A6F;
    --tl-brand: var(--tl-blue);
    --tl-brand-strong: var(--tl-blue-deep);
    --tl-brand-soft: #EAF3FB;
    --tl-accent: var(--tl-teal);
    --tl-action: var(--tl-orange);
    --tl-surface: #FFFFFF;
    --tl-surface-2: #F7F9FB;
    --tl-border: #E3E8EE;
    --tl-border-strong: #D3DAE3;
    --tl-success: #159773;
    --tl-success-soft: #EAF8F4;
    --tl-danger: #C64C56;
    --tl-danger-soft: #FFF0F2;
    --tl-warning: #C88722;
    --tl-warning-soft: #FFF6E7;
    --tl-shadow-sm: 0 1px 2px rgba(8,47,92,.04), 0 8px 22px rgba(8,47,92,.06);
    --tl-shadow-md: 0 12px 34px rgba(8,47,92,.09);
    --tl-shadow-lg: 0 24px 70px rgba(8,47,92,.16);
    --tl-radius-sm: 10px;
    --tl-radius-md: 16px;
    --tl-radius-lg: 24px;
    --tl-font-display: Manrope, Arial, Helvetica, sans-serif;
    --tl-font-body: Inter, Arial, Helvetica, sans-serif;
}

html { color-scheme: light; }
body { font-family: var(--tl-font-body); }
h1, h2, h3, .tl-display { font-family: var(--tl-font-display); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(24,184,200,.28); outline-offset: 2px; }

/* Acceso --------------------------------------------------------------- */
.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    color: var(--tl-ink);
    background:
        radial-gradient(circle at 82% 16%, rgba(24,184,200,.09), transparent 24rem),
        linear-gradient(155deg, #F7FAFD 0%, #EEF3F7 100%);
}
.auth-layout {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(360px, .9fr) minmax(460px, 1.1fr);
}
.auth-brand-panel {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(2rem, 5vw, 4.5rem);
    color: #fff;
    background:
        radial-gradient(circle at 25% 15%, rgba(24,184,200,.22), transparent 26rem),
        linear-gradient(145deg, var(--tl-blue-deep) 0%, var(--tl-blue) 100%);
}
.auth-brand-panel::before {
    content: "";
    position: absolute;
    inset: auto -18% -23% auto;
    width: min(48vw, 560px);
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    box-shadow: 0 0 0 48px rgba(24,184,200,.06), 0 0 0 96px rgba(255,255,255,.025);
}
.auth-brand-panel::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 8px;
    height: 34%;
    background: linear-gradient(var(--tl-teal) 0 62%, var(--tl-orange) 62% 100%);
}
.auth-brand,
.auth-benefit,
.auth-proof { position: relative; z-index: 1; }
.auth-brand { display: inline-flex; align-items: center; gap: .8rem; color: #fff; text-decoration: none; }
.auth-mark,
.auth-logo-image {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border-radius: 14px;
}
.auth-logo-image { display: block; object-fit: contain; background: #fff; padding: 3px; }
.auth-mark {
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--tl-teal);
    font-family: var(--tl-font-display);
    font-size: 1.15rem;
    font-weight: 800;
}
.auth-brand-name { font-family: var(--tl-font-display); font-size: 1.15rem; font-weight: 800; }
.auth-benefit { max-width: 560px; margin: clamp(4rem, 13vh, 8rem) 0; }
.auth-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    color: #8EE3EA;
    font-family: var(--tl-font-display);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.auth-kicker::before { content: ""; width: 24px; height: 2px; border-radius: 999px; background: var(--tl-teal); }
.auth-benefit h2 {
    max-width: 11em;
    margin: 0;
    font-family: var(--tl-font-display);
    font-size: clamp(2.35rem, 4.8vw, 4.5rem);
    line-height: 1;
    letter-spacing: -.045em;
    text-wrap: balance;
}
.auth-benefit p {
    max-width: 34rem;
    margin: 1.35rem 0 0;
    color: rgba(255,255,255,.76);
    font-size: clamp(.98rem, 1.5vw, 1.08rem);
    line-height: 1.65;
}
.auth-proof { display: flex; flex-wrap: wrap; gap: .65rem 1rem; color: rgba(255,255,255,.76); font-size: .82rem; }
.auth-proof span { display: inline-flex; align-items: center; gap: .45rem; }
.auth-proof span::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--tl-orange); }

.auth-form-panel { display: grid; place-items: center; padding: clamp(1.25rem, 5vw, 4rem); }
.auth-card {
    width: min(100%, 470px);
    padding: clamp(1.4rem, 4vw, 2.4rem);
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-lg);
    background: rgba(255,255,255,.97);
    box-shadow: var(--tl-shadow-lg);
}
.auth-card-head { margin-bottom: 1.7rem; }
.auth-card-head .auth-mobile-brand { display: none; margin-bottom: 1.7rem; }
.auth-card h1 {
    margin: 0;
    color: var(--tl-blue-deep);
    font-family: var(--tl-font-display);
    font-size: clamp(1.85rem, 5vw, 2.35rem);
    line-height: 1.08;
    letter-spacing: -.035em;
}
.auth-card-subtitle { margin: .65rem 0 0; color: var(--tl-ink-soft); font-size: .94rem; line-height: 1.55; }
.auth-trial {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: -.15rem 0 1.45rem;
    padding: .8rem .9rem;
    border: 1px solid #BCE4E7;
    border-radius: var(--tl-radius-sm);
    color: #086A75;
    background: #ECFAFB;
    font-size: .85rem;
    font-weight: 700;
}
.auth-trial::before { content: "✓"; display: grid; place-items: center; width: 21px; height: 21px; flex: 0 0 auto; border-radius: 50%; color: #fff; background: var(--tl-teal); font-size: .72rem; }
.auth-field { margin-top: 1rem; }
.auth-field:first-child { margin-top: 0; }
.auth-field label { display: block; margin: 0 0 .42rem; color: #34465A; font-size: .81rem; font-weight: 700; }
.auth-field input {
    width: 100%;
    min-height: 50px;
    padding: .78rem .92rem;
    border: 1px solid var(--tl-border-strong);
    border-radius: 11px;
    color: var(--tl-ink);
    background: #fff;
    font-size: 16px;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.auth-field input::placeholder { color: #9AA6B4; }
.auth-field input:hover { border-color: #B8C4D0; }
.auth-field input:focus { outline: none; border-color: var(--tl-teal); box-shadow: 0 0 0 4px rgba(24,184,200,.12); }
.auth-submit {
    width: 100%;
    min-height: 52px;
    margin-top: 1.4rem;
    padding: .85rem 1rem;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, var(--tl-blue) 0%, var(--tl-blue-deep) 100%);
    box-shadow: 0 10px 24px rgba(8,47,92,.18);
    font-family: var(--tl-font-display);
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.auth-submit:hover { filter: brightness(1.03); box-shadow: 0 13px 28px rgba(8,47,92,.23); transform: translateY(-1px); }
.auth-submit:active { transform: translateY(0); }
.auth-error {
    margin: 0 0 1rem;
    padding: .85rem .95rem;
    border: 1px solid #F0C5CA;
    border-radius: 11px;
    color: #A93C45;
    background: var(--tl-danger-soft);
    font-size: .85rem;
    line-height: 1.45;
}
.auth-secondary { margin-top: 1.45rem; padding-top: 1.2rem; border-top: 1px solid var(--tl-border); color: var(--tl-ink-soft); text-align: center; font-size: .87rem; }
.auth-secondary a { color: var(--tl-blue); font-weight: 700; text-decoration: none; }
.auth-secondary a:hover { text-decoration: underline; }
.auth-fineprint { margin: 1rem 0 0; color: var(--tl-ink-muted); text-align: center; font-size: .75rem; line-height: 1.45; }

@media (max-width: 860px) {
    .auth-layout { grid-template-columns: 1fr; }
    .auth-brand-panel { display: none; }
    .auth-form-panel { align-items: start; padding: 1rem; }
    .auth-card { width: 100%; max-width: 520px; margin: 0 auto; padding: 1.35rem 1.2rem 1.5rem; border-radius: 20px; box-shadow: var(--tl-shadow-md); }
    .auth-card-head .auth-mobile-brand { display: inline-flex; color: var(--tl-blue-deep); }
    .auth-card-head { margin-bottom: 1.4rem; }
    .auth-logo-image { width: 74px; height: 74px; }
}

@media (max-width: 520px) {
    .auth-page { background: var(--tl-mist); }
    .auth-form-panel { padding: .7rem; }
    .auth-card { padding: 1.15rem 1rem 1.3rem; border-radius: 18px; box-shadow: var(--tl-shadow-sm); }
    .auth-card-head .auth-mobile-brand { margin-bottom: 1.7rem; }
    .auth-card h1 { font-size: 1.8rem; }
    .auth-card-subtitle { font-size: .9rem; }
    .auth-submit { min-height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}