/* theme.css — GENERADO desde design-lab/temas/despensa-botanica/ — NO EDITAR A MANO */
/* ══ Despensa Botánica · tokens ═══════════════════════════════════════════
   Salvia mate + ciruela + verdes de hierbas. Scope de pantalla: la receta
   oficial de impresión permanece a cargo de 08-print.css.
   ═════════════════════════════════════════════════════════════════════════ */

@media screen {
  @layer tokens {
    :root[data-ui-theme="despensa-botanica"] {
      color-scheme: light;

      --ink: #203128;
      --ink-2: #40584a;
      --brand: #623650;
      --accent: #235f40;
      --cyan: #315b4f;
      --magenta: #833357;
      --dot: #b63e36;

      /* Ambos son opacos: no pierden contraste al caer sobre bandas. */
      --muted: #435649;
      --muted-2: #46574b;

      --bg: #edf2e9;
      --surface: #fbfcf7;
      --surface-2: #e1ebdd;
      --surface-3: #cfddc9;

      --line-soft: rgba(32, 49, 40, .09);
      --line: rgba(32, 49, 40, .17);
      --line-2: rgba(32, 49, 40, .55);
      --line-strong: rgba(32, 49, 40, .7);

      /* Gamas minerales compatibles con el selector de tono del riel. */
      --tono-marino: #29213a;
      --tono-marino-2: #554768;
      --tono-grafito: #252429;
      --tono-grafito-2: #514e57;
      --tono-petroleo: #19332f;
      --tono-petroleo-2: #3b6059;
      --tono-bosque: #203525;
      --tono-bosque-2: #496349;
      --tono-vino: #3b202c;
      --tono-vino-2: #713d50;
      --tono-cafe: #35261e;
      --tono-cafe-2: #694c39;

      /* Texto AA incluso sobre surface-3; green-vivo funciona como fondo. */
      --green: #285738;
      --green-soft: color-mix(in srgb, #285738 9%, var(--surface));
      --green-vivo: #397749;
      --blue: #3c5076;
      --blue-soft: color-mix(in srgb, #3c5076 9%, var(--surface));
      --amber: #694805;
      --amber-soft: color-mix(in srgb, #694805 9%, var(--surface));
      --amber-bright: #be8014;
      --amber-cta-ink: #160e00;
      --red: #863138;
      --red-soft: color-mix(in srgb, #863138 9%, var(--surface));
      --red-deep: #73262e;
      --teal: #315b4f;
      --teal-soft: color-mix(in srgb, #315b4f 9%, var(--surface));
      --violet: #654279;
      --violet-soft: color-mix(in srgb, #654279 9%, var(--surface));
      --rose: #833357;
      --rose-soft: color-mix(in srgb, #833357 9%, var(--surface));

      --serif: Inter, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
      --sans: Inter, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
      --font-display: Inter, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
      --font-numeric: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;

      --r-xs: 8px;
      --r-sm: 12px;
      --r: 16px;
      --r-lg: 22px;

      --shadow-xs: 0 1px 3px rgba(32, 49, 40, .09);
      --shadow-sm: 0 10px 24px -16px rgba(32, 49, 40, .32);
      --shadow-md: 0 24px 50px -30px rgba(32, 49, 40, .46);
      --shadow-lg: 0 38px 86px -32px rgba(98, 54, 80, .42);
      --focus: 0 0 0 3px rgba(35, 95, 64, .82);

      --chart-grid: rgba(32, 49, 40, .1);
      --chart-axis: rgba(32, 49, 40, .55);
      --chart-tooltip-bg: #29213a;
      --chart-tooltip-ink: #fffdfb;
      --chart-label-bg: rgba(251, 252, 247, .94);
      --chart-accent-shadow: rgba(35, 95, 64, .18);
      --chart-accent-area: rgba(35, 95, 64, .07);
      --chart-red-shadow: rgba(134, 49, 56, .24);
      --mente-canvas-top: #f8faf4;
      --mente-canvas-end: #dce8d7;

      --theme-rail-ink: #fffdfb;
      --theme-rail-soft: #f2ebef;
      --theme-rail-muted: #e9e2e6;
      --theme-rail-green: #baeabe;
      --theme-rail-cyan: #a7e8e0;
      --theme-rail-blue: #b8d5ff;
      --theme-rail-red: #ffb8b2;
      --theme-rail-amber: #ffe09a;
      --theme-rail-veil: rgba(255, 253, 251, .05);
      --theme-rail-veil-2: rgba(255, 253, 251, .1);
      --theme-rail-veil-3: rgba(255, 253, 251, .16);
      --theme-rail-line: rgba(255, 253, 251, .11);
      --theme-rail-line-2: rgba(255, 253, 251, .22);
      --theme-backdrop: rgba(25, 16, 23, .66);
      --theme-veil: rgba(25, 16, 23, .22);
      --theme-fixed-dark: #34202f;
      --theme-fixed-dark-ink: #fffdfb;
      --theme-sheen: rgba(255, 255, 255, .52);
      --theme-bloom: rgba(35, 95, 64, .09);
      --theme-plum-bloom: rgba(98, 54, 80, .08);
    }
  }
}
/* ══ Despensa Botánica · acabado visual ═══════════════════════════════════
   Sólo piel: color, fondos, bordes, sombras, radios y familia tipográfica.
   Ninguna regla cambia geometría ni estructura del sistema v2.
   ═════════════════════════════════════════════════════════════════════════ */

@media screen {
  @layer base {
    :root[data-ui-theme="despensa-botanica"] body {
      background-color: var(--bg);
      background-image:
        radial-gradient(ellipse at 8% -8%, var(--theme-bloom), transparent 34%),
        radial-gradient(ellipse at 94% 4%, var(--theme-plum-bloom), transparent 30%),
        linear-gradient(to bottom, var(--surface-2), var(--bg) 220px);
    }

    :root[data-ui-theme="despensa-botanica"] :is(h1, h2, h3, .ph-title) {
      font-family: var(--font-display);
      letter-spacing: -.012em;
    }

    :root[data-ui-theme="despensa-botanica"] :is(input, select, textarea) {
      caret-color: var(--accent);
    }

    :root[data-ui-theme="despensa-botanica"] :is(
      input:not([type="checkbox"]):not([type="radio"]),
      select,
      textarea
    ):not(:disabled):not(:focus) {
      box-shadow: inset 0 1px 0 var(--theme-sheen), var(--shadow-xs);
    }

    :root[data-ui-theme="despensa-botanica"] ::selection {
      background: color-mix(in srgb, var(--accent) 18%, var(--surface));
      color: var(--ink);
    }
  }

  @layer layout {
    :root[data-ui-theme="despensa-botanica"] :is(.sidebar, .topbar, .tb-panel) {
      --rail-ink: var(--theme-rail-ink);
      --rail-soft: var(--theme-rail-soft);
      --rail-muted: var(--theme-rail-muted);
      --rail-veil: var(--theme-rail-veil);
      --rail-veil-2: var(--theme-rail-veil-2);
      --rail-veil-3: var(--theme-rail-veil-3);
      --rail-line: var(--theme-rail-line);
      --rail-line-2: var(--theme-rail-line-2);
    }

    :root[data-ui-theme="despensa-botanica"] :is(.sidebar, .topbar, .tb-panel)
      :is(button, a[href], [role="button"]):focus-visible {
      outline: 2px solid var(--theme-rail-ink);
      outline-offset: 2px;
    }

    :root[data-ui-theme="despensa-botanica"] .topbar .connection-task-panel
      :is(button, a[href], [role="button"]):focus-visible {
      outline-color: var(--accent);
    }

    :root[data-ui-theme="despensa-botanica"] :is(.sidebar, .topbar) .nav-search input:focus-visible {
      box-shadow: inset 0 0 0 2px var(--theme-rail-ink);
    }

    :root[data-ui-theme="despensa-botanica"] .sidebar {
      background-image:
        radial-gradient(ellipse at 50% -8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%),
        radial-gradient(ellipse at 110% 92%, color-mix(in srgb, var(--magenta) 14%, transparent), transparent 38%),
        linear-gradient(to bottom, var(--nav-2), var(--nav));
      border-right-color: var(--rail-line-2);
      box-shadow: 8px 0 30px -24px color-mix(in srgb, var(--brand) 72%, transparent);
    }

    :root[data-ui-theme="despensa-botanica"] :is(.topbar, .tb-panel) {
      background-image:
        radial-gradient(ellipse at 20% 0, color-mix(in srgb, var(--accent) 14%, transparent), transparent 36%),
        linear-gradient(to right, var(--nav), var(--nav-2));
      border-color: var(--rail-line-2);
    }

    :root[data-ui-theme="despensa-botanica"] .nav-item.active {
      border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent), var(--shadow-sm);
    }

    :root[data-ui-theme="despensa-botanica"] :is(
      .brand-mark,
      .sidebar-settings-button:hover,
      .sidebar-settings-button.active,
      .sidebar-foot-actions .table-action:hover:not(:disabled)
    ) {
      color: var(--rail-ink);
    }

    :root[data-ui-theme="despensa-botanica"] :is(.nav-subsection-label, .sidebar-brand) {
      color: var(--rail-muted);
    }

    :root[data-ui-theme="despensa-botanica"] .connection-progress {
      background: var(--rail-veil-3);
    }

    :root[data-ui-theme="despensa-botanica"] .status-dot {
      background: var(--theme-rail-amber);
    }

    :root[data-ui-theme="despensa-botanica"] .status-dot.ok {
      background: var(--theme-rail-green);
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-rail-green) 24%, transparent);
    }

    :root[data-ui-theme="despensa-botanica"] .status-dot.bad {
      background: var(--theme-rail-red);
    }

    :root[data-ui-theme="despensa-botanica"] .connection-progress span,
    :root[data-ui-theme="despensa-botanica"] .topbar .tb-progreso > i {
      background: linear-gradient(
        90deg,
        var(--theme-rail-green),
        var(--theme-rail-cyan) 58%,
        var(--theme-rail-blue)
      );
      box-shadow: 0 0 14px color-mix(in srgb, var(--theme-rail-cyan) 38%, transparent);
    }

    :root[data-ui-theme="despensa-botanica"] .sidebar .connection-task-pulse {
      background: var(--theme-rail-cyan);
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme-rail-cyan) 35%, transparent);
    }

    :root[data-ui-theme="despensa-botanica"] .sidebar .connection-task--done .connection-task-pulse {
      background: var(--theme-rail-green);
      box-shadow: none;
    }

    :root[data-ui-theme="despensa-botanica"] .sidebar .connection-task time {
      background: var(--theme-rail-veil-3);
      border-color: var(--theme-rail-line-2);
      color: var(--theme-rail-ink);
    }

    :root[data-ui-theme="despensa-botanica"] .topbar .connection-task-panel .connection-task time {
      background: color-mix(in srgb, var(--accent) 9%, var(--surface));
      border-color: color-mix(in srgb, var(--accent) 52%, var(--surface));
      color: var(--accent);
    }

    :root[data-ui-theme="despensa-botanica"] .sidebar-foot {
      background-image: linear-gradient(to bottom right, var(--rail-veil-3), var(--rail-veil));
      border-color: var(--rail-line-2);
      box-shadow: inset 0 1px 0 color-mix(in srgb, var(--theme-rail-ink) 16%, transparent);
    }
  }

  @layer componentes {
    :root[data-ui-theme="despensa-botanica"] .modal-backdrop {
      background: var(--theme-backdrop);
    }

    :root[data-ui-theme="despensa-botanica"] :is(.filtros-velo, .tb-velo) {
      background: var(--theme-veil);
    }

    :root[data-ui-theme="despensa-botanica"] .topbar .connection-task-panel {
      --rail-ink: var(--ink);
      --rail-soft: var(--ink-2);
      --rail-muted: var(--muted);
    }

    :root[data-ui-theme="despensa-botanica"] :is(
      .table-section,
      .overview-panel,
      .overview-command-bar,
      .report-panel,
      .finance-overview-panel,
      .tool-panel,
      .accounting-panel,
      .report-board-head,
      .financial-entry-card,
      .chart-account-group,
      .daily-chat-dock
    ) {
      background-image:
        radial-gradient(ellipse at 0 0, var(--theme-bloom), transparent 34%),
        linear-gradient(to bottom right, var(--theme-sheen), transparent 38%);
      border-color: var(--line);
      box-shadow: inset 0 1px 0 var(--theme-sheen), var(--shadow-sm);
    }

    :root[data-ui-theme="despensa-botanica"] .ph-toolbox {
      background: color-mix(in srgb, var(--surface) 88%, transparent);
      border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
      box-shadow: inset 0 1px 0 var(--theme-sheen), var(--shadow-md);
      -webkit-backdrop-filter: blur(24px) saturate(125%);
      backdrop-filter: blur(24px) saturate(125%);
    }

    :root[data-ui-theme="despensa-botanica"] .primary-action:not(.danger):not(.primary-action--cta):not(.success):not(:disabled):not(:focus-visible) {
      background-image: linear-gradient(to bottom right, color-mix(in srgb, var(--surface) 8%, var(--brand)), var(--brand));
      border-color: var(--brand);
      box-shadow: 0 10px 22px -16px color-mix(in srgb, var(--brand) 68%, transparent), var(--shadow-xs);
    }

    :root[data-ui-theme="despensa-botanica"] .primary-action:not(.danger):not(.primary-action--cta):not(.success):hover:not(:disabled):not(:focus-visible) {
      background-image: linear-gradient(to bottom right, color-mix(in srgb, var(--surface) 6%, var(--accent)), var(--accent));
      border-color: var(--accent);
      box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--accent) 66%, transparent), var(--shadow-sm);
    }

    :root[data-ui-theme="despensa-botanica"] :is(.modal-panel, .popover-panel, .notif-panel) {
      background-image:
        radial-gradient(ellipse at 0 0, var(--theme-bloom), transparent 38%),
        linear-gradient(to bottom right, var(--theme-sheen), transparent 34%);
      border-color: color-mix(in srgb, var(--brand) 20%, var(--line));
      box-shadow: var(--shadow-lg);
    }

    :root[data-ui-theme="despensa-botanica"] :is(
      .segmented-control,
      .overview-kpi,
      .book-summary > article,
      .sales-summary > article,
      .report-kpi-strip > article,
      .hr-kpis > article,
      .hr-pending-kpis > article,
      .hr-third-party-kpis > article,
      .hr-vacation-kpis > article
    ) {
      border-color: var(--line);
      background-image: linear-gradient(to bottom right, var(--theme-sheen), transparent 44%);
      box-shadow: var(--shadow-xs);
    }

    :root[data-ui-theme="despensa-botanica"] .daily-chat-dock-toggle {
      background-color: var(--theme-fixed-dark);
      background-image: linear-gradient(to right, transparent, color-mix(in srgb, var(--accent) 22%, transparent));
      color: var(--theme-fixed-dark-ink);
    }

    :root[data-ui-theme="despensa-botanica"] .daily-chat-dock-toggle small {
      color: color-mix(in srgb, var(--theme-fixed-dark-ink) 80%, transparent);
    }

    :root[data-ui-theme="despensa-botanica"] .daily-chat-dock.has-unread .daily-chat-dock-toggle {
      background-color: var(--theme-fixed-dark);
      background-image: linear-gradient(
        to right,
        color-mix(in srgb, var(--red) 32%, transparent),
        color-mix(in srgb, var(--magenta) 16%, transparent)
      );
    }

    :root[data-ui-theme="despensa-botanica"] .daily-chat-dock.is-drop-target .daily-chat-dock-toggle {
      background-color: var(--theme-fixed-dark);
      background-image: linear-gradient(to right, color-mix(in srgb, var(--green) 44%, transparent), transparent);
      box-shadow: inset 0 0 0 3px var(--theme-fixed-dark-ink);
    }

    :root[data-ui-theme="despensa-botanica"] .daily-chat-dock.is-drop-ready .daily-chat-dock-toggle {
      box-shadow: inset 0 0 0 2px var(--theme-fixed-dark-ink);
    }

    :root[data-ui-theme="despensa-botanica"] .daily-chat-dock-avatar {
      background: color-mix(in srgb, var(--accent) 28%, transparent);
    }

    :root[data-ui-theme="despensa-botanica"] .debug-box {
      background: var(--theme-fixed-dark);
      border-color: var(--theme-rail-line-2);
      color: var(--theme-fixed-dark-ink);
    }

    :root[data-ui-theme="despensa-botanica"] .annex-brand .brand-mark {
      color: var(--theme-rail-ink);
    }

    :root[data-ui-theme="despensa-botanica"] .app-loader {
      --loader-ink: var(--theme-rail-ink);
      --loader-ink-muted: var(--theme-rail-muted);
      --loader-track: color-mix(in srgb, var(--theme-rail-ink) 14%, var(--nav));
    }
  }

  @layer vistas {
    :root[data-ui-theme="despensa-botanica"] th {
      background-image: linear-gradient(to bottom, var(--theme-sheen), transparent);
      border-bottom-color: var(--line-strong);
    }

    :root[data-ui-theme="despensa-botanica"] :is(.ios-list, .settings-subfamily-check) {
      background-image:
        radial-gradient(ellipse at 0 0, var(--theme-bloom), transparent 38%),
        linear-gradient(to bottom right, var(--theme-sheen), transparent 42%);
      border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
      box-shadow: var(--shadow-xs);
    }

    :root[data-ui-theme="despensa-botanica"] .ios-row + .ios-row {
      border-color: color-mix(in srgb, var(--accent) 16%, var(--line));
    }

    :root[data-ui-theme="despensa-botanica"] .ios-row--nav:hover {
      background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    }

    :root[data-ui-theme="despensa-botanica"] .tono-muestra[aria-checked="true"] {
      box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
    }

    :root[data-ui-theme="despensa-botanica"] .daily-chat-message.is-own {
      background: var(--green-soft);
      box-shadow: inset -3px 0 0 color-mix(in srgb, var(--green) 36%, transparent);
    }

    :root[data-ui-theme="despensa-botanica"] :is(.mente-stage, .mente-card, .mente-drawer, .mente-sec) {
      border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
      box-shadow: var(--shadow-sm);
    }

    :root[data-ui-theme="despensa-botanica"] .mente-stage {
      background-image:
        radial-gradient(circle, var(--chart-grid) 1px, transparent 1.5px),
        linear-gradient(to bottom, var(--mente-canvas-top), var(--mente-canvas-end));
      background-size: 22px 22px, auto;
      box-shadow: inset 0 1px 0 var(--theme-sheen), var(--shadow-md);
    }

    :root[data-ui-theme="despensa-botanica"] .mente-av {
      color: var(--theme-fixed-dark-ink);
    }

    :root[data-ui-theme="despensa-botanica"] #view-catalog :is(
      .catalog-rail-item[aria-pressed="true"],
      .catalog-board-tools [aria-pressed="true"],
      .catalog-board-bar,
      .catalog-publish-card
    ) {
      background-color: var(--theme-fixed-dark);
      background-image: linear-gradient(to right, transparent, color-mix(in srgb, var(--accent) 18%, transparent));
      border-color: var(--theme-fixed-dark);
      color: var(--theme-fixed-dark-ink);
    }

    :root[data-ui-theme="despensa-botanica"] #view-catalog .catalog-publish-card small {
      color: color-mix(in srgb, var(--theme-fixed-dark-ink) 78%, transparent);
    }
  }

  @layer terceros {
    :root[data-ui-theme="despensa-botanica"] .tabulator .tabulator-header .tabulator-col-title {
      color: var(--muted-2);
      font-family: var(--sans);
    }

    :root[data-ui-theme="despensa-botanica"] .tabulator .tabulator-col.tabulator-sortable:focus-visible {
      outline-color: var(--accent);
    }

    :root[data-ui-theme="despensa-botanica"] .tabulator .tabulator-row.tabulator-selectable:hover {
      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
    }
  }
}