/* OG Services — sistema de diseño compartido (configurador, pedido y panel de administración) */
:root{
  --ink:#14130f; --ink-2:#34312a; --muted:#6b675d; --paper:#f6f4ef; --card:#ffffff; --line:#dcd8cf; --line-2:#ece9e2;
  --accent:#db2706; --accent-2:#b81f04; --accent-soft:#fdeae5; --on-accent:#fff;
  --ok:#1a7f4b; --ok-soft:#e3f4ea; --warn:#a85f00; --warn-soft:#fdf0d8; --bad:#b3261e; --bad-soft:#fbe4e2; --info:#1f5fbf; --info-soft:#e4edfb;
  --radius:10px; --radius-sm:6px; --shadow:0 1px 2px rgba(20,19,15,.06),0 6px 20px rgba(20,19,15,.06);
  --font-head:'Archivo',system-ui,sans-serif; --font-body:'IBM Plex Sans',system-ui,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){ :root[data-theme="auto"]{ } }
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:16px;line-height:1.5;color:var(--ink);background:var(--paper);
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);background-size:32px 32px;background-attachment:fixed}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(28px,4vw,40px);font-weight:800} h2{font-size:clamp(22px,3vw,28px);font-weight:800} h3{font-size:18px;font-weight:700}
p{margin:0 0 1em}
a{color:var(--accent-2)}
img,svg{max-width:100%}
.mono,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .small{font-size:13px} .center{text-align:center} .right{text-align:right}
.hide,[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 16px}

/* barra superior */
.topbar{background:var(--ink);color:#fff;position:sticky;top:0;z-index:50}
.topbar .wrap{display:flex;align-items:center;gap:16px;min-height:56px}
.brand{font-family:var(--font-head);font-weight:800;letter-spacing:.04em;color:#fff;text-decoration:none;font-size:18px}
.brand b{color:var(--accent)}
.topbar nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.topbar nav a{color:#e9e6de;text-decoration:none;padding:8px 12px;border-radius:var(--radius-sm);font-size:14px}
.topbar nav a:hover{background:#2a2822}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:var(--radius-sm);border:1.5px solid var(--ink);background:var(--card);color:var(--ink);
  font:700 15px var(--font-head);letter-spacing:.01em;cursor:pointer;text-decoration:none;transition:transform .08s,background .15s}
.btn:hover{background:var(--line-2)} .btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .btn.primary:hover{background:var(--accent-2)}
.btn.dark{background:var(--ink);color:#fff} .btn.dark:hover{background:var(--ink-2)}
.btn.ghost{border-color:transparent;background:transparent} .btn.danger{border-color:var(--bad);color:var(--bad)}
.btn.sm{min-height:34px;padding:5px 12px;font-size:13px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
:focus-visible{outline:3px solid #1f5fbf;outline-offset:2px}

/* formularios */
label.field{display:block;margin-bottom:14px}
label.field>span.lbl{display:block;font:600 13px var(--font-head);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin-bottom:5px}
input[type=text],input[type=number],input[type=email],input[type=tel],input[type=password],input[type=search],input[type=date],select,textarea{
  width:100%;min-height:44px;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:#fff;font:16px var(--font-body);color:var(--ink)}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(20,19,15,.12)}
input.invalid,select.invalid,textarea.invalid{border-color:var(--bad);background:var(--bad-soft)}
.hint{font-size:13px;color:var(--muted);margin-top:4px} .err{font-size:13px;color:var(--bad);margin-top:4px}
.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--accent);flex:none}
.row{display:grid;gap:12px} .row.c2{grid-template-columns:repeat(2,minmax(0,1fr))} .row.c3{grid-template-columns:repeat(3,minmax(0,1fr))} .row.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:640px){.row.c2,.row.c3,.row.c4{grid-template-columns:1fr}}

/* tarjetas, etiquetas */
.card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card.flat{box-shadow:none}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:99px;font:700 12px var(--font-head);letter-spacing:.03em;background:var(--line-2);color:var(--ink-2);white-space:nowrap}
.badge.ok{background:var(--ok-soft);color:var(--ok)} .badge.warn{background:var(--warn-soft);color:var(--warn)} .badge.bad{background:var(--bad-soft);color:var(--bad)} .badge.info{background:var(--info-soft);color:var(--info)}
.badge.prio{background:var(--accent);color:#fff;letter-spacing:.06em}
.notice{padding:12px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--line);background:var(--card);font-size:14px}
.notice.warn{background:var(--warn-soft);border-color:#e7c27a;color:#6b3f00} .notice.bad{background:var(--bad-soft);border-color:#e9a39e;color:#7d1a14}
.notice.ok{background:var(--ok-soft);border-color:#9fd3b6;color:#115a34} .notice.info{background:var(--info-soft);border-color:#a8c3ef;color:#173f80}

/* tablas */
.table-wrap{overflow-x:auto;border:1.5px solid var(--line);border-radius:var(--radius);background:#fff}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{background:var(--ink);color:#fff;text-align:left;font:700 12px var(--font-head);text-transform:uppercase;letter-spacing:.06em;padding:10px 12px;white-space:nowrap}
table.t td{padding:10px 12px;border-top:1px solid var(--line-2);vertical-align:middle}
table.t tr:hover td{background:#faf8f3}
table.t td.num,table.t th.num{text-align:right}

/* avisos emergentes y modal */
.toasts{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:200;width:min(92vw,420px)}
.toast{background:var(--ink);color:#fff;padding:12px 16px;border-radius:var(--radius-sm);box-shadow:var(--shadow);font-size:14px}
.toast.ok{background:var(--ok)} .toast.bad{background:var(--bad)}
.modal-back{position:fixed;inset:0;background:rgba(20,19,15,.55);z-index:150;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:#fff;border-radius:var(--radius);max-width:560px;width:100%;max-height:90vh;overflow:auto;padding:22px}
.spinner{width:18px;height:18px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}