/* ==========================================================================
   ALCOMOSA - Panel administrativo
   Tema OSCURO por defecto. El tema claro se activa con <html class="light">.
   ========================================================================== */

:root{
  color-scheme:dark;
  /* Original dark palette. */
  --brand-blue:#063B70;
  --brand-yellow:#c9b27a;
  --brand-yellow-hover:#b39455;
  --app-bg:#0a1120;
  --sidebar-bg:#0b1322;
  --surface-bg:#101b2e;
  --table-header-bg:#16243c;
  --table-header-text:#c2d1e3;
  --text-primary:#e9f0f9;
  --text-secondary:#c2d1e3;
  --border-color:#223350;
  --danger-color:#fb7185;
  --positive-color:#3ad39b;
  --info-color:#A9CFF0;
  --info-soft:rgba(85,160,222,.14);
  --accent-text:var(--brand-yellow);
  --sidebar-text:#F5F7FA;
  --sidebar-muted:#A8B9CC;
  --sidebar-active:#D6B15F;
  --sidebar-line:rgba(148,180,220,.12);
  --bg:var(--app-bg);
  --bg-glow:radial-gradient(1150px 540px at 85% -15%, rgba(201,178,122,.09), transparent 60%),radial-gradient(820px 420px at 2% 4%, rgba(180,140,70,.05), transparent 58%);
  --surface:var(--surface-bg);
  --surface-2:#16243c;
  --surface-3:#1c2c47;
  --sidebar:var(--sidebar-bg);
  --line:var(--border-color);
  --line-soft:#1a2942;
  --text:var(--text-primary);
  --text-2:var(--text-secondary);
  --muted:#8598b2;
  --muted-2:#6a7f9b;
  --accent:var(--accent-text);
  --accent-2:var(--brand-yellow-hover);
  --accent-deep:#8a6d38;
  --accent-ink:#1a1408;
  --accent-soft:rgba(201,178,122,.14);
  --accent-line:rgba(201,178,122,.34);
  --success:var(--positive-color);
  --success-soft:rgba(58,211,155,.14);
  --danger:var(--danger-color);
  --danger-soft:rgba(251,113,133,.14);
  --warn:#fbbf24;
  --warn-soft:rgba(251,191,36,.14);
  --r-sm:8px;--r:12px;--r-lg:18px;
  --shadow:0 20px 45px -22px rgba(0,0,0,.75);
  --shadow-sm:0 6px 18px -10px rgba(0,0,0,.6);
  --ring:0 0 0 3px rgba(201,178,122,.22);
  --font:"Segoe UI Variable Text","Segoe UI",Inter,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Segoe UI Variable Display","Segoe UI Semibold","Segoe UI",Inter,-apple-system,sans-serif;
  --font-mono:"Cascadia Mono","JetBrains Mono",ui-monospace,Consolas,"SF Mono",monospace;
  --chevron:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238598b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6.5 8 10.5 12 6.5'/></svg>");
}

html.light{
  color-scheme:dark;
  /* Corporate blue palette, retained under the existing light theme toggle. */
  --brand-blue:#063B70;
  --brand-yellow:#FFCD00;
  --brand-yellow-hover:#EAC000;
  --app-bg:#061A30;
  --sidebar-bg:#06172B;
  --surface-bg:#082B4F;
  --table-header-bg:#0B385F;
  --table-header-text:#F4F7FB;
  --text-primary:#F4F7FB;
  --text-secondary:#AFC4D9;
  --border-color:#17466F;
  --danger-color:#FF8585;
  --positive-color:#65D2A8;
  --info-color:#A9CFF0;
  --info-soft:rgba(85,160,222,.14);
  --accent-text:var(--brand-yellow);
  --sidebar-text:#F4F7FB;
  --sidebar-muted:#AFC4D9;
  --sidebar-active:var(--brand-yellow);
  --sidebar-line:rgba(175,196,217,.18);
  --bg:var(--app-bg);
  --bg-glow:none;
  --surface:var(--surface-bg);
  --surface-2:#0B3358;
  --surface-3:#103E65;
  --sidebar:var(--sidebar-bg);
  --line:var(--border-color);
  --line-soft:#163D60;
  --text:var(--text-primary);
  --text-2:var(--text-secondary);
  --muted:#AFC4D9;
  --muted-2:#91B0CE;
  --accent:var(--accent-text);
  --accent-2:var(--brand-yellow-hover);
  --accent-deep:#B79700;
  --accent-ink:#061A30;
  --accent-soft:rgba(255,205,0,.12);
  --accent-line:rgba(255,205,0,.35);
  --success:var(--positive-color);
  --success-soft:rgba(39,168,121,.14);
  --danger:var(--danger-color);
  --danger-soft:rgba(229,72,72,.14);
  --warn:var(--accent-text);
  --warn-soft:var(--accent-soft);
  --r-sm:8px;--r:12px;--r-lg:18px;
  --shadow:0 16px 36px -24px rgba(0,0,0,.55);
  --shadow-sm:0 6px 18px -12px rgba(0,0,0,.4);
  --ring:0 0 0 3px rgba(255,205,0,.25);
  --font:"Segoe UI Variable Text","Segoe UI",Inter,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Segoe UI Variable Display","Segoe UI Semibold","Segoe UI",Inter,-apple-system,sans-serif;
  --font-mono:"Cascadia Mono","JetBrains Mono",ui-monospace,Consolas,"SF Mono",monospace;
  --chevron:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23AFC4D9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6.5 8 10.5 12 6.5'/></svg>");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  background:var(--bg-glow),var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--font);
  font-size:14.5px;
  line-height:1.5;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button,input,select,textarea{font:inherit;letter-spacing:inherit}
code{font-family:var(--font-mono);font-size:.86em}
::selection{background:var(--accent-soft);color:var(--text)}

*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--muted-2);background-clip:content-box}

/* ==========================================================================
   Estructura
   ========================================================================== */

.shell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}

.sidebar{
  position:sticky;top:0;height:100vh;
  height:100dvh;
  display:flex;flex-direction:column;
  padding:22px 14px 18px;
  background:var(--sidebar);
  border-right:1px solid var(--sidebar-line);
  color:var(--sidebar-text);
}

.brand{display:flex;align-items:center;gap:11px;color:#fff;padding:2px 8px 22px;text-decoration:none}
.brand:hover{text-decoration:none}
.sidebar .brand{justify-content:center}
.sidebar .brand .company-logo{
  display:block;width:200px;max-width:100%;height:auto;
}
.brand-mark{
  display:grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:11px;font-weight:800;font-size:14px;letter-spacing:-.04em;
  color:#f7f0e4;
  background:linear-gradient(145deg,var(--accent-2),var(--accent-deep));
  box-shadow:0 6px 16px -6px rgba(179,148,85,.7),inset 0 1px 0 rgba(255,255,255,.28);
}
.brand b{display:block;font-family:var(--font-display);font-size:14.5px;font-weight:700;letter-spacing:.16em}
.brand small,.sidebar-foot small{display:block;color:var(--sidebar-muted);font-size:10px;letter-spacing:.05em;margin-top:1px}

.sidebar nav{display:grid;gap:4px;min-height:0;overflow-y:auto;margin:0 -4px;padding:0 4px 18px}
.sidebar nav a,.sidebar nav .install-app{
  position:relative;display:flex;align-items:center;gap:11px;
  padding:9px 12px;border-radius:9px;
  color:var(--sidebar-text);font-size:15px;font-weight:500;text-decoration:none;
  transition:background .13s ease,color .13s ease;
}
.sidebar nav a svg,.sidebar nav .install-app svg{width:17px;height:17px;flex:none;color:var(--sidebar-text);stroke-width:1.5}
.sidebar nav a.on svg{color:var(--accent-ink)}
.sidebar nav a:hover,.sidebar nav .install-app:hover{background:rgba(168,185,204,.10);text-decoration:none}
.sidebar nav a.on{background:var(--sidebar-active);color:var(--accent-ink);font-weight:600}
.sidebar nav a:focus-visible,.sidebar nav .install-app:focus-visible,.sidebar-foot button:focus-visible{outline:2px solid var(--sidebar-active);outline-offset:3px}
.sidebar nav p{margin:18px 12px 5px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sidebar-muted)}
.sidebar nav .install-app{border:0;background:transparent;font-family:inherit;text-align:left;cursor:pointer;width:100%}
.sidebar nav .install-app[hidden]{display:none}
.install-dialog{width:min(380px,calc(100vw - 48px));box-sizing:border-box;padding:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.install-dialog::backdrop{background:rgba(3,10,22,.65)}
.install-dialog h2{margin:0;font-size:18px}
.install-dialog p{margin:14px 0;line-height:1.5}
.install-dialog form{display:flex;justify-content:flex-end}

.sidebar-foot{position:relative;flex-shrink:0;margin-top:auto;padding:14px 0 0;display:grid;grid-template-columns:minmax(0,1fr) 40px;align-items:center;gap:8px;border-top:1px solid var(--sidebar-line)}
.sidebar-foot strong{font-size:14px;color:var(--sidebar-text);font-weight:600;overflow-wrap:anywhere}
.sidebar-foot small{color:var(--sidebar-muted);font-size:11px}
.sidebar-foot form{margin:0}
.theme,.sidebar-foot button{
  display:flex;align-items:center;gap:8px;width:100%;
  border:0;background:transparent;color:var(--sidebar-text);
  padding:0;cursor:pointer;text-align:left;font-size:14px;
}
.theme:hover,.sidebar-foot button:hover{color:var(--sidebar-active)}
.sidebar-foot button svg{flex:none;color:var(--sidebar-text);stroke-width:1.5}
/* Appearance control with the glass flash seen in the reference video. */
.sidebar-foot .theme{
  --theme-angle:0deg;--theme-start:-180deg;
  position:relative;isolation:isolate;width:40px;height:40px;grid-column:2;grid-row:1;
  justify-self:end;
  display:flex;align-items:center;justify-content:center;padding:0;
  border:0;border-radius:14px;background:linear-gradient(145deg,#fff,#E5EBF3);color:#172033;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(255,255,255,.3),0 4px 12px rgba(0,0,0,.2);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  -webkit-tap-highlight-color:transparent;
  transition:background .25s ease,color .25s ease,transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease;
}
.sidebar-foot .theme::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;
  background:radial-gradient(ellipse at 25% 12%,#FFF2B9 0%,#F5BD4F 25%,transparent 62%),
    radial-gradient(ellipse at 95% 30%,#EDAB66 0%,transparent 60%),
    radial-gradient(ellipse at 60% 100%,#92C9FF 0%,#528AD2 30%,transparent 66%),#A48B70;
  background-size:140% 140%;background-position:20% 20%;
  box-shadow:inset 0 0 0 1px rgba(255,235,182,.7),inset 0 2px 5px rgba(255,255,255,.55);
}
.sidebar-foot .theme::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.48) 48%,rgba(255,255,255,.12) 55%,transparent 68%);
  background-size:300% 100%;background-position:100% 0;
  box-shadow:0 -2px 13px rgba(255,184,43,.3),0 4px 12px rgba(91,154,255,.25);
}
.sidebar-foot .theme svg{width:25px;height:25px;color:inherit;stroke-width:1.8;transform:rotate(var(--theme-angle))}
.sidebar-foot .theme:hover{color:#172033;transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 5px 16px rgba(0,0,0,.24)}
.sidebar-foot .theme:active{transform:scale(.94)}
html.light .sidebar-foot .theme{
  --theme-angle:180deg;--theme-start:0deg;
  background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.09));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.12),0 4px 12px rgba(0,0,0,.16);
}
html.light .sidebar-foot .theme:hover{background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.13));color:#fff}
.sidebar-foot .theme.theme-animating::before{animation:theme-glass-flash .85s ease-out both}
.sidebar-foot .theme.theme-animating::after{animation:theme-glass-halo .85s ease-out both}
.sidebar-foot .theme.theme-animating svg{animation:theme-symbol-turn .55s cubic-bezier(.22,.7,.25,1) both,theme-symbol-flash .85s ease-out both}
@keyframes theme-glass-flash{
  0%{opacity:0;background-position:0% 0%}
  20%{opacity:1}
  45%{opacity:.95}
  72%{opacity:.4}
  100%{opacity:0;background-position:100% 100%}
}
@keyframes theme-glass-halo{0%{opacity:0;background-position:100% 0}25%{opacity:.85}70%{opacity:.3}100%{opacity:0;background-position:0% 0}}
@keyframes theme-symbol-turn{from{transform:rotate(var(--theme-start))}to{transform:rotate(var(--theme-angle))}}
@keyframes theme-symbol-flash{0%,100%{color:inherit}18%,48%{color:#fff}}
@media(prefers-reduced-motion:reduce){
  .sidebar-foot .theme{transition:none}
  .sidebar-foot .theme.theme-animating::before,
  .sidebar-foot .theme.theme-animating::after,
  .sidebar-foot .theme.theme-animating svg{animation-duration:.01s}
}
.sidebar-account{grid-column:1;grid-row:1;min-width:0;padding-top:0;border-top:0}
.sidebar-account summary{display:flex;align-items:center;gap:8px;min-height:48px;padding:5px 6px;cursor:pointer;list-style:none;border-radius:10px;box-sizing:border-box;transition:background .15s}
.sidebar-account summary:hover,.sidebar-account[open] summary{background:rgba(168,185,204,.08)}
.sidebar-account .account-avatar{display:flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;border:1px solid var(--sidebar-line);border-radius:50%;background:var(--info-soft);color:var(--sidebar-text);font-size:13px;font-weight:600}
.sidebar-account .account-info{flex:1;min-width:0;display:grid;gap:3px}
.sidebar-account .account-info strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:18px;font-size:13px}
.sidebar-account .account-info small{display:block;font-size:10px;line-height:14px}
.sidebar-account summary::-webkit-details-marker{display:none}
.sidebar-account summary>span{min-width:0}
.sidebar-account summary:hover strong{color:var(--sidebar-active)}
.sidebar-account summary:focus-visible{outline:2px solid var(--sidebar-active);outline-offset:3px}
.sidebar-account .account-chevron{flex:none;width:12px;height:12px;color:var(--sidebar-muted);transition:transform .15s ease}
.sidebar-account[open] .account-chevron{transform:rotate(180deg)}
.sidebar-account form{position:absolute;bottom:calc(100% + 8px);left:0;right:0;z-index:30;margin:0;padding:6px;border:1px solid var(--line);border-radius:11px;background:var(--sidebar-bg);box-shadow:var(--shadow-sm)}
.sidebar-account form button{padding:11px 12px;border-radius:7px;font-size:13px}
.sidebar-account form button:hover{background:rgba(168,185,204,.08)}

main{min-width:0;width:100%;max-width:1640px;padding:30px 34px 60px}

/* ==========================================================================
   Encabezados de pagina - jerarquia deliberada, no simetrica
   ========================================================================== */

header{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  padding-bottom:22px;margin-bottom:26px;
  border-bottom:1px solid var(--line-soft);
}
.header-actions{display:flex;gap:9px;flex:none}

h1{
  font-family:var(--font-display);
  font-size:31px;font-weight:700;line-height:1.12;
  letter-spacing:-.032em;margin:0;
}
h2{font-family:var(--font-display);font-size:15.5px;font-weight:650;letter-spacing:-.014em;margin:0 0 16px}
header p{margin:8px 0 0;color:var(--text-2);font-size:14px;line-height:1.45;max-width:48ch}
.card p{margin:3px 0;color:var(--muted)}

.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10px;font-weight:700;letter-spacing:.17em;color:var(--accent);
}
.eyebrow+h1{margin-top:6px}
.eyebrow::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--accent);opacity:.7}

/* ==========================================================================
   KPIs - anchos desiguales para romper la rejilla plana
   ========================================================================== */

.kpis{display:grid;grid-template-columns:1.25fr 1fr 1fr 1.35fr;gap:14px;margin-bottom:22px}
.kpis article{
  position:relative;overflow:hidden;
  padding:19px 20px 17px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.kpis article::after{
  content:"";position:absolute;inset:0 auto auto 0;height:2px;width:44px;
  background:var(--accent);border-radius:0 2px 2px 0;opacity:.85;
}
.kpis article:first-child{background:var(--surface);border-color:var(--accent-line)}
.kpis article span{display:block;font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.kpis article b{
  display:block;font-family:var(--font-display);
  font-size:33px;font-weight:700;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;margin:9px 0 4px;
}
.kpis article small{display:block;color:var(--muted-2);font-size:12px}
.kpis article.danger{border-color:var(--danger);background:var(--surface)}
.kpis article.danger::after{background:var(--danger)}
.kpis article.danger b{color:var(--danger)}

/* ==========================================================================
   Tarjetas
   ========================================================================== */

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  padding:20px 22px;
  margin-bottom:18px;
}
.card>h2{display:flex;align-items:center;gap:9px}
.card>h2::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--accent);flex:none}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.card-head h2{margin:0;display:flex;align-items:center;gap:9px}
.card-head h2::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--accent);flex:none}
.card-head a{font-size:13px;font-weight:600}

/* ==========================================================================
   TABLAS - encabezados alineados, fijos y con presencia
   ========================================================================== */

.table-wrap{
  overflow-x:auto;
  margin:0 -22px -20px;
  border-top:1px solid var(--line);
  border-radius:0 0 var(--r-lg) var(--r-lg);
}
.card>.table-wrap:first-child{margin-top:-20px;border-top:0;border-radius:var(--r-lg)}

table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}

thead th{
  position:sticky;top:0;z-index:2;
  background:var(--table-header-bg);
  padding:12px 14px;
  font-size:10.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--table-header-text);
  text-align:left;white-space:nowrap;
  border-bottom:1px solid var(--line);
  box-shadow:inset 0 -1px 0 var(--line);
}
thead th:first-child{padding-left:22px}
thead th:last-child{padding-right:22px}

tbody td{
  padding:13px 14px;
  border-bottom:1px solid var(--line-soft);
  vertical-align:middle;
  white-space:nowrap;
  color:var(--text-2);
}
tbody td:first-child{padding-left:22px}
tbody td:last-child{padding-right:22px}
tbody td b{color:var(--text);font-weight:650;letter-spacing:-.01em}
tbody td small{display:block;color:var(--muted);font-size:12px;margin-top:2px;font-weight:400}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .1s ease}
tbody tr:hover td{background:var(--surface-3)}

th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
td.num{font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:var(--text)}
th.mid,td.mid{text-align:center}
th.act,td.act{text-align:right;padding-right:22px}

.dashboard-table th,.dashboard-table td,.movements-table th,.movements-table td{
  text-align:center;padding-left:16px;padding-right:16px;
}
.dashboard-table thead th,.movements-table thead th{
  font-size:13px;letter-spacing:.06em;line-height:1.5;
  padding-top:15px;padding-bottom:15px;
}
.dashboard-table tbody td,.movements-table tbody td{
  font-size:15px;line-height:1.5;padding-top:16px;padding-bottom:16px;
}
.dashboard-table td.num,.movements-table td.num{font-size:15px}
.dashboard-table td small,.movements-table td small{font-size:13px;margin-top:4px}
.dashboard-table .pill,.movements-table .pill{font-size:13px;line-height:1.4}
td.act form{display:inline}
td.act form+form{margin-left:12px}
.number{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:600;color:var(--text)}
td.wrap{white-space:normal;min-width:190px}
.movements-table .movement-notes{text-align:left}
.movements-table td.movement-notes{
  width:260px;min-width:210px;max-width:280px;
  font-size:13.5px;line-height:1.5;overflow-wrap:anywhere;
}
.movements-table .movement-notes small{font-size:12px}
td.flow{white-space:nowrap;font-family:var(--font-mono);font-size:12px;color:var(--muted)}
td.flow b{font-family:var(--font);font-size:13px}

.empty{text-align:center;color:var(--muted);padding:46px 20px!important;font-size:13.5px;white-space:normal}

/* ==========================================================================
   Pildoras
   ========================================================================== */

.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);
  border:1px solid var(--accent-line);
  font-size:11px;font-weight:650;letter-spacing:.02em;white-space:nowrap;
}
.pill.green{background:var(--success-soft);color:var(--success);border-color:color-mix(in srgb,var(--success) 32%,transparent)}
.pill.red{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 32%,transparent)}
.pill.green::before,.pill.red::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* ==========================================================================
   Botones
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;padding:9px 16px;
  border:1px solid var(--line);border-radius:10px;
  background:var(--surface-2);color:var(--text);
  font-size:13.5px;font-weight:600;letter-spacing:-.005em;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:border-color .13s ease,background .13s ease,color .13s ease,transform .08s ease;
}
.btn:hover{border-color:var(--accent-line);background:var(--surface-3);color:var(--text);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:0;box-shadow:var(--ring)}
.btn.primary{
  border-color:transparent;color:var(--accent-ink);
  background:var(--brand-yellow);
  box-shadow:none;
}
.btn.primary:hover{background:var(--brand-yellow-hover);color:var(--accent-ink)}
.btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 38%,transparent);background:var(--danger-soft)}
.btn.danger:hover{border-color:var(--danger);color:var(--danger)}

.link{border:0;background:none;color:var(--accent);padding:0;cursor:pointer;font-size:13px;font-weight:600}
.link:hover{text-decoration:underline;text-underline-offset:3px}
.danger-text{color:var(--danger)}

/* ==========================================================================
   Formularios y DROPDOWNS
   ========================================================================== */

.filters{display:flex;gap:9px;margin-bottom:18px;flex-wrap:wrap}
.filters .input{max-width:380px}
.connected-select{position:relative;width:100%;min-width:0}
.filters .connected-select{max-width:380px}
.input-attach>.connected-select{flex:1}
.input-attach>.connected-select>.connected-select-trigger{border-radius:10px 0 0 10px}
.input-attach>.connected-select.is-open>.connected-select-trigger{border-radius:10px 0 0 0}
.connected-select .connected-select-trigger{
  text-align:left;padding-right:40px;cursor:pointer;
  background:var(--chevron) no-repeat right 13px center,var(--surface-2);
}
.connected-select.is-open{z-index:10}
.connected-select.is-open .connected-select-trigger{
  border-radius:10px 10px 0 0;border-color:var(--accent);
  border-bottom-color:var(--accent-line);box-shadow:none;
  background:linear-gradient(var(--accent-soft),var(--accent-soft)),var(--surface-2);
  color:var(--accent);font-weight:650;
}
.connected-select.is-open .connected-select-trigger::after{
  content:"";position:absolute;right:17px;top:15px;
  width:7px;height:12px;border:solid currentColor;border-width:0 2px 2px 0;
  transform:rotate(45deg);pointer-events:none;
}
.connected-select-menu{
  position:absolute;top:100%;left:0;right:0;padding:5px;
  max-height:260px;overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface-2);border:1px solid var(--accent);border-top:0;
  border-radius:0 0 10px 10px;box-shadow:0 12px 24px rgba(0,0,0,.22);
}
.connected-select-trigger:disabled{opacity:.55;cursor:not-allowed}
.connected-select-option{
  display:block;width:100%;padding:10px 8px;border:0;border-radius:6px;
  background:transparent;color:var(--text);font-size:13.5px;text-align:left;cursor:pointer;
}
.connected-select-option:hover,.connected-select-option:focus-visible{
  background:var(--accent-soft);color:var(--accent);outline:none;
}
.searchable-select .connected-select-trigger{background-image:none;padding-right:13px;font-weight:400}
.searchable-select.is-open .connected-select-trigger{color:var(--text);background:var(--surface-2);font-weight:400}
.connected-select-option[aria-selected=true]{background:var(--accent-soft);color:var(--accent)}
.connected-select-empty{margin:0;padding:12px 8px;font-size:13px;color:var(--muted)}

.input,
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
select,textarea{
  width:100%;
  min-height:42px;
  padding:10px 13px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--text);
  font-size:13.5px;
  outline:0;
  transition:border-color .13s ease,box-shadow .13s ease,background .13s ease;
}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
.input:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--accent);
  background:var(--surface);
  box-shadow:var(--ring);
}
textarea{min-height:88px;resize:vertical;line-height:1.55}

select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:40px;
  background-image:var(--chevron);
  background-repeat:no-repeat;
  background-position:right 13px center;
  cursor:pointer;
  text-overflow:ellipsis;
}
select:focus{background-image:var(--chevron);background-repeat:no-repeat;background-position:right 13px center}
select:hover{border-color:var(--accent-line)}
select option{background:var(--surface);color:var(--text);padding:10px}
select option:checked{background:var(--accent-soft)}
select[multiple]{background-image:none;padding-right:13px;min-height:130px}

input[type=date],input[type=datetime-local],input[type=time]{cursor:pointer}
input[type=number]{appearance:textfield;-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
:root:not(.light) input[type=date]::-webkit-calendar-picker-indicator,
:root:not(.light) input[type=datetime-local]::-webkit-calendar-picker-indicator,
:root:not(.light) input[type=time]::-webkit-calendar-picker-indicator{filter:invert(.75);cursor:pointer}

.form-card{max-width:900px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.form-card label,.form-card form p{display:grid;gap:7px;margin:0 0 15px}
.form-grid label{margin:0}
.form-card label>span{font-size:12px;font-weight:650;letter-spacing:.01em;color:var(--text-2)}
.form-card label>small{color:var(--muted);font-size:11.5px}
.movement-form-card{padding:26px}
.movement-form-card .form-grid{align-items:start;gap:24px 22px}
.movement-form-card .form-grid>label{margin:0;gap:9px;align-content:start;min-width:0}
.movement-form-card label>span{font-size:13px;line-height:1.5}
.movement-form-card .input,.movement-form-card .connected-select-trigger{min-height:44px;font-size:14px}
.movement-form-card input.input,.movement-form-card .connected-select-trigger{height:44px;line-height:20px}
.movement-form-card #id_quantity{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;line-height:26px;padding-top:8px;padding-bottom:8px}
.movement-form-card textarea{height:44px;min-height:44px;line-height:20px}
.movement-form-card .actions{align-items:center;flex-wrap:wrap;margin-top:26px;padding-top:22px}
.actions{display:flex;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line-soft)}
.errorlist{color:var(--danger);margin:4px 0 0;padding-left:18px;font-size:12.5px}

.form-grid .check-row{grid-column:1/-1}
.check-row{
  display:flex!important;flex-direction:row!important;
  align-items:center;justify-content:space-between;gap:14px;
  min-height:46px;padding:10px 15px;margin:0 0 15px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface-2);cursor:pointer;
}
.check-row:hover{border-color:var(--accent-line)}
.check-row>span{margin:0;font-size:13px!important;font-weight:600}
.check-row input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:46px;height:26px;min-height:0;flex:none;
  margin:0;padding:0;border:0;border-radius:999px;
  background:var(--line);position:relative;cursor:pointer;
  transition:background .16s ease;
}
.check-row input[type=checkbox]::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);
  transition:left .16s ease;
}
.check-row input[type=checkbox]:checked{background:var(--brand-yellow)}
.check-row input[type=checkbox]:checked::after{left:23px}
.check-row input[type=checkbox]:focus-visible{box-shadow:var(--ring)}
.check-row input[type=hidden]{display:none}

.embed-field{grid-column:1/-1}
.embed{margin-top:12px;padding:15px 16px 3px;border:1px dashed var(--accent-line);border-radius:12px;background:var(--accent-soft)}
.embed b{display:block;font-size:13px}
.embed>p{margin:4px 0 13px;font-size:12px;color:var(--muted)}

/* ==========================================================================
   Bloques especificos
   ========================================================================== */

.split{display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:18px;align-items:start}
.split>.card{margin-bottom:0}
.detail-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:18px;align-items:start}
.detail-grid>.card{margin-bottom:0}

.stock{
  font-family:var(--font-display);
  font-size:46px;font-weight:700;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;color:var(--accent);margin:18px 0 4px;
}
.stock small{font-size:15px;color:var(--muted);font-weight:600;letter-spacing:0}

dl{display:grid;grid-template-columns:130px minmax(0,1fr);gap:11px 14px;margin:22px 0;padding-top:20px;border-top:1px solid var(--line-soft)}
dt{color:var(--muted);font-size:13px}
dd{margin:0;font-weight:600;color:var(--text)}

.qr-card{text-align:center}
.qr-card img{width:min(250px,100%);margin:14px auto;border-radius:12px;background:#fff;padding:10px;display:block}
.qr-card code{display:block;white-space:normal;word-break:break-all;color:var(--muted);margin:10px 0 16px;font-size:11.5px}

.token{
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:17px 20px;margin-bottom:20px;
  background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);
  border-left-width:3px;border-radius:var(--r);
  color:var(--text);
}
.token b{font-size:13.5px}
.token code{display:block;font-size:16px;margin-top:9px;word-break:break-all;color:var(--warn);font-weight:600}
.access-qr-copy{display:grid;gap:7px;min-width:0}
.access-qr-copy span{font-size:12px;color:var(--muted)}
.access-qr{width:190px;height:190px;flex:0 0 190px;padding:8px;border-radius:12px;background:#fff}
@media(max-width:650px){.token{align-items:stretch;flex-direction:column}.access-qr{width:min(240px,100%);height:auto;align-self:center}}

.message{
  padding:12px 16px;margin-bottom:16px;border-radius:var(--r);
  background:var(--success-soft);color:var(--success);
  border:1px solid color-mix(in srgb,var(--success) 30%,transparent);
  border-left-width:3px;font-size:13.5px;font-weight:500;
}
.message.warning{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 34%,transparent)}
.message.error{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 34%,transparent)}

/* ==========================================================================
   Acceso
   ========================================================================== */

.mobile-menu{display:none}

.login{
  display:grid;place-items:center;min-height:100vh;padding:24px;
  background:var(--bg-glow),var(--bg);
}
.login-card{
  width:min(410px,100%);
  padding:34px 32px 32px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
}
.login-card .brand{padding:0 0 4px;justify-content:center}
.login-card .centered b{color:var(--text)}
.login-card .centered small{color:var(--muted)}
.login-card h1{text-align:center;font-size:22px;margin-top:24px}
.login-card>p{text-align:center;color:var(--muted);margin:8px 0 26px;font-size:13.5px}
.login-card label{display:grid;gap:7px;margin-bottom:15px;font-size:12px;font-weight:650;color:var(--text-2)}
.login-card .btn{width:100%;margin-top:10px;min-height:44px}

/* ==========================================================================
   Adaptativo
   ========================================================================== */

@media(max-width:1200px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .detail-grid{grid-template-columns:1fr}
}
@media(max-width:1050px){
  .split{grid-template-columns:1fr}
  main{padding:26px 24px 50px}
}
@media(max-width:760px){
  .shell{display:block}
  .sidebar{position:fixed;z-index:30;width:262px;transform:translateX(-100%);transition:transform .22s ease}
  .menu-open .sidebar{transform:translateX(0);box-shadow:0 0 60px rgba(0,0,0,.55)}
  .mobile-menu{
    display:grid;place-items:center;position:fixed;right:14px;top:14px;z-index:35;
    width:44px;height:44px;border:1px solid var(--line);border-radius:12px;
    background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);cursor:pointer;
  }
  main{padding:68px 15px 45px}
  header{flex-direction:column;align-items:flex-start}
  .header-actions{width:100%}
  h1{font-size:26px}
  .kpis{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
}
@media(max-width:440px){
  .kpis{grid-template-columns:1fr}
}

.tracking-pill{margin-left:6px}
.inventory-type-tags{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.inventory-tabs{display:flex;gap:9px;margin-bottom:18px;flex-wrap:wrap}
.inventory-low-heading{align-items:center}
.inventory-heading-navigation{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.inventory-heading-navigation>span{font-size:12px;color:var(--muted);letter-spacing:.04em}
.inventory-heading-navigation .inventory-back{width:40px;height:40px;min-height:40px;padding:0;flex:none}
.inventory-low-heading .header-actions{align-items:center;flex-wrap:wrap}
@media(max-width:760px){.inventory-low-heading{align-items:flex-start}}
.inventory-table th,.inventory-table td{padding-left:16px;padding-right:16px;text-align:center}
.inventory-table th:first-child,.inventory-table td:first-child{padding-left:22px}
.inventory-table th:last-child,.inventory-table td:last-child{padding-right:22px}
.inventory-table{font-size:14px}
.inventory-table th{vertical-align:bottom;font-size:12px;font-weight:650;letter-spacing:.06em;line-height:1.5}
.inventory-table tbody td{vertical-align:top;line-height:1.6;padding-top:16px;padding-bottom:16px}
.inventory-table th.num,.inventory-table td.num,.inventory-table th.act,.inventory-table td.act{text-align:center}
.inventory-table .inventory-type-tags{align-items:center}
.inventory-table td.num{font-size:15px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.inventory-table td b{font-size:14px;font-weight:650}
.inventory-table td small{font-size:13px;line-height:1.5;margin-top:5px}
.inventory-table .pill{font-size:12px;font-weight:600;letter-spacing:0;line-height:1.4}
.inventory-table td .inventory-unit{font-family:var(--font);font-size:12px;font-weight:400;margin-top:4px}
.inventory-table td.act a{font-size:13px;font-weight:600}

/* ==========================================================================
   FORMULARIO DE PRODUCTO - secciones, categoria rapida y armado de kits
   ========================================================================== */

.product-form{max-width:1320px}
.product-form-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch;margin-bottom:20px}
.product-form-sections>.fset{min-width:0;margin:0}
.product-form-sections .kit-panel{container-type:inline-size}
.product-form-sections .kit-panel-head{margin-bottom:12px}
.product-form-sections .kit-add{grid-template-columns:minmax(0,1fr) 108px auto;gap:10px}
.product-form-sections .kit-add>label:first-child{grid-column:auto;min-width:0}
.product-form-sections .kit-add-qty{min-width:0}
.product-form-sections .kit-add .btn{width:auto}
.product-form-sections #component-quantity{text-align:center;font-variant-numeric:tabular-nums}
.product-form-sections .bom-empty{padding:16px 12px}
.product-form-sections .kit-foot{margin-top:12px;padding-top:12px}
@container(max-width:380px){
  .product-form-sections .kit-add{grid-template-columns:108px minmax(0,1fr)}
  .product-form-sections .kit-add>label:first-child{grid-column:1/-1}
  .product-form-sections .kit-add .btn{justify-self:start}
}
.product-form-sections>.fset{display:flex;flex-direction:column}
.product-form-sections .product-identification-section .form-grid>.check-row{grid-column:auto;align-self:end;min-height:42px;padding:7px 13px}
.product-form-sections .product-location-section .form-grid{grid-template-rows:auto auto;align-content:start}
.product-form-sections .product-location-section textarea{height:96px;min-height:96px}
.kit-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.kit-summary[hidden]{display:flex;visibility:hidden;pointer-events:none}
.kit-summary strong{display:block;font-size:13px;color:var(--text)}
.kit-summary .btn{flex:none;font-size:12px;padding:9px 12px}
.kit-summary .btn:disabled{opacity:.45;cursor:not-allowed}
.product-form-sections>.kit-section>.kit-switch{margin-top:auto}
.product-form-sections>.kit-section>.kit-summary{margin-top:24px;margin-bottom:auto}
.kit-preview{position:relative;min-width:0}
.kit-preview-trigger{border:0;padding:6px 0;background:none;color:var(--text);font:600 13px var(--font);cursor:pointer;text-decoration:underline dotted;text-underline-offset:4px}
.kit-preview-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:3px}
.kit-preview-content{display:none;position:absolute;left:0;bottom:100%;z-index:10;width:320px;max-width:calc(100vw - 100px);padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--shadow-sm)}
.kit-preview:hover .kit-preview-content,.kit-preview:focus-within .kit-preview-content{display:block}
.kit-preview-content ul{list-style:none;padding:0;margin:0;max-height:200px;overflow:auto}
.kit-preview-content li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:12px;line-height:1.4;border-bottom:1px solid var(--line-soft)}
.kit-preview-content li:last-child{border-bottom:0}
.kit-preview-content li span{min-width:0;overflow-wrap:anywhere}
.kit-preview-content li b{flex:none;font-weight:600}
.product-form>.form-bar{width:fit-content;max-width:100%;margin-inline:auto;padding:12px 16px}
.composition-dialog{width:min(740px,calc(100vw - 28px));max-height:85vh;box-sizing:border-box;border:1px solid var(--line);border-radius:18px;padding:24px;background:var(--surface);color:var(--text);box-shadow:0 24px 80px rgba(0,0,0,.45);overflow:auto;overscroll-behavior:contain}
.composition-dialog::backdrop{background:rgba(3,10,22,.65);backdrop-filter:blur(4px)}
.composition-dialog .modal-head{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.composition-dialog .kit-panel{padding:0;margin:0;border:0;background:transparent}
.composition-dialog .kit-panel-head h3{display:none}
.composition-dialog .modal-actions{padding-top:18px;border-top:1px solid var(--line);margin-top:18px}
.composition-dialog .modal-actions .btn{min-width:100px}
@media(max-width:600px){
  .kit-summary{flex-wrap:wrap;gap:12px}
  .kit-summary .btn{width:100%}
  .composition-dialog{padding:18px;max-height:90vh}
}
.product-form-sections .connected-select-trigger{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.product-form-sections .bom-table{border:1px solid var(--line);border-radius:10px;max-height:280px;overflow:auto;overscroll-behavior:contain}
.product-form-sections .bom-list{gap:0}
.product-form-sections .bom-row,.product-form-sections .bom-list-heading{
  display:grid;grid-template-columns:16px minmax(0,1fr) 76px 48px 30px;gap:8px;
  padding:9px 10px;align-items:center;
}
.product-form-sections .bom-list-heading{position:sticky;top:0;z-index:1;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:10px;font-weight:650;color:var(--muted);line-height:1.4}
.product-form-sections .bom-list-heading>span:nth-child(3),.product-form-sections .bom-list-heading>span:nth-child(4){text-align:center}
.product-form-sections .bom-row{border:0;border-bottom:1px solid var(--line-soft);border-radius:0;background:var(--surface)}
.product-form-sections .bom-row:last-child{border-bottom:0}
.product-form-sections .bom-row .bom-index{grid-column:1;grid-row:1}
.product-form-sections .bom-row .bom-name{grid-column:2;grid-row:1}
.product-form-sections .bom-row .bom-qty{display:contents}
.product-form-sections .bom-row .bom-qty input{grid-column:3;grid-row:1;width:100%;min-width:0;max-width:none;min-height:34px;height:34px;padding:6px;text-align:center;font-size:14px}
.product-form-sections .bom-row .bom-unit{grid-column:4;grid-row:1;min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.3;font-size:11px;text-align:center}
.product-form-sections .bom-row .icon-btn{grid-column:5;grid-row:1;width:30px;height:30px}
.product-form-sections .bom-row .bom-name b{overflow-wrap:anywhere;font-size:12px}
.product-form-sections .bom-row .bom-name small{font-size:11px;line-height:1.4}
@container(max-width:340px){
  .product-form-sections .bom-row,.product-form-sections .bom-list-heading{grid-template-columns:minmax(0,1fr) 76px 28px;gap:8px;padding:9px 8px}
  .product-form-sections .bom-row .bom-index,.product-form-sections .bom-list-heading>span:first-child,.product-form-sections .bom-list-heading>span:nth-child(4){display:none}
  .product-form-sections .bom-row .bom-name{grid-column:1;grid-row:1/3}
  .product-form-sections .bom-row .bom-qty input{grid-column:2;grid-row:1}
  .product-form-sections .bom-row .bom-unit{grid-column:2;grid-row:2}
  .product-form-sections .bom-row .icon-btn{grid-column:3;grid-row:1/3;width:28px;height:28px}
}
@media(max-width:1100px){.product-form-sections{grid-template-columns:1fr}}
.page-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}
.page-heading .header-actions{width:auto;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.page-back-navigation{display:flex;align-items:center;gap:12px;min-height:40px;margin-bottom:16px}
.page-back-navigation>span{font-size:12px;color:var(--muted)}
.page-back-navigation .page-back{width:40px;height:40px;min-height:40px;padding:0;flex:none}
.product-form label{display:grid;gap:7px;margin:0}
.product-form label>span{font-size:12px;font-weight:650;letter-spacing:.01em;color:var(--text-2)}
.product-form label>small{color:var(--muted);font-size:11.5px;line-height:1.5}
.product-form .wide{grid-column:1/-1}
.product-form .form-grid{align-items:start}
.product-form .form-grid .check-row{margin:0}
.product-form textarea{min-height:76px}

.form-alert{
  display:grid;gap:4px;
  margin-bottom:16px;padding:13px 16px;
  border:1px solid color-mix(in srgb,var(--danger) 38%,transparent);
  border-left-width:3px;border-radius:var(--r);
  background:var(--danger-soft);color:var(--danger);
  font-size:13px;font-weight:600;
}
.form-alert ul{margin:0;padding-left:18px}

/* Cabecera numerada de cada bloque */
.fset{margin-bottom:16px}
.fset-head{
  display:flex;gap:12px;align-items:flex-start;
  margin-bottom:20px;padding-bottom:16px;
  border-bottom:1px solid var(--line-soft);
}
.fset-step{
  flex:none;display:grid;place-items:center;
  width:26px;height:26px;margin-top:1px;
  border:1px solid var(--accent-line);border-radius:9px;
  background:var(--accent-soft);color:var(--accent);
  font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;
}
.fset-head h2{margin:0;font-size:15px}
.fset-head p{margin:4px 0 0;font-size:12.5px;color:var(--muted);line-height:1.55;max-width:66ch}

/* Barra de acciones fija al pie del formulario */
.form-bar{
  display:flex;gap:10px;align-items:center;
  padding:15px 22px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--shadow-sm);
}
.form-bar .btn{min-width:120px}

/* Etiqueta + texto de apoyo dentro de un switch */
.check-copy{display:grid;gap:3px}
.check-copy small{
  font-size:11.5px!important;font-weight:500;
  color:var(--muted);line-height:1.5;max-width:60ch;
}

/* Input con boton pegado (categoria) */
.input-attach{display:flex;align-items:stretch}
.input-attach>.input,.input-attach>select,.input-attach>input{
  flex:1;min-width:0;
  border-top-right-radius:0;border-bottom-right-radius:0;
}
.input-attach>.btn.attach{
  flex:none;margin-left:-1px;padding:9px 14px;gap:6px;
  border-top-left-radius:0;border-bottom-left-radius:0;
  color:var(--accent);font-weight:650;
}
.input-attach>.btn.attach:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);position:relative;z-index:1}
.input-attach>.btn.attach:focus-visible{position:relative;z-index:1}
.input-attach>.btn.attach svg{width:15px;height:15px;flex:none}

/* Boton icono compacto */
.icon-btn{
  display:grid;place-items:center;flex:none;
  width:34px;height:34px;padding:0;
  border:1px solid var(--line);border-radius:9px;
  background:var(--surface-2);color:var(--muted);cursor:pointer;
  transition:border-color .13s ease,color .13s ease,background .13s ease;
}
.icon-btn svg{width:16px;height:16px}
.icon-btn:hover{border-color:var(--accent-line);color:var(--text)}
.icon-btn.danger:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-soft)}
.icon-btn:focus-visible{outline:0;box-shadow:var(--ring)}

/* ---------- Bloque de composicion ---------------------------------------- */

.kit-switch{margin:0;transition:border-color .15s ease,background .15s ease}
.kit-section.on .kit-switch{border-color:var(--accent-line);background:var(--accent-soft)}

.kit-panel{
  margin-top:16px;padding:18px 18px 6px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface-2);
}
.kit-panel-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kit-panel-head h3{
  margin:0;font-family:var(--font-display);
  font-size:13.5px;font-weight:650;letter-spacing:-.01em;
}
.kit-note{margin:5px 0 16px!important;font-size:12px;color:var(--muted);line-height:1.5}
.kit-note b{color:var(--text-2)}

.kit-add{
  display:grid;grid-template-columns:minmax(0,1fr) 148px auto;
  gap:10px;align-items:end;
  padding-bottom:16px;margin-bottom:16px;
  border-bottom:1px dashed var(--line);
}
.kit-add .btn{min-height:42px}

.kit-error{
  margin:0 0 14px!important;padding:9px 12px;
  border:1px solid color-mix(in srgb,var(--danger) 34%,transparent);
  border-radius:9px;background:var(--danger-soft);
  color:var(--danger)!important;font-size:12.5px;font-weight:600;
}

.bom-list{display:grid;gap:8px}
.bom-row{
  display:grid;grid-template-columns:24px minmax(0,1fr) 168px 34px;
  gap:12px;align-items:center;
  padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;
  background:var(--surface);
}
.bom-row:hover{border-color:var(--accent-line)}
.product-form-sections .bom-row.bom-row-added{animation:bom-added 1.2s ease-out}
@keyframes bom-added{
  0%,35%{background:var(--success-soft);box-shadow:inset 3px 0 var(--success)}
  100%{background:var(--surface);box-shadow:inset 3px 0 transparent}
}
.bom-announcement{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(prefers-reduced-motion:reduce){
  .product-form-sections .bom-row.bom-row-added{animation:none;background:var(--success-soft);box-shadow:inset 3px 0 var(--success)}
}
.bom-index{
  font-size:11px;font-weight:700;color:var(--muted-2);
  font-variant-numeric:tabular-nums;text-align:center;
}
.bom-name{display:grid;gap:2px;min-width:0}
.bom-name b{font-size:13px;font-weight:650;letter-spacing:-.005em}
.bom-name small{
  color:var(--muted);font-size:11.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bom-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.bom-tags .pill{padding:2px 8px;font-size:10px}
.bom-qty{display:flex;align-items:center;gap:8px}
.bom-qty .input{min-height:38px;padding:8px 10px;text-align:right;font-variant-numeric:tabular-nums}
.bom-unit{font-size:11.5px;color:var(--muted);white-space:nowrap;flex:none;min-width:52px}

.bom-empty{
  margin:0!important;padding:26px 18px;
  border:1px dashed var(--line);border-radius:10px;
  color:var(--muted)!important;font-size:12.5px;text-align:center;line-height:1.55;
}

.kit-foot{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.kit-foot .check-row{margin:0 0 6px}

/* ---------- Modal --------------------------------------------------------- */

.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal-veil{position:absolute;inset:0;background:rgba(4,10,20,.62);backdrop-filter:blur(2px)}
.modal-card{
  position:relative;width:min(440px,100%);
  padding:22px 24px 20px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--shadow);
}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.modal-head h2{margin:0;font-size:16px}
.modal-sub{margin:6px 0 18px!important;font-size:12.5px;color:var(--muted);line-height:1.55}
.modal-card label{display:grid;gap:7px}
.modal-card label>span{font-size:12px;font-weight:650;color:var(--text-2)}
.modal-card .kit-error{margin:12px 0 0!important}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
body.modal-open{overflow:hidden}

@media(max-width:760px){
  .kit-add{grid-template-columns:1fr}
  .kit-add .btn{width:100%}
  .kit-panel{padding:15px 14px 4px}
  .bom-row{grid-template-columns:20px minmax(0,1fr) 34px;row-gap:10px}
  .bom-index{grid-area:1/1/2/2}
  .bom-name{grid-area:1/2/2/3}
  .bom-row>.icon-btn{grid-area:1/3/2/4}
  .bom-qty{grid-area:2/1/3/4}
  .form-bar{flex-direction:column-reverse;align-items:stretch}
  .fset-head p{font-size:12px}
}

/* Movement meaning remains readable in both corporate themes. */
.pill.movement-entry{color:var(--success);background:var(--success-soft);border-color:color-mix(in srgb,var(--success) 35%,transparent)}
.pill.movement-output{color:var(--info-color);background:var(--info-soft);border-color:color-mix(in srgb,var(--info-color) 35%,transparent)}
.pill.movement-warning{color:var(--accent-text);background:var(--accent-soft);border-color:var(--accent-line)}
.pill.movement-danger{color:var(--danger);background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 35%,transparent)}

/* Preserve the previous dark presentation without affecting corporate mode. */
html:not(.light) .sidebar nav a.on{color:var(--sidebar-text)}
html:not(.light) .sidebar nav a.on svg{color:#fff}
html:not(.light) .btn.primary{background:linear-gradient(160deg,var(--accent),var(--accent-2));box-shadow:0 8px 20px -12px var(--accent-2)}
html:not(.light) .btn.primary:hover{background:linear-gradient(160deg,var(--accent),var(--accent-deep))}
html:not(.light) .kpis article:first-child{background:linear-gradient(160deg,var(--accent-soft),transparent 62%),var(--surface)}
html:not(.light) .kpis article.danger{background:linear-gradient(160deg,var(--danger-soft),transparent 62%),var(--surface)}
html:not(.light) .pill.movement-entry,html:not(.light) .pill.movement-output,html:not(.light) .pill.movement-warning,html:not(.light) .pill.movement-danger{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line)}

@media(max-width:600px){.page-heading .header-actions{max-width:180px}}