* {
  box-sizing: border-box;
}

:root {
  --sidebar-width: 238px;
  --sidebar-small: 74px;
  --topbar-height: 70px;

  --radius-xs: 7px;
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --transition:
    160ms ease;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #090a0c;

  --surface: #101216;
  --surface-2: #14171c;
  --surface-3: #191d23;

  --sidebar: #0c0e11;
  --topbar: rgba(12, 14, 17, 0.96);

  --text: #f3f5f7;
  --text-2: #c6cbd3;
  --muted: #7d8490;

  --border: #252a31;
  --border-soft: rgba(255,255,255,0.055);

  --accent: #f3df18;
  --accent-hover: #fae72a;
  --accent-text: #171717;

  --danger: #e85d63;

  --shadow:
    0 16px 50px rgba(0,0,0,0.16);
}


/* =========================================================
   LIGHT
   ========================================================= */

html[data-theme="light"] {
  color-scheme: light;

  --bg: #f4f5f7;

  --surface: #ffffff;
  --surface-2: #f8f9fa;
  --surface-3: #eef0f3;

  --sidebar: #ffffff;
  --topbar: rgba(255,255,255,0.96);

  --text: #14171a;
  --text-2: #3f454e;
  --muted: #848b95;

  --border: #dfe2e6;
  --border-soft: rgba(20,23,26,0.06);

  --accent: #e8d200;
  --accent-hover: #d7c300;
  --accent-text: #171717;

  --danger: #c73742;

  --shadow:
    0 14px 44px rgba(17,24,39,0.05);
}


/* =========================================================
   BASE
   ========================================================= */

html,
body {
  margin: 0;

  min-height: 100%;
}

body {
  min-height: 100vh;

  overflow: hidden;

  background:
    var(--bg);

  color:
    var(--text);

  font-family:
    "DM Sans",
    system-ui,
    sans-serif;

  font-size: 14px;

  -webkit-font-smoothing:
    antialiased;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

svg {
  width: 18px;
  height: 18px;
}

.hidden {
  display: none !important;
}


/* =========================================================
   LOGIN
   ========================================================= */

.login-view {
  min-height: 100vh;

  display: grid;

  place-items: center;

  padding: 24px;

  background:
    var(--bg);
}

.login-shell {
  width:
    min(
      100%,
      410px
    );

  padding: 32px;

  background:
    var(--surface);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow);
}

.login-brand {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 42px;
}

.brand-mark {
  width: 42px;
  height: 42px;

  flex:
    0
    0
    auto;

  display: grid;

  place-items: center;

  border-radius:
    11px;

  background:
    var(--accent);

  color:
    var(--accent-text);
}

.brand-mark svg {
  width: 20px;
  height: 20px;
}

.brand-copy {
  display: grid;

  gap: 1px;
}

.brand-copy strong {
  font-size: 14px;

  font-weight: 700;
}

.brand-copy span {
  color:
    var(--muted);

  font-size: 11px;
}

.login-heading {
  margin-bottom: 28px;
}

.section-kicker {
  display: block;

  margin-bottom: 7px;

  color:
    var(--muted);

  font-size: 10px;

  font-weight: 700;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}

.login-heading h1 {
  margin:
    0
    0
    8px;

  font-size: 27px;

  font-weight: 600;

  letter-spacing:
    -0.04em;
}

.login-heading p {
  margin: 0;

  color:
    var(--muted);

  font-size: 13px;
}

.login-form {
  display: grid;

  gap: 17px;
}


/* =========================================================
   FIELDS
   ========================================================= */

.field {
  display: grid;

  gap: 8px;

  color:
    var(--text-2);

  font-size: 12px;

  font-weight: 600;
}

.input-shell,
.money-field {
  min-height: 46px;

  display: flex;

  align-items: center;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-sm);

  background:
    var(--surface-2);

  transition:
    border-color
    var(--transition),
    background
    var(--transition);
}

.input-shell:focus-within,
.money-field:focus-within {
  border-color:
    color-mix(
      in srgb,
      var(--text) 40%,
      var(--border)
    );

  background:
    var(--surface);
}

.input-icon {
  width: 17px;
  height: 17px;

  margin-left: 13px;

  color:
    var(--muted);
}

.input-shell input,
.money-field input {
  width: 100%;

  min-width: 0;

  min-height: 44px;

  padding:
    0
    13px;

  border: 0;

  outline: 0;

  background:
    transparent;

  color:
    var(--text);

  font-size: 14px;
}

.input-action {
  width: 42px;
  height: 42px;

  flex:
    0
    0
    auto;

  display: grid;

  place-items: center;

  border: 0;

  background:
    transparent;

  color:
    var(--muted);
}

.input-action:hover {
  color:
    var(--text);
}

.currency {
  min-width: 42px;

  align-self: stretch;

  display: grid;

  place-items: center;

  border-right:
    1px solid
    var(--border-soft);

  color:
    var(--muted);

  font-weight: 600;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.primary-button,
.secondary-button {
  min-height: 44px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding:
    0
    15px;

  border-radius:
    var(--radius-sm);

  font-size: 13px;

  font-weight: 600;

  transition:
    all
    var(--transition);
}

.primary-button {
  border: 0;

  background:
    var(--accent);

  color:
    var(--accent-text);
}

.primary-button:hover {
  background:
    var(--accent-hover);
}

.secondary-button {
  border:
    1px solid
    var(--border);

  background:
    var(--surface-2);

  color:
    var(--text-2);
}

.secondary-button:hover {
  background:
    var(--surface-3);

  color:
    var(--text);
}

.login-button {
  width: 100%;

  margin-top: 4px;
}

.login-message {
  min-height: 18px;

  color:
    var(--danger);

  font-size: 12px;
}


/* =========================================================
   APP
   ========================================================= */

.main-view {
  min-height: 100vh;

  display: grid;

  grid-template-columns:
    var(--sidebar-width)
    minmax(0, 1fr);

  transition:
    grid-template-columns
    var(--transition);
}

.main-view.sidebar-collapsed {
  grid-template-columns:
    var(--sidebar-small)
    minmax(0, 1fr);
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
  height: 100vh;

  min-width: 0;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  border-right:
    1px solid
    var(--border);

  background:
    var(--sidebar);
}

.sidebar-header {
  height:
    var(--topbar-height);

  display: flex;

  align-items: center;

  gap: 11px;

  padding:
    0
    17px;

  border-bottom:
    1px solid
    var(--border);
}

.sidebar-mark {
  width: 38px;
  height: 38px;
}

.sidebar-brand-copy {
  min-width: 0;

  display: grid;

  gap: 1px;
}

.sidebar-brand-copy strong {
  white-space: nowrap;

  font-size: 13px;

  font-weight: 650;
}

.sidebar-brand-copy span {
  white-space: nowrap;

  color:
    var(--muted);

  font-size: 10px;
}

.sidebar-nav {
  display: grid;

  gap: 4px;

  padding: 20px 10px;
}

.sidebar-section-label {
  padding:
    0
    10px
    8px;

  color:
    var(--muted);

  font-size: 9px;

  font-weight: 700;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}

.sidebar-link {
  min-height: 42px;

  display: flex;

  align-items: center;

  gap: 11px;

  padding:
    0
    11px;

  border: 0;

  border-radius:
    var(--radius-sm);

  background:
    transparent;

  color:
    var(--muted);

  text-align: left;

  font-size: 12px;

  font-weight: 550;

  transition:
    background
    var(--transition),
    color
    var(--transition);
}

.sidebar-link:hover {
  background:
    var(--surface-2);

  color:
    var(--text);
}

.sidebar-link.active {
  background:
    var(--surface-3);

  color:
    var(--text);

  font-weight: 650;
}

.sidebar-link-icon {
  width: 20px;

  flex:
    0
    0
    auto;

  display: grid;

  place-items: center;
}

.sidebar-link-icon svg {
  width: 17px;
  height: 17px;
}

.sidebar-footer {
  margin-top: auto;

  padding: 14px;

  border-top:
    1px solid
    var(--border);
}

.sidebar-user {
  display: flex;

  align-items: center;

  gap: 9px;
}

.sidebar-avatar,
.topbar-avatar {
  display: grid;

  place-items: center;

  border:
    1px solid
    var(--border);

  background:
    var(--surface-2);

  color:
    var(--muted);
}

.sidebar-avatar {
  width: 34px;
  height: 34px;

  flex:
    0
    0
    auto;

  border-radius: 9px;
}

.sidebar-avatar svg,
.topbar-avatar svg {
  width: 15px;
  height: 15px;
}

.sidebar-user-copy {
  display: grid;

  gap: 1px;
}

.sidebar-user-copy strong {
  font-size: 11px;
}

.sidebar-user-copy span {
  color:
    var(--muted);

  font-size: 9px;
}


/* COLLAPSED */

.sidebar.collapsed
.sidebar-brand-copy,
.sidebar.collapsed
.sidebar-link-text,
.sidebar.collapsed
.sidebar-user-copy,
.sidebar.collapsed
.sidebar-section-label {
  display: none;
}

.sidebar.collapsed
.sidebar-header {
  justify-content: center;

  padding:
    0;
}

.sidebar.collapsed
.sidebar-nav {
  padding:
    20px
    10px;
}

.sidebar.collapsed
.sidebar-link {
  justify-content: center;

  padding: 0;
}

.sidebar.collapsed
.sidebar-user {
  justify-content: center;
}


/* =========================================================
   SHELL
   ========================================================= */

.app-shell {
  min-width: 0;

  height: 100vh;

  display: grid;

  grid-template-rows:
    var(--topbar-height)
    minmax(0, 1fr);
}


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar {
  min-width: 0;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding:
    0
    20px;

  border-bottom:
    1px solid
    var(--border);

  background:
    var(--topbar);

  backdrop-filter:
    blur(14px);
}

.topbar-left,
.topbar-actions {
  display: flex;

  align-items: center;

  min-width: 0;
}

.topbar-left {
  gap: 12px;
}

.topbar-actions {
  gap: 8px;
}

.icon-button,
.topbar-action,
.zoom-value {
  height: 36px;

  display: grid;

  place-items: center;

  border:
    1px solid
    var(--border);

  background:
    var(--surface-2);

  color:
    var(--muted);

  transition:
    all
    var(--transition);
}

.icon-button {
  width: 36px;

  border-radius:
    9px;
}

.icon-button:hover,
.topbar-action:hover,
.zoom-value:hover {
  background:
    var(--surface-3);

  color:
    var(--text);
}

.icon-button svg,
.topbar-action svg {
  width: 16px;
  height: 16px;
}

.topbar-title {
  min-width: 0;

  display: grid;

  gap: 1px;
}

.topbar-title span {
  color:
    var(--muted);

  font-size: 9px;

  font-weight: 700;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.topbar-title strong {
  font-size: 14px;

  font-weight: 600;
}


/* ZOOM */

.zoom-control {
  display: flex;

  align-items: center;

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius:
    9px;

  background:
    var(--surface-2);
}

.topbar-action,
.zoom-value {
  border: 0;

  border-radius: 0;
}

.topbar-action {
  width: 34px;
}

.zoom-value {
  min-width: 54px;

  padding:
    0
    7px;

  border-left:
    1px solid
    var(--border);

  border-right:
    1px solid
    var(--border);

  font-size: 10px;

  font-weight: 600;
}

.topbar-divider {
  width: 1px;
  height: 25px;

  margin:
    0
    3px;

  background:
    var(--border);
}

.topbar-user {
  display: flex;

  align-items: center;

  gap: 8px;

  margin-left: 4px;
}

.topbar-avatar {
  width: 34px;
  height: 34px;

  border-radius: 9px;
}

.topbar-user-copy {
  display: grid;

  gap: 1px;
}

.topbar-user-copy strong {
  font-size: 10px;
}

.topbar-user-copy span {
  color:
    var(--muted);

  font-size: 9px;
}

.logout-icon:hover {
  color:
    var(--danger);
}


/* =========================================================
   CONTENT
   ========================================================= */

.content {
  min-width: 0;

  overflow-y: auto;

  padding:
    30px;

  background:
    var(--bg);
}

.page {
  display: none;

  width:
    min(
      100%,
      1180px
    );

  margin:
    0
    auto;
}

.page.active {
  display: block;
}

.page-header {
  margin-bottom: 24px;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 20px;
}

.page-header h1 {
  margin: 0;

  font-size:
    clamp(
      25px,
      3vw,
      34px
    );

  font-weight: 600;

  letter-spacing:
    -0.045em;
}

.page-header p {
  margin:
    7px
    0
    0;

  color:
    var(--muted);

  font-size: 12px;
}


/* =========================================================
   SURFACE
   ========================================================= */

.surface {
  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-md);

  background:
    var(--surface);
}

.surface-header {
  min-height: 68px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding:
    0
    20px;

  border-bottom:
    1px solid
    var(--border-soft);
}

.surface-kicker {
  display: block;

  margin-bottom: 2px;

  color:
    var(--muted);

  font-size: 9px;

  font-weight: 700;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.surface-header h2 {
  margin: 0;

  font-size: 15px;

  font-weight: 600;
}

.surface-icon {
  width: 34px;
  height: 34px;

  display: grid;

  place-items: center;

  border:
    1px solid
    var(--border);

  border-radius: 9px;

  background:
    var(--surface-2);

  color:
    var(--muted);
}

.surface-icon svg {
  width: 16px;
  height: 16px;
}


/* =========================================================
   CALCULATOR
   ========================================================= */

.calculator-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(0, 1.05fr);

  gap: 18px;
}

.calculator-form {
  display: grid;

  gap: 17px;

  padding: 20px;
}

.field-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 12px;
}


/* RESULT */

.result-summary {
  padding:
    8px
    20px;
}

.result-item {
  min-height: 49px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  border-bottom:
    1px solid
    var(--border-soft);
}

.result-item:last-child {
  border-bottom: 0;
}

.result-item span {
  color:
    var(--muted);

  font-size: 11px;
}

.result-item strong {
  color:
    var(--text-2);

  font-size: 13px;

  font-weight: 600;
}

.profit-block {
  margin:
    8px
    20px
    12px;

  padding:
    18px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-md);

  background:
    var(--surface-2);
}

.profit-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  margin-bottom: 20px;
}

.profit-header > div:first-child {
  display: grid;

  gap: 2px;
}

.profit-header span {
  font-size: 11px;

  font-weight: 600;
}

.profit-header small {
  color:
    var(--muted);

  font-size: 9px;
}

.profit-icon {
  width: 31px;
  height: 31px;

  display: grid;

  place-items: center;

  border-radius: 8px;

  background:
    var(--surface-3);

  color:
    var(--muted);
}

.profit-icon svg {
  width: 15px;
  height: 15px;
}

.profit-value {
  display: block;

  font-size:
    clamp(
      28px,
      4vw,
      42px
    );

  font-weight: 600;

  letter-spacing:
    -0.05em;
}

.markup-block {
  margin:
    0
    20px
    20px;

  min-height: 76px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  padding:
    15px
    18px;

  border-radius:
    var(--radius-md);

  background:
    var(--accent);

  color:
    var(--accent-text);
}

.markup-block > div {
  display: grid;

  gap: 1px;
}

.markup-block span {
  font-size: 11px;

  font-weight: 700;
}

.markup-block small {
  opacity: 0.65;

  font-size: 9px;
}

.markup-block strong {
  font-size: 28px;

  font-weight: 650;

  letter-spacing:
    -0.04em;
}

.negative {
  color:
    var(--danger) !important;
}


/* =========================================================
   PRODUCTS
   ========================================================= */

.products-page-header {
  align-items: center;
}

.search-field {
  width:
    min(
      100%,
      330px
    );

  min-height: 42px;

  display: flex;

  align-items: center;

  gap: 8px;

  padding:
    0
    12px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-sm);

  background:
    var(--surface);
}

.search-field svg {
  width: 15px;
  height: 15px;

  color:
    var(--muted);
}

.search-field input {
  width: 100%;

  min-width: 0;

  border: 0;

  outline: 0;

  background:
    transparent;

  color:
    var(--text);

  font-size: 12px;
}

.products-table-wrap {
  width: 100%;

  overflow-x: auto;
}

.products-table {
  width: 100%;

  border-collapse:
    collapse;
}

.products-table th,
.products-table td {
  padding:
    13px
    17px;

  border-bottom:
    1px solid
    var(--border-soft);

  text-align: left;
}

.products-table th {
  color:
    var(--muted);

  font-size: 9px;

  font-weight: 700;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.products-table td {
  font-size: 12px;
}

.products-table tbody tr {
  transition:
    background
    var(--transition);
}

.products-table tbody tr:hover {
  background:
    var(--surface-2);
}

.product-cell {
  min-width: 280px;

  display: flex;

  align-items: center;

  gap: 11px;
}

.product-image,
.product-image-placeholder {
  width: 42px;
  height: 42px;

  flex:
    0
    0
    auto;

  border:
    1px solid
    var(--border);

  border-radius:
    9px;

  background:
    var(--surface-2);
}

.product-image {
  object-fit: cover;
}

.product-image-placeholder {
  display: grid;

  place-items: center;

  color:
    var(--muted);
}

.product-image-placeholder svg {
  width: 15px;
  height: 15px;
}

.product-info {
  display: grid;

  gap: 2px;
}

.product-info strong {
  max-width: 340px;

  overflow: hidden;

  color:
    var(--text);

  font-weight: 600;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.product-info span {
  color:
    var(--muted);

  font-size: 9px;
}

.sku {
  display: inline-flex;

  padding:
    5px
    8px;

  border:
    1px solid
    var(--border);

  border-radius: 6px;

  background:
    var(--surface-2);

  color:
    var(--text-2);

  font-size: 10px;

  font-weight: 600;
}

.table-price,
.table-cost {
  white-space: nowrap;

  font-size: 11px;

  font-weight: 600;
}


/* =========================================================
   EMPTY
   ========================================================= */

.empty-state,
.loading-state {
  min-height: 240px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 7px;

  color:
    var(--muted);

  text-align: center;
}

.empty-icon {
  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  margin-bottom: 5px;

  border:
    1px solid
    var(--border);

  border-radius: 11px;

  background:
    var(--surface-2);
}

.empty-state strong {
  color:
    var(--text-2);

  font-size: 12px;

  font-weight: 600;
}

.empty-state span,
.loading-state span {
  font-size: 10px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (
  max-width: 900px
) {
  .calculator-layout {
    grid-template-columns:
      1fr;
  }
}


@media (
  max-width: 820px
) {
  body {
    overflow: auto;
  }

  .main-view,
  .main-view.sidebar-collapsed {
    display: block;
  }

  .sidebar {
    position: fixed;

    inset:
      0
      auto
      0
      0;

    z-index: 100;

    width:
      min(
        82vw,
        250px
      );

    transform:
      translateX(-100%);

    box-shadow:
      20px
      0
      60px
      rgba(0,0,0,0.18);

    transition:
      transform
      var(--transition);
  }

  .sidebar.mobile-open {
    transform:
      translateX(0);
  }

  .sidebar.collapsed {
    width:
      min(
        82vw,
        250px
      );
  }

  .sidebar.collapsed
  .sidebar-brand-copy,
  .sidebar.collapsed
  .sidebar-link-text,
  .sidebar.collapsed
  .sidebar-user-copy,
  .sidebar.collapsed
  .sidebar-section-label {
    display: initial;
  }

  .sidebar.collapsed
  .sidebar-header {
    justify-content:
      flex-start;

    padding:
      0
      17px;
  }

  .sidebar.collapsed
  .sidebar-link {
    justify-content:
      flex-start;

    padding:
      0
      11px;
  }

  .app-shell {
    height: auto;

    min-height:
      100vh;
  }

  .topbar {
    position: sticky;

    top: 0;

    z-index: 50;
  }

  .content {
    overflow: visible;
  }
}


@media (
  max-width: 650px
) {
  .content {
    padding: 20px 14px;
  }

  .topbar {
    padding:
      0
      12px;
  }

  .topbar-title span,
  .topbar-user {
    display: none;
  }

  .topbar-actions {
    gap: 5px;
  }

  .topbar-divider {
    display: none;
  }

  .field-grid {
    grid-template-columns:
      1fr;
  }

  .page-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .products-page-header {
    align-items:
      stretch;
  }

  .search-field {
    width: 100%;
  }

  .zoom-value {
    min-width: 47px;
  }
}


/* =========================================================
   PRODUCTOS · AJUSTE FULL WIDTH
   ========================================================= */

/* Productos no usa el max-width general de las páginas */
#pageProductos {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Contenido general más aprovechado */
.content {
  width: 100%;
  max-width: none;
}

/* Header productos */
.products-header {
  width: 100%;

  margin-bottom: 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  flex-wrap: wrap;
}

.products-header > div:first-child {
  min-width: 0;
}

.products-header h1 {
  margin: 0;

  font-size:
    clamp(
      26px,
      2.5vw,
      36px
    );

  font-weight: 650;

  letter-spacing:
    -0.045em;
}

.products-header p {
  margin:
    7px
    0
    0;

  color:
    var(--muted);

  font-size: 12px;
}

.products-header-actions {
  display: flex;
  align-items: center;

  gap: 8px;

  margin-left: auto;

  flex-wrap: wrap;
}


/* =========================================================
   TOOLBAR PRODUCTOS
   ========================================================= */

.products-toolbar {
  width: 100%;

  margin-bottom: 12px;

  display: grid;

  grid-template-columns:
    minmax(260px, 1fr)
    minmax(180px, 240px)
    auto;

  align-items: center;

  gap: 10px;
}

.products-search {
  width: 100%;
  max-width: none;

  min-height: 42px;

  display: flex;
  align-items: center;

  gap: 9px;

  padding:
    0
    12px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-sm);

  background:
    var(--surface);

  transition:
    border-color
    var(--transition),
    background
    var(--transition);
}

.products-search:focus-within {
  border-color:
    color-mix(
      in srgb,
      var(--text) 38%,
      var(--border)
    );

  background:
    var(--surface-2);
}

.products-search svg {
  width: 15px;
  height: 15px;

  flex: 0 0 auto;

  color:
    var(--muted);
}

.products-search input {
  width: 100%;
  min-width: 0;

  height: 40px;

  border: 0;
  outline: 0;

  background:
    transparent;

  color:
    var(--text);

  font-size: 12px;
}

.products-search input::placeholder {
  color:
    var(--muted);
}

.products-category-filter {
  width: 100%;

  min-height: 42px;

  padding:
    0
    36px
    0
    12px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-sm);

  outline: 0;

  background:
    var(--surface);

  color:
    var(--text);

  font-size: 12px;

  cursor: pointer;
}

.products-category-filter:focus {
  border-color:
    color-mix(
      in srgb,
      var(--text) 38%,
      var(--border)
    );
}

.products-count {
  min-width: max-content;

  margin-left: 0;

  padding:
    0
    4px;

  color:
    var(--muted);

  font-size: 11px;
  font-weight: 600;

  text-align: right;
}


/* =========================================================
   TABLA PRODUCTOS
   ========================================================= */

.products-list-surface {
  width: 100%;

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-md);

  background:
    var(--surface);
}

.products-table-wrap {
  width: 100%;

  overflow-x: auto;
  overflow-y: visible;
}

.products-table {
  width: 100%;

  min-width: 880px;

  border-collapse: collapse;
  table-layout: auto;
}

.products-table thead {
  background:
    var(--surface-2);
}

.products-table th {
  height: 43px;

  padding:
    0
    16px;

  border-bottom:
    1px solid
    var(--border);

  color:
    var(--muted);

  text-align: left;

  font-size: 9px;
  font-weight: 750;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

  white-space: nowrap;
}

.products-table td {
  height: 64px;

  padding:
    10px
    16px;

  border-bottom:
    1px solid
    var(--border-soft);

  color:
    var(--text-2);

  font-size: 12px;

  vertical-align: middle;
}

.products-table tbody tr:last-child td {
  border-bottom: 0;
}

.products-table tbody tr {
  transition:
    background
    var(--transition);
}

.products-table tbody tr:hover {
  background:
    var(--surface-2);
}

/* Anchos más naturales */
.products-table th:nth-child(1),
.products-table td:nth-child(1) {
  width: 72px;
}

.products-table th:nth-child(2),
.products-table td:nth-child(2) {
  width: 150px;
}

.products-table th:nth-child(3),
.products-table td:nth-child(3) {
  width: auto;
}

.products-table th:nth-child(4),
.products-table td:nth-child(4) {
  width: 160px;
}

.products-table th:nth-child(5),
.products-table td:nth-child(5) {
  width: 160px;
}

.products-table th:nth-child(6),
.products-table td:nth-child(6) {
  width: 96px;
}


/* =========================================================
   FOTO
   ========================================================= */

.catalog-image,
.catalog-image-placeholder {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius: 9px;

  background:
    var(--surface-2);
}

.catalog-image {
  object-fit: contain;

  padding: 2px;
}

.catalog-image-placeholder {
  color:
    var(--muted);
}

.catalog-image-placeholder svg {
  width: 16px;
  height: 16px;
}


/* =========================================================
   SKU / NOMBRE
   ========================================================= */

.product-sku {
  display: inline-flex;
  align-items: center;

  min-height: 27px;

  padding:
    0
    8px;

  border:
    1px solid
    var(--border);

  border-radius: 6px;

  background:
    var(--surface-2);

  color:
    var(--text-2);

  font-size: 10px;
  font-weight: 650;

  white-space: nowrap;
}

.product-name-cell {
  min-width: 240px;

  display: grid;

  gap: 3px;
}

.product-name-cell strong {
  max-width: none;

  overflow: hidden;

  color:
    var(--text);

  font-size: 12px;
  font-weight: 650;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.product-name-cell span {
  color:
    var(--muted);

  font-size: 9px;
}

.money-column {
  color:
    var(--text);

  font-weight: 650;

  white-space: nowrap;
}


/* =========================================================
   ACCIONES
   ========================================================= */

.product-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 5px;
}

.table-icon-button {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border:
    1px solid
    var(--border);

  border-radius: 8px;

  background:
    var(--surface-2);

  color:
    var(--muted);

  transition:
    background
    var(--transition),
    color
    var(--transition),
    border-color
    var(--transition);
}

.table-icon-button:hover {
  border-color:
    color-mix(
      in srgb,
      var(--text) 20%,
      var(--border)
    );

  background:
    var(--surface-3);

  color:
    var(--text);
}

.table-icon-button.danger:hover {
  color:
    var(--danger);
}

.table-icon-button svg {
  width: 14px;
  height: 14px;
}


/* =========================================================
   EMPTY / LOADING
   ========================================================= */

.products-empty,
.products-loading {
  width: 100%;

  min-height: 230px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 30px;

  color:
    var(--muted);

  text-align: center;
}

.products-empty svg,
.products-loading svg {
  width: 22px;
  height: 22px;

  margin-bottom: 5px;
}

.products-empty strong {
  color:
    var(--text-2);

  font-size: 12px;
  font-weight: 650;
}

.products-empty span,
.products-loading span {
  font-size: 10px;
}


/* =========================================================
   MODAL PRODUCTO
   ========================================================= */

.product-modal {
  position: fixed;

  inset: 0;

  z-index: 500;

  display: none;

  align-items: center;
  justify-content: center;

  padding: 24px;

  background:
    rgba(0, 0, 0, 0.52);

  backdrop-filter:
    blur(6px);
}

.product-modal.open {
  display: flex;
}

.product-modal-card {
  width:
    min(
      100%,
      640px
    );

  max-height:
    calc(
      100vh - 48px
    );

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius: 16px;

  background:
    var(--surface);

  box-shadow:
    0
    30px
    100px
    rgba(0,0,0,0.30);
}

.product-modal-header {
  min-height: 70px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  padding:
    0
    20px;

  border-bottom:
    1px solid
    var(--border);

  background:
    var(--surface);
}

.product-modal-header h2 {
  margin: 0;

  font-size: 18px;
  font-weight: 650;

  letter-spacing:
    -0.025em;
}

.product-form {
  min-height: 0;

  display: flex;
  flex-direction: column;
}

.product-modal-body {
  min-height: 0;

  overflow-y: auto;

  display: grid;

  gap: 16px;

  padding: 20px;
}

.product-fields-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 12px;
}

.product-modal-body > .field > input,
.product-fields-grid .field > input {
  width: 100%;

  min-height: 46px;

  padding:
    0
    13px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-sm);

  outline: 0;

  background:
    var(--surface-2);

  color:
    var(--text);

  font-size: 13px;

  transition:
    border-color
    var(--transition),
    background
    var(--transition);
}

.product-modal-body > .field > input:focus,
.product-fields-grid .field > input:focus {
  border-color:
    color-mix(
      in srgb,
      var(--text) 38%,
      var(--border)
    );

  background:
    var(--surface);
}

.product-image-preview {
  width: 100%;

  min-height: 150px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 8px;

  overflow: hidden;

  border:
    1px dashed
    var(--border);

  border-radius:
    var(--radius-md);

  background:
    var(--surface-2);

  color:
    var(--muted);
}

.product-image-preview img {
  width: 100%;
  height: 190px;

  object-fit: contain;

  padding: 10px;

  background:
    var(--surface);
}

.product-image-preview svg {
  width: 24px;
  height: 24px;
}

.product-image-preview span {
  font-size: 10px;
}

.product-form-message {
  min-height: 18px;

  color:
    var(--danger);

  font-size: 11px;
}

.product-modal-footer {
  min-height: 68px;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 8px;

  padding:
    0
    20px;

  border-top:
    1px solid
    var(--border);

  background:
    var(--surface);
}


/* =========================================================
   EVITAR QUE EL MODAL QUEDE VISIBLE SIN .open
   ========================================================= */

.product-modal:not(.open) {
  visibility: hidden;
  pointer-events: none;
}


/* =========================================================
   DESKTOP GRANDE
   ========================================================= */

@media (
  min-width: 1400px
) {
  .content {
    padding:
      30px
      34px;
  }

  #pageProductos {
    width: 100%;
  }

  .products-table th,
  .products-table td {
    padding-left: 18px;
    padding-right: 18px;
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (
  max-width: 900px
) {
  .products-toolbar {
    grid-template-columns:
      1fr
      minmax(170px, 220px);
  }

  .products-count {
    grid-column:
      1 / -1;

    text-align: left;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (
  max-width: 700px
) {
  .products-header {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  .products-header-actions {
    width: 100%;

    margin-left: 0;
  }

  .products-header-actions button {
    flex:
      1
      1
      calc(50% - 8px);
  }

  .products-toolbar {
    display: flex;
    flex-direction: column;

    align-items: stretch;
  }

  .products-category-filter {
    width: 100%;
  }

  .products-count {
    width: 100%;

    padding-top: 2px;

    text-align: left;
  }

  .product-fields-grid {
    grid-template-columns:
      1fr;
  }

  .product-modal {
    align-items:
      flex-start;

    padding: 12px;
  }

  .product-modal-card {
    max-height:
      calc(
        100vh - 24px
      );
  }

  .product-modal-header {
    min-height: 62px;

    padding:
      0
      15px;
  }

  .product-modal-body {
    padding: 15px;
  }

  .product-modal-footer {
    padding:
      0
      15px;
  }
}


/* =========================================================
   CALCULADORA PREMIUM · FULL WIDTH
   ========================================================= */

#pageInicio {
  width: 100%;
  max-width: none;
  margin: 0;
}


.calc-page-header {
  width: 100%;

  margin-bottom: 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
}


.calc-page-header h1 {
  margin: 0;

  font-size:
    clamp(
      28px,
      3vw,
      38px
    );

  font-weight: 650;

  letter-spacing:
    -0.05em;
}


.calc-page-header p {
  margin:
    7px
    0
    0;

  color:
    var(--muted);

  font-size: 12px;
}


/* =========================================================
   PRODUCT SEARCH
   ========================================================= */

.calc-product-selector {
  position: relative;

  z-index: 20;

  margin-bottom: 14px;
}


.calc-product-search {
  width: 100%;

  min-height: 48px;

  display: flex;
  align-items: center;

  gap: 10px;

  padding:
    0
    13px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-md);

  background:
    var(--surface);
}


.calc-product-search:focus-within {
  border-color:
    color-mix(
      in srgb,
      var(--text) 35%,
      var(--border)
    );
}


.calc-product-search > svg {
  width: 16px;
  height: 16px;

  flex: 0 0 auto;

  color:
    var(--muted);
}


.calc-product-search input {
  width: 100%;

  min-width: 0;

  height: 46px;

  border: 0;
  outline: 0;

  background:
    transparent;

  color:
    var(--text);

  font-size: 13px;
}


.calc-search-clear {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border: 0;

  border-radius: 7px;

  background:
    transparent;

  color:
    var(--muted);
}


.calc-search-clear:hover {
  background:
    var(--surface-2);

  color:
    var(--text);
}


.calc-search-clear svg {
  width: 14px;
  height: 14px;
}


.calc-product-results {
  position: absolute;

  top: 54px;
  left: 0;
  right: 0;

  display: none;

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-md);

  background:
    var(--surface);

  box-shadow:
    0
    18px
    50px
    rgba(0,0,0,0.18);
}


.calc-product-results.open {
  display: block;
}


.calc-product-option {
  width: 100%;

  min-height: 58px;

  display: grid;

  grid-template-columns:
    40px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 11px;

  padding:
    8px
    12px;

  border: 0;

  border-bottom:
    1px solid
    var(--border-soft);

  background:
    transparent;

  color:
    var(--text);

  text-align: left;
}


.calc-product-option:last-child {
  border-bottom: 0;
}


.calc-product-option:hover {
  background:
    var(--surface-2);
}


.calc-product-option img,
.calc-product-option-image {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius: 8px;

  background:
    var(--surface-2);
}


.calc-product-option img {
  object-fit: contain;
}


.calc-product-option-image {
  color:
    var(--muted);
}


.calc-product-option-image svg {
  width: 15px;
  height: 15px;
}


.calc-product-option-copy {
  min-width: 0;

  display: grid;

  gap: 2px;
}


.calc-product-option-copy small {
  color:
    var(--muted);

  font-size: 9px;
  font-weight: 650;
}


.calc-product-option-copy strong {
  overflow: hidden;

  font-size: 12px;
  font-weight: 600;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.calc-product-option-price {
  color:
    var(--text-2);

  font-size: 11px;
  font-weight: 650;

  white-space: nowrap;
}


.calc-product-empty {
  padding: 20px;

  color:
    var(--muted);

  text-align: center;

  font-size: 11px;
}


/* =========================================================
   SELECTED PRODUCT
   ========================================================= */

.selected-product-card {
  min-height: 72px;

  margin-top: 9px;

  display: grid;

  grid-template-columns:
    48px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 12px;

  padding:
    10px
    12px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-md);

  background:
    var(--surface-2);
}


.selected-product-image {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius: 9px;

  background:
    var(--surface);
}


.selected-product-image img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}


.selected-product-image svg {
  width: 17px;
  height: 17px;

  color:
    var(--muted);
}


.selected-product-copy {
  min-width: 0;

  display: grid;

  gap: 2px;
}


.selected-product-copy span {
  color:
    var(--muted);

  font-size: 9px;
  font-weight: 650;
}


.selected-product-copy strong {
  overflow: hidden;

  font-size: 12px;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.selected-product-data {
  display: flex;

  align-items: center;

  gap: 28px;
}


.selected-product-data > div {
  display: grid;

  gap: 3px;

  text-align: right;
}


.selected-product-data span {
  color:
    var(--muted);

  font-size: 9px;
}


.selected-product-data strong {
  font-size: 12px;
}


/* =========================================================
   CALCULATOR
   ========================================================= */

.premium-calculator-grid {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(0, 1.05fr);

  gap: 14px;
}


.premium-calculator-form {
  display: grid;

  gap: 17px;

  padding: 20px;
}


.calc-two-fields {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 12px;
}


/* =========================================================
   TARGET MARKUP
   ========================================================= */

.markup-target-section {
  margin-top: 2px;

  padding: 16px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-md);

  background:
    var(--surface-2);
}


.markup-target-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  margin-bottom: 15px;
}


.markup-target-heading > div:first-child {
  display: grid;

  gap: 2px;
}


.markup-target-heading span {
  font-size: 11px;
  font-weight: 650;
}


.markup-target-heading small {
  color:
    var(--muted);

  font-size: 9px;
}


.markup-target-input {
  min-width: 90px;

  height: 38px;

  display: flex;
  align-items: center;

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius: 8px;

  background:
    var(--surface);
}


.markup-target-input input {
  width: 65px;

  height: 36px;

  padding:
    0
    8px;

  border: 0;
  outline: 0;

  background:
    transparent;

  color:
    var(--text);

  font-size: 14px;
  font-weight: 650;

  text-align: right;
}


.markup-target-input span {
  width: 28px;

  color:
    var(--muted);

  font-size: 11px;

  text-align: center;
}


.markup-range {
  width: 100%;

  margin:
    3px
    0
    13px;

  accent-color:
    var(--accent);
}


.markup-presets {
  display: grid;

  grid-template-columns:
    repeat(
      6,
      minmax(0, 1fr)
    );

  gap: 6px;
}


.markup-presets button {
  min-height: 30px;

  border:
    1px solid
    var(--border);

  border-radius: 7px;

  background:
    var(--surface);

  color:
    var(--muted);

  font-size: 9px;
  font-weight: 650;
}


.markup-presets button:hover {
  background:
    var(--surface-3);

  color:
    var(--text);
}


.calculation-message {
  min-height: 17px;

  color:
    var(--danger);

  font-size: 10px;
}


.calculation-message.success {
  color:
    #59b879;
}


/* =========================================================
   RESULTS
   ========================================================= */

.calc-result-lines {
  padding:
    8px
    20px;
}


.calc-result-lines > div {
  min-height: 47px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  border-bottom:
    1px solid
    var(--border-soft);
}


.calc-result-lines > div:last-child {
  border-bottom: 0;
}


.calc-result-lines span {
  color:
    var(--muted);

  font-size: 10px;
}


.calc-result-lines strong {
  font-size: 12px;
  font-weight: 600;
}


.calc-profit-card {
  margin:
    8px
    20px
    12px;

  padding: 17px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-md);

  background:
    var(--surface-2);
}


.calc-profit-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 18px;
}


.calc-profit-card-heading > div {
  display: grid;

  gap: 2px;
}


.calc-profit-card-heading span {
  font-size: 10px;
  font-weight: 650;
}


.calc-profit-card-heading small {
  color:
    var(--muted);

  font-size: 8px;
}


.calc-profit-card-heading svg {
  width: 16px;
  height: 16px;

  color:
    var(--muted);
}


.calc-profit-card > strong {
  font-size:
    clamp(
      30px,
      4vw,
      44px
    );

  font-weight: 650;

  letter-spacing:
    -0.05em;
}


.calc-markup-comparison {
  margin:
    0
    20px
    10px;

  min-height: 76px;

  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  gap: 14px;

  padding:
    14px
    16px;

  border-radius:
    var(--radius-md);

  background:
    var(--accent);

  color:
    var(--accent-text);
}


.markup-current,
.markup-goal {
  display: grid;

  gap: 3px;
}


.markup-goal {
  text-align: right;
}


.calc-markup-comparison span {
  font-size: 9px;
  font-weight: 700;
}


.calc-markup-comparison strong {
  font-size: 24px;

  font-weight: 700;

  letter-spacing:
    -0.04em;
}


.markup-arrow {
  width: 16px;
  height: 16px;

  opacity: 0.5;
}


.markup-status {
  min-height: 42px;

  margin:
    0
    20px
    20px;

  display: flex;
  align-items: center;

  gap: 8px;

  padding:
    0
    12px;

  border:
    1px solid
    var(--border);

  border-radius: 8px;

  background:
    var(--surface-2);

  color:
    var(--muted);

  font-size: 10px;
}


.markup-status svg {
  width: 14px;
  height: 14px;

  flex: 0 0 auto;
}


.markup-status.success {
  color:
    #5fb97d;
}


.markup-status.warning {
  color:
    #d6a94d;
}


/* =========================================================
   SUGGESTED PRICE
   ========================================================= */

.suggested-price-section {
  margin-top: 14px;
}


.suggested-price-main {
  min-height: 110px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  padding:
    20px;

  border-bottom:
    1px solid
    var(--border);
}


.suggested-price-main h2 {
  margin: 0;

  font-size: 18px;
  font-weight: 650;

  letter-spacing:
    -0.025em;
}


.suggested-price-main p {
  max-width: 650px;

  margin:
    6px
    0
    0;

  color:
    var(--muted);

  font-size: 10px;
}


.suggested-price-value {
  min-width: 230px;

  display: grid;

  gap: 4px;

  text-align: right;
}


.suggested-price-value span {
  color:
    var(--muted);

  font-size: 9px;
  font-weight: 650;

  text-transform:
    uppercase;
}


.suggested-price-value strong {
  font-size:
    clamp(
      27px,
      4vw,
      38px
    );

  font-weight: 650;

  letter-spacing:
    -0.045em;
}


.suggested-price-metrics {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );
}


.suggested-price-metrics > div {
  min-height: 75px;

  display: grid;

  align-content: center;

  gap: 4px;

  padding:
    0
    18px;

  border-right:
    1px solid
    var(--border-soft);
}


.suggested-price-metrics > div:last-child {
  border-right: 0;
}


.suggested-price-metrics span {
  color:
    var(--muted);

  font-size: 9px;
}


.suggested-price-metrics strong {
  font-size: 13px;
  font-weight: 650;
}


.positive {
  color:
    #5fb97d !important;
}


/* =========================================================
   SUMMARY
   ========================================================= */

.calc-summary-grid {
  margin-top: 14px;

  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 10px;
}


.calc-summary-card {
  min-height: 105px;

  display: grid;

  align-content: center;

  gap: 5px;

  padding: 16px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-md);

  background:
    var(--surface);
}


.calc-summary-card span {
  color:
    var(--muted);

  font-size: 9px;
  font-weight: 650;

  text-transform:
    uppercase;
}


.calc-summary-card strong {
  font-size: 22px;
  font-weight: 650;

  letter-spacing:
    -0.035em;
}


.calc-summary-card small {
  color:
    var(--muted);

  font-size: 8px;
}


/* =========================================================
   HISTORY
   ========================================================= */

.calculation-history {
  margin-top: 14px;

  overflow: hidden;
}


.history-header {
  min-height: 68px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    0
    18px;

  border-bottom:
    1px solid
    var(--border);
}


.history-header h2 {
  margin: 0;

  font-size: 15px;
  font-weight: 650;
}


.history-table-wrap {
  width: 100%;

  overflow-x: auto;
}


.history-table {
  width: 100%;

  min-width: 1120px;

  border-collapse:
    collapse;
}


.history-table th {
  height: 42px;

  padding:
    0
    12px;

  border-bottom:
    1px solid
    var(--border);

  background:
    var(--surface-2);

  color:
    var(--muted);

  text-align: left;

  font-size: 8px;
  font-weight: 700;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;

  white-space: nowrap;
}


.history-table td {
  height: 56px;

  padding:
    8px
    12px;

  border-bottom:
    1px solid
    var(--border-soft);

  color:
    var(--text-2);

  font-size: 10px;

  white-space: nowrap;
}


.history-table tr:last-child td {
  border-bottom: 0;
}


.history-table tbody tr:hover {
  background:
    var(--surface-2);
}


.history-date {
  display: grid;

  gap: 1px;
}


.history-date small {
  color:
    var(--muted);

  font-size: 8px;
}


.history-product {
  min-width: 180px;

  display: grid;

  gap: 2px;
}


.history-product strong {
  max-width: 260px;

  overflow: hidden;

  color:
    var(--text);

  font-size: 10px;

  text-overflow:
    ellipsis;
}


.history-product span {
  color:
    var(--muted);

  font-size: 8px;
}


.history-markup {
  display: inline-flex;

  min-height: 25px;

  align-items: center;

  padding:
    0
    7px;

  border-radius: 6px;

  background:
    var(--accent);

  color:
    var(--accent-text);

  font-size: 9px;
  font-weight: 700;
}


.history-delete {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border:
    1px solid
    var(--border);

  border-radius: 7px;

  background:
    var(--surface-2);

  color:
    var(--muted);
}


.history-delete:hover {
  color:
    var(--danger);
}


.history-delete svg {
  width: 13px;
  height: 13px;
}


.history-empty {
  min-height: 150px;

  display: grid;
  place-items: center;

  color:
    var(--muted);

  font-size: 10px;
}


/* =========================================================
   RESPONSIVE CALCULATOR
   ========================================================= */

@media (
  max-width: 1050px
) {
  .premium-calculator-grid {
    grid-template-columns:
      1fr;
  }

  .suggested-price-metrics {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

  .calc-summary-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}


@media (
  max-width: 700px
) {
  .calc-page-header {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  .calc-two-fields {
    grid-template-columns:
      1fr;
  }

  .selected-product-card {
    grid-template-columns:
      48px
      minmax(0, 1fr);
  }

  .selected-product-data {
    grid-column:
      1 / -1;

    justify-content:
      space-between;
  }

  .selected-product-data > div {
    text-align: left;
  }

  .markup-presets {
    grid-template-columns:
      repeat(
        3,
        1fr
      );
  }

  .suggested-price-main {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .suggested-price-value {
    min-width: 0;

    text-align: left;
  }

  .suggested-price-metrics {
    grid-template-columns:
      1fr
      1fr;
  }

  .calc-summary-grid {
    grid-template-columns:
      1fr
      1fr;
  }
}


/* =========================================================
   CÁLCULOS
   ========================================================= */

#pageCalculos {
  width: 100%;
  max-width: none;
  margin: 0;
}


.calculations-page-header {
  margin-bottom: 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
}


.calculations-page-header h1 {
  margin: 0;

  font-size:
    clamp(
      28px,
      3vw,
      38px
    );

  font-weight: 650;

  letter-spacing:
    -0.045em;
}


.calculations-page-header p {
  margin:
    7px
    0
    0;

  color:
    var(--muted);

  font-size: 12px;
}


.calculations-meta {
  min-height: 48px;

  margin-bottom: 10px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;
}


.calculations-meta > div {
  display: flex;
  align-items: baseline;

  gap: 7px;
}


.calculations-meta span {
  color:
    var(--muted);

  font-size: 10px;
}


.calculations-meta strong {
  color:
    var(--text);

  font-size: 14px;
}


.calculations-list-surface {
  width: 100%;

  overflow: hidden;
}


.calculations-table-wrap {
  width: 100%;

  overflow-x: auto;
}


.calculations-table {
  width: 100%;

  min-width: 1450px;

  border-collapse:
    collapse;
}


.calculations-table thead {
  background:
    var(--surface-2);
}


.calculations-table th {
  height: 43px;

  padding:
    0
    14px;

  border-bottom:
    1px solid
    var(--border);

  color:
    var(--muted);

  text-align: left;

  font-size: 8px;
  font-weight: 750;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

  white-space: nowrap;
}


.calculations-table td {
  height: 58px;

  padding:
    8px
    14px;

  border-bottom:
    1px solid
    var(--border-soft);

  color:
    var(--text-2);

  font-size: 10px;

  white-space: nowrap;

  vertical-align: middle;
}


.calculations-table tbody tr:last-child td {
  border-bottom: 0;
}


.calculations-table tbody tr:hover {
  background:
    var(--surface-2);
}


.calculations-date {
  display: grid;

  gap: 1px;

  color:
    var(--text-2);
}


.calculations-date small {
  color:
    var(--muted);

  font-size: 8px;
}


.calculations-product {
  display: block;

  max-width: 280px;

  overflow: hidden;

  color:
    var(--text);

  font-size: 10px;
  font-weight: 600;

  text-overflow:
    ellipsis;
}


.calculations-sku {
  display: inline-flex;

  min-height: 25px;

  align-items: center;

  padding:
    0
    7px;

  border:
    1px solid
    var(--border);

  border-radius: 6px;

  background:
    var(--surface-2);

  color:
    var(--text-2);

  font-size: 9px;
  font-weight: 650;
}


.calculations-markup {
  display: inline-flex;

  min-height: 26px;

  align-items: center;

  padding:
    0
    8px;

  border-radius: 6px;

  background:
    var(--accent);

  color:
    var(--accent-text);

  font-size: 9px;
  font-weight: 700;
}


.calculations-empty {
  min-height: 240px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 30px;

  color:
    var(--muted);

  text-align: center;
}


.calculations-empty svg {
  width: 22px;
  height: 22px;

  margin-bottom: 5px;
}


.calculations-empty strong {
  color:
    var(--text-2);

  font-size: 11px;
}


.calculations-empty span {
  font-size: 9px;
}


@media (
  max-width: 700px
) {
  .calculations-page-header {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  .calculations-page-header
  .primary-button {
    width: 100%;
  }
}


/* =========================================================
   LEGIBILIDAD GLOBAL
   TEXTO MÁS GRANDE · MÁS MARCADO · MÁS CONTRASTE
   ========================================================= */

/* DARK */
html[data-theme="dark"] {
  --text: #ffffff;
  --text-2: #e4e7ec;
  --muted: #aeb5bf;

  --border: #303640;
  --border-soft: rgba(255,255,255,0.085);

  --surface: #0f1115;
  --surface-2: #15181e;
  --surface-3: #1c2027;

  --sidebar: #090b0e;
  --topbar: rgba(9, 11, 14, 0.98);
}


/* LIGHT */
html[data-theme="light"] {
  --text: #080a0d;
  --text-2: #24282e;
  --muted: #555d67;

  --border: #cfd4da;
  --border-soft: rgba(10,15,20,0.10);

  --surface: #ffffff;
  --surface-2: #f4f5f7;
  --surface-3: #e9ecf0;
}


/* =========================================================
   BASE
   ========================================================= */

body {
  font-size: 15px;
  font-weight: 500;
}


/* =========================================================
   LOGIN
   ========================================================= */

.brand-copy strong {
  font-size: 16px;
  font-weight: 750;
}

.brand-copy span {
  font-size: 12px;
  font-weight: 600;
}

.login-heading h1 {
  font-size: 31px;
  font-weight: 750;
}

.login-heading p {
  font-size: 14px;
  font-weight: 550;
}

.login-form .field {
  font-size: 14px;
  font-weight: 700;
}

.login-form input {
  font-size: 15px;
  font-weight: 600;
}

.login-message {
  font-size: 13px;
  font-weight: 650;
}


/* =========================================================
   LABELS GENERALES
   ========================================================= */

.section-kicker {
  font-size: 11px;
  font-weight: 800;
}

.surface-kicker {
  font-size: 10px;
  font-weight: 800;
}

.field {
  font-size: 13px;
  font-weight: 700;
}

.input-shell input,
.money-field input {
  font-size: 15px;
  font-weight: 600;
}


/* =========================================================
   BOTONES
   ========================================================= */

.primary-button,
.secondary-button {
  font-size: 14px;
  font-weight: 750;
}

.icon-button,
.topbar-action,
.zoom-value {
  font-weight: 700;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar-brand-copy strong {
  font-size: 14px;
  font-weight: 750;
}

.sidebar-brand-copy span {
  font-size: 11px;
  font-weight: 600;
}

.sidebar-section-label {
  font-size: 10px;
  font-weight: 800;
}

.sidebar-link {
  font-size: 14px;
  font-weight: 650;
}

.sidebar-link.active {
  font-weight: 800;
}

.sidebar-link-icon svg {
  width: 18px;
  height: 18px;
}

.sidebar-user-copy strong {
  font-size: 13px;
  font-weight: 750;
}

.sidebar-user-copy span {
  font-size: 10px;
  font-weight: 600;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar-title span {
  font-size: 10px;
  font-weight: 800;
}

.topbar-title strong {
  font-size: 16px;
  font-weight: 750;
}

.zoom-value {
  font-size: 11px;
  font-weight: 750;
}

.topbar-user-copy strong {
  font-size: 12px;
  font-weight: 750;
}

.topbar-user-copy span {
  font-size: 10px;
  font-weight: 600;
}


/* =========================================================
   HEADERS
   ========================================================= */

.page-header h1,
.calc-page-header h1,
.products-header h1,
.calculations-page-header h1 {
  font-weight: 750;
}

.page-header p,
.calc-page-header p,
.products-header p,
.calculations-page-header p {
  font-size: 14px;
  font-weight: 550;
  color: var(--text-2);
}


/* =========================================================
   CALCULADORA
   ========================================================= */

.surface-header h2 {
  font-size: 17px;
  font-weight: 750;
}

.calc-result-lines span,
.result-item span {
  font-size: 12px;
  font-weight: 600;
}

.calc-result-lines strong,
.result-item strong {
  font-size: 14px;
  font-weight: 750;
}

.calc-profit-card-heading span,
.profit-header span {
  font-size: 12px;
  font-weight: 750;
}

.calc-profit-card-heading small,
.profit-header small {
  font-size: 10px;
  font-weight: 600;
}

.calc-profit-card > strong,
.profit-value {
  font-weight: 750;
}

.markup-current span,
.markup-goal span,
.markup-target-heading span {
  font-size: 11px;
  font-weight: 800;
}

.markup-current strong,
.markup-goal strong {
  font-weight: 800;
}

.markup-target-heading small {
  font-size: 10px;
  font-weight: 600;
}

.markup-presets button {
  font-size: 11px;
  font-weight: 750;
}

.markup-status {
  font-size: 12px;
  font-weight: 650;
}

.markup-status strong {
  font-weight: 850;
}


/* =========================================================
   PRODUCTO SELECCIONADO
   ========================================================= */

.selected-product-copy span {
  font-size: 10px;
  font-weight: 700;
}

.selected-product-copy strong {
  font-size: 14px;
  font-weight: 750;
}

.selected-product-data span {
  font-size: 10px;
  font-weight: 650;
}

.selected-product-data strong {
  font-size: 14px;
  font-weight: 750;
}


/* =========================================================
   BUSCADOR PRODUCTOS CALCULADORA
   ========================================================= */

.calc-product-search input {
  font-size: 14px;
  font-weight: 600;
}

.calc-product-option-copy small {
  font-size: 10px;
  font-weight: 700;
}

.calc-product-option-copy strong {
  font-size: 13px;
  font-weight: 750;
}

.calc-product-option-price {
  font-size: 12px;
  font-weight: 750;
}


/* =========================================================
   PRECIO OBJETIVO
   ========================================================= */

.suggested-price-main h2 {
  font-size: 20px;
  font-weight: 750;
}

.suggested-price-main p {
  font-size: 12px;
  font-weight: 550;
  color: var(--text-2);
}

.suggested-price-value span {
  font-size: 10px;
  font-weight: 800;
}

.suggested-price-value strong {
  font-weight: 800;
}

.suggested-price-metrics span {
  font-size: 10px;
  font-weight: 650;
}

.suggested-price-metrics strong {
  font-size: 15px;
  font-weight: 750;
}


/* =========================================================
   RESUMEN
   ========================================================= */

.calc-summary-card span {
  font-size: 10px;
  font-weight: 800;
}

.calc-summary-card strong {
  font-size: 25px;
  font-weight: 800;
}

.calc-summary-card small {
  font-size: 10px;
  font-weight: 600;
}


/* =========================================================
   PRODUCTOS
   ========================================================= */

.products-search input {
  font-size: 14px;
  font-weight: 600;
}

.products-category-filter {
  font-size: 13px;
  font-weight: 650;
}

.products-count {
  font-size: 12px;
  font-weight: 700;
}

.products-table th {
  font-size: 10px;
  font-weight: 850;
}

.products-table td {
  font-size: 13px;
  font-weight: 550;
}

.product-sku {
  font-size: 11px;
  font-weight: 750;
}

.product-name-cell strong {
  font-size: 14px;
  font-weight: 750;
}

.product-name-cell span {
  font-size: 10px;
  font-weight: 650;
}

.money-column {
  font-size: 14px;
  font-weight: 800;
}


/* =========================================================
   CÁLCULOS / HISTORIAL
   ========================================================= */

.history-header h2 {
  font-size: 17px;
  font-weight: 750;
}

.history-table th,
.calculations-table th {
  font-size: 10px;
  font-weight: 850;
}

.history-table td,
.calculations-table td {
  font-size: 12px;
  font-weight: 550;
}

.history-product strong,
.calculations-product {
  font-size: 12px;
  font-weight: 750;
}

.history-product span {
  font-size: 10px;
  font-weight: 600;
}

.history-date,
.calculations-date {
  font-size: 12px;
  font-weight: 650;
}

.history-date small,
.calculations-date small {
  font-size: 10px;
  font-weight: 600;
}

.history-markup,
.calculations-markup {
  font-size: 11px;
  font-weight: 850;
}

.calculations-sku {
  font-size: 11px;
  font-weight: 750;
}

.calculations-meta span {
  font-size: 11px;
  font-weight: 650;
}

.calculations-meta strong {
  font-size: 16px;
  font-weight: 800;
}


/* =========================================================
   EMPTY STATES
   ========================================================= */

.products-empty strong,
.empty-state strong,
.calculations-empty strong {
  font-size: 13px;
  font-weight: 750;
}

.products-empty span,
.empty-state span,
.calculations-empty span,
.products-loading span,
.loading-state span {
  font-size: 11px;
  font-weight: 600;
}


/* =========================================================
   MODAL PRODUCTOS
   ========================================================= */

.product-modal-header h2 {
  font-size: 20px;
  font-weight: 750;
}

.product-form .field {
  font-size: 13px;
  font-weight: 700;
}

.product-form input {
  font-size: 14px;
  font-weight: 600;
}


/* =========================================================
   LIGHT MODE · TEXTO BIEN NEGRO
   ========================================================= */

html[data-theme="light"] body,
html[data-theme="light"] .field,
html[data-theme="light"] .products-table td,
html[data-theme="light"] .calculations-table td,
html[data-theme="light"] .history-table td {
  color: #111418;
}

html[data-theme="light"] .muted,
html[data-theme="light"] small,
html[data-theme="light"] .section-kicker,
html[data-theme="light"] .surface-kicker {
  color: #4e5661;
}


/* =========================================================
   DARK MODE · TEXTO MÁS BLANCO
   ========================================================= */

html[data-theme="dark"] .field,
html[data-theme="dark"] .products-table td,
html[data-theme="dark"] .calculations-table td,
html[data-theme="dark"] .history-table td {
  color: #e8ebef;
}

html[data-theme="dark"] small {
  color: #aab1bb;
}


/* =========================================================
   USUARIOS
   ========================================================= */

#pageUsuarios {
  width: 100%;
  max-width: none;
  margin: 0;
}


.users-page-header {
  margin-bottom: 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
}


.users-page-header h1 {
  margin: 0;

  font-size:
    clamp(
      28px,
      3vw,
      38px
    );

  font-weight: 750;

  letter-spacing:
    -0.045em;
}


.users-page-header p {
  margin:
    7px
    0
    0;

  color:
    var(--text-2);

  font-size: 14px;
  font-weight: 550;
}


.users-surface {
  width: 100%;

  overflow: hidden;
}


.users-table-wrap {
  width: 100%;

  overflow-x: auto;
}


.users-table {
  width: 100%;

  border-collapse: collapse;
}


.users-table thead {
  background:
    var(--surface-2);
}


.users-table th {
  height: 46px;

  padding:
    0
    18px;

  border-bottom:
    1px solid
    var(--border);

  color:
    var(--muted);

  text-align: left;

  font-size: 10px;
  font-weight: 850;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.users-table td {
  height: 68px;

  padding:
    10px
    18px;

  border-bottom:
    1px solid
    var(--border-soft);

  color:
    var(--text-2);

  font-size: 13px;
  font-weight: 600;
}


.users-table tbody tr:last-child td {
  border-bottom: 0;
}


.users-table tbody tr:hover {
  background:
    var(--surface-2);
}


.users-table th:last-child,
.users-table td:last-child {
  width: 80px;

  text-align: right;
}


.user-list-name {
  display: flex;
  align-items: center;

  gap: 12px;
}


.user-list-avatar {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border:
    1px solid
    var(--border);

  border-radius: 9px;

  background:
    var(--surface-2);

  color:
    var(--muted);
}


.user-list-avatar svg {
  width: 16px;
  height: 16px;
}


.user-list-name strong {
  color:
    var(--text);

  font-size: 14px;
  font-weight: 750;
}


.user-actions {
  display: flex;
  justify-content: flex-end;
}


.users-empty {
  min-height: 230px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 7px;

  color:
    var(--muted);

  font-size: 12px;
  font-weight: 600;

  text-align: center;
}


.users-empty svg {
  width: 23px;
  height: 23px;
}


/* =========================================================
   MODAL USUARIO
   ========================================================= */

.user-modal {
  position: fixed;

  inset: 0;

  z-index: 600;

  display: none;

  align-items: center;
  justify-content: center;

  padding: 24px;

  background:
    rgba(0,0,0,0.52);

  backdrop-filter:
    blur(6px);
}


.user-modal.open {
  display: flex;
}


.user-modal-card {
  width:
    min(
      100%,
      480px
    );

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius: 16px;

  background:
    var(--surface);

  box-shadow:
    0
    28px
    90px
    rgba(0,0,0,0.28);
}


.user-modal-header {
  min-height: 70px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding:
    0
    20px;

  border-bottom:
    1px solid
    var(--border);
}


.user-modal-header h2 {
  margin: 0;

  font-size: 20px;
  font-weight: 750;
}


.user-modal-body {
  display: grid;

  gap: 18px;

  padding: 22px;
}


.user-form-message {
  min-height: 18px;

  color:
    var(--danger);

  font-size: 12px;
  font-weight: 650;
}


.user-modal-footer {
  min-height: 70px;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 8px;

  padding:
    0
    20px;

  border-top:
    1px solid
    var(--border);
}


@media (
  max-width: 650px
) {
  .users-page-header {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  .users-page-header
  .primary-button {
    width: 100%;
  }

  .user-modal {
    padding: 12px;
  }
}