:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --bg-top: #eef2f8;
  --bg-mid: #e6ebf3;
  --bg-bottom: #dbe2ee;
  --bg-glow-a: rgba(120, 170, 255, 0.28);
  --bg-glow-b: rgba(255, 190, 210, 0.20);

  --text-primary: #1c1c1e;
  --text-secondary: #6e6e73;
  --text-tertiary: #8e8e93;

  --card-bg: rgba(255, 255, 255, 0.62);
  --card-border: rgba(60, 60, 67, 0.10);
  --card-shadow: 0 20px 45px -18px rgba(30, 41, 59, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --card-blur: 24px;

  --separator: rgba(60, 60, 67, 0.13);

  --accent: #007aff;
  --accent-strong: #0060df;
  --accent-tint: rgba(0, 122, 255, 0.10);

  --danger: #ff3b30;
  --danger-tint: rgba(255, 59, 48, 0.09);
  --danger-border: rgba(255, 59, 48, 0.20);

  --control-bg: rgba(118, 118, 128, 0.08);
  --control-border: rgba(60, 60, 67, 0.14);

  --success: #248a3d;
  --success-tint: rgba(52, 199, 89, 0.12);
  --success-border: rgba(52, 199, 89, 0.28);

  --warning: #b36a00;
  --warning-tint: rgba(255, 159, 10, 0.12);
  --warning-border: rgba(255, 159, 10, 0.30);

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-top: #1c1c1e;
    --bg-mid: #131316;
    --bg-bottom: #08080a;
    --bg-glow-a: rgba(10, 132, 255, 0.16);
    --bg-glow-b: rgba(191, 90, 242, 0.10);

    --text-primary: #f5f5f7;
    --text-secondary: #98989d;
    --text-tertiary: #6e6e73;

    --card-bg: rgba(28, 28, 30, 0.62);
    --card-border: rgba(255, 255, 255, 0.09);
    --card-shadow: 0 20px 45px -18px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);

    --separator: rgba(255, 255, 255, 0.10);

    --accent: #0a84ff;
    --accent-strong: #409cff;
    --accent-tint: rgba(10, 132, 255, 0.16);

    --danger: #ff453a;
    --danger-tint: rgba(255, 69, 58, 0.14);
    --danger-border: rgba(255, 69, 58, 0.28);

    --control-bg: rgba(118, 118, 128, 0.18);
    --control-border: rgba(255, 255, 255, 0.14);

    --success: #30d158;
    --success-tint: rgba(48, 209, 88, 0.16);
    --success-border: rgba(48, 209, 88, 0.3);

    --warning: #ff9f0a;
    --warning-tint: rgba(255, 159, 10, 0.16);
    --warning-border: rgba(255, 159, 10, 0.32);
  }
}

body {
  color: var(--text-primary);
  background:
    radial-gradient(circle at 12% 0%, var(--bg-glow-a), transparent 42%),
    radial-gradient(circle at 88% 8%, var(--bg-glow-b), transparent 38%),
    linear-gradient(180deg, var(--bg-top), var(--bg-mid) 45%, var(--bg-bottom));
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.page,
.page-wrapper,
.page-body {
  background: transparent;
}

.shell-navbar {
  background: color-mix(in srgb, var(--card-bg) 70%, transparent);
  border-bottom: 1px solid var(--card-border);
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(var(--card-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--card-blur)) saturate(180%);
}

.brand-kicker {
  color: var(--accent);
}
.brand-title {
  color: var(--text-primary);
}
.footer-note,
.card-subtitle,
.form-label,
.store-date {
  color: var(--text-secondary);
}

h1, h2, h3 {
  color: var(--text-primary);
}

.form-control,
.form-select {
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.nav-arrow {
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  color: var(--accent);
}
.nav-arrow:hover {
  background: var(--accent-tint);
}

.btn-primary {
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  color: #ffffff;
  border: 1px solid var(--accent-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 22px rgba(0, 122, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  font-weight: 600;
}
.btn-primary:hover {
  filter: brightness(1.04);
}
.btn-download {
  box-shadow: 0 10px 22px rgba(0, 122, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.card h2,
.store-card .card-title {
  font-weight: 650;
  letter-spacing: -0.02em;
}

.store-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 55px -18px rgba(30, 41, 59, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.loss-spotlight {
  background: var(--danger-tint);
  border: 1px solid var(--danger-border);
}
.loss-breakdown-row-main {
  color: var(--danger);
}
.loss-alerts {
  background: var(--warning-tint);
  border: 1px solid var(--warning-border);
  color: var(--warning);
}
.loss-alerts-icon {
  background: var(--warning);
  color: #ffffff;
}

.metrics-table tbody tr td {
  border-color: var(--separator);
}
.metrics-table tbody tr:last-child td {
  border-bottom: 0;
}

.sales-block,
.odoo-block {
  background: var(--accent-tint);
}
.sales-block {
  background: var(--control-bg);
}
.consumption-divider {
  background: var(--separator);
}
.sales-meta-line,
.sales-modifiers,
.odoo-block-sub {
  color: var(--text-secondary);
}

code {
  background: var(--control-bg);
  color: var(--accent-strong);
  border: 1px solid var(--control-border);
  border-radius: 6px;
}

/* Navbar hamburger menu */
.nav-menu-button {
  color: var(--text-primary);
  background: var(--control-bg);
  border: 1px solid var(--control-border);
}
.nav-menu-backdrop {
  background: rgba(0, 0, 0, 0.32);
}
.nav-menu-panel {
  background: var(--card-bg);
  backdrop-filter: blur(var(--card-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--card-blur)) saturate(180%);
  border-left: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}
.nav-menu-panel-title {
  color: var(--text-secondary);
}
.nav-menu-close {
  color: var(--text-secondary);
  background: var(--control-bg);
}
.nav-menu-link {
  color: var(--text-primary);
  background: var(--control-bg);
}
.nav-menu-link.active,
.nav-menu-link:hover {
  background: var(--accent-tint);
  color: var(--accent);
}

/* Editar ingredientes */
.settings-subtitle {
  color: var(--text-secondary);
}
.settings-table th {
  color: var(--text-tertiary);
}
.settings-table tbody tr {
  border-bottom: 1px solid var(--separator);
}
.ingredient-target-unit {
  color: var(--text-secondary);
}
.settings-banner-ok {
  background: var(--success-tint);
  color: var(--success);
  border: 1px solid var(--success-border);
}
.settings-banner-error {
  background: var(--danger-tint);
  color: var(--danger);
  border: 1px solid var(--danger-border);
}

/* Ver graficos */
.ingredient-check {
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  color: var(--text-primary);
}
.ingredient-check input {
  accent-color: var(--accent);
}
.graph-range-note {
  color: var(--text-secondary);
}
.graph-empty {
  color: var(--text-secondary);
}

@media (max-width: 760px) {
  h1 {
    font-size: 42px;
  }
}