/* =====================================================================
   Libercap · Portal Empresas — la portada de acceso
   Mismo lenguaje visual que el acceso del aula (libercap.cl/aula/login).

   TODO va bajo #login a propósito: style.css, menu.css y ficha.css
   tienen reglas generales (button, input, label, .card, .brand) y el
   portal de adentro usa varias de esas clases. Sin el #login por
   delante, esta hoja le cambiaría la cara al portal entero.

   La tipografía es Poppins, igual que el aula. La política de seguridad
   del portal no deja traer nada de fuera, así que si el computador no
   la tiene se cae sola a la del sistema. Para que quede exacta hay que
   subir los archivos de la fuente a este mismo servidor.
   ===================================================================== */

#login { font-family:Poppins,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased;
         color:#111A2B; background:#F4F6F8; display:flex; flex-direction:column; min-height:100vh; }
#login *, #login *::before, #login *::after { box-sizing:border-box; }
#login a { color:#1F5FA6; text-decoration:none; }
#login a:hover { color:#E97C25; }

/* ---------- Barra superior ---------- */
/* La barra cruza toda la pantalla y el contenido queda centrado en
   1240 px, como en el aula. Con max-width acá la línea de abajo
   quedaba cortada a los lados. */
#login .landing-header { position:sticky; top:0; z-index:10; background:rgba(244,246,248,.86);
         backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
         border-bottom:1px solid rgba(17,26,43,.06);
         width:100%; padding-block:36px; padding-inline:max(24px, calc((100% - 1240px) / 2 + 24px));
         display:flex; align-items:center; justify-content:space-between; gap:20px; }
#login .landing-brand { display:flex; align-items:center; gap:14px; }
#login .landing-brand img { height:30px; width:auto; display:block; }
/* El rótulo baja 3 px. El logotipo no está centrado dentro de su
   propia imagen: las barras suben y el subrayado baja, así que la
   palabra LIBERCAP queda 10 px bajo el centro (de 98), que a 30 px de
   alto en pantalla son 3. Centrando por la caja, el rótulo quedaba
   flotando sobre la palabra. Se mueve junto con su rayita. */
#login .landing-brand > span { font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
         color:#7A8290; padding-left:14px; border-left:1px solid #D8DEE6; white-space:nowrap;
         transform:translateY(3px); }
#login .landing-nav { display:flex; align-items:center; gap:22px; margin:0; }
#login .landing-nav a { font-size:13.5px; font-weight:500; color:#5A6472; }
#login .landing-nav a:hover { color:#111A2B; }

/* El enlace Liby IA, con el mismo degradado del aula. */
#login .halo { background-image:linear-gradient(100deg,#F5A623,#F02D7D,#C86DE8,#4BA8F0,#C86DE8,#F02D7D,#F5A623);
         background-size:300% 100%; -webkit-background-clip:text; background-clip:text;
         -webkit-text-fill-color:transparent; color:transparent; font-weight:600;
         animation:haloflow 7s linear infinite; }
@keyframes haloflow { 0% { background-position:0% 50%; } 100% { background-position:300% 50%; } }
@media (prefers-reduced-motion:reduce) { #login .halo { animation:none; } }

/* ---------- La tarjeta del acceso ---------- */
#login .landing-main { flex:1; max-width:1240px; width:100%; margin:22px auto 40px; padding:0 16px; }
#login .access-hero { position:relative; overflow:hidden; border-radius:28px; background:#F7F9FB; border:1px solid #E7EBF0;
         display:grid; grid-template-columns:1.02fr .98fr; min-height:600px; }
#login .access-hero > * { min-width:0; }

/* Lado izquierdo: la marca sobre la foto */
#login .welcome-panel { position:relative; overflow:hidden; display:flex; flex-direction:column;
         justify-content:center; gap:20px; padding:64px 56px; }
#login .welcome-panel picture { display:contents; }
#login .welcome-panel source { display:none; }

/* La foto ya viene recortada a la proporción de este panel, así que
   va centrada y sin acercar: con la foto horizontal original se perdía
   medio equipo, porque acá solo cabe un 62% de su ancho. */
#login .team-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
         object-position:50% 50%; }

/* El velo: misma geometría que el del aula, en el azul de la marca. */
#login .photo-shade { position:absolute; inset:0;
         background:linear-gradient(90deg,rgba(17,26,43,.88) 0%,rgba(20,32,52,.74) 40%,rgba(26,42,66,.56) 70%,rgba(32,52,80,.4) 100%); }

#login .welcome-copy { position:relative; z-index:1; display:flex; flex-direction:column; gap:20px; }
#login .landing-eyebrow { display:flex; align-items:center; gap:10px; margin:0;
         font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.72); }
#login .landing-eyebrow > span { width:7px; height:7px; border-radius:50%; background:#E97C25; flex:none; }
#login .welcome-copy h1 { margin:0; font-size:clamp(30px,3.4vw,44px); font-weight:600; line-height:1.04;
         letter-spacing:-.045em; color:#fff; text-wrap:balance; max-width:16ch; }
#login .welcome-copy h1 .marca-linea { display:block; margin-top:.12em; font-size:.42em; font-weight:600;
         letter-spacing:-.025em; line-height:1.15; color:#F5A65A; }
#login .welcome-copy > p:not(.landing-eyebrow) { margin:0; font-size:16px; line-height:1.6;
         color:rgba(255,255,255,.76); max-width:40ch; text-wrap:pretty; }

/* Franja al pie de la tarjeta, cruzando las dos columnas. */
#login .welcome-tags { grid-column:1 / -1; display:flex; align-items:center; flex-wrap:wrap; gap:12px;
         background:#fff; border-top:1px solid #EDEFF2; padding:16px 60px; }
#login .welcome-tags span { font-size:12.5px; font-weight:500; color:#5A6472; white-space:nowrap; }
#login .welcome-tags i { width:3px; height:3px; border-radius:50%; background:#C7CED8; flex:none; }

/* Lado derecho: el formulario */
#login .access-panel { background:#fff; display:flex; flex-direction:column; justify-content:center;
         gap:22px; padding:64px 60px; }
#login .access-heading { display:flex; flex-direction:column; gap:9px; }
#login .access-heading h2 { margin:0; font-size:27px; font-weight:600; line-height:1.14;
         letter-spacing:-.04em; color:#111A2B; }
#login .access-heading > p { margin:0; font-size:14.5px; line-height:1.6; color:#5A6472; text-wrap:pretty; }

#login .access-form { display:flex; flex-direction:column; gap:14px; margin:0; }
#login .access-form label { display:flex; flex-direction:column; gap:7px; margin:0;
         font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#8A94A3; }
#login .access-form input { display:block; width:100%; margin:0; font-family:inherit; font-size:15px;
         letter-spacing:normal; text-transform:none; color:#111A2B; background:#F7F9FB; border:1px solid #E1E6EC;
         border-radius:12px; padding:14px 16px; outline:none;
         transition:border-color .18s ease, background .18s ease, box-shadow .18s ease; }
#login .access-form input::placeholder { color:#A9B2BF; text-transform:none; letter-spacing:normal; }
#login .access-form input:focus { border-color:#E97C25; background:#fff; box-shadow:0 0 0 3px rgba(233,124,37,.14); }
#login .access-form button { font-family:inherit; cursor:pointer; margin-top:4px; width:100%;
         display:inline-flex; align-items:center; justify-content:center; gap:10px;
         font-size:15.5px; font-weight:600; letter-spacing:-.01em; color:#fff; background:#E97C25;
         border:0; border-radius:99px; padding:15px 28px;
         transition:background .2s ease, transform .2s ease, box-shadow .2s ease; }
#login .access-form button:hover { background:#111A2B; transform:translateY(-1px); box-shadow:0 12px 28px rgba(17,26,43,.16); }
#login .access-form button:disabled { opacity:.45; transform:none; box-shadow:none; background:#E97C25; }
#login .access-form button > span { font-size:16px; }

#login #login-error { margin:0; background:#FDEBF3; border:1px solid rgba(240,45,125,.32); border-radius:14px;
         padding:13px 16px; font-size:13px; line-height:1.55; color:#A81257; }
#login #login-error:empty { display:none; }

/* El recuadro naranjo, igual que el del aula. */
#login .access-note { display:flex; align-items:flex-start; gap:11px; background:#FDF3EA;
         border:1px solid rgba(233,124,37,.28); border-radius:14px; padding:14px 16px; }
#login .access-note i { width:6px; height:6px; border-radius:50%; background:#E97C25; flex:none; margin-top:7px; }
#login .access-note p { margin:0; font-size:12.5px; line-height:1.55; color:#6B4A2B; text-wrap:pretty; }
#login .access-note b { font-weight:600; color:#3F2A14; }

#login .access-aux { display:flex; align-items:center; justify-content:flex-start; gap:10px;
         flex-wrap:nowrap; padding-top:18px; border-top:1px solid #EDEFF2; }
#login .access-aux .cookie { margin:0; font-size:11.5px; line-height:1.6; color:#9AA2AE; white-space:nowrap; }
#login .access-help { font-size:11.5px; font-weight:600; color:#5A6472; white-space:nowrap; margin-left:auto; }
#login .access-help:hover { color:#E97C25; }

/* ---------- Pie de sitio (el mismo del aula) ---------- */
#login .landing-footer { background:#080D16; border-top:2px solid #E97C25; padding:52px 24px 26px; margin-top:8px; }
#login .pie-wrap { max-width:1240px; margin:0 auto; }
#login .pie-cols { display:grid; grid-template-columns:1.1fr .6fr .8fr .9fr; gap:44px; padding-bottom:38px; }
#login .pie-marca { display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
#login .pie-marca img { height:34px; width:auto; display:block; }
#login .pie-marca p { margin:0; font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.6); max-width:34ch; }
#login .pie-col h4 { margin:0 0 16px; font-size:11px; font-weight:600; letter-spacing:.18em;
         text-transform:uppercase; color:rgba(255,255,255,.42); }
#login .pie-col a, #login .pie-col span { display:block; font-size:13.5px; line-height:1.5;
         color:rgba(255,255,255,.78); text-decoration:none; margin-bottom:11px; }
#login .pie-col a:hover { color:#F0A868; }
#login .pie-horas { display:flex; flex-direction:column; gap:4px; margin-bottom:14px; }
#login .pie-horas b { font-size:13.5px; font-weight:500; color:rgba(255,255,255,.78); }
#login .pie-horas span { font-size:12.5px; color:rgba(255,255,255,.5); margin:0; }
#login .pie-bottom { display:flex; align-items:center; justify-content:space-between; gap:18px;
         flex-wrap:wrap; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); }
#login .pie-bottom p { margin:0; font-size:12px; color:rgba(255,255,255,.45); }
#login .pie-legal { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#login .pie-legal i { color:rgba(255,255,255,.25); font-style:normal; }
#login .pie-legal a { font-size:12px; color:rgba(255,255,255,.45); text-decoration:none; }
#login .pie-legal a:hover { color:#F0A868; }

#login a:focus-visible, #login button:focus-visible { outline:3px solid #cc9d74; outline-offset:3px; }
#login .access-form input:focus-visible { outline:none; }

/* ---------- Teléfono ---------- */
@media (max-width:880px) {
  #login .landing-footer { padding:36px 18px 22px; }
  #login .pie-cols { grid-template-columns:1fr 1fr; gap:26px 14px; padding-bottom:26px; }
  #login .pie-marca { grid-column:1 / -1; align-items:center; text-align:center; }
  #login .pie-col { text-align:center; }
  #login .pie-col.contacto { grid-column:1 / -1; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); }
  #login .pie-col.contacto .pie-horas { align-items:center; margin-bottom:12px; }
  #login .pie-col h4 { font-size:9.5px; letter-spacing:.14em; margin-bottom:12px; }
  #login .pie-col a, #login .pie-col span, #login .pie-horas b { font-size:11.5px; margin-bottom:9px; white-space:nowrap; }
  #login .pie-horas span { font-size:11.5px; }
  #login .pie-bottom { flex-direction:column; align-items:center; text-align:center; gap:10px; }
  #login .pie-bottom p { font-size:11px; line-height:1.5; }
  #login .pie-legal { justify-content:center; gap:6px; width:100%; white-space:nowrap; }
  #login .pie-legal a, #login .pie-legal i { font-size:10.5px; }
}

@media (max-width:900px) {
  #login .landing-header { padding-block:12px; padding-inline:16px; }
  #login .landing-brand > span, #login .landing-nav a { display:none; }
  #login .landing-main { margin:14px auto 26px; padding:0 12px; }
  #login .access-hero { grid-template-columns:1fr; min-height:0; border-radius:20px; }
  #login .welcome-panel { padding:min(100vw,390px) 22px 26px; gap:14px; justify-content:flex-start; }
  #login .team-photo { object-position:50% 45%; }
  /* En el teléfono la foto va arriba y el texto abajo, así que el velo
     se vuelve un degradado al color del fondo. Iba por porcentajes del
     panel y empezaba a los dos tercios de la foto: se veía lavada. Ahora
     se amarra al alto real de la foto —que es el padding de arriba— y
     recién se cierra 6 px antes de donde empieza el texto. */
  #login .photo-shade { background:linear-gradient(180deg,
           rgba(247,249,251,0) 0,
           rgba(247,249,251,0) calc(min(100vw, 390px) - 130px),
           rgba(247,249,251,.55) calc(min(100vw, 390px) - 70px),
           rgba(247,249,251,.92) calc(min(100vw, 390px) - 26px),
           #F7F9FB calc(min(100vw, 390px) - 6px)); }
  #login .welcome-copy { gap:14px; }
  #login .landing-eyebrow { color:#7A8290; }
  #login .welcome-copy h1 { font-size:32px; max-width:100%; color:#111A2B; white-space:nowrap; }
  #login .welcome-copy h1 .marca-linea { color:#E97C25; }
  #login .welcome-copy > p:not(.landing-eyebrow) { font-size:15px; max-width:100%; color:#5A6472; }
  #login .welcome-tags { padding:14px 18px; gap:6px 8px; justify-content:center; }
  #login .welcome-tags span { font-size:10.5px; }
  #login .access-panel { padding:28px 22px 30px; gap:18px; }
  #login .access-heading h2 { font-size:23px; }
  #login .access-aux { flex-direction:column; align-items:flex-start; flex-wrap:wrap; gap:6px; }
  #login .access-aux .cookie { font-size:10.5px; white-space:normal; }
  #login .access-help { font-size:10.5px; margin-left:0; }
}

/* La firma de Liby en la línea de abajo del acceso. */
#login .pie-liby-enlace { text-decoration: none; }