:root{
  --navy:#0B2942; --blue:#1E88C7; --bg:#F5F8FA; --panel:#FFFFFF;
  --border:#D9E2E9; --text:#182430; --muted:#5B6B7A;
  --good:#2E7D5A; --good-bg:#E8F3EC; --warn:#A85A20; --warn-bg:#FBEEE3;
}
*{box-sizing:border-box;}
body{margin:0; font-family:"Segoe UI",Arial,sans-serif; background:var(--bg); color:var(--text);}

.center-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px; text-align:center; padding:20px;}
.brand{font-size:1.8rem; font-weight:800; color:var(--navy);}
.brand span{color:var(--blue);}
.btn{
  background:var(--navy); color:#fff; border:none; border-radius:8px; padding:12px 22px;
  font-size:15px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:10px;
}
.btn:hover{background:#123a5c;}
.btn.secondary{background:var(--panel); color:var(--navy); border:1px solid var(--border);}
.card{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:20px 24px;}
.muted{color:var(--muted); font-size:14px;}

header.topbar{
  background:var(--navy); color:#fff; padding:14px 24px; display:flex; justify-content:space-between; align-items:center;
}
header.topbar .logo{font-weight:800; font-size:18px;}
header.topbar .user{font-size:13px; display:flex; align-items:center; gap:12px;}
header.topbar button{background:transparent; border:1px solid rgba(255,255,255,.4); color:#fff; border-radius:6px; padding:6px 12px; cursor:pointer; font-size:13px;}

main.wrap{max-width:1000px; margin:0 auto; padding:26px 20px 80px;}
h2.section-title{font-size:15px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:28px 0 10px; border-bottom:2px solid var(--border); padding-bottom:6px;}

table.calc{width:100%; border-collapse:collapse; font-size:14px; background:var(--panel);}
table.calc th{text-align:left; background:var(--navy); color:#fff; padding:8px 10px; font-size:12px;}
table.calc td{padding:6px 10px; border-bottom:1px solid var(--border); vertical-align:middle;}
table.calc input[type=number]{width:70px; padding:5px; border:1px solid var(--border); border-radius:5px;}
table.calc .prod-search{width:100%; padding:6px; border:1px solid var(--border); border-radius:5px;}
table.calc .estimado{font-style:italic; color:var(--muted);}

.autocalc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin:10px 0;}
.autocalc-box{background:#EAF2FB; border:1px solid #C9E0F5; border-radius:8px; padding:10px 14px;}
.autocalc-box .label{font-size:11px; color:var(--muted); text-transform:uppercase;}
.autocalc-box .value{font-size:20px; font-weight:700; color:var(--navy);}

.param-row{display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:14px;}
.param-row label{flex:1; color:var(--muted);}
.param-row input,.param-row select{width:110px; padding:6px; border:1px solid var(--border); border-radius:5px;}

.totales{margin-top:20px; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:16px 20px;}
.totales .row{display:flex; justify-content:space-between; padding:6px 0; font-size:14px;}
.totales .row.grand{font-size:20px; font-weight:800; color:var(--navy); border-top:2px solid var(--border); margin-top:8px; padding-top:12px;}
.totales .row.factura{color:var(--muted); font-style:italic;}

.autocomplete-list{position:absolute; background:#fff; border:1px solid var(--border); border-radius:6px; max-height:220px; overflow-y:auto; z-index:20; box-shadow:0 4px 10px rgba(0,0,0,.12); min-width:280px;}
.autocomplete-list div{padding:8px 10px; font-size:13px; cursor:pointer;}
.autocomplete-list div:hover{background:#EAF2FB;}