/* =============================================================
   HEB TRACK — Theme override para Smart.UI
   Aplicar encima de un Pro Theme base (Fluent o Tabula recomendado).
   Carga en este orden:
     1) smart.default.css (de Smart.UI)
     2) smart.fluent.css  (o smart.tabula.css)
     3) heb-tokens.css    (tokens base, este bloque puede incluirse aquí o aparte)
     4) heb-theme.css     (este archivo: override de variables Smart.UI)
     5) heb-components.css (custom para lo no cubierto por Smart.UI)
   ============================================================= */

/* ---- Tokens base HEB (idénticos a styles.css del prototipo) ---- */
:root {
  /* Type */
  --font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Brand */
  --heb-red: #CC0000;
  --heb-red-hover: #B30000;
  --heb-red-soft: rgba(204, 0, 0, 0.08);
  --heb-red-soft-strong: rgba(204, 0, 0, 0.14);

  /* Surfaces — LIGHT */
  /* hex equivalentes a OKLCH originales; Smart.UI export XLSX no parsea oklch() */
  --bg-app: #FBFAF9;            /* oklch(0.985 0.002 80) */
  --bg-elevated: #ffffff;
  --bg-subtle: #F4F3F1;         /* oklch(0.965 0.003 80) */
  --bg-hover: #F1F0ED;          /* oklch(0.955 0.004 80) */
  --bg-active: #EDEBE7;         /* oklch(0.94 0.005 80) */

  /* Sidebar (siempre oscuro) */
  --sidebar-bg: #15171B;        /* oklch(0.205 0.008 260) */
  --sidebar-bg-elev: #1C1E22;   /* oklch(0.235 0.009 260) */
  --sidebar-border: #26292D;    /* oklch(0.28 0.009 260) */
  --sidebar-fg: #B4B7BD;        /* oklch(0.78 0.008 260) */
  --sidebar-fg-strong: #F0F2F5; /* oklch(0.96 0.005 260) */
  --sidebar-fg-muted: #6E7278;  /* oklch(0.55 0.01 260) */
  --sidebar-hover: #202327;     /* oklch(0.255 0.009 260) */
  --sidebar-active: #292D33;    /* oklch(0.295 0.012 260) */

  /* Text */
  --fg-strong: #14161A;         /* oklch(0.20 0.008 260) */
  --fg: #303337;                /* oklch(0.32 0.008 260) */
  --fg-muted: #66696E;          /* oklch(0.52 0.008 260) */
  --fg-subtle: #95989D;         /* oklch(0.68 0.008 260) */
  --fg-on-accent: #ffffff;

  /* Borders */
  --border: #E6E4E2;            /* oklch(0.92 0.004 80) */
  --border-strong: #D3D1CD;     /* oklch(0.86 0.005 80) */
  --border-focus: var(--heb-red);

  /* Status */
  --status-active: #4E9A52;     /* oklch(0.62 0.13 145) */
  --status-active-bg: #DFF6DE;  /* oklch(0.95 0.04 145) */
  --status-inactive: #83868C;   /* oklch(0.62 0.01 260) */
  --status-inactive-bg: #EDEEF0;/* oklch(0.95 0.003 260) */
  --status-pending: #D79628;    /* oklch(0.72 0.14 75) */
  --status-pending-bg: #FFEECD; /* oklch(0.96 0.05 75) */
  --status-danger: #D73337;     /* oklch(0.58 0.20 25) */
  --status-danger-bg: #FFE8E4;  /* oklch(0.96 0.04 25) */

  /* Radii */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;

  /* Shadow */
  --shadow-xs: 0 1px 0 rgb(0 0 0 / 0.03);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 0 rgb(0 0 0 / 0.02);
  --shadow-md: 0 2px 4px rgb(0 0 0 / 0.04), 0 4px 8px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 8px 16px rgb(0 0 0 / 0.06), 0 2px 4px rgb(0 0 0 / 0.03);
  --shadow-pop: 0 16px 40px rgb(0 0 0 / 0.10), 0 4px 12px rgb(0 0 0 / 0.06);

  /* Density */
  --row-h: 44px;
  --input-h: 36px;
  --pad-card: 20px;
  --gap: 16px;

  /* Motion */
  --t-fast: 120ms cubic-bezier(0.2, 0, 0, 1);
  --t-base: 180ms cubic-bezier(0.2, 0, 0, 1);
}

/* ---- Body base ---- */
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--fg);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

/* =============================================================
   OVERRIDE DE VARIABLES SMART.UI
   Smart.UI expone tokens como --smart-primary, --smart-background, etc.
   Aquí los mapeamos a los tokens HEB.
   Ver: htmlelements.com/docs/themes/
   ============================================================= */

smart-button,
smart-input,
smart-dropdown-list,
smart-date-time-picker,
smart-tabs,
smart-window,
smart-table,
smart-grid,
smart-check-box,
smart-switch-button,
smart-tag,
smart-toast,
smart-tooltip,
smart-breadcrumb,
smart-card,
smart-text-area,
smart-file-upload,
smart-chart,
.smart-element {
  /* Colores primarios */
  --smart-primary: var(--heb-red);
  --smart-primary-color: var(--fg-on-accent);
  --smart-primary-rgb: 204, 0, 0;

  /* Superficies */
  --smart-background: var(--bg-elevated);
  --smart-background-color: var(--fg);
  --smart-surface: var(--bg-subtle);
  --smart-surface-color: var(--fg);

  /* Bordes */
  --smart-border: var(--border-strong);
  --smart-border-radius: var(--r-md);

  /* Tipografía */
  --smart-font-family: var(--font-sans);
  --smart-font-size: 13.5px;

  /* Estados / accents */
  --smart-success: var(--status-active);
  --smart-warning: var(--status-pending);
  --smart-error: var(--status-danger);
  --smart-info: #4E72AC;        /* oklch(0.55 0.10 260) */

  /* Hover/active */
  --smart-ui-state-hover: var(--bg-hover);
  --smart-ui-state-active: var(--bg-active);

  /* Foco */
  --smart-outline: var(--heb-red);
  --smart-outline-secondary: var(--heb-red-soft);

  /* Espaciado interno */
  --smart-editor-height: var(--input-h);
  --smart-editor-padding: 0 12px;
}

/* =============================================================
   smart-button — variantes HEB
   ============================================================= */
smart-button {
  height: var(--input-h);
  border-radius: var(--r-md);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  text-transform: none;
}
smart-button.primary,
smart-button[primary] {
  background: var(--heb-red);
  color: var(--fg-on-accent);
  box-shadow: var(--shadow-xs);
}
smart-button.primary:hover,
smart-button[primary]:hover { background: var(--heb-red-hover); }

smart-button:not(.primary):not([primary]):not(.flat):not([flat]) {
  background: var(--bg-elevated);
  color: var(--fg-strong);
  border: 1px solid var(--border-strong);
}
smart-button:not(.primary):not([primary]):not(.flat):not([flat]):hover {
  background: var(--bg-hover);
}

smart-button.flat,
smart-button[flat] {
  background: transparent;
  color: var(--fg);
  border: 0;
}
smart-button.flat:hover { background: var(--bg-hover); }

smart-button.danger {
  color: var(--status-danger);
  border-color: var(--border-strong);
  background: transparent;
}
smart-button.danger:hover {
  background: var(--status-danger-bg);
  border-color: var(--status-danger);
}

/* =============================================================
   smart-input / smart-dropdown-list / smart-date-time-picker
   ============================================================= */
smart-input,
smart-dropdown-list,
smart-date-time-picker,
smart-text-area {
  height: var(--input-h);
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  font-size: 13.5px;
}
smart-input:focus-within,
smart-dropdown-list:focus-within,
smart-date-time-picker:focus-within,
smart-text-area:focus-within {
  border-color: var(--heb-red);
  box-shadow: 0 0 0 3px var(--heb-red-soft);
}
smart-text-area { height: auto; min-height: 80px; padding: 10px 12px; }

/* =============================================================
   smart-tabs — estilo underline
   ============================================================= */
smart-tabs {
  --smart-tabs-tab-padding: 10px 14px;
  --smart-tabs-header-background: transparent;
  --smart-tabs-tab-background-selected: transparent;
  --smart-tabs-tab-color-selected: var(--heb-red);
  --smart-tabs-tab-border-bottom-color-selected: var(--heb-red);
  border-bottom: 1px solid var(--border);
}
smart-tabs::part(tab) {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
smart-tabs::part(tab):hover { color: var(--fg-strong); }
smart-tabs::part(tab)[selected] {
  color: var(--heb-red);
  border-bottom-color: var(--heb-red);
}

/* =============================================================
   smart-window — modales
   ============================================================= */
smart-window {
  --smart-window-header-background: var(--bg-elevated);
  --smart-window-header-color: var(--fg-strong);
  --smart-window-background: var(--bg-elevated);
  --smart-window-border-radius: var(--r-xl);
  --smart-window-box-shadow: var(--shadow-pop);
  border: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
}
smart-window::part(header) {
  padding: 18px 20px 4px;
  border-bottom: 0;
}
smart-window::part(title) {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
smart-window::part(content) {
  padding: 8px 20px 16px;
  font-size: 13.5px;
  line-height: 1.55;
}
smart-window::part(footer) {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* =============================================================
   smart-table / smart-grid — chrome general
   ============================================================= */
smart-table,
smart-grid {
  --smart-grid-column-header-background: var(--bg-subtle);
  --smart-grid-column-header-color: var(--fg-muted);
  --smart-grid-column-header-font-size: 11px;
  --smart-grid-column-header-font-weight: 500;
  --smart-grid-column-header-text-transform: uppercase;
  --smart-grid-column-header-letter-spacing: 0.04em;
  --smart-grid-row-height: var(--row-h);
  --smart-grid-row-hover-background: var(--bg-hover);
  --smart-grid-row-selected-background: var(--heb-red-soft);
  --smart-grid-row-selected-hover-background: var(--heb-red-soft-strong);
  --smart-grid-border: var(--border);
  --smart-grid-cell-padding: 10px 12px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
}
smart-table::part(column-header),
smart-grid::part(column-header) {
  background: var(--bg-subtle);
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
smart-table::part(row),
smart-grid::part(row) {
  border-bottom: 1px solid var(--border);
}
smart-table::part(row):hover,
smart-grid::part(row):hover { background: var(--bg-hover); }

/* Celdas numéricas */
.smart-cell--num,
[data-numeric] {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* =============================================================
   smart-check-box / smart-switch-button
   ============================================================= */
smart-check-box {
  --smart-check-box-default-background: var(--bg-elevated);
  --smart-check-box-default-border: var(--border-strong);
  --smart-check-box-checked-background: var(--heb-red);
  --smart-check-box-checked-border: var(--heb-red);
  --smart-check-box-size: 16px;
  --smart-check-box-border-radius: 4px;
}

smart-switch-button {
  --smart-switch-button-default-background: #CCCED1;  /* oklch(0.85 0.005 260) */
  --smart-switch-button-default-thumb-background: #fff;
  --smart-switch-button-checked-background: var(--heb-red);
  --smart-switch-button-width: 36px;
  --smart-switch-button-height: 20px;
  --smart-switch-button-thumb-size: 16px;
}

/* =============================================================
   smart-tag — badges de estado
   ============================================================= */
smart-tag {
  --smart-tag-border-radius: 999px;
  --smart-tag-font-size: 11.5px;
  --smart-tag-padding: 2px 8px;
  font-weight: 500;
}
smart-tag.status-active   { background: var(--status-active-bg);   color: var(--status-active); }
smart-tag.status-inactive { background: var(--status-inactive-bg); color: var(--status-inactive); }
smart-tag.status-pending  { background: var(--status-pending-bg);  color: var(--status-pending); }
smart-tag.status-danger   { background: var(--status-danger-bg);   color: var(--status-danger); }

/* Dot indicator */
smart-tag::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 4px;
  vertical-align: middle;
}

/* =============================================================
   smart-toast / smart-tooltip
   ============================================================= */
smart-toast {
  --smart-toast-border-radius: var(--r-md);
  --smart-toast-box-shadow: var(--shadow-lg);
  --smart-toast-padding: 12px 16px;
  font-size: 13px;
}
smart-tooltip {
  --smart-tooltip-background: var(--fg-strong);
  --smart-tooltip-color: #fff;
  --smart-tooltip-border-radius: 4px;
  --smart-tooltip-font-size: 12px;
  --smart-tooltip-padding: 4px 8px;
}

/* =============================================================
   smart-chart — paleta HEB
   ============================================================= */
smart-chart {
  --smart-chart-color-1: var(--heb-red);
  --smart-chart-color-2: #4E9A52;  /* oklch(0.62 0.13 145) */
  --smart-chart-color-3: #D79628;  /* oklch(0.72 0.14 75)  */
  --smart-chart-color-4: #4E72AC;  /* oklch(0.55 0.10 260) */
  --smart-chart-color-5: #7C4F86;  /* oklch(0.50 0.10 320) */
  --smart-chart-color-6: #2BA1A7;  /* oklch(0.65 0.10 200) */
  --smart-chart-font-family: var(--font-sans);
}

/* =============================================================
   Foco universal — halo HEB
   ============================================================= */
*:focus-visible {
  outline: 2px solid var(--heb-red);
  outline-offset: 2px;
  border-radius: 2px;
}

/* =============================================================
   Densidades
   ============================================================= */
[data-density="compact"] {
  --row-h: 36px;
  --input-h: 32px;
  --pad-card: 16px;
  --gap: 12px;
}
[data-density="comfortable"] {
  --row-h: 52px;
  --input-h: 40px;
  --pad-card: 24px;
  --gap: 20px;
}

/* =============================================================
   Dark mode
   ============================================================= */
[data-theme="dark"] {
  --bg-app: #0B0D11;            /* oklch(0.16 0.008 260) */
  --bg-elevated: #14161A;       /* oklch(0.20 0.008 260) */
  --bg-subtle: #1A1C20;         /* oklch(0.225 0.008 260) */
  --bg-hover: #1E2125;          /* oklch(0.245 0.009 260) */
  --bg-active: #24272B;         /* oklch(0.27 0.01 260) */

  --fg-strong: #F3F5F9;         /* oklch(0.97 0.005 260) */
  --fg: #CFD1D5;                /* oklch(0.86 0.006 260) */
  --fg-muted: #8C8F94;          /* oklch(0.65 0.008 260) */
  --fg-subtle: #616368;         /* oklch(0.50 0.008 260) */

  --border: #24272B;            /* oklch(0.27 0.009 260) */
  --border-strong: #35383D;     /* oklch(0.34 0.01 260) */

  --status-active-bg: #1D341E;  /* oklch(0.30 0.05 145) */
  --status-inactive-bg: #252629;/* oklch(0.27 0.005 260) */
  --status-pending-bg: #3F2903; /* oklch(0.30 0.06 75) */
  --status-danger-bg: #47211E;  /* oklch(0.30 0.06 25) */

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.25), 0 1px 0 rgb(0 0 0 / 0.15);
  --shadow-md: 0 2px 4px rgb(0 0 0 / 0.25), 0 4px 8px rgb(0 0 0 / 0.2);
  --shadow-lg: 0 8px 16px rgb(0 0 0 / 0.3), 0 2px 4px rgb(0 0 0 / 0.2);
  --shadow-pop: 0 16px 40px rgb(0 0 0 / 0.5), 0 4px 12px rgb(0 0 0 / 0.3);
}