:root{
  --ci-primary:#0b5f93;
  --ci-primary-dark:#08466d;
  --ci-primary-soft:#eaf5fb;
  --ci-ink:#12283a;
  --ci-muted:#667887;
  --ci-line:#d8e3ea;
  --ci-surface:#fff;
  --ci-soft:#f5f9fb;
  --ci-success:#15835a;
  --ci-danger:#a9343e;
  --ci-radius:22px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#f5f8fa;color:var(--ci-ink);font-family:"Open Sans",Arial,sans-serif}
body.compras-index-template{background:radial-gradient(circle at 78% 12%,rgba(21,131,90,.06),transparent 26%),radial-gradient(circle at 8% 88%,rgba(11,95,147,.07),transparent 32%),#f7fafb}
a{color:var(--ci-primary)}
.compras-index-main{min-height:100vh;padding:30px 28px}
.compras-index-app{width:min(1180px,100%);margin:0 auto;display:flex;min-height:calc(100vh - 60px);flex-direction:column}
.compras-index-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:5px 4px 28px}
.compras-index-logo{display:inline-flex;align-items:center;text-decoration:none}
.compras-index-logo img{display:block;width:190px;max-width:42vw;height:auto}
.compras-index-logout-top{display:inline-flex;align-items:center;gap:8px;color:var(--ci-muted);font-weight:700;text-decoration:none;padding:10px 12px;border-radius:10px}
.compras-index-logout-top:hover{background:#fff;color:var(--ci-primary)}
.compras-index-logout-top svg,.compras-index-btn svg,.compras-index-field svg,.compras-index-feature-icon svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.compras-index-logout-top svg{width:18px;height:18px}
.compras-index-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(380px,.72fr);gap:44px;align-items:center;flex:1;padding:24px 0 44px}
.compras-index-hero{padding:24px 12px 24px 6px;max-width:680px}
.compras-index-eyebrow,.compras-index-session-badge{display:inline-block;font-size:12px;line-height:1.2;font-weight:800;letter-spacing:.11em;color:var(--ci-primary);text-transform:uppercase}
.compras-index-hero h1{margin:16px 0 18px;font-size:clamp(40px,5vw,68px);line-height:1.02;letter-spacing:-.045em;color:#092d46;max-width:700px}
.compras-index-lead{margin:0;color:#4c6171;font-size:18px;line-height:1.65;max-width:650px}
.compras-index-features{display:grid;grid-template-columns:1fr;gap:14px;margin-top:34px;max-width:610px}
.compras-index-features>div{display:flex;gap:14px;align-items:flex-start;padding:14px 0}
.compras-index-feature-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:13px;background:var(--ci-primary-soft);color:var(--ci-primary-dark)}
.compras-index-feature-icon svg{width:21px;height:21px}
.compras-index-features strong,.compras-index-features small{display:block}
.compras-index-features strong{font-size:15px;margin-bottom:3px;color:#173247}
.compras-index-features small{font-size:13px;line-height:1.5;color:var(--ci-muted)}
.compras-index-access{background:rgba(255,255,255,.96);border:1px solid var(--ci-line);border-radius:var(--ci-radius);box-shadow:0 24px 70px rgba(20,55,78,.12);padding:34px 34px 30px;min-width:0}
.compras-index-access h2{margin:9px 0 8px;color:#102f45;font-size:28px;letter-spacing:-.025em}
.compras-index-access-copy{margin:0 0 24px;color:var(--ci-muted);font-size:14px;line-height:1.6}
.compras-index-form{display:grid;gap:18px}
.compras-index-form>label>span:first-child{display:block;margin-bottom:7px;font-size:13px;font-weight:700;color:#223e51}
.compras-index-field{display:flex;align-items:center;gap:10px;border:1px solid #bdced9;border-radius:12px;background:#fff;min-height:50px;padding:0 14px;transition:border-color .15s,box-shadow .15s}
.compras-index-field:focus-within{border-color:var(--ci-primary);box-shadow:0 0 0 3px rgba(11,95,147,.1)}
.compras-index-field svg{width:18px;height:18px;color:#708493;flex:0 0 auto}
.compras-index-field input{width:100%;border:0!important;box-shadow:none!important;outline:0!important;background:transparent!important;font:600 15px/1.3 "Open Sans",Arial,sans-serif;color:var(--ci-ink);padding:13px 0!important;min-height:0!important}
.compras-index-field input::placeholder{color:#9aabb6;font-weight:400}
.compras-index-form-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:12px}
.compras-index-form-meta a{font-weight:700;text-decoration:none}
.compras-index-form-meta a:hover{text-decoration:underline}
.compras-index-remember{display:inline-flex!important;align-items:center;gap:8px;color:#526876;cursor:pointer}
.compras-index-remember input{width:16px;height:16px;margin:0;accent-color:var(--ci-primary)}
.compras-index-btn{min-height:48px;border-radius:12px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;font:700 14px/1 "Open Sans",Arial,sans-serif;border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s,transform .15s}
.compras-index-btn svg{width:18px;height:18px}
.compras-index-btn-primary{background:var(--ci-primary);color:#fff;border-color:var(--ci-primary);box-shadow:0 8px 20px rgba(11,95,147,.18)}
.compras-index-btn-primary:hover{background:var(--ci-primary-dark);border-color:var(--ci-primary-dark);color:#fff;transform:translateY(-1px)}
.compras-index-btn-secondary{background:#fff;color:#405866;border-color:var(--ci-line)}
.compras-index-btn-secondary:hover{border-color:#a8becb;color:var(--ci-primary);background:#f9fcfd}
.compras-index-submit{width:100%;margin-top:2px}
.compras-index-help{margin:18px 0 0;padding-top:18px;border-top:1px solid #edf1f4;color:#83939d;text-align:center;font-size:11px;line-height:1.5}
.compras-index-error{padding:11px 13px;margin:0 0 18px;border:1px solid #efc2c6;background:#fff2f3;color:var(--ci-danger);border-radius:10px;font-size:13px;line-height:1.45}
.compras-index-user{display:flex;align-items:center;gap:14px;margin:18px 0 14px;padding:16px;border-radius:15px;background:var(--ci-soft);border:1px solid #e3ebf0}
.compras-index-avatar{width:48px;height:48px;border-radius:14px;background:var(--ci-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;letter-spacing:.02em;flex:0 0 auto}
.compras-index-user h2{font-size:18px;margin:0 0 3px}.compras-index-user p{margin:0;color:var(--ci-muted);font-size:12px;overflow-wrap:anywhere}
.compras-index-session-actions{display:grid;gap:10px}
.compras-index-footer{display:flex;justify-content:space-between;gap:20px;padding:24px 4px 8px;border-top:1px solid rgba(190,205,214,.65);color:#8a9aa4;font-size:11px}
.compras-index-btn:focus-visible,.compras-index-form a:focus-visible,.compras-index-logout-top:focus-visible{outline:3px solid rgba(11,95,147,.2);outline-offset:2px}
@media(max-width:900px){
  .compras-index-main{padding:24px 20px}.compras-index-grid{grid-template-columns:1fr;gap:24px;padding-top:0}.compras-index-hero{padding:10px 4px 14px;max-width:none}.compras-index-hero h1{font-size:clamp(38px,8vw,58px)}.compras-index-access{width:min(520px,100%);justify-self:center}
}
@media(max-width:560px){
  .compras-index-main{padding:18px 14px}.compras-index-app{min-height:calc(100vh - 36px)}.compras-index-topbar{padding-bottom:18px}.compras-index-logo img{width:150px}.compras-index-logout-top span{display:none}.compras-index-grid{padding-bottom:26px}.compras-index-hero h1{font-size:39px}.compras-index-lead{font-size:16px}.compras-index-features{margin-top:22px}.compras-index-access{padding:26px 20px;border-radius:18px}.compras-index-form-meta{align-items:flex-start;flex-direction:column}.compras-index-footer{flex-direction:column;gap:5px}
}
@media(prefers-reduced-motion:reduce){.compras-index-btn,.compras-index-field{transition:none!important}}

.compras-google-login{display:grid;gap:10px;justify-items:center;margin:0 0 4px}.compras-google-login .g_id_signin{width:100%;display:flex;justify-content:center;min-height:44px}.compras-google-help{margin:0!important;text-align:center;color:var(--ci-muted);font-size:11px;line-height:1.5}.compras-login-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:#8a9aa4;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.compras-login-divider:before,.compras-login-divider:after{content:"";height:1px;background:#e3eaf0;flex:1}.compras-login-divider span{white-space:nowrap}.compras-google-login iframe{max-width:100%!important}