:root{
  --color-bg:#f5f5f7;--color-sidebar:#141316;--color-surface:#fff;--color-surface-soft:#faf9fb;
  --color-text:#27242c;--color-text-muted:#77727d;--color-border:#e6e3e9;--color-border-strong:#d6d1da;
  --color-primary:#7252b5;--color-primary-strong:#5c3e9d;--color-primary-soft:#f0eafd;
  --color-accent:#c7a75b;--color-success:#278a52;--color-success-soft:#eaf7ef;
  --color-warning:#c87520;--color-warning-soft:#fff4e5;--color-error:#c43d4b;--color-error-soft:#fff0f2;
  --radius-xs:6px;--radius-sm:9px;--radius-md:13px;--radius-lg:18px;--radius-pill:999px;
  --shadow-sm:0 2px 8px rgba(28,22,35,.05);--shadow-md:0 12px 30px rgba(28,22,35,.09);--shadow-lg:0 24px 60px rgba(13,10,17,.18);
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;--space-9:48px;
  --text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.5rem;--text-2xl:2rem;
  --transition-fast:150ms ease;--transition-base:220ms ease;--sidebar-width:278px;--content-max:1600px;
}
*{box-sizing:border-box}
html{min-width:320px;background:var(--color-bg)}
body{margin:0;font-family:Inter,"Segoe UI",Arial,sans-serif;background:var(--color-bg);color:var(--color-text);font-size:var(--text-base);line-height:1.5}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{transition:border-color var(--transition-fast),background-color var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast)}
a{color:var(--color-primary);text-underline-offset:3px}a:hover{color:var(--color-primary-strong)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(114,82,181,.25);outline-offset:2px}

.shell{display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);min-height:100vh}
.content{width:100%;max-width:var(--content-max);padding:var(--space-7) clamp(22px,3vw,48px) var(--space-9)}
.content>header,.section-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-5);margin-bottom:var(--space-6)}
.content>header h1,.section-header h1{margin:0;color:var(--color-text);font-size:clamp(1.65rem,2.2vw,2.15rem);line-height:1.2;letter-spacing:-.035em}
.content>header p,.section-header p{margin:var(--space-2) 0 0;color:var(--color-text-muted)}
/* Rotulo de seccion. Definicion canonica: las hojas de modulo se cargan despues y pueden ajustarla. */
.section-kicker{display:block;margin-bottom:6px;color:var(--color-primary);font-size:var(--text-xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase}

.sidebar{position:sticky;top:0;display:flex;flex-direction:column;width:var(--sidebar-width);height:100vh;padding:24px 18px 18px;background:var(--color-sidebar);color:#fff;overflow-y:auto;z-index:40}
.sidebar-brand{position:relative;display:flex;align-items:center;justify-content:center;min-height:148px;padding:14px 34px 20px;border-bottom:1px solid rgba(255,255,255,.075)}
.sidebar-brand::after{position:absolute;bottom:-1px;left:50%;width:34px;height:1px;background:rgba(199,167,91,.68);content:"";transform:translateX(-50%)}
.sidebar-brand-identity{display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;min-width:0}
.sidebar-brand-logo{display:block;width:100%;max-width:118px;height:auto;object-fit:contain}
.sidebar-brand-system-name{margin-top:7px;color:rgba(220,211,190,.76);font-size:9px;font-weight:700;letter-spacing:.32em;line-height:1;text-align:center;text-indent:.32em}
.sidebar-nav{display:flex;flex:1;flex-direction:column;padding:18px 0}.sidebar-group{display:grid;gap:5px}.sidebar-group-admin{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.sidebar-group-label{margin:0 10px 8px;color:#77727f;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.sidebar-link{position:relative;display:flex;align-items:center;gap:12px;min-height:43px;padding:10px 11px;border-radius:var(--radius-sm);color:#b9b5bf;text-decoration:none;font-size:14px;font-weight:600}
.sidebar-link .nav-icon{flex:0 0 20px;width:20px;height:20px}.sidebar-link>span{min-width:0}
.sidebar-link small{margin-left:auto;padding:3px 6px;border:1px solid rgba(255,255,255,.09);border-radius:var(--radius-pill);color:#77727f;font-size:8px;font-weight:700;letter-spacing:.02em}
a.sidebar-link:hover{background:rgba(255,255,255,.065);color:#fff;transform:translateX(2px)}
.sidebar-link.is-active{background:linear-gradient(90deg,rgba(114,82,181,.36),rgba(114,82,181,.18));color:#fff;box-shadow:inset 0 0 0 1px rgba(145,112,213,.17)}
.sidebar-link.is-active::before{position:absolute;top:10px;bottom:10px;left:0;width:3px;border-radius:var(--radius-pill);background:var(--color-accent);content:""}
.sidebar-link.is-active .nav-icon{color:#c4acf3}.sidebar-link.is-disabled{cursor:default;opacity:.62}
.sidebar-user{display:grid;gap:12px;padding:16px 8px 0;border-top:1px solid rgba(255,255,255,.08)}
.sidebar-user-profile{display:flex;align-items:center;gap:11px;min-width:0}.sidebar-avatar{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:50%;background:#29252e;color:#e9dcae;font-size:11px;font-weight:800;letter-spacing:.04em}
.sidebar-user-copy{display:grid;min-width:0}.sidebar-user-copy strong,.sidebar-user-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-user-copy strong{color:#f7f6f8;font-size:13px}.sidebar-user-copy small{color:#8e8994;font-size:11px}
.sidebar-logout{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:9px 12px;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);background:transparent;color:#aaa5af;font-size:12px;font-weight:700;cursor:pointer}
.sidebar-logout:hover{border-color:rgba(196,61,75,.45);background:rgba(196,61,75,.12);color:#fff}.sidebar-logout .nav-icon{width:17px;height:17px}
.sidebar-logout.is-active{border-color:rgba(199,167,91,.34);background:rgba(199,167,91,.12);color:#fff}
.sidebar-close,.mobile-menu-button,.sidebar-backdrop{display:none}.sidebar-backdrop[hidden]{display:none!important}

.btn,.primary-action,.secondary-action,.danger-action,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 16px;border:1px solid transparent;border-radius:var(--radius-sm);font-weight:700;text-decoration:none;cursor:pointer}
.btn,.primary-action{background:var(--color-primary);color:#fff;box-shadow:0 5px 14px rgba(114,82,181,.2)}
.btn:hover,.primary-action:hover{background:var(--color-primary-strong);color:#fff;transform:translateY(-1px)}
.secondary-action,.secondary{border-color:var(--color-border-strong);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-sm)}
.secondary-action:hover,.secondary:hover{border-color:#bdb7c4;background:var(--color-surface-soft);color:var(--color-text)}
.danger-action{background:var(--color-error);color:#fff}.danger-action:hover{background:#a93240;color:#fff}
.btn:disabled,.primary-action:disabled,.secondary-action:disabled,.danger-action:disabled{cursor:not-allowed;opacity:.5;transform:none}

.card,.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}
.card{padding:var(--space-5)}.panel{padding:var(--space-6)}.panel h2{margin-top:0}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);margin:var(--space-7) 0}
.card small{display:block;color:var(--color-text-muted)}.card strong{display:block;margin-top:10px;font-size:var(--text-2xl);letter-spacing:-.03em}
.badge,.tag{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:var(--radius-pill);background:#efedf1;color:#625d68;font-size:var(--text-xs);font-weight:700}
.badge-success{background:var(--color-success-soft);color:var(--color-success)}.badge-warning{background:var(--color-warning-soft);color:var(--color-warning)}.badge-error{background:var(--color-error-soft);color:var(--color-error)}.badge-primary{background:var(--color-primary-soft);color:var(--color-primary-strong)}
.state-badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:800;line-height:1.2;white-space:nowrap}
.state-neutral{background:#eceff3;color:#505866}
.state-confirmed{background:#e3efff;color:#1f5fae}
.state-open,.state-transit{background:#fff0d6;color:#98510a}
.state-success{background:#e2f3e7;color:#176b39}
.state-cancelled,.state-danger{background:#fde5e7;color:#9c2936}
.state-reserved{background:#eee6ff;color:#6541a5}
.state-sold{background:#4b5563;color:#fff}
.flash,.alert,.inventory-flash{margin:var(--space-5) 0;padding:13px 15px;border:1px solid transparent;border-radius:var(--radius-sm)}
.flash.ok,.alert-success,.inventory-flash.ok{border-color:#cbe9d6;background:var(--color-success-soft);color:#176b39}
.flash.error,.alert-error,.inventory-flash.error{border-color:#f3cbd0;background:var(--color-error-soft);color:#9c2936}
.alert-warning,.inventory-flash.warning{border-color:#f2d8b4;background:var(--color-warning-soft);color:#8d5117}
.flash ul,.alert ul,.inventory-flash ul{margin-top:6px;margin-bottom:0}
label{color:#57515d;font-size:var(--text-sm);font-weight:650}
input,select,textarea{border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text)}
input:hover,select:hover,textarea:hover{border-color:#bdb7c4}input:focus,select:focus,textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(114,82,181,.11);outline:0}
input:disabled,select:disabled,textarea:disabled{background:#f1eff2;color:#8b858f}
.table-wrap,.inventory-table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}
[hidden]{display:none!important}
th,td{padding:14px;border-bottom:1px solid var(--color-border);text-align:left;vertical-align:middle}
th{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:800;letter-spacing:.035em;text-transform:uppercase}
tbody tr{transition:background-color var(--transition-fast)}tbody tr:hover{background:var(--color-surface-soft)}
.empty-state{display:grid;justify-items:center;padding:56px 24px;text-align:center}.empty-state h2{margin:12px 0 5px;font-size:var(--text-lg)}.empty-state p{max-width:480px;margin:0;color:var(--color-text-muted)}
.empty-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--color-primary-soft);color:var(--color-primary);font-size:24px}
.status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-6)}
.status-grid div{padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-soft)}
.status-grid b,.status-grid span{display:block}.status-grid span{margin-top:6px;color:var(--color-text-muted)}

.login-body{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 0,#28202f 0,var(--color-sidebar) 48%,#0e0d10 100%)}
.login-card{width:min(420px,92vw);padding:42px;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-lg)}
.brand-mark{display:grid;place-items:center;width:58px;height:58px;margin-bottom:24px;border-radius:16px;background:linear-gradient(145deg,var(--color-primary),var(--color-primary-strong));color:#fff;font-weight:800;box-shadow:0 10px 24px rgba(114,82,181,.3)}
.login-card h1{margin:0;letter-spacing:-.03em}.muted,.version{color:var(--color-text-muted)}
.login-card label{display:block;margin:20px 0 7px}.login-card input{width:100%;padding:13px}.login-card button{width:100%;margin-top:24px;padding:13px;border:0;border-radius:var(--radius-sm);background:var(--color-primary);color:#fff;font-weight:700;cursor:pointer}
.login-card button:hover{background:var(--color-primary-strong)}.version{text-align:center;font-size:var(--text-xs);margin-top:22px}

@media(max-width:1050px){.cards,.status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  body.sidebar-open{overflow:hidden;overscroll-behavior:none}.shell{display:block}.content{padding:76px 20px 36px}
  .sidebar{position:fixed;top:0;bottom:0;left:0;z-index:100;width:min(var(--sidebar-width),calc(100vw - 52px));max-width:calc(100vw - 52px);height:100dvh;padding-top:calc(24px + env(safe-area-inset-top));padding-left:calc(18px + env(safe-area-inset-left));overscroll-behavior:contain;transform:translateX(-105%);transition:transform var(--transition-base);box-shadow:var(--shadow-lg)}
  body.sidebar-open .sidebar{transform:translateX(0)}
  .sidebar-backdrop{position:fixed;inset:0;z-index:90;display:block;background:rgba(12,10,14,.58);backdrop-filter:blur(2px)}
  .sidebar-close{position:absolute;top:calc(6px + env(safe-area-inset-top));right:-4px;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:var(--radius-sm);background:rgba(255,255,255,.06);color:#aaa5af;cursor:pointer}
  .sidebar-close .nav-icon{width:19px;height:19px}
  .mobile-menu-button{position:fixed;top:calc(16px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left));z-index:80;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:rgba(255,255,255,.94);color:var(--color-text);box-shadow:var(--shadow-md);cursor:pointer}
  .mobile-menu-button .nav-icon{width:22px;height:22px}
}
@media(max-width:620px){.content>header,.section-header{align-items:stretch;flex-direction:column}.cards,.status-grid{grid-template-columns:1fr}.panel{padding:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}}
