/* The way in: always dark, with a side to say what Ratio is and the form on the right.
   The classes are its own (lg-): the other screens that look like a card (forgot
   password, choosing one) keep the portal's. It is shared by the login and the signup. */
.lg-page { margin:0; min-height:100vh; min-height:100dvh; display:block; background:#18181a; color:#f9fafb; font-family:'Inter', sans-serif; overscroll-behavior:none; }
.lg { display:flex; min-height:100vh; min-height:100dvh; }
.lg-izq { flex:0 0 31%; min-width:340px; max-width:600px; display:flex; flex-direction:column; justify-content:center; padding:0 clamp(2rem, 4vw, 4.5rem);
  background:radial-gradient(130% 50% at 25% 66%, rgba(75, 59, 184, .55), rgba(43, 79, 153, .26) 55%, transparent 100%),
    radial-gradient(90% 45% at 85% 50%, rgba(79, 123, 217, .3), transparent 100%),
    linear-gradient(180deg, #8c9bdc 0%, #5a62a8 20%, #2c3050 44%, #1a1e3a 72%, #101012 100%); }
.lg-izq h2 { margin:0; font-family:'Sora', sans-serif; font-size:clamp(1.9rem, 2.6vw, 2.4rem); font-weight:400; line-height:1.3; letter-spacing:-.02em; color:#fff; text-wrap:balance; }
.lg-izq p { margin:1.3rem 0 0; font-size:.95rem; line-height:1.6; color:rgba(255, 255, 255, .82); }
.lg-izq a { align-self:flex-start; margin-top:1.9rem; padding:.7rem 1.1rem; border-radius:999px; background:#fff; color:#0f1115; font-size:.9rem; font-weight:500; text-decoration:none; }
.lg-izq a:hover { background:#e8e8ee; }
.lg-der { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; padding:0 1.5rem; }
.lg-forma { width:336px; max-width:100%; margin:auto 0; }
.lg-marca { display:flex; align-items:center; justify-content:center; gap:.6rem; margin-bottom:2.9rem; color:#fff !important; text-decoration:none; }
.lg-marca .rt-logo { width:36px; height:36px; }
.lg-marca em { font:600 1.7rem 'Sora', sans-serif; font-style:normal; letter-spacing:-.03em; }
.lg-marca small { display:inline-flex; align-items:center; gap:4px; padding:2px 6px; border-radius:3px; border:1px solid rgba(255, 255, 255, .22); background:transparent; color:#f9fafb; font-size:.62rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.lg-panel[hidden] { display:none; }
.lg-panel.entra-der { animation:login-entra-der .3s cubic-bezier(.22, 1, .36, 1); }
.lg-panel.entra-izq { animation:login-entra-izq .3s cubic-bezier(.22, 1, .36, 1); }
.lg-form { display:grid; gap:1.35rem; }
.lg-campo { position:relative; display:block; }
.lg-campo input, .lg-campo select { width:100%; height:48px; padding:0 1.05rem; border:1px solid rgba(255, 255, 255, .12); border-radius:28px; background:#1b1b1c; color:#f9fafb;
  font:inherit; font-size:.875rem; font-weight:400; letter-spacing:normal; box-sizing:border-box; outline:none; color-scheme:dark; transition:border-color .15s; }
.lg-campo select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23adb2b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.6rem; }
.lg-campo input::placeholder { color:#81858c; font-weight:400; opacity:1; }
.lg-campo input:focus, .lg-campo select:focus { border-color:rgba(255, 255, 255, .42); }
.lg-campo--clave input { padding-right:3rem; }
.lg-etiqueta { display:block; margin:0 0 .45rem .35rem; font-size:.78rem; color:#adb2b8; }
.lg-etiqueta span { color:#81858c; }
.lg-ojo { position:absolute; right:.5rem; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:2.2rem; height:2.2rem; padding:0; border:0; border-radius:50%;
  background:none; color:#f9fafb; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.lg-ojo:focus-visible, .lg-link:focus-visible, .lg-boton:focus-visible, .lg-forma a:focus-visible { outline:2px solid #a99cf6; outline-offset:2px; }
.lg-ojo .login-ojo-tapar, .lg-ojo[aria-pressed="true"] .login-ojo-ver { display:none; }
.lg-ojo[aria-pressed="true"] .login-ojo-tapar { display:block; }
.lg-campo--clave input::-ms-reveal { display:none; }
.lg-consent { margin:0; font-size:.75rem; line-height:1.5; color:#adb2b8; }
.lg-consent a, .lg-fila a, .lg-nota a { color:#f9fafb; font-weight:500; text-underline-offset:2px; }
.lg-consent a { text-decoration:underline; }
.lg-fila { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.4rem; font-size:.75rem; }
.lg-fila a { text-decoration:none; }
.lg-link { padding:0; border:0; background:none; color:#f9fafb; font:inherit; font-size:.75rem; font-weight:500; cursor:pointer; }
.lg-link:hover, .lg-fila a:hover { text-decoration:underline; text-underline-offset:2px; }
.lg-boton { width:100%; height:42px; border:0; border-radius:999px; background:#f9fafb; color:#0f1115; font:inherit; font-size:.875rem; font-weight:500; cursor:pointer; transition:background-color .15s; }
.lg-boton:hover:not(:disabled) { background:#e5e7eb; }
.lg-boton.is-loading { opacity:.8; cursor:progress; }
.lg-google { display:flex; justify-content:center; margin-top:1.1rem; }
.lg-google .btn-google { width:auto; min-height:0; height:auto; padding:0; gap:.45rem; border:0; border-radius:0; background:none; box-shadow:none; color:#adb2b8; font-size:.75rem; text-decoration:underline; text-underline-offset:2px; }
.lg-google .btn-google:hover { background:none; box-shadow:none; color:#f9fafb; }
.lg-google .btn-google-g { width:14px; height:14px; }
.lg-nota { margin:1.1rem 0 0; font-size:.75rem; line-height:1.5; color:#81858c; text-align:center; }
.lg-error, .lg-aviso { margin:0 0 1.2rem; padding:.65rem .95rem; border-radius:14px; font-size:.82rem; line-height:1.45; }
.lg-error { background:rgba(248, 113, 113, .12); color:#fca5a5; }
.lg-aviso { background:rgba(169, 156, 246, .14); color:#d9d3fb; }
.lg-pie { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.4rem .6rem; margin:0; padding:0 0 1.5rem; font-size:.8rem; color:#81858c; }
.lg-pie a { color:#81858c; text-decoration:none; }
.lg-pie a:hover { color:#f9fafb; }
.lg-pie .idi { margin-left:.6rem; background:rgba(255, 255, 255, .05); border-color:rgba(255, 255, 255, .12); }
.lg-pie .idi::before { background:rgba(255, 255, 255, .2); box-shadow:none; }
.lg-pie .idi a { color:rgba(255, 255, 255, .55) !important; }
.lg-pie .idi a:hover, .lg-pie .idi a[aria-current="true"] { color:#fff !important; }
@media (max-width: 860px) { .lg-izq { display:none; } .lg-der { padding-top:1.5rem; } }
@media (prefers-reduced-motion: reduce) { .lg-panel.entra-der, .lg-panel.entra-izq { animation:login-fundido .15s ease; } }

/* The texts and the code field of the signup screens. */
.lg-texto { margin:0 0 1.35rem; font-size:.875rem; line-height:1.6; color:#adb2b8; }
.lg-texto strong { color:#f9fafb; font-weight:600; overflow-wrap:anywhere; }
.lg-campo input.lg-codigo { text-align:center; font-family:'JetBrains Mono', monospace; font-size:1.35rem; letter-spacing:.35em; padding:0 1.05rem 0 calc(1.05rem + .35em); }
.lg-nota--aviso { color:#d9d3fb; }
a.lg-boton { display:flex; align-items:center; justify-content:center; box-sizing:border-box; text-decoration:none; }
.lg-nota .lg-link { text-decoration:underline; text-underline-offset:2px; }
.lg-vuelta { margin:1.2rem 0 0; text-align:center; font-size:.75rem; }
.lg-vuelta a { color:#f9fafb; font-weight:500; text-underline-offset:2px; }
.lg-divisor { margin:1.1rem 0; text-align:center; font-size:.75rem; color:#81858c; }
/* The other screens of the way in (forgot password, choosing one, invitation). */
.lg-campo input[readonly] { color:#adb2b8; cursor:default; }
.lg-texto--chico { font-size:.8rem; color:#81858c; }

/* The text pages (terms, privacy, help): the same dark look, with a column to read. Their own styles
   (app/templates/ai_help.html and others) read the portal's variables, so they are set here. */
.lg-doc { --bg:#18181a; --panel:#202020; --panel-2:#26262b; --line:#2f2f2f; --line-2:#3a3a3a; --text:#f9fafb; --text-2:#c4c4c2; --muted:#adb2b8; --muted-2:#81858c; --brand:#a99cf6; --brand-txt:#a99cf6;
  display:block; background:radial-gradient(60% 34% at 50% 0, rgba(75, 59, 184, .3), transparent 72%), #18181a; }
.lg-cab { display:flex; align-items:center; justify-content:space-between; gap:1rem; max-width:1040px; margin:0 auto; padding:1.1rem 1.5rem; }
.lg-cab .lg-marca { margin:0; }
.lg-cab-der { display:flex; align-items:center; gap:1rem; font-size:.85rem; }
.lg-cab-der a { color:#adb2b8; text-decoration:none; }
.lg-cab-der a:hover { color:#fff; }
.lg-cab .idi { background:rgba(255, 255, 255, .05); border-color:rgba(255, 255, 255, .12); }
.lg-cab .idi::before { background:rgba(255, 255, 255, .2); box-shadow:none; }
.lg-cab .idi a { color:rgba(255, 255, 255, .55) !important; }
.lg-cab .idi a:hover, .lg-cab .idi a[aria-current="true"] { color:#fff !important; }
.lg-art { max-width:760px; margin:0 auto; padding:2rem 1.5rem 3rem; }
.lg-art h1 { margin:0 0 1.8rem; font:400 clamp(1.9rem, 4vw, 2.6rem)/1.15 'Sora', sans-serif; letter-spacing:-.03em; color:#fff; text-wrap:balance; }
.legal { max-width:68ch; font-size:.95rem; line-height:1.65; color:#c4c4c2; }
.legal h2 { margin:1.9rem 0 .5rem; font:600 1.15rem/1.3 'Sora', sans-serif; color:#fff; }
.legal p, .legal ul, .legal ol { margin:0 0 .75rem; }
.legal ul, .legal ol { padding-left:1.2rem; }
.legal li { margin:0 0 .4rem; }
.legal strong { color:#f9fafb; font-weight:600; }
.legal a { color:#a99cf6; text-underline-offset:2px; }
.legal code { padding:.1rem .35rem; border-radius:6px; background:#26262b; color:#e6e6e4; font-size:.85em; overflow-wrap:anywhere; }
.legal-fecha { font-size:.85rem; color:#81858c; }
.lg-doc .lg-pie { padding:1.5rem 1rem 2rem; }
@media (max-width: 560px) { .lg-cab { padding:.9rem 1rem; } .lg-art { padding:1.2rem 1rem 2.5rem; } }

@media (max-width: 560px) { .lg-marca { flex-wrap:wrap; row-gap:.55rem; } .lg-marca small { flex-basis:auto; order:3; } .lg-marca::after { content:""; order:2; flex-basis:100%; height:0; } .lg-cab .lg-marca { justify-content:flex-start; } .lg-cab-der a { white-space:nowrap; } }