/* ============================================================
   COTIZADOR E.G. — ESTILOS
   Identidad visual Empeño Gamer (MANZANA SAS)
   ============================================================ */

:root{
  --navy:#001453; --navy-2:#0a1f6b;
  --accent:#3755c3; --accent-2:#2a44a8; --accent-soft:#dde1ff;
  --bg:#f0f2f7; --surface:#ffffff; --surface-low:#eef0f5; --surface-mid:#f5f6fa;
  --green:#00845a; --green-soft:#d6f5ea;
  --red:#c0392b; --red-soft:#fde8e6;
  --amber:#b45309; --amber-soft:#fef3c7;
  --purple:#7c3aed; --purple-soft:#ede9fe;
  --text:#0f1117; --text-2:#3d4150; --text-3:#72747f;
  --border:rgba(15,17,23,.07); --border-2:rgba(15,17,23,.12);
  --shadow-sm:0 2px 8px rgba(15,17,23,.06);
  --shadow-md:0 6px 24px rgba(15,17,23,.09);
  --shadow-lg:0 12px 40px rgba(15,17,23,.12);
  --r:14px; --r-sm:9px; --r-xs:6px;
  --mono:'DM Mono',monospace; --sans:'Manrope',sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); background:var(--bg); color:var(--text);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-2)}
h1,h2,h3{margin:0; font-weight:900; letter-spacing:-.4px}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar{
  display:flex; align-items:center; gap:20px;
  background:var(--navy); color:#fff; padding:0 26px; height:60px;
  position:sticky; top:0; z-index:50;
}
.topbar-brand{display:flex; align-items:center; gap:11px; min-width:0}
.brand-dot{width:11px; height:11px; border-radius:50%;
  background:linear-gradient(135deg,#5b7bff,#3755c3); box-shadow:0 0 0 4px rgba(91,123,255,.18)}
.brand-name{font-weight:900; font-size:15px; letter-spacing:-.4px; line-height:1.1}
.brand-sub{font-size:10.5px; color:rgba(255,255,255,.55)}
.topbar-nav{display:flex; gap:4px; margin-left:8px; flex:1; flex-wrap:wrap}
.topbar-nav a{
  color:rgba(255,255,255,.72); padding:7px 12px; border-radius:var(--r-sm);
  font-weight:700; font-size:12.5px; transition:.15s;
}
.topbar-nav a:hover{color:#fff; background:rgba(255,255,255,.08)}
.topbar-nav a.active{color:#fff; background:rgba(255,255,255,.14)}
.topbar-right{display:flex; align-items:center; gap:10px}
.tc-chip{
  font-family:var(--mono); font-size:11px; color:#cdd6ff;
  background:rgba(255,255,255,.08); padding:5px 10px; border-radius:var(--r-xs); white-space:nowrap;
}
.user-chip{font-size:11.5px; color:rgba(255,255,255,.7); white-space:nowrap}
.btn-logout{
  color:#fff; border:1px solid rgba(255,255,255,.22); padding:5px 12px;
  border-radius:var(--r-sm); font-size:12px; font-weight:700;
}
.btn-logout:hover{background:rgba(255,255,255,.1); color:#fff}

/* ── Layout ─────────────────────────────────────────────── */
.wrap{max-width:1180px; margin:0 auto; padding:24px 26px 60px}
.foot{text-align:center; color:var(--text-3); font-size:11px; padding:24px}

.page-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:18px; gap:16px; flex-wrap:wrap}
.page-title{font-size:21px}
.page-sub{font-size:12px; color:var(--text-3); margin-top:3px}

/* ── Flash ──────────────────────────────────────────────── */
.flash{padding:11px 16px; border-radius:var(--r-sm); font-weight:700; font-size:13px; margin-bottom:18px}
.flash-ok{background:var(--green-soft); color:var(--green)}
.flash-error{background:var(--red-soft); color:var(--red)}
.flash-info{background:var(--accent-soft); color:var(--accent-2)}

/* ── Botones ────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-family:var(--sans); font-weight:800; font-size:13px;
  padding:10px 16px; border-radius:var(--r-sm); border:1px solid transparent; transition:.15s;
}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-2); color:#fff}
.btn-navy{background:var(--navy); color:#fff}
.btn-navy:hover{background:var(--navy-2); color:#fff}
.btn-ghost{background:var(--surface); color:var(--text-2); border-color:var(--border-2)}
.btn-ghost:hover{background:var(--surface-low)}
.btn-danger{background:#fff; color:var(--red); border-color:var(--red-soft)}
.btn-danger:hover{background:var(--red-soft)}
.btn-sm{padding:6px 11px; font-size:12px}
.btn[disabled]{opacity:.45; cursor:not-allowed}

/* ── Cards genéricas ────────────────────────────────────── */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-sm)}
.card-pad{padding:20px 22px}

/* ── COTIZADOR ──────────────────────────────────────────── */
.cot-grid{display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start}

.cat-block{background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow-sm); margin-bottom:16px; overflow:hidden}
.cat-head{display:flex; justify-content:space-between; align-items:center;
  padding:13px 18px; background:var(--surface-low); border-bottom:1px solid var(--border)}
.cat-name{font-weight:800; font-size:13.5px; letter-spacing:-.2px}
.cat-count{font-size:10.5px; color:var(--text-3); font-family:var(--mono)}

.prod-row{display:flex; align-items:center; gap:14px; padding:11px 18px; border-top:1px solid var(--border); transition:.12s}
.prod-row:first-child{border-top:none}
.prod-row.on{background:var(--accent-soft)}
.prod-check{appearance:none; -webkit-appearance:none; width:20px; height:20px; flex:none;
  border:2px solid var(--border-2); border-radius:var(--r-xs); cursor:pointer; position:relative; transition:.12s; background:#fff}
.prod-check:hover{border-color:var(--accent)}
.prod-check:checked{background:var(--accent); border-color:var(--accent)}
.prod-check:checked::after{content:""; position:absolute; left:5px; top:1px; width:6px; height:11px;
  border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg)}
.prod-main{flex:1; min-width:0}
.prod-name{font-weight:700; font-size:13.5px}
.pc-tag{display:inline-block; font-family:var(--sans); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--purple); background:var(--purple-soft); padding:2px 6px; border-radius:5px; margin-left:6px; vertical-align:middle}
.cat-tag{display:inline-block; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--accent-2); background:var(--accent-soft); padding:2px 6px; border-radius:5px; margin-left:8px; vertical-align:middle}
.prod-qty.auto{border-color:var(--purple); background:#faf8ff}
.prod-desc{font-size:11px; color:var(--text-3); margin-top:1px}
.prod-price{font-family:var(--mono); font-size:13px; font-weight:500; color:var(--text-2); white-space:nowrap}
.prod-qty{width:62px; padding:6px 8px; border:1px solid var(--border-2); border-radius:var(--r-xs);
  font-family:var(--mono); font-size:13px; text-align:center; color:var(--text)}
.prod-qty:disabled{background:var(--surface-low); color:var(--text-3); opacity:.6}
.prod-sub{font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--accent-2); width:84px; text-align:right; white-space:nowrap}

/* Resumen lateral */
.resumen{position:sticky; top:84px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); box-shadow:var(--shadow-md); overflow:hidden}
.resumen-head{background:var(--navy); color:#fff; padding:15px 18px}
.resumen-head h3{font-size:14px}
.resumen-head .sub{font-size:10.5px; color:rgba(255,255,255,.6); margin-top:2px}
.resumen-body{padding:16px 18px}
.field{margin-bottom:12px}
.field label{display:block; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); margin-bottom:5px}
.field input,.field textarea,.field select{width:100%; padding:9px 11px; border:1px solid var(--border-2);
  border-radius:var(--r-sm); font-family:var(--sans); font-size:13px; color:var(--text); background:#fff}
.field textarea{resize:vertical; min-height:54px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(55,85,195,.12)}

.tot-line{display:flex; justify-content:space-between; align-items:baseline; padding:6px 0; font-size:13px}
.tot-line .lbl{color:var(--text-3)}
.tot-line .val{font-family:var(--mono); font-weight:500}
.tot-sep{height:1px; background:var(--border); margin:8px 0}
.tot-usd{font-size:15px; font-weight:800}
.tot-usd .val{color:var(--text); font-weight:500; font-size:15px}
.tot-ars{background:var(--accent-soft); margin:12px -18px -16px; padding:14px 18px}
.tot-ars .lbl{font-weight:800; color:var(--accent-2); text-transform:uppercase; font-size:11px; letter-spacing:.04em}
.tot-ars .val{font-family:var(--mono); font-size:20px; font-weight:500; color:var(--navy)}

.empty-hint{color:var(--text-3); font-size:12.5px; text-align:center; padding:18px 0}

/* ── Tablas admin ───────────────────────────────────────── */
.tbl{width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm)}
.tbl th{font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-3); text-align:left; padding:11px 14px; background:var(--surface-low); border-bottom:1px solid var(--border)}
.tbl td{padding:11px 14px; border-top:1px solid var(--border); font-size:13px; color:var(--text-2); vertical-align:middle}
.tbl tr:hover td, .tbl tbody tr:hover td{background:var(--surface-mid)}
.tbl .amount{font-family:var(--mono); font-weight:500; color:var(--text)}
.tbl .actions{text-align:right; white-space:nowrap}
.tbl .actions a{margin-left:10px; font-size:12px; font-weight:700}

.badge{display:inline-block; font-size:10px; font-weight:700; padding:3px 8px; border-radius:5px}
.badge-green{background:var(--green-soft); color:var(--green)}
.badge-gray{background:var(--surface-low); color:var(--text-3)}
.badge-purple{background:var(--purple-soft); color:var(--purple)}
.badge-accent{background:var(--accent-soft); color:var(--accent-2)}

/* ── Formularios admin ──────────────────────────────────── */
.form-card{max-width:620px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form-grid .full{grid-column:1 / -1}
.form-actions{display:flex; gap:10px; margin-top:18px; align-items:center}

/* ── Login / Setup ──────────────────────────────────────── */
.auth-bg{min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(1200px 600px at 50% -10%, #0a1f6b 0%, #001453 55%, #000a2e 100%); padding:24px}
.auth-card{background:var(--surface); border-radius:18px; box-shadow:var(--shadow-lg);
  width:100%; max-width:400px; padding:32px 30px}
.auth-card .brand{display:flex; align-items:center; gap:11px; margin-bottom:22px}
.auth-card h1{font-size:20px}
.auth-card .sub{color:var(--text-3); font-size:12.5px; margin-top:2px}
.auth-card .field{margin-bottom:14px}
.auth-card .btn{width:100%; justify-content:center; margin-top:6px}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:880px){
  .cot-grid{grid-template-columns:1fr}
  .resumen{position:static}
  .form-grid{grid-template-columns:1fr}
  .topbar{height:auto; flex-wrap:wrap; padding:10px 16px; gap:10px}
  .topbar-nav{order:3; width:100%}
  .wrap{padding:18px 16px 60px}
  .prod-desc{display:none}
}

/* ── Vista presupuesto (impresión) ──────────────────────── */
.doc{max-width:820px; margin:24px auto; background:#fff; padding:0}
.doc-sheet{background:#fff; border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-md); padding:40px 44px}
.doc-top{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:3px solid var(--navy); padding-bottom:18px; margin-bottom:22px}
.doc-emp{font-size:22px; font-weight:900; color:var(--navy); letter-spacing:-.6px}
.doc-emp-sub{font-size:11.5px; color:var(--text-3); margin-top:3px; line-height:1.5}
.doc-meta{text-align:right; font-size:12px; color:var(--text-2)}
.doc-meta .n{font-family:var(--mono); font-weight:500; font-size:15px; color:var(--text)}
.doc-cli{display:grid; grid-template-columns:1fr 1fr; gap:8px 30px; margin-bottom:22px; font-size:12.5px}
.doc-cli .k{color:var(--text-3); font-weight:700; text-transform:uppercase; font-size:9.5px; letter-spacing:.06em}
.doc-tbl{width:100%; border-collapse:collapse; margin-bottom:18px}
.doc-tbl th{font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); text-align:left; padding:9px 8px; border-bottom:2px solid var(--border-2)}
.doc-tbl th.r,.doc-tbl td.r{text-align:right}
.doc-tbl td{padding:10px 8px; border-bottom:1px solid var(--border); font-size:13px}
.doc-tbl .amount{font-family:var(--mono); font-weight:500}
.doc-tot{margin-left:auto; width:300px}
.doc-tot .line{display:flex; justify-content:space-between; padding:7px 0; font-size:13px}
.doc-tot .grand{border-top:2px solid var(--navy); margin-top:6px; padding-top:12px; font-weight:900; font-size:15px}
.doc-tot .grand .v{font-family:var(--mono); font-weight:500; color:var(--navy); font-size:20px}
.doc-tot .usd{color:var(--text-3); font-family:var(--mono)}
.doc-note{margin-top:26px; font-size:11px; color:var(--text-3); border-top:1px solid var(--border); padding-top:14px; line-height:1.6}
.doc-bar{max-width:820px; margin:0 auto 14px; display:flex; gap:10px; justify-content:flex-end}

@media print{
  .topbar,.foot,.doc-bar,.no-print{display:none !important}
  body{background:#fff}
  .doc,.doc-sheet{margin:0; border:none; box-shadow:none; border-radius:0; max-width:none; padding:0}
  .doc-sheet{padding:0}
  @page{margin:18mm}
}