@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root {
  --login-petrol:#073d43;
  --login-petrol-dark:#05383f;
  --login-lime:#55b20b;
  --login-lime-dark:#438f0a;
  --login-text:#103b3e;
  --login-muted:#597570;
  --login-border:#d7e5da;
}
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--login-text); }
.login-body-pro { min-height:100dvh; background:#f4f8f4; }
.login-shell-pro { display:grid; grid-template-columns:minmax(0,59fr) minmax(440px,41fr); min-height:100dvh; }
/* FIX03: portada aprobada — 2 paneles reales (hero integrado + formulario).
   La fotografía es parte del fondo del hero: no hay columna central. */
.login-brand-pro {
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  min-width:0;
  min-height:100dvh;
  overflow:hidden;
  background:var(--login-petrol-dark);
  color:#fff;
}
.login-hero-photo {
  position:absolute;
  inset:0 0 0 auto;
  width:63%;
  height:100%;
  min-height:100%;
  z-index:-2;
  background:url('../img/login-cafeteria-generica.webp') center center / cover no-repeat;
}
.login-brand-pro::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,
    #063a40 0%,
    rgba(6,58,64,.99) 25%,
    rgba(6,58,64,.95) 37%,
    rgba(6,58,64,.73) 51%,
    rgba(6,58,64,.20) 69%,
    rgba(6,58,64,0) 88%);
}
.brand-box {
  position:relative;
  z-index:1;
  width:min(62%,630px);
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(24px,3.5vw,58px);
  background:transparent;
}
.brand-logo-wrap {
  display:inline-flex;
  gap:12px;
  align-items:center;
  width:max-content;
  max-width:100%;
  min-height:64px;
  padding:8px 12px;
  border-radius:13px;
  background:rgba(2,43,48,.6);
  border:1px solid rgba(202,255,224,.25);
  box-shadow:0 8px 30px rgba(0,0,0,.1);
}
.brand-logo-wrap img {
  display:block;
  flex:0 0 auto;
  max-width:min(170px,42%);
  width:auto;
  height:auto;
  max-height:55px;
  object-fit:contain;
  border-radius:8px;
  background:#fff;
  padding:5px;
}
.brand-identity { display:flex; flex-direction:column; gap:4px; min-width:0; }
.brand-identity strong { font-size:clamp(17px,1.7vw,26px); font-weight:900; line-height:1.1; overflow-wrap:anywhere; }
.brand-identity small { color:#a1d7bb; font-size:11px; font-weight:800; letter-spacing:.12em; }
.brand-fallback { display:inline-grid; place-items:center; flex:0 0 48px; width:48px; height:48px; background:#fff; color:#187944; font-weight:900; font-size:30px; border-radius:10px; }
[hidden] { display:none!important; }
.brand-box>span {
  display:block;
  color:#a6ed71;
  margin-top:clamp(28px,5vh,50px);
  text-transform:uppercase;
  font-weight:900;
  font-size:12px;
  letter-spacing:.1em;
}
.brand-box h1 {
  max-width:560px;
  margin:13px 0 16px;
  font-size:clamp(30px,3vw,49px);
  line-height:1.08;
  font-weight:900;
  letter-spacing:-.042em;
  text-wrap:balance;
}
.brand-box h1 em { font-style:normal; color:#aeef78; }
.brand-box p { max-width:530px; margin:0; color:#ecf9f1; font-size:clamp(13px,1.08vw,17px); line-height:1.55; font-weight:500; }
.brand-list { margin-top:clamp(22px,4vh,35px); display:grid; grid-template-columns:1fr 1fr; column-gap:18px; row-gap:18px; }
.brand-list div { display:flex; align-items:center; gap:12px; color:#f9fff9; font-size:12px; line-height:1.25; font-weight:700; min-width:0; }
.brand-list div>span { display:flex; flex-direction:column; gap:4px; }
.brand-list div strong { font-size:12px; font-weight:800; }
.brand-list div small { font-size:11px; font-weight:500; color:#d6eee4; }
.brand-list i { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(166,236,112,.45); border-radius:10px; flex:0 0 42px; color:#b1f578; background:rgba(3,75,70,.73); font-size:20px; }
/* Solid background; neither decorative gradients nor translucent circles. */
.login-form-side { position:relative; background:#f4f8f4; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100dvh; padding:35px 35px 60px; }
.login-form-side:before,.login-form-side:after { content:none!important; display:none!important; }
.login-card-pro { width:450px; max-width:100%; background:#fff; border:1px solid #e0ebe4; border-radius:22px; padding:33px 34px; box-shadow:0 18px 45px rgba(5,69,53,.10); }
.login-mobile-logo { display:none; text-align:center; margin-bottom:20px; }
.login-mobile-logo img { max-height:61px; max-width:180px; object-fit:contain; }
.login-mobile-logo .brand-fallback { margin-inline:auto; }
.login-title small { display:inline-block; margin-bottom:13px; padding:6px 12px; border-radius:99px; color:#38832c; background:#ecf8e8; font-weight:850; font-size:11px; text-transform:uppercase; }
.login-title h2 { margin:0; color:#073d43; font-size:31px; line-height:1.13; font-weight:900; letter-spacing:-.035em; }
.login-title p { margin:9px 0 23px; color:#5e7971; font-size:13px; line-height:1.5; }
.login-alert { display:flex; gap:8px; margin-bottom:16px; padding:12px; font-size:13px; font-weight:700; border-radius:10px; }
.login-alert.error { color:#a72a2a; background:#fff0ef; border:1px solid #f6cfcb; }
.login-form-pro { display:grid; gap:14px; }
.login-form-pro label { display:grid; gap:6px; }
.login-form-pro label>span { font-size:12px; color:#173f3d; font-weight:800; }
.field-box { display:flex; align-items:center; gap:10px; height:44px; padding:0 12px; border:1px solid var(--login-border); border-radius:10px; background:#fff; }
.field-box:focus-within { border-color:#74bd50; box-shadow:0 0 0 3px rgba(97,191,48,.14); }
.field-box>i { color:#4ca713; font-size:15px; }
.field-box input { min-width:0; flex:1; border:0; outline:0; background:transparent; font:600 13px Inter,system-ui,sans-serif; color:#183f3f; }
.field-box input::placeholder { color:#98a9a3; }
.field-box button { border:0; background:transparent; height:30px; width:30px; border-radius:7px; cursor:pointer; }
.field-box button:hover { background:#f0f7f0; }
.field-box button i { color:#587977; }
.login-options-pro { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; }
.login-options-pro label { display:flex; align-items:center; gap:8px; font-weight:700; white-space:nowrap; }
.login-options-pro input { width:16px; height:16px; accent-color:#49a719; }
.login-options-pro a { color:#39900b; font-weight:700; text-decoration:none; white-space:nowrap; }
.login-options-pro a:hover { text-decoration:underline; }
.login-submit-pro { display:flex; align-items:center; justify-content:center; gap:12px; height:46px; border:0; border-radius:10px; background:#50aa10; color:#fff; font:850 14px Inter,system-ui,sans-serif; cursor:pointer; box-shadow:0 9px 20px rgba(53,152,17,.13); }
.login-submit-pro:hover { background:#39890c; }
.login-submit-pro:focus-visible,.field-box button:focus-visible { outline:3px solid #80c96a; outline-offset:2px; }
.security-note { display:flex; align-items:center; gap:9px; margin-top:16px; padding:11px 12px; border:1px solid #e6f0e7; border-radius:10px; background:#f6faf5; color:#4f7363; font-weight:700; font-size:11px; }
.security-note i { color:#49aa18; }
.login-form-side footer { display:flex; justify-content:space-between; position:absolute; bottom:18px; left:42px; right:42px; gap:15px; color:#80948d; font-size:11px; font-weight:800; }
@media (min-width:1101px) and (max-height:760px) {
  .brand-box { padding-block:20px; }
  .brand-box>span { margin-top:16px; }
  .brand-box h1 { font-size:clamp(27px,2.55vw,39px); margin-block:9px; }
  .brand-list { margin-top:14px; row-gap:10px; }
  .brand-list i { width:35px; height:35px; flex-basis:35px; font-size:16px; }
}
@media (min-width:1101px) and (max-width:1380px) {
  .login-shell-pro { grid-template-columns:minmax(0,59fr) minmax(420px,41fr); }
  .brand-box { width:70%; padding:clamp(22px,2.8vw,38px); }
  .brand-box h1 { font-size:clamp(27px,2.7vw,38px); }
  .brand-list { gap:12px 9px; }
  .brand-list div strong { font-size:11px; }
  .brand-list div small { font-size:10px; }
}
@media (max-width:1100px) {
  .login-shell-pro { grid-template-columns:1fr; }
  .login-brand-pro { display:none; }
  .login-form-side { min-height:100dvh; }
  .login-mobile-logo { display:block; }
}
@media (max-width:560px) {
  .login-form-side { padding:22px 16px 18px; justify-content:center; }
  .login-card-pro { padding:25px 20px; border-radius:17px; }
  .login-title h2 { font-size:27px; }
  .login-options-pro { gap:10px; flex-wrap:wrap; }
  .login-form-side footer { position:static; margin-top:20px; gap:6px; flex-direction:column; align-items:center; }
}