:root{
  --bg:#0d0d0f; --panel:#16161a; --panel2:#1d1d22; --line:#2c2c33;
  --gold:#c9a24b; --gold-soft:#e3c987; --text:#ecebe6; --muted:#9a978d; --danger:#c0564b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:14px}
a{color:var(--gold-soft)}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14px;background:var(--panel2);border:1px solid var(--line);
  color:var(--text);border-radius:7px;padding:9px 10px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)}
textarea{resize:vertical;min-height:64px}
label{display:block;font-size:12px;color:var(--muted);margin:0 0 4px}
.field{margin-bottom:12px}
.row{display:flex;gap:10px}
.row>*{flex:1}
.btn{background:var(--gold);color:#1a1407;border:none;border-radius:8px;padding:10px 16px;font-weight:600}
.btn:hover{background:var(--gold-soft)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn.ghost:hover{border-color:var(--gold)}
.btn.sm{padding:6px 10px;font-size:13px}
.btn.danger{background:transparent;border:1px solid var(--danger);color:var(--danger)}
.muted{color:var(--muted)}

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:34px;width:340px;text-align:center}
.login-card img{height:64px;margin-bottom:8px}
.login-card h1{font-size:16px;font-weight:600;margin:0 0 22px;letter-spacing:.5px}

/* Shell */
.shell{display:flex;min-height:100vh}
.side{width:210px;background:var(--panel);border-right:1px solid var(--line);padding:20px 14px;flex-shrink:0}
.side .brand{display:flex;align-items:center;gap:8px;margin-bottom:24px}
.side .brand img{height:38px}
.side nav a{display:block;padding:10px 12px;border-radius:8px;color:var(--text);text-decoration:none;margin-bottom:4px;font-weight:500}
.side nav a:hover{background:var(--panel2)}
.side nav a.active{background:var(--panel2);color:var(--gold-soft)}
.side .logout{margin-top:24px}
.main{flex:1;padding:28px 34px;max-width:1000px}
.main h2{font-weight:600;font-size:20px;margin:0 0 18px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}

/* Cards / table */
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:16px}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);font-size:13px}
th{color:var(--muted);font-weight:600;font-size:12px}
tr:hover td{background:var(--panel2)}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;border:1px solid var(--line);color:var(--muted)}
.tag.factura{color:#e3c987;border-color:#5a4a23}
.tag.oferta-cliente,.tag.oferta-importe{color:#8fb4c9;border-color:#2f4654}

/* Item rows */
.items-head,.item-row{display:grid;gap:8px;align-items:center;margin-bottom:8px}
.item-row .x{background:transparent;border:none;color:var(--danger);font-size:18px;padding:0}
.totbar{display:flex;justify-content:flex-end;gap:24px;padding:12px 4px;border-top:1px solid var(--line);margin-top:8px}
.totbar b{color:var(--gold-soft)}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-start;justify-content:center;padding:30px;overflow:auto;z-index:50}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;width:760px;max-width:100%}
.modal h3{margin:0 0 16px;font-size:17px}
.seg{display:flex;gap:6px;margin-bottom:18px}
.seg button{flex:1;background:var(--panel2);border:1px solid var(--line);color:var(--text);padding:10px;border-radius:8px;font-weight:500}
.seg button.on{background:var(--gold);color:#1a1407;border-color:var(--gold)}
.hint{font-size:12px;color:var(--muted);margin-top:-4px;margin-bottom:10px}
.toast{position:fixed;bottom:24px;right:24px;background:var(--panel);border:1px solid var(--gold);color:var(--text);padding:12px 18px;border-radius:10px;z-index:99}
.suggest{position:relative}
.suggest .list{position:absolute;top:100%;left:0;right:0;background:var(--panel2);border:1px solid var(--line);border-radius:8px;z-index:5;max-height:200px;overflow:auto}
.suggest .list div{padding:8px 10px;cursor:pointer}
.suggest .list div:hover{background:var(--panel)}
.err{color:var(--danger);font-size:13px;margin-top:8px}
.hidden{display:none}