@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --navy:#064f5b;
  --navy-deep:#053e47;
  --teal:#0b6672;
  --teal-deep:#075c68;
  --teal-light:#5fd4dc;
  --primary-light:#e8f3f4;
  --page:#f8fafc;
  --text:#15343b;
  --muted:#667c82;
  --shadow:0 2px 8px rgba(15,55,70,.05);
  --radius:12px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text)}
body{overflow-x:hidden}

/* ── Layout em duas colunas (100vw x 100vh) ──────────────────── */
.login-page{
  width:100vw;min-height:100vh;
  display:flex;
}

/* ── Esquerda: painel institucional com foto ──────────────────── */
.login-visual{
  position:relative;
  flex:1 1 60%;
  min-width:0;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:44px 56px;
  color:#fff;
  overflow:hidden;
  background-image:
    linear-gradient(100deg, rgba(6,79,91,.95) 0%, rgba(7,92,104,.84) 45%, rgba(7,92,104,.38) 100%),
    url("/static/img/login-hospital.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.login-visual-pattern{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.login-visual-brand{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.login-visual-logo{
  width:46px;height:46px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--teal);color:#fff;
}
.login-visual-logo svg{width:24px;height:24px}
.login-visual-brand span{font-weight:800;line-height:1.2;font-size:15px}

.login-visual-content{position:relative;z-index:1;max-width:540px}
.login-visual-rule{display:block;width:40px;height:3px;border-radius:2px;background:var(--teal-light);margin-bottom:18px}
.login-visual-title{font-size:clamp(28px,3.4vw,44px);font-weight:900;line-height:1.18;letter-spacing:-.01em}
.login-visual-title em{font-style:normal;color:var(--teal-light)}
.login-visual-subtitle{margin-top:16px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.82);max-width:460px}

.login-benefits{list-style:none;display:flex;flex-direction:column;gap:16px;margin-top:34px}
.login-benefits li{display:flex;align-items:flex-start;gap:14px}
.login-benefit-icon{
  width:40px;height:40px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:15px;
}
.login-benefits strong{display:block;font-size:14.5px;font-weight:700;color:#fff}
.login-benefits span{display:block;font-size:13px;color:rgba(255,255,255,.72);margin-top:2px;line-height:1.4}

/* ── Direita: área de autenticação ───────────────────────────── */
.login-auth{
  flex:1 1 40%;
  min-width:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--page);
  padding:32px;
}

/* ── Card ─────────────────────────────────────────────────── */
.card{
  width:480px;
  max-width:calc(100% - 0px);
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  box-shadow:0 1px 3px rgba(15,55,70,.04),0 18px 40px rgba(15,55,70,.08);
  overflow:hidden;
}

/* ── Card head ────────────────────────────────────────────── */
.head{
  display:flex;flex-direction:column;align-items:center;
  gap:10px;
  padding:36px 36px 24px;
  background:#fbfdfd;
  border-bottom:1px solid rgba(23,63,71,.10);
  text-align:center;
}

.brand{display:flex;flex-direction:column;align-items:center;gap:14px}
.logo-icon{
  position:relative;
  width:64px;height:64px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:var(--teal);
  color:#fff;
}
.logo-icon svg{width:34px;height:34px;position:relative;z-index:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.12))}

.logo-pulse{
  position:absolute;inset:0;border-radius:20px;
  border:1px solid rgba(11,102,114,.55);
  animation:pulse-ring 2.4s cubic-bezier(.4,0,.3,1) infinite;
}
@keyframes pulse-ring{
  0%{transform:scale(1);opacity:.65}
  70%{transform:scale(1.35);opacity:0}
  100%{transform:scale(1.35);opacity:0}
}

.eyebrow{
  font-size:10px;font-weight:800;
  letter-spacing:.14em;color:var(--teal);
  text-transform:uppercase;margin-top:4px;
}
.title{font-size:20px;font-weight:1000;color:var(--navy);line-height:1.2;margin-top:2px}
.subtitle{font-size:13px;color:var(--muted);font-weight:600;margin-top:2px}

/* ── Card body ────────────────────────────────────────────── */
.body{padding:26px 32px 30px}

/* ── Alerts ───────────────────────────────────────────────── */
.alert{
  display:flex;align-items:center;gap:9px;
  padding:12px 14px;border-radius:10px;
  font-size:13px;font-weight:700;
  margin-bottom:18px;
}
.alert i{font-size:14px;flex-shrink:0}
.alert--error{background:rgba(181,71,71,.08);border:1px solid rgba(181,71,71,.18);color:#8a2f2f}
.alert--success{background:rgba(11,102,114,.10);border:1px solid rgba(11,102,114,.20);color:var(--navy)}
.alert--info{background:rgba(11,102,114,.08);border:1px solid rgba(11,102,114,.16);color:var(--navy)}

/* ── Form ─────────────────────────────────────────────────── */
.form-group{margin-bottom:16px}
.form-group label{
  display:block;margin-bottom:7px;
  font-size:12px;font-weight:800;
  color:var(--navy);letter-spacing:.02em;
}

.input{
  display:flex;align-items:center;
  height:52px;
  background:rgba(255,255,255,.95);
  border:1px solid #dbe3e8;
  border-radius:11px;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.input:focus-within{
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(11,102,114,.14);
  background:#fff;
}

.icon{
  display:flex;align-items:center;justify-content:center;
  width:46px;flex-shrink:0;color:rgba(23,63,71,.45);
}
.icon svg{width:16px;height:16px}

.input input{
  flex:1;min-width:0;height:100%;
  border:0;outline:0;background:transparent;
  padding:0 4px;
  color:var(--text);font:inherit;font-size:14px;font-weight:500;
}
.input input::placeholder{color:rgba(23,63,71,.38);font-weight:400}

/* password toggle button */
.toggle{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;margin-right:4px;flex-shrink:0;
  border:0;background:transparent;
  color:rgba(23,63,71,.45);cursor:pointer;border-radius:10px;
  transition:color .15s,background .15s;
}
.toggle:hover{color:var(--teal);background:rgba(11,102,114,.08)}
.toggle:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.toggle svg{width:17px;height:17px}

/* ── Submit button ────────────────────────────────────────── */
.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;height:54px;margin-top:10px;
  border:0;border-radius:11px;
  background:linear-gradient(135deg,#087c86,#0098a5);
  color:#fff;font:700 14.5px/1 Inter,system-ui,sans-serif;
  cursor:pointer;letter-spacing:.02em;
  transition:filter .15s,transform .15s;
}
.btn i{font-size:14px}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid rgba(11,102,114,.30);outline-offset:3px}

/* ── Footer ───────────────────────────────────────────────── */
.foot{
  margin-top:24px;
  text-align:center;
  display:flex;flex-direction:column;gap:4px;
}
.foot strong{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--muted)}
.foot span{font-size:11px;color:var(--muted);font-weight:600}

/* ── Responsive ───────────────────────────────────────────── */

/* telas curtas (ex.: 1366x768) — comprime espaçamentos verticais sem cortar conteúdo */
@media(max-height:820px){
  .login-visual{padding:28px 48px}
  .login-benefits{margin-top:20px;gap:12px}
  .login-visual-subtitle{margin-top:10px}
  .head{padding:26px 36px 18px}
  .body{padding:20px 32px 24px}
  .logo-icon{width:56px;height:56px}
  .logo-icon svg{width:28px;height:28px}
  .input{height:48px}
  .btn{height:50px}
}

/* tablet — proporção mais equilibrada entre imagem e login */
@media(max-width:1080px){
  .login-visual{flex:1 1 50%;padding:36px 40px}
  .login-auth{flex:1 1 50%;padding:24px}
  .login-benefits{display:none}
  .login-visual-subtitle{display:none}
  .card{width:420px}
}

/* mobile — uma coluna só; a foto vira um cabeçalho curto e decorativo */
@media(max-width:760px){
  .login-page{display:block;min-height:100vh}
  .login-visual{
    flex:none;min-height:0;height:168px;
    padding:20px 22px;flex-direction:row;align-items:center;justify-content:flex-start;
  }
  .login-visual-content{display:none}
  .login-auth{padding:22px 16px 32px;min-height:calc(100vh - 168px)}
  .card{width:100%;max-width:440px;border-radius:16px}
  .head{padding:30px 22px 20px}
  .body{padding:22px 22px 26px}
  .logo-icon{width:60px;height:60px;border-radius:14px}
  .logo-icon svg{width:30px;height:30px}
  .title{font-size:18px}
}
@media(max-width:360px){
  .head{padding:24px 16px 18px}
  .body{padding:18px 16px 22px}
}