/* login.css — diseño del login de red (192.168.60.167) trasladado a reporteria.ohgs.cl (2026-10-06).
   Extraído de red/static/css/portal.css: solo las reglas del login (sin las del cotizador ni las tablas).
   La foto de fondo es edificio.jpg (misma carpeta). Tipografía final del portal: Segoe UI. */
:root { --navy-900:#08163E; --navy-700:#152662; --blue-500:#006BB4; --blue-400:#2594E6; --sky-300:#6DD0FF; --red:#ED143D; --green:#1f9d55; --ink:#2B2F38; --muted:#555B66; --line:#D2D9E3; --paper:#FFFFFF; --bg:#E6EBF2; --bg-soft:#EEF2F8; }
* { box-sizing:border-box;margin:0;padding:0 }
body { font-family:"Poppins",system-ui,Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased }
a { color:inherit;text-decoration:none }
.inp { display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:11px; padding:0 14px;background:#fff;transition:border-color .15s,box-shadow .15s }
.inp:focus-within { border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(0,107,180,.12) }
.inp svg { flex:0 0 18px;width:18px;height:18px;color:#9aa3b2 }
.inp input { border:0;outline:0;padding:13px 0;font-family:inherit;font-size:14px;color:var(--ink);width:100%;background:transparent }
.inp input::placeholder { color:#a7aebb }
.btn { border:0;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;color:#fff; background:var(--blue-500);border-radius:11px;padding:13px 20px; display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:background .15s,transform .05s;white-space:nowrap }
.btn:hover { background:var(--navy-700) }
.btn:active { transform:translateY(1px) }
.btn svg { width:17px;height:17px }
.btn.block { width:100%;font-size:15px;padding:15px 18px }
.btn:disabled { opacity:.5;cursor:not-allowed }
body.login { background:var(--navy-900);min-height:100vh;display:flex;flex-direction:column }
.stage { position:relative;flex:1;display:flex;flex-direction:column;overflow:hidden }
.stage::before { content:"";position:absolute;inset:0;z-index:0; background:url("edificio.jpg") center/cover no-repeat }
.stage::after { content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,rgba(8,22,62,.72) 0%,rgba(8,22,62,.38) 42%,rgba(8,22,62,.30) 62%,rgba(8,22,62,.66) 100%) }
.topbar { position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between; padding:16px 40px;background:var(--navy-900);border-bottom:1px solid rgba(255,255,255,.08) }
.brand { display:flex;align-items:center;gap:16px }
.brand .logo { font-weight:800;font-size:22px;letter-spacing:.3px;color:#fff;line-height:1 }
.brand .logo b { color:var(--sky-300);font-weight:800 }
.brand .div { width:1px;height:30px;background:rgba(255,255,255,.18) }
.brand .sub { color:#fff;line-height:1.15 }
.brand .sub .t1 { font-weight:600;font-size:14px }
.brand .sub .t2 { font-size:11px;letter-spacing:2px;color:#9fb0d6;text-transform:uppercase }
.top-right { display:flex;align-items:center;gap:22px }
.support { font-size:13px;color:#9fb0d6 }
.support a { color:var(--sky-300);font-weight:500 }
.split { position:relative;z-index:3;flex:1;display:grid;grid-template-columns:minmax(360px,460px) 1fr; align-items:center;gap:48px;padding:48px 40px;max-width:1440px;margin:0 auto;width:100% }
.card { background:var(--paper);border-radius:18px;padding:40px 40px 30px; box-shadow:0 24px 60px rgba(6,14,40,.45);position:relative;overflow:hidden }
.card::before { content:"";position:absolute;top:0;left:0;right:0;height:5px; background:linear-gradient(90deg,var(--blue-500),var(--blue-400),var(--sky-300)) }
.eyebrow { font-size:12px;font-weight:600;letter-spacing:2px;color:var(--blue-500);text-transform:uppercase;margin-bottom:14px }
.card h1 { font-size:30px;font-weight:700;line-height:1.15;color:var(--navy-900);margin-bottom:12px }
.card h1 span { color:var(--blue-500) }
.card .lead { font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:26px }
.field { margin-bottom:18px }
.field .row { display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px }
.field label { font-size:13px;font-weight:600;color:var(--navy-700) }
.note { text-align:center;font-size:12px;color:#98a0ad;margin-top:18px }
.alert { display:flex;align-items:center;gap:9px;background:rgba(237,20,61,.08);border:1px solid rgba(237,20,61,.28); color:#b3102f;border-radius:11px;padding:12px 14px;font-size:13px;font-weight:500;margin-bottom:20px }
.alert svg { width:18px;height:18px;flex:0 0 18px }
.hero { color:#fff;max-width:620px }
.hero .eyebrow { color:var(--sky-300) }
.hero h2 { font-size:52px;line-height:1.05;font-weight:800;letter-spacing:-1px;margin-bottom:22px }
.hero p { font-size:16px;line-height:1.7;color:#dbe3f2;max-width:560px }
.hero p b { color:#fff;font-weight:600 }
.chips { display:flex;flex-wrap:wrap;gap:10px;margin-top:26px }
.chip { display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:#eaf1ff; background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 15px }
.chip .dot { width:7px;height:7px;border-radius:50%;background:var(--sky-300) }
.foot { position:relative;z-index:3;display:flex;justify-content:space-between; padding:14px 40px;background:var(--navy-900);border-top:1px solid rgba(255,255,255,.08); font-size:12px;color:#8493b5 }
@media (max-width:980px) {
  .split { grid-template-columns:1fr;gap:34px;padding:40px 22px }
  .hero { order:-1;max-width:none }
  .hero h2 { font-size:36px }
  .topbar { padding:14px 20px;flex-wrap:wrap;gap:10px }
  .support { display:none }
  .foot { padding:14px 20px;flex-direction:column;gap:4px;align-items:center }
  .card { padding:30px 24px 24px }
}
@media (max-width:640px) {
  .btn { padding:12px 18px }
}
body { font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif }
.inp { border-width:1px;border-radius:8px;padding:0 10px }
.inp input { padding:8px 0;font-size:13px }
.btn { font-size:13px;border-radius:8px;padding:9px 18px }
.btn.block { font-size:14px;padding:12px 16px }
@media (max-width:640px) {
  .btn { padding:12px 18px }
}