/* 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");
  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; }
.form-footer { padding-top: 21px; border-top: 1px solid #ded9ce; color: #77736b; 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-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%); }
  .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; }
}