/* Inamex Suite — sistema de diseño compartido.
   Fuente de verdad: inamex-suite/shared/. Cada producto lo copia en web/shared/
   con scripts/sync-shared.sh; no editar la copia. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root{
  --paper:#ffffff; --paper-2:#f6f8fa; --surface:#ffffff; --ink:#1a1a2e;
  --muted:#5b6474; --line:rgba(26,26,46,.13); --line-2:rgba(26,26,46,.07);
  --brand:#0b7a8e; --on-brand:#ffffff;
  --night:#0a0f1c; --night-2:#0a1f30; --night-3:#0d2a40; --on-night:#ffffff; --on-night-2:rgba(255,255,255,.72); --cyan:#00d4cc;
  --ok:#1f8a5b; --ok-bg:rgba(31,138,91,.1); --warn:#a86a00; --warn-bg:rgba(168,106,0,.1); --bad:#c0392b; --bad-bg:rgba(192,57,43,.09);
  --hl:#fdeaa6; --hl-ink:#5b4300;
  --shadow:0 1px 2px rgba(26,26,46,.05), 0 16px 40px rgba(26,26,46,.08);
  --f-body:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-code:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r-card:16px; --r-pill:999px; --r-field:10px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#0b101d; --paper-2:#0f1626; --surface:#141c2e; --ink:#eef2f6;
  --muted:#9aa6b6; --line:rgba(238,242,246,.15); --line-2:rgba(238,242,246,.08);
  --brand:#00d4cc; --on-brand:#0a0f1c;
  --ok:#4cc38a; --ok-bg:rgba(76,195,138,.14); --warn:#f0b54a; --warn-bg:rgba(240,181,74,.14); --bad:#ff7a6b; --bad-bg:rgba(255,122,107,.13);
  --hl:#5c4815; --hl-ink:#ffe7a6;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.35);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#0b101d; --paper-2:#0f1626; --surface:#141c2e; --ink:#eef2f6;
  --muted:#9aa6b6; --line:rgba(238,242,246,.15); --line-2:rgba(238,242,246,.08);
  --brand:#00d4cc; --on-brand:#0a0f1c;
  --ok:#4cc38a; --ok-bg:rgba(76,195,138,.14); --warn:#f0b54a; --warn-bg:rgba(240,181,74,.14); --bad:#ff7a6b; --bad-bg:rgba(255,122,107,.13);
  --hl:#5c4815; --hl-ink:#ffe7a6;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.35);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font:400 15px/1.6 var(--f-body); -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-weight:700; line-height:1.15; margin:0; letter-spacing:-.02em; text-wrap:balance}
h1 em,h2 em,h3 em{font-style:normal; color:var(--brand)}
p{margin:0}
a{color:inherit}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:6px}
.wrap{max-width:1180px; margin-inline:auto; padding-inline:clamp(16px,4vw,32px)}
.label{font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.eyebrow{display:inline-flex; align-items:center; gap:12px; font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--brand)}
.eyebrow::before{content:""; width:32px; height:1px; background:currentColor}
.muted{color:var(--muted)}
.mono{font-family:var(--f-code); font-size:12.5px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ícono de producto: cuadrado al 28 %, trazo de 2 px */
.mark{--s:40px; width:var(--s); height:var(--s); border-radius:calc(var(--s)*.28); background:var(--brand); color:var(--on-brand);
  display:inline-grid; place-items:center; flex:none; box-shadow:inset 0 -2px 0 rgba(0,0,0,.08)}
.mark svg{width:62%; height:62%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.mark.xs{--s:22px} .mark.sm{--s:28px} .mark.md{--s:34px} .mark.lg{--s:56px} .mark.xl{--s:80px}
.mark.suite{background:var(--night); color:var(--on-night); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.mark.suite svg{stroke:none; width:72%; height:72%}
.mark.off{opacity:.45}

/* barra superior (la pinta suite-nav.js) */
.sx-top{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line-2)}
.sx-top .wrap{display:flex; align-items:center; gap:14px; min-height:60px}
.sx-apps{position:relative}
.sx-grid{width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; cursor:pointer; color:var(--ink); padding:0}
.sx-grid:hover,.sx-grid[aria-expanded="true"]{background:var(--paper-2)}
.sx-grid svg{width:16px; height:16px; fill:currentColor}
.sx-logo{display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0}
.sx-logo b{font:700 18px/1 var(--f-body); letter-spacing:-.01em}
.sx-logo small{font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--brand); padding-left:10px; border-left:1px solid var(--line); white-space:nowrap}
.sx-nav{display:flex; gap:4px; margin-left:auto; overflow-x:auto; scrollbar-width:none}
.sx-nav::-webkit-scrollbar{display:none}
.sx-nav a{padding:8px 12px; border-radius:var(--r-pill); text-decoration:none; font-size:13px; font-weight:600; color:var(--muted); white-space:nowrap}
.sx-nav a:hover{color:var(--ink); background:var(--paper-2)}
.sx-nav a[aria-current="page"]{color:var(--brand); background:color-mix(in srgb,var(--brand) 11%,transparent)}
.sx-accion{margin-left:auto; flex:none}
.sx-switcher .grp + .intro{padding:0 10px 8px; font-size:12.5px; color:var(--muted)}
.sx-org{font-size:12px; color:var(--muted); white-space:nowrap; padding-left:10px; border-left:1px solid var(--line)}
.sx-org:empty{display:none}
@media (max-width:860px){ .sx-logo small,.sx-org{display:none} }
@media (max-width:640px){
  .sx-top .wrap{flex-wrap:wrap; row-gap:0; padding-block:8px}
  .sx-nav{order:3; width:100%; margin-left:0; padding-bottom:4px}
}

.sx-switcher{position:absolute; top:calc(100% + 10px); left:0; z-index:50; width:min(340px,calc(100vw - 32px)); border-radius:var(--r-card); background:var(--surface);
  border:1px solid var(--line-2); box-shadow:var(--shadow); padding:10px; max-height:calc(100vh - 90px); overflow:auto}
.sx-switcher .grp{padding:10px 10px 6px}
.sx-switcher .app{display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:12px; text-decoration:none; color:var(--ink)}
.sx-switcher a.app:hover{background:var(--paper-2)}
.sx-switcher .app b{display:block; font:700 15px/1.2 var(--f-body)}
.sx-switcher .app small{display:block; font-size:12px; color:var(--muted); line-height:1.3}
.sx-switcher .app .here{margin-left:auto; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand)}
.sx-switcher .app .soon{margin-left:auto; font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:var(--r-pill); border:1px solid var(--line); color:var(--muted); white-space:nowrap}
.sx-switcher .app.later .mark{opacity:.45}
.sx-switcher hr{border:0; border-top:1px solid var(--line-2); margin:8px 4px}
.sx-switcher .foot{display:flex; gap:8px; padding:4px 6px}
.sx-switcher .foot a{flex:1; text-align:center; padding:8px; border-radius:10px; font-size:12.5px; font-weight:600; text-decoration:none; color:var(--muted); background:var(--paper-2)}
.sx-switcher .foot a:hover{color:var(--ink)}

/* aviso de primera versión */
.sx-beta{background:var(--hl); color:var(--hl-ink); font-size:12.5px; text-align:center; padding:6px 16px}

/* botones */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; border-radius:var(--r-pill); font:600 14px/1.1 var(--f-body);
  text-decoration:none; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; white-space:nowrap}
.btn:hover{background:var(--paper-2)}
.btn.primary{background:var(--brand); border-color:var(--brand); color:var(--on-brand)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.cyan{background:var(--cyan); border-color:var(--cyan); color:var(--night)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad); border-color:color-mix(in srgb,var(--bad) 40%,transparent); background:transparent}
.btn.sm{padding:6px 12px; font-size:12.5px}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* tarjetas y paneles */
.card{background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-card); box-shadow:var(--shadow); padding:20px}
.card.flat{box-shadow:none}
.panel-title{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.panel-title h2{font-size:18px}
.panel-title h3{font-size:15px}
.grid{display:grid; gap:16px}
.page{padding-block:24px 64px}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px}
.page-head h1{font-size:clamp(22px,3vw,30px); font-weight:800}
.page-head p{color:var(--muted); margin-top:4px}

/* formularios */
.field{display:grid; gap:6px; margin-bottom:12px}
.field > span{font-size:12px; font-weight:600; color:var(--muted)}
input,select,textarea{font:inherit; font-size:14px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-field); padding:9px 12px; width:100%; min-width:0}
textarea{resize:vertical; min-height:80px}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--brand) 55%,transparent); outline-offset:0; border-color:var(--brand)}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.row > .grow{flex:1; min-width:160px}

/* tablas */
.table-wrap{overflow-x:auto; border:1px solid var(--line-2); border-radius:12px}
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:10px 14px; background:var(--paper-2); white-space:nowrap}
td{padding:10px 14px; border-top:1px solid var(--line-2); vertical-align:middle}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}

/* estados */
.pill{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--r-pill); font-size:11.5px; font-weight:600; white-space:nowrap; background:var(--paper-2); color:var(--muted)}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.pill.ok{background:var(--ok-bg); color:var(--ok)}
.pill.warn{background:var(--warn-bg); color:var(--warn)}
.pill.bad{background:var(--bad-bg); color:var(--bad)}
.pill.info{background:color-mix(in srgb,var(--brand) 12%,transparent); color:var(--brand)}

/* cifras */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px}
.stat{background:var(--surface); border:1px solid var(--line-2); border-radius:14px; padding:14px 16px}
.stat b{display:block; font-size:24px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.stat span{font-size:12px; color:var(--muted)}

/* diálogo */
dialog{border:0; border-radius:var(--r-card); padding:0; background:var(--surface); color:var(--ink); box-shadow:var(--shadow); width:min(520px,calc(100vw - 32px))}
dialog::backdrop{background:rgba(10,15,28,.5)}
dialog form{padding:22px}
dialog h2{font-size:18px; margin-bottom:14px}
dialog .actions{display:flex; justify-content:flex-end; gap:8px; margin-top:16px}

.empty{padding:28px 16px; text-align:center; color:var(--muted); font-size:13.5px}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:60; background:var(--night); color:var(--on-night); padding:10px 18px; border-radius:var(--r-pill); font-size:13.5px; box-shadow:var(--shadow)}
code{font-family:var(--f-code); font-size:.9em; background:var(--paper-2); padding:1px 6px; border-radius:6px}
pre{font-family:var(--f-code); font-size:12.5px; background:var(--night); color:#d7e3ee; padding:16px; border-radius:12px; overflow-x:auto; line-height:1.55; margin:0}