/* Oli Aura · capa visual final del sistema de almacén */
html[data-theme="light"] {
  --aura-bg: #f8f7fb;
  --aura-surface: #ffffff;
  --aura-surface-soft: #fcfbfe;
  --aura-ink: #21152e;
  --aura-muted: #777080;
  --aura-border: #e8e2ef;
  --aura-border-strong: #ddd3e8;
  --aura-primary: #df318f;
  --aura-primary-dark: #b82273;
  --aura-purple: #7f3df0;
  --aura-lime: #8fb714;
  --aura-orange: #ed810e;
  --aura-danger: #d94a62;
  --aura-shadow-sm: 0 8px 24px rgba(63, 35, 84, .07);
  --aura-shadow-md: 0 16px 44px rgba(63, 35, 84, .095);
  --aura-ring: 0 0 0 4px rgba(127, 61, 240, .12);
  --white: var(--aura-ink);
  --muted: var(--aura-muted);
  --panel: var(--aura-surface);
  --panel-raised: var(--aura-surface-soft);
  --line: var(--aura-border);
  --line-strong: var(--aura-border-strong);
  --pink: var(--aura-primary);
  --purple: var(--aura-purple);
  --purple-soft: #9255f2;
  --lime: var(--aura-lime);
  --orange: var(--aura-orange);
  --danger: var(--aura-danger);
  --shadow: var(--aura-shadow-md);
}

html[data-theme="light"] body {
  min-height: 100vh;
  color: var(--aura-ink);
  background:
    radial-gradient(circle at 91% 2%, rgba(222, 49, 143, .075), transparent 25rem),
    radial-gradient(circle at 58% -8%, rgba(127, 61, 240, .07), transparent 29rem),
    linear-gradient(135deg, #fbfafc 0%, var(--aura-bg) 48%, #faf8fc 100%);
  font-family: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  font-size: 14px;
}

html[data-theme="light"] body::before {
  display: none;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] strong {
  color: var(--aura-ink);
}

/* Navegación */
html[data-theme="light"] .sidebar {
  width: 238px;
  padding: 22px 16px 18px;
  overflow-y: auto;
  border-right: 1px solid var(--aura-border);
  background: rgba(255, 255, 255, .94);
  box-shadow: 10px 0 36px rgba(52, 30, 68, .055);
  backdrop-filter: blur(18px);
}

html[data-theme="light"] .brand {
  display: grid;
  width: 100%;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin: 0 0 23px;
  padding: 7px 8px 16px;
  border-bottom: 1px solid var(--aura-border);
}

html[data-theme="light"] .brand-image-wrap {
  width: 66px;
  height: 48px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-theme="light"] .brand-image-wrap img {
  top: 50%;
  left: 50%;
  width: 138px;
  transform: translate(-47%, -46%);
}

.brand-wordmark { display: grid; min-width: 0; gap: 1px; }
.brand-wordmark strong { font-size: 16px; font-weight: 780; letter-spacing: -.025em; }
.brand-wordmark small { color: var(--pink); font-size: 11px; font-weight: 650; }

/* Logotipo compacto en tema oscuro: muestra sólo el símbolo, sin repetir Networks. */
html[data-theme="dark"] .brand {
  display: grid;
  width: 100%;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin: 0 0 23px;
  padding: 7px 8px 16px;
  border-bottom: 1px solid #ffffff14;
}

html[data-theme="dark"] .brand-image-wrap {
  width: 66px;
  height: 48px;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
}

html[data-theme="dark"] .brand-image-wrap img {
  top: 50%;
  left: 50%;
  width: 138px;
  transform: translate(-47%, -46%);
}

html[data-theme="dark"] .brand-wordmark strong { color: #fff; }

html[data-theme="light"] .sidebar nav { gap: 3px; }
html[data-theme="light"] .nav-section {
  margin: 16px 11px 5px;
  color: #9991a0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}

html[data-theme="light"] nav a {
  min-height: 39px;
  gap: 11px;
  padding: 8px 11px;
  border: 0;
  border-radius: 10px;
  color: #5f5868;
  font-size: 12px;
  font-weight: 620;
}

html[data-theme="light"] nav a:hover {
  color: var(--aura-primary-dark);
  background: #fbf1f7;
  transform: translateX(2px);
}

html[data-theme="light"] nav a.active {
  color: var(--aura-primary-dark);
  background: linear-gradient(90deg, rgba(223,49,143,.12), rgba(127,61,240,.045));
  box-shadow: inset 3px 0 0 var(--aura-primary);
}

html[data-theme="light"] .nav-icon { width: 18px; height: 18px; stroke-width: 1.75; }
html[data-theme="light"] nav a.active .nav-icon { color: var(--aura-primary); }
html[data-theme="light"] .sidebar-footer { padding: 15px 10px 0; border-color: var(--aura-border); }
html[data-theme="light"] .container {
  width: calc(100% - 238px);
  max-width: none;
  margin-left: 238px;
  padding: 27px clamp(24px, 3.2vw, 52px) 64px;
}

/* Barra superior y títulos */
html[data-theme="light"] .app-topbar { min-height: 48px; margin: 0 0 12px; }
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .notification-bell {
  min-height: 42px;
  border: 1px solid var(--aura-border-strong);
  border-radius: 11px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 18px rgba(63,35,84,.055);
}
html[data-theme="light"] .theme-toggle { padding: 8px 13px; }
html[data-theme="light"] .notification-bell { width: 42px; height: 42px; }
html[data-theme="light"] .page-heading { align-items: center; margin-bottom: 22px; }
html[data-theme="light"] .page-heading h1 {
  color: var(--aura-ink);
  font-size: clamp(31px, 3.1vw, 46px);
  font-weight: 760;
  line-height: 1.05;
  letter-spacing: -.045em;
}
html[data-theme="light"] .eyebrow { margin-bottom: 7px; color: var(--aura-primary); font-size: 10px; letter-spacing: .17em; }
html[data-theme="light"] .page-subtitle { max-width: 760px; margin-top: 7px; color: var(--aura-muted); }

/* Superficies y jerarquía */
html[data-theme="light"] .panel,
html[data-theme="light"] .form-card,
html[data-theme="light"] .login-card,
html[data-theme="light"] .route-technician-card,
html[data-theme="light"] .catalog-product-card {
  border: 1px solid var(--aura-border);
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--aura-shadow-sm);
  backdrop-filter: none;
}

html[data-theme="light"] .panel-title {
  min-height: 62px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--aura-border);
  background: transparent;
}
html[data-theme="light"] .panel-title h2 { font-size: 16px; font-weight: 730; }
html[data-theme="light"] .panel-title a { color: var(--aura-primary); font-weight: 720; }
html[data-theme="light"] .section-gap { margin-top: 18px; }

/* Indicadores */
html[data-theme="light"] .metrics { gap: 14px; margin-bottom: 18px; }
html[data-theme="light"] .metrics article,
html[data-theme="light"] .metrics .metric-card {
  min-height: 122px;
  padding: 18px;
  border: 1px solid var(--aura-border);
  border-radius: 16px;
  background: var(--aura-surface);
  box-shadow: var(--aura-shadow-sm);
}
html[data-theme="light"] .metrics article::before,
html[data-theme="light"] .metrics article::after { display: none; }
html[data-theme="light"] .metrics .metric-card { grid-template-columns: 48px minmax(0,1fr); gap: 13px; }
html[data-theme="light"] .metrics .metric-icon {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 14px;
  background: color-mix(in srgb, currentColor 12%, #fff);
  box-shadow: none;
}
html[data-theme="light"] .metrics .metric-copy > span { color: #696271; font-size: 11px; font-weight: 690; }
html[data-theme="light"] .metrics .metric-copy > strong { margin-top: 5px; font-size: 29px; font-weight: 760; }
html[data-theme="light"] .metrics .metric-copy > small { margin-top: 4px; color: #9a929f; }
html[data-theme="light"] .stock-summary-metrics { margin-top: -3px; }

/* Botones y controles */
html[data-theme="light"] .button {
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid var(--aura-border-strong);
  border-radius: 10px;
  color: #403647;
  background: #fff;
  box-shadow: none;
  font-size: 12px;
  font-weight: 720;
}
html[data-theme="light"] .button:hover { border-color: #c9b8dc; color: var(--aura-purple); background: #fdfbff; box-shadow: var(--aura-shadow-sm); transform: translateY(-1px); }
html[data-theme="light"] .button.primary {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(115deg, #d82d89, #e53b9b);
  box-shadow: 0 9px 22px rgba(223,49,143,.23);
}
html[data-theme="light"] .button.primary:hover { color: #fff; background: linear-gradient(115deg, #c9267c, #dc328f); box-shadow: 0 12px 27px rgba(223,49,143,.29); }
html[data-theme="light"] .button.danger { border-color: #f0cbd2; color: #b02e45; background: #fff8f9; }
html[data-theme="light"] .button.compact { min-height: 34px; padding: 6px 11px; border-radius: 9px; }

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  min-height: 42px;
  border: 1px solid var(--aura-border-strong);
  border-radius: 10px;
  color: var(--aura-ink);
  background: #fff;
  box-shadow: 0 1px 2px rgba(54,30,70,.025);
  font-family: inherit;
}
html[data-theme="light"] textarea { min-height: 104px; }
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #aaa2af; }
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus { border-color: var(--aura-purple); outline: 0; box-shadow: var(--aura-ring); }
html[data-theme="light"] label { color: #5d5364; }

/* Filtros */
html[data-theme="light"] .search,
html[data-theme="light"] .stock-filters,
html[data-theme="light"] .movement-filters,
html[data-theme="light"] .audit-filters,
html[data-theme="light"] .filter-bar,
html[data-theme="light"] .catalog-toolbar {
  gap: 11px;
  margin-bottom: 17px;
  padding: 14px;
  border: 1px solid var(--aura-border);
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--aura-shadow-sm);
}

/* Tablas */
html[data-theme="light"] .table-wrap { scrollbar-color: #c9a9e7 #f2eef5; }
html[data-theme="light"] table { font-size: 12px; }
html[data-theme="light"] th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--aura-border);
  color: #877e8d;
  background: #fbfafe;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .105em;
}
html[data-theme="light"] td { padding: 13px 16px; border-bottom: 1px solid #f0ecf3; color: #514957; }
html[data-theme="light"] td strong { font-weight: 720; }
html[data-theme="light"] tbody tr { transition: background .15s ease; }
html[data-theme="light"] tbody tr:hover { background: #fcf8fd; }
html[data-theme="light"] .number { color: #759600; font-weight: 760; }
.negative-number { color: var(--danger) !important; }
.negative-stock-row { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.negative-stock-badge {
  display: block;
  width: max-content;
  margin-top: 5px;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  border-radius: 999px;
  color: var(--danger);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.movement-edited-highlight {
  background: color-mix(in srgb, var(--pink) 12%, transparent) !important;
  outline: 2px solid color-mix(in srgb, var(--pink) 48%, transparent);
  outline-offset: -2px;
  scroll-margin-top: 24px;
}
.movement-edited-label {
  display: block;
  width: max-content;
  margin-top: 6px;
  color: var(--pink);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
html[data-theme="light"] .panel > .table-wrap:first-child:last-child { border-radius: inherit; }
html[data-theme="light"] .stock-status,
html[data-theme="light"] .badge,
html[data-theme="light"] .audit-action {
  border: 1px solid transparent;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .01em;
}
html[data-theme="light"] .stock-status.good { border-color: #dcebb4; color: #658700; background: #f2f8e2; }
html[data-theme="light"] .stock-status.necessary { border-color: #f5dcbd; color: #b86306; background: #fff6e9; }
html[data-theme="light"] .stock-status.urgent { border-color: #f2ced5; color: #bd344c; background: #fff1f4; }
html[data-theme="light"] .badge { border-color: #e2d6f4; color: #6d35b4; background: #f5effd; }

/* Dashboard */
html[data-theme="light"] .dashboard-hero-charts,
html[data-theme="light"] .analytics-grid { gap: 16px; }
html[data-theme="light"] .trend-panel,
html[data-theme="light"] .donut-panel { border-color: var(--aura-border); background: #fff; }
html[data-theme="light"] .line-chart-wrap,
html[data-theme="light"] .bar-chart,
html[data-theme="light"] .category-coverage { padding: 18px 20px 20px; }
html[data-theme="light"] .chart-grid-line { stroke: #eee9f2; }
html[data-theme="light"] .chart-y-label,
html[data-theme="light"] .chart-x-label { fill: #948c9a; }
html[data-theme="light"] .bar-track,
html[data-theme="light"] .category-track { background: #f0ecf3; }

/* Catálogo, movimientos y tarjetas operativas */
html[data-theme="light"] .catalog-product-card:hover,
html[data-theme="light"] .route-technician-card:hover { border-color: #d8cae6; box-shadow: var(--aura-shadow-md); transform: translateY(-2px); }
html[data-theme="light"] .catalog-product-media { background: #fff; }

/* El catálogo siempre muestra la fotografía completa, sin recortarla. */
.catalog-product-media {
  height: auto !important;
  aspect-ratio: 4 / 3;
  padding: 0;
}
.catalog-product-picture {
  position: absolute;
  inset: 12px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain !important;
}
html[data-theme="light"] .catalog-code { border-color: var(--aura-border); color: #493c51; background: rgba(255,255,255,.94); }
html[data-theme="light"] .catalog-category { color: var(--aura-primary); }
html[data-theme="light"] .catalog-product-actions { border-top: 1px solid var(--aura-border); }
html[data-theme="light"] .catalog-product-actions a:hover { color: var(--aura-primary-dark); background: #fbf1f7; }
html[data-theme="light"] .catalog-create-card { color: var(--aura-primary); background: rgba(255,255,255,.58); }

html[data-theme="light"] .movement-launcher > a,
html[data-theme="light"] .movement-day-summary {
  border-color: var(--aura-border);
  background: #fff;
  box-shadow: var(--aura-shadow-sm);
}
html[data-theme="light"] .movement-launcher > a:hover { border-color: #dabbd0; box-shadow: var(--aura-shadow-md); }
html[data-theme="light"] .launcher-icon,
html[data-theme="light"] .summary-icon { background: color-mix(in srgb, currentColor 11%, #fff); }
html[data-theme="light"] .movement-day-summary > div { border-color: var(--aura-border); }
html[data-theme="light"] .technician-consumption-row { background: #fff7fb; }
html[data-theme="light"] .movement-kind-label.consumption,
html[data-theme="light"] .consumption-destination { color: var(--aura-primary-dark); }

html[data-theme="light"] .route-card-heading { border-color: var(--aura-border); background: linear-gradient(100deg, #faf6fe, #fff); }
html[data-theme="light"] .route-avatar { color: #6734b0; background: #f0e8fc; }
html[data-theme="light"] .route-state { color: #688800; background: #f1f7e3; }
html[data-theme="light"] .route-stat-strip { border-color: var(--aura-border); background: #fcfbfd; }
html[data-theme="light"] .route-stat-strip > span { border-color: var(--aura-border); }
html[data-theme="light"] .route-preview > div { border-color: #f0ecf3; }
html[data-theme="light"] .route-card-footer { border-color: var(--aura-border); background: #fdfcfe; }

/* Formularios complejos */
html[data-theme="light"] .movement-multi-form .movement-line,
html[data-theme="light"] .usage-batch-product,
html[data-theme="light"] .request-products > div,
html[data-theme="light"] .partial-delivery-lines article,
html[data-theme="light"] .custody-item,
html[data-theme="light"] .receipt-confirm-form .receipt-check-item,
html[data-theme="light"] .resolution-line {
  border-color: var(--aura-border);
  background: #fcfbfd;
}
html[data-theme="light"] .line-number { color: #6734b0; background: #f0e8fc; }
html[data-theme="light"] .movement-submit-bar {
  border-color: var(--aura-border-strong);
  background: rgba(255,255,255,.96);
  box-shadow: 0 16px 40px rgba(63,35,84,.14);
}
html[data-theme="light"] .movement-live-summary > span { color: #729300; background: #f1f7e3; }
html[data-theme="light"] .form-card > h2 { margin-bottom: 18px; font-size: 18px; }
html[data-theme="light"] .formset-errors,
html[data-theme="light"] .message.error { border-color: #efc3cb; color: #a92f44; background: #fff4f6; }
html[data-theme="light"] .message.success { border-color: #d9e9b0; color: #5f7e00; background: #f4f9e8; }

/* Menús y notificaciones */
html[data-theme="light"] .notifications-popover { border-color: var(--aura-border); background: rgba(255,255,255,.985); box-shadow: 0 24px 70px rgba(50,28,66,.18); }
html[data-theme="light"] .notifications-popover > header { border-color: var(--aura-border); background: #fcf8fd; }
html[data-theme="light"] .notification-item + .notification-item { border-color: #f0ecf3; }
html[data-theme="light"] a.notification-item:hover { background: #fcf7fd; }

/* Adaptación móvil */
@media (max-width: 1050px) and (min-width: 721px) {
  html[data-theme="light"] .sidebar { width: 210px; padding-inline: 12px; }
  html[data-theme="light"] .container { width: calc(100% - 210px); margin-left: 210px; }
  html[data-theme="light"] .brand { grid-template-columns: 58px minmax(0,1fr); }
  html[data-theme="light"] .brand-image-wrap { width: 58px; height: 42px; }
  html[data-theme="light"] .brand-image-wrap img { width: 120px; }
  html[data-theme="dark"] .brand { grid-template-columns: 58px minmax(0,1fr); }
  html[data-theme="dark"] .brand-image-wrap { width: 58px; height: 42px; }
  html[data-theme="dark"] .brand-image-wrap img { width: 120px; }
}

@media (max-width: 720px) {
  html[data-theme="light"] body { font-size: 14px; background: #faf9fc; }
  html[data-theme="light"] .container { width: 100%; margin-left: 0; padding: 18px 16px 82px; }
  html[data-theme="light"] .mobile-header {
    min-height: 64px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--aura-border);
    background: rgba(255,255,255,.96);
    box-shadow: 0 8px 24px rgba(63,35,84,.06);
  }
  html[data-theme="light"] .mobile-logo-wrap { width: 56px; height: 42px; overflow: hidden; border-radius: 0; background: transparent; }
  html[data-theme="light"] .mobile-logo-wrap img { width: 118px; max-width: none; transform: translate(-47%, -46%); }
  html[data-theme="dark"] .mobile-logo-wrap { width: 56px; height: 42px; overflow: hidden; border-radius: 0; background: transparent; }
  html[data-theme="dark"] .mobile-logo-wrap img { width: 118px; max-width: none; transform: translate(-47%, -46%); }
  html[data-theme="light"] .app-topbar { margin-top: 0; }
  html[data-theme="light"] .page-heading { align-items: stretch; flex-direction: column; gap: 13px; margin-bottom: 18px; }
  html[data-theme="light"] .page-heading h1 { font-size: 31px; }
  html[data-theme="light"] .page-heading > .button,
  html[data-theme="light"] .page-heading > .actions { width: 100%; }
  html[data-theme="light"] .page-heading > .button { justify-content: center; }
  html[data-theme="light"] .page-heading > .actions .button { flex: 1; }
  html[data-theme="light"] .metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  html[data-theme="light"] .metrics .metric-card { min-height: 108px; grid-template-columns: 40px minmax(0,1fr); padding: 13px; }
  html[data-theme="light"] .metrics .metric-icon { width: 40px; height: 40px; border-radius: 12px; }
  html[data-theme="light"] .metrics .metric-copy > strong { font-size: 24px; }
  html[data-theme="light"] .stock-filters,
  html[data-theme="light"] .movement-filters,
  html[data-theme="light"] .audit-filters { padding: 12px; }
  html[data-theme="light"] .panel,
  html[data-theme="light"] .form-card,
  html[data-theme="light"] .route-technician-card { border-radius: 14px; }
  html[data-theme="light"] .mobile-technician-nav { border-color: var(--aura-border); background: rgba(255,255,255,.97); box-shadow: 0 -10px 30px rgba(63,35,84,.08); }
  html[data-theme="light"] .mobile-technician-nav a,
  html[data-theme="light"] .mobile-technician-nav button { color: #554c5e; background: #f7f3fa; }
  html[data-theme="light"] .notifications-popover { top: 66px; right: 12px; width: calc(100vw - 24px); }
}

@media (max-width: 430px) {
  html[data-theme="light"] .metrics { grid-template-columns: 1fr; }
  html[data-theme="light"] .movement-launcher { grid-template-columns: 1fr 1fr; }
  html[data-theme="light"] .movement-launcher > a { min-height: 92px; }
}