/* Acceso CORE: composición de referencia con fotografía diurna real e
   ilustración nocturna identificada en docs/FOTOS-INTERFAZ.md. */
.login-shell {
  grid-template-columns: minmax(0, 64%) minmax(400px, 36%);
  background: #f7f5f1;
}
.brand-panel {
  padding: clamp(28px, 4.6vw, 72px) clamp(34px, 5.4vw, 88px) 44px;
  border: 0;
  background-image:
    linear-gradient(90deg, rgba(7, 8, 8, .76), rgba(7, 8, 8, .34) 60%, rgba(7, 8, 8, .05)),
    linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 36%),
    url("public/lima-costa-verde-dia.jpg");
  /* Variantes WebP (250 KB y 74 KB frente a 3,3 MB del original): la imagen es lo más pesado del acceso. */
  background-image:
    linear-gradient(90deg, rgba(7, 8, 8, .76), rgba(7, 8, 8, .34) 60%, rgba(7, 8, 8, .05)),
    linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 36%),
    image-set(url("public/lima-costa-verde-dia-1920.webp") type("image/webp"), url("public/lima-costa-verde-dia.jpg") type("image/jpeg"));
  background-position: center, center, 49% center;
  background-size: cover;
}
.brand-panel::before { display: none; }
.brand-header { justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap: 10px 28px; }
.brand-header .brand { gap: 0; min-height: 60px; }
.brand-header .brand-logo { width: 62px; height: 62px; margin-right: 21px; filter: invert(1); }
.brand-header .brand-name { font-size: clamp(21px, 2vw, 29px); letter-spacing: .29em; }
.brand-header .brand-product {
  margin-left: 20px;
  padding-left: 24px;
  border-left: 1px solid rgba(255,255,255,.75);
  color: #fff;
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 450;
  letter-spacing: .3em;
}
.brand-subtitle {
  flex-basis: 100%;
  margin-left: 83px;
  color: rgba(255,255,255,.8);
  font-size: 10px;
  letter-spacing: .26em;
}
.brand-message { margin: auto 0; padding: 6vh 0 7vh; }
.brand-message .eyebrow {
  position: relative;
  margin-bottom: 35px;
  padding-top: 32px;
  color: #e9e7e2;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .28em;
}
.brand-message .eyebrow::before { position: absolute; top: 0; left: 0; width: 55px; height: 3px; background: #e8c667; content: ""; }
.brand-message h1 {
  color: #fff;
  font-size: clamp(46px, 4.8vw, 74px);
  font-weight: 430;
  letter-spacing: -.055em;
  line-height: 1.02;
  text-shadow: 0 2px 14px rgba(0,0,0,.22);
}
.brand-message h1 span { color: #e8c667; }
.brand-copy { color: #f2f0ed; font-size: clamp(18px, 1.55vw, 25px); line-height: 1.34; }
.building-graphic { display: none; }
.brand-footer { color: #f1ece4; font-size: 12px; letter-spacing: .02em; }
.form-panel { padding-inline: clamp(40px, 5.2vw, 84px); background: #f7f5f1; }
.form-panel::before { display: none; }
.form-wrap { max-width: 425px; }
.form-heading .eyebrow {
  margin: 0 0 37px;
  padding-left: 11px;
  border-left: 2px solid #c8a548;
  color: #706b62;
  font-size: 12px;
  font-weight: 550;
  letter-spacing: .23em;
}
.form-heading h2 { color: #151515; font-size: clamp(34px, 3vw, 49px); font-weight: 450; letter-spacing: -.045em; }
.form-heading > p:last-child { margin-top: 13px; color: #5c5b57; font-size: 17px; }
.login-form { margin-top: 56px; }
.field-group + .field-group { margin-top: 29px; }
.form-panel .field-group label { color: #33322f; font-size: 14px; font-weight: 550; }
.field-control,
.field-control:focus-within {
  min-height: 63px;
  margin-top: 12px;
  border: 1px solid #c8c4ba;
  border-radius: 3px;
  background: rgba(255,255,255,.68);
  color: #68645c;
}
.field-control:focus-within { border-color: #9f8137; box-shadow: 0 0 0 3px rgba(204,171,82,.18); }
.field-control input { color: #151515; font-size: 15px; }
.form-panel .field-control input {
  height: auto;
  min-height: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.field-control input::placeholder { color: #737068; }
.remember-control { margin-top: 25px; color: #514d46; font-size: 14px; }
.remember-control input:checked + span { border-color: #d7b553; background: #d7b553; }
.submit-button,
.form-panel .submit-button {
  min-height: 68px;
  margin-top: 34px;
  border: 1px solid #d6b455;
  border-radius: 2px;
  background: #e8c667;
  color: #17140f;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: .14em;
}
.form-panel .submit-button:hover:not(:disabled) { border-color: #cda94d; background: #f2d887; }
.login-shell .form-panel .submit-button { border-color: #d6b455; background: #e8c667; color: #17140f; }
.login-shell .form-panel .submit-button:hover:not(:disabled) { border-color: #cda94d; background: #f2d887; }
/* «Acceso protegido · Uso interno»: gris un poco más oscuro (con #77736b, 4,3:1 sobre el panel). */
.form-footer { padding-top: 21px; border-top: 1px solid #ded9ce; color: #66625a; font-size: 11px; }
html[data-theme="dark"] .login-shell { background: #0a0a0a; }
html[data-theme="dark"] .brand-panel {
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, .18) 66%, transparent),
    linear-gradient(0deg, rgba(0, 0, 0, .5), transparent 34%),
    url("public/costa-verde-ilustracion-oscura.png");
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, .18) 66%, transparent),
    linear-gradient(0deg, rgba(0, 0, 0, .5), transparent 34%),
    image-set(url("public/costa-verde-ilustracion-oscura-1672.webp") type("image/webp"), url("public/costa-verde-ilustracion-oscura.png") type("image/png"));
  background-position: center, center, 48% center;
}
html[data-theme="dark"] .form-panel { background: #0a0a0a; }
html[data-theme="dark"] .form-heading .eyebrow { color: #a9a7a2; }
html[data-theme="dark"] .form-heading h2 { color: #f8f7f3; }
html[data-theme="dark"] .form-heading > p:last-child { color: #a9a7a2; }
html[data-theme="dark"] .form-panel .field-group label { color: #eeece8; }
html[data-theme="dark"] .field-control,
html[data-theme="dark"] .field-control:focus-within { border-color: #41413e; background: #111111; color: #b0aca5; }
html[data-theme="dark"] .field-control:focus-within { border-color: #d6b455; box-shadow: 0 0 0 3px rgba(214,180,85,.16); }
html[data-theme="dark"] .field-control input { color: #f8f7f3; }
html[data-theme="dark"] .form-panel .field-control input { border: 0; background: transparent; }
html[data-theme="dark"] .field-control input::placeholder { color: #9c9993; }
html[data-theme="dark"] .remember-control { color: #c9c6c0; }
html[data-theme="dark"] .form-footer { border-color: #292826; color: #8b8882; }

@media (max-width: 1050px) {
  .login-shell { grid-template-columns: minmax(0, 56%) minmax(390px, 44%); }
  /* Tableta: la marca y el lema quedan sobre el cielo claro de la foto (3,8–4,4:1); velo un poco más denso arriba y a
     la izquierda (FIX bloque 5). El celular tiene su propia regla más abajo. */
  .login-shell .brand-panel {
    background-image:
      linear-gradient(180deg, rgba(7, 8, 8, .5), transparent 42%),
      linear-gradient(90deg, rgba(7, 8, 8, .82), rgba(7, 8, 8, .44) 60%, rgba(7, 8, 8, .1)),
      linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 36%),
      image-set(url("public/lima-costa-verde-dia-1920.webp") type("image/webp"), url("public/lima-costa-verde-dia.jpg") type("image/jpeg"));
    background-position: center, center, center, 49% center;
  }
  .brand-subtitle { color: #fff; }
  .brand-message h1 { font-size: clamp(42px, 5vw, 60px); }
  .brand-subtitle { margin-left: 0; }
}
@media (max-width: 780px) {
  .login-shell { display: flex; flex-direction: column; overflow: visible; }
  .brand-panel { display: flex; min-height: 260px; max-height: none; padding: 22px 24px; }
  .brand-header { gap: 8px 14px; }
  .brand-header .brand { min-height: 40px; }
  .brand-header .brand-logo { width: 39px; height: 39px; margin-right: 10px; }
  .brand-header .brand-name { font-size: 18px; }
  .brand-header .brand-product { margin-left: 9px; padding-left: 10px; font-size: 13px; }
  .brand-subtitle { font-size: 9px; }
  .brand-message { padding: 18px 0 0; margin: auto 0 0; }
  .brand-message .eyebrow { display: none; }
  .brand-message h1 { font-size: clamp(24px, 6vw, 38px); line-height: 1.1; }
  .brand-message h1 br:nth-of-type(-n+3) { display: inline; }
  .brand-copy, .brand-footer, .mobile-brand { display: none; }
  .form-panel { flex: 1; min-height: calc(100svh - 260px); padding: 36px 24px 26px; }
  .form-wrap { margin: 0 auto; padding: 0 0 34px; }
  .form-heading .eyebrow { margin-bottom: 20px; }
  .form-heading h2 { font-size: clamp(30px, 7vw, 40px); }
  .login-form { margin-top: 32px; }
}
@media (max-width: 420px) {
  .brand-panel { min-height: 250px; }
  .form-panel { min-height: calc(100svh - 250px); padding-inline: 20px; }
  .brand-message h1 { font-size: 25px; }
  .field-control { min-height: 57px; }
  .submit-button, .form-panel .submit-button { min-height: 59px; }
}

/* Android touch areas use the entire row, while the visible affordance stays light. */
@media (max-width: 780px) {
  html { min-width: 0; }
  .login-shell, .login-shell .brand-panel, .login-shell .form-panel { width: 100%; min-width: 0; max-width: 100%; }
  .login-shell .password-toggle { width: 48px; height: 48px; flex-basis: 48px; margin-right: -8px; border-radius: 10px; }
  .login-shell .password-toggle:active { background: rgba(166, 129, 44, .15); }
  .login-shell .password-toggle:focus-visible { outline: 3px solid #a68130; outline-offset: 2px; }
  .login-shell .remember-control { min-height: 48px; align-items: center; padding-block: 10px; }
  .login-shell .remember-control > span { flex: 0 0 20px; width: 20px; height: 20px; }
  .login-shell .remember-control svg { width: 13px; }
  .login-shell .submit-button { width: 100%; }
}
@media (max-width: 420px) and (max-height: 700px) {
  .login-shell .brand-panel { min-height: 80px; padding-block: 12px; }
  .login-shell .brand-header .brand { min-height: 45px; }
  .login-shell .brand-subtitle,
  .login-shell .brand-message { display: none; }
  .login-shell .form-panel { min-height: calc(100svh - 80px); padding-top: 25px; }
  .login-shell .login-form { margin-top: 26px; }
  .login-shell .field-group + .field-group { margin-top: 20px; }
  .login-shell .submit-button { margin-top: 24px; }
}

/* ---------- FIX bloque 11: fidelidad a la ref. 01 ---------- */
/* «UN SOLO ECOSISTEMA» en gris claro también en el tema oscuro (una hoja antigua lo teñía de dorado). */
html[data-theme="dark"] .brand-message .eyebrow { color: #e9e7e2; }
.brand-header .brand { cursor: default; }
/* «PORTAL INTERNO»: el filete dorado sube por encima del texto, como en la ref. 01. */
.form-heading .eyebrow { padding-top: 30px; line-height: 1.2; }
/* Ícono de cada campo en su propia celda con divisor (ref. 01). */
.login-shell .field-control { padding-left: 0; }
.login-shell .field-icon { display: grid; flex: 0 0 auto; align-self: stretch; width: 58px; margin-right: 17px; place-items: center; border-right: 1px solid #d6d1c7; }
.login-shell .field-icon svg { width: 20px; height: 20px; }
html[data-theme="dark"] .login-shell .field-icon { border-right-color: #34332f; }
/* Ojo tachado mientras la clave está oculta y abierto cuando se muestra (ref. 01). */
.login-shell .password-toggle .eye-open { display: none; }
.login-shell .password-toggle .eye-closed { display: block; }
.login-shell .password-toggle.is-visible .eye-open { display: block; }
.login-shell .password-toggle.is-visible .eye-closed { display: none; }
/* Mensajes legibles en ambos temas (contraste AA sobre su panel). */
.login-shell .form-message { font-size: 13px; }
.login-shell .form-message[data-state="error"] { color: #a3261b; }
.login-shell .form-message[data-state="success"] { color: #1f6a45; }
.login-shell .form-message[data-state="info"] { color: #6b4f12; }
html[data-theme="dark"] .login-shell .form-message[data-state="error"] { color: #ff9f94; }
html[data-theme="dark"] .login-shell .form-message[data-state="success"] { color: #8fdcb2; }
html[data-theme="dark"] .login-shell .form-message[data-state="info"] { color: #ecd28a; }
.remembered-account { margin: 4px 0 0; color: #5c5b57; font-size: 13px; }
html[data-theme="dark"] .remembered-account { color: #a9a7a2; }
.remembered-account button { padding: 6px 2px; border: 0; background: none; color: #8a6a2b; font: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
html[data-theme="dark"] .remembered-account button { color: #e8c667; }
@media (max-width: 780px) {
  .login-shell .brand-panel {
    background-image:
      linear-gradient(180deg, rgba(7, 8, 8, .5), transparent 42%),
      linear-gradient(90deg, rgba(7, 8, 8, .82), rgba(7, 8, 8, .44) 60%, rgba(7, 8, 8, .1)),
      linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 36%),
      image-set(url("public/lima-costa-verde-dia-960.webp") type("image/webp"), url("public/lima-costa-verde-dia.jpg") type("image/jpeg"));
    background-position: center, center, center, 49% center;
  }
  html[data-theme="dark"] .login-shell .brand-panel {
    background-image:
      linear-gradient(90deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, .18) 66%, transparent),
      linear-gradient(0deg, rgba(0, 0, 0, .5), transparent 34%),
      image-set(url("public/costa-verde-ilustracion-oscura-960.webp") type("image/webp"), url("public/costa-verde-ilustracion-oscura.png") type("image/png"));
  }
  .login-shell .field-icon { width: 50px; margin-right: 14px; }
  .form-heading .eyebrow { padding-top: 18px; }
}