/* MerchIt · Panel interno (estilos compartidos por el tablero y el cotizador) */
:root{
  --bg:#f3f4f7;--surface:#fff;--ink:#1F2430;--muted:#5b6170;--faint:#8a90a0;--line:#dde1e8;--soft:#eef0f4;
  --kraft:#C98A3B;--kraft-text:#9a6220;--kraft-soft:#f6ecdd;--ok:#1d7a4a;--ok-soft:#e3f3ea;--bad:#b42318;--bad-soft:#fdecea;--warn-soft:#fff4e5;
  --font:"Figtree","Segoe UI",system-ui,sans-serif;--disp:"Archivo","Helvetica Neue",Arial,sans-serif;
  --r:12px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.45 var(--font);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--kraft-text)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Barra superior */
.top{position:sticky;top:0;z-index:30;background:var(--ink);color:#fff;display:flex;align-items:center;gap:.8rem;padding:.55rem 1rem;flex-wrap:wrap;min-height:56px}
.top .marca{display:flex;align-items:center;gap:.7rem;font-weight:600;text-decoration:none;color:#fff}
.top .marca svg{height:24px;width:auto;display:block}
.top .marca span{color:#c3c8d2;font-weight:500;font-size:.88rem;border-left:1px solid #3a4050;padding-left:.7rem}
.top .esp{flex:1}
.top .buscar{flex:1;max-width:360px;min-width:160px;border:1px solid #3a4050;background:#2a303d;color:#fff;border-radius:999px;padding:.42rem .9rem;font-size:.9rem}
.top .buscar::placeholder{color:#9aa0ab}
.top .buscar:focus{outline:2px solid var(--kraft);border-color:var(--kraft)}

/* Botones */
.b{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:.45rem .95rem;cursor:pointer;font-weight:600;font-size:.88rem;white-space:nowrap;line-height:1.2;display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;color:var(--ink)}
.b:hover{border-color:var(--ink)}
.b:disabled{opacity:.5;cursor:default}
.b.pri{background:var(--ink);border-color:var(--ink);color:#fff}
.b.pri:hover{background:#000}
.b.kraft{background:var(--kraft);border-color:var(--kraft);color:var(--ink)}
.b.sm{padding:.3rem .7rem;font-size:.82rem}
.b.link{border:0;background:none;padding:.2rem .3rem;color:var(--muted);text-decoration:underline;font-weight:500}
.b.del{color:var(--bad)}
.top .b{background:transparent;color:#fff;border-color:#4a5163}
.top .b:hover{border-color:#fff}
.top .b.kraft{background:var(--kraft);border-color:var(--kraft);color:var(--ink)}
b.n{font-weight:700}
:focus-visible{outline:2px solid var(--kraft);outline-offset:2px}

/* Formularios */
label.f{display:flex;flex-direction:column;gap:.25rem;font-size:.8rem;font-weight:600;color:var(--muted)}
label.f input,label.f select,label.f textarea,.in{border:1px solid var(--line);border-radius:9px;padding:.5rem .6rem;background:var(--surface);font-size:.92rem;font-weight:400;color:var(--ink);width:100%}
label.f textarea,textarea.in{min-height:64px;resize:vertical}
label.f input:focus,label.f textarea:focus,label.f select:focus,.in:focus{outline:2px solid var(--kraft);outline-offset:0;border-color:var(--kraft)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.7rem}
.full{grid-column:1/-1}

/* Aviso flotante */
.toast{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:999px;font-size:.9rem;opacity:0;transition:opacity .2s;pointer-events:none;z-index:90;max-width:92vw;text-align:center}
.toast.on{opacity:1}

/* Login */
.login{min-height:100vh;display:grid;place-items:center;padding:1.2rem;background:var(--ink)}
.login form{background:var(--surface);border-radius:18px;padding:2rem 1.8rem;width:min(380px,100%);display:flex;flex-direction:column;gap:.9rem;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.login svg{height:34px;width:auto;margin-bottom:.2rem}
.login h1{font:700 1.15rem var(--disp);margin:0}
.login p{margin:0;color:var(--muted);font-size:.9rem}
.login .err{color:var(--bad);font-size:.88rem;min-height:1.2em}
.login .b{justify-content:center;padding:.65rem}

/* Diálogos */
dialog{border:0;border-radius:16px;padding:0;width:min(560px,94vw);box-shadow:0 20px 60px rgba(0,0,0,.25);color:var(--ink)}
dialog::backdrop{background:rgba(20,23,30,.5)}
.dlg-h{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid var(--line)}
.dlg-h h3{margin:0;font:700 1.08rem var(--disp)}
.dlg-b{padding:1rem 1.2rem;max-height:70vh;overflow:auto}
.dlg-f{display:flex;justify-content:flex-end;gap:.5rem;padding:.9rem 1.2rem;border-top:1px solid var(--line);flex-wrap:wrap}

.cargando{padding:3rem;text-align:center;color:var(--muted)}