/* =========================================================================
   Entrada al sistema — dos paneles: marca e identificación.
   -------------------------------------------------------------------------
   La paleta es la MISMA que la del panel, no una parecida: el índigo del menú
   lateral (#1e308f → #4054b5), el índigo de acción (#29389d) y el naranja de
   acento (#d77700). Una entrada con colores propios se siente como otro
   producto, y lo primero que hace el usuario es dudar de si está en el sitio
   correcto.

   El naranja se reserva para acentuar -la línea superior, el filete- y NO para
   el botón: en el resto de la aplicación la acción principal siempre es índigo,
   y cambiarla justo aquí enseñaría un idioma que luego no se cumple.
   ========================================================================= */

:root{
  --indigo:#29389d;--indigo-hondo:#15247c;--indigo-claro:#6575ca;
  --naranja:#d77700;--tinta:#17191f;--apagado:#666b76;--linea:#e0e2e8;
  --rojo:#b3232b;--verde:#1f7a3f;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;min-width:320px;background:#0f1c5e;color:var(--tinta)}
button,input{font:inherit}
button{cursor:pointer}

/* Dos columnas en escritorio. La de marca es la mayor porque sostiene el
   mensaje; la de acceso se queda con lo justo para no dispersar la mirada. */
.entrada{min-height:100vh;min-height:100dvh;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr)}

/* ── Panel de marca ─────────────────────────────────────────────────────── */
.marca{position:relative;overflow:hidden;color:#fff;display:flex;align-items:center;
  background:linear-gradient(157deg,#101c61 0%,#1e308f 46%,#31429f 100%)}
/* Dos halos muy tenues: dan profundidad sin dibujar nada que compita con el
   texto. Se declaran aparte para poder apagarlos en móvil, donde el panel es
   una franja y el desenfoque solo cuesta batería. */
.marca::before,.marca::after{content:"";position:absolute;border-radius:50%;
  pointer-events:none}
.marca::before{width:620px;height:620px;background:#3f7fe01f;top:-260px;right:-180px}
.marca::after{width:420px;height:420px;background:#0007;bottom:-230px;left:-120px}
.marca-cuerpo{position:relative;z-index:1;width:min(100%,560px);
  margin-left:auto;margin-right:auto;padding:64px 56px}

.eyebrow{margin:0 0 26px;font-size:11px;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:#a8bdff}

.logotipo{display:flex;align-items:center;gap:14px;margin-bottom:44px}
.emblema{flex:none;width:52px;height:52px;border-radius:14px;display:grid;
  place-items:center;font-size:18px;font-weight:900;letter-spacing:-.04em;
  background:linear-gradient(140deg,#4d7ff0,#12205f);color:#fff;
  box-shadow:0 6px 16px #0006,inset 0 1px 0 #ffffff40}
.logotipo-texto{display:grid;gap:4px;min-width:0}
.logotipo-texto strong{font-size:18px;letter-spacing:-.01em}
.logotipo-texto em{font-style:normal;font-size:11px;letter-spacing:.09em;
  color:#b9c8ff;text-transform:uppercase}

.marca h1{margin:0 0 22px;font-size:clamp(28px,3.1vw,44px);line-height:1.16;
  letter-spacing:-.03em;font-weight:700}
.bajada{margin:0;max-width:46ch;color:#c9d5ff;font-size:15px;line-height:1.65}

/* El filete y la lista repiten la estructura de los módulos del menú: quien
   entra ya ve de qué se le va a hablar. */
.ambitos{list-style:none;display:flex;flex-wrap:wrap;gap:9px 22px;margin:44px 0 0;
  padding:26px 0 0;border-top:1px solid #ffffff2e;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#93a7f0}
.ambitos li{white-space:nowrap}

/* ── Panel de acceso ────────────────────────────────────────────────────── */
.acceso{background:#fff;display:flex;align-items:center;justify-content:center;
  padding:44px 32px}
.acceso-cuerpo{width:min(100%,384px)}
.acceso h2{margin:0 0 8px;font-size:26px;letter-spacing:-.02em}
.acceso-nota{margin:0 0 26px;color:var(--apagado);font-size:13px;line-height:1.55}

form{display:grid;gap:18px}
form label{display:grid;gap:7px;font-size:12px;font-weight:600;color:#4a4f5a}
form label small{font-weight:400;color:var(--apagado);font-size:11px;line-height:1.45}
input{width:100%;height:48px;border:1px solid #cbd0da;border-radius:10px;
  background:#f8f9fc;padding:0 14px;font-size:15px;color:var(--tinta);min-width:0}
input:focus{outline:0;border-color:#7d8ad0;background:#fff;
  box-shadow:0 0 0 3px #29389d1f}
input.codigo{letter-spacing:.5em;font-size:20px;font-weight:700;text-align:center}

/* Ver la contraseña se resuelve DENTRO del campo: un botón fuera desalinea la
   rejilla en cuanto el idioma cambia la longitud de la etiqueta. */
.campo-clave{position:relative;display:block}
.campo-clave input{padding-right:64px}
.campo-clave button{position:absolute;top:1px;right:1px;height:46px;padding:0 14px;
  border:0;border-radius:0 9px 9px 0;background:transparent;color:var(--indigo);
  font-size:12px;font-weight:700}
.campo-clave button:hover{background:#eef1ff}

.boton-principal{height:48px;border:0;border-radius:10px;background:var(--indigo);
  color:#fff;font-size:14px;font-weight:800;letter-spacing:.02em;
  box-shadow:0 3px 8px #15206433}
.boton-principal:hover{background:#1e2b86}
.boton-principal:disabled{opacity:.62;cursor:wait}

.enlace{display:block;width:100%;margin-top:20px;border:0;background:none;
  color:var(--indigo);font-size:13px;font-weight:700;padding:6px}
.enlace:hover{text-decoration:underline}

/* El mensaje ocupa sitio solo cuando dice algo: reservarlo siempre deja un
   hueco que se lee como un fallo de maquetación. */
.mensaje{font-size:12.5px;line-height:1.5;border-radius:9px}
.mensaje:not(:empty){padding:11px 13px}
.mensaje.error:not(:empty){color:var(--rojo);background:#fff0f1}
.mensaje.ok:not(:empty){color:var(--verde);background:#eaf8ee}

.pie{margin-top:36px;padding-top:18px;border-top:1px solid var(--linea);
  display:grid;gap:4px;color:#9aa0ab;font-size:11px;line-height:1.5}

button:focus-visible,input:focus-visible{outline:3px solid #75b9ff;outline-offset:2px}

/* ── Tableta ────────────────────────────────────────────────────────────── */
@media(max-width:1080px){
  .marca-cuerpo{padding:52px 40px}
  .entrada{grid-template-columns:minmax(0,1fr) minmax(380px,.9fr)}
}

/* ── Móvil ──────────────────────────────────────────────────────────────────
   Una columna, y la marca se reduce a una cabecera. En una pantalla de teléfono
   el panel completo empujaría el formulario fuera de la vista y obligaría a
   desplazarse para hacer lo único que se viene a hacer aquí. Se conserva el
   logotipo y el titular; la bajada y la lista de ámbitos se retiran porque en
   ese ancho son ruido, no contexto. */
@media(max-width:860px){
  .entrada{grid-template-columns:1fr;min-height:100dvh}
  .marca{align-items:flex-start}
  .marca::before,.marca::after{display:none}
  .marca-cuerpo{padding:26px 22px 30px;width:100%}
  .eyebrow{margin-bottom:16px;font-size:10px}
  .logotipo{margin-bottom:20px;gap:12px}
  .emblema{width:42px;height:42px;border-radius:12px;font-size:15px}
  .marca h1{font-size:23px;line-height:1.22;margin-bottom:0}
  .marca h1 br{display:none}
  .bajada,.ambitos{display:none}
  .acceso{padding:28px 22px 40px;align-items:flex-start}
  .acceso-cuerpo{width:100%;max-width:440px;margin:0 auto}
  /* 16 px es el mínimo que evita que iOS haga zoom al enfocar un campo, y ese
     zoom deja el formulario descuadrado y al usuario sin saber por qué. */
  input{height:50px;font-size:16px}
  .campo-clave button{height:48px}
  .boton-principal{height:50px}
}

@media(max-width:380px){
  .marca-cuerpo{padding:22px 16px 24px}
  .acceso{padding:24px 16px 32px}
  .marca h1{font-size:21px}
}

/* Pantallas muy bajas en horizontal -un teléfono girado-: la cabecera de marca
   se reduce a lo imprescindible para que el formulario siga entrando. */
@media(max-height:520px) and (orientation:landscape){
  .marca h1,.eyebrow{display:none}
  .marca-cuerpo{padding:16px 22px}
  .logotipo{margin-bottom:0}
}