/* theme.css — GENERADO desde design-lab/temas/turno-noche/ — NO EDITAR A MANO */
/* ══ Turno Noche · tokens ═════════════════════════════════════════════════
   Paleta oscura operativa. Scope de pantalla: impresión permanece clara.
   ═════════════════════════════════════════════════════════════════════════ */

@media screen {
  @layer tokens {
    :root[data-ui-theme="turno-noche"] {
      color-scheme: dark;

      --ink: #edf6ff;
      --ink-2: #c5d9ec;
      --brand: #79c8ff;
      --accent: #42d4ff;
      --cyan: #46e0dc;
      --magenta: #ff63ad;
      --dot: #ff4968;

      --muted: rgba(226, 239, 252, .69);
      --muted-2: rgba(226, 239, 252, .6);

      --bg: #070a10;
      --surface: #101722;
      --surface-2: #16202d;
      --surface-3: #202d3d;

      --line-soft: rgba(211, 232, 250, .07);
      --line: rgba(211, 232, 250, .13);
      --line-2: rgba(211, 232, 250, .4);
      --line-strong: rgba(211, 232, 250, .52);

      --tono-marino: #050716;
      --tono-marino-2: #10234c;
      --tono-grafito: #080a0e;
      --tono-grafito-2: #242c37;
      --tono-petroleo: #04171b;
      --tono-petroleo-2: #0d3c43;
      --tono-bosque: #07180f;
      --tono-bosque-2: #173e2a;
      --tono-vino: #1c0712;
      --tono-vino-2: #4b1931;
      --tono-cafe: #180f08;
      --tono-cafe-2: #432b17;

      --green: #61d99a;
      --green-soft: color-mix(in srgb, #61d99a 14%, var(--surface));
      --green-vivo: #6fe7a7;
      --blue: #62baff;
      --blue-soft: color-mix(in srgb, #62baff 14%, var(--surface));
      --amber: #efbd5b;
      --amber-soft: color-mix(in srgb, #efbd5b 15%, var(--surface));
      --amber-bright: #ffcb68;
      --amber-cta-ink: #241a08;
      --red: #ff8178;
      --red-soft: color-mix(in srgb, #ff8178 14%, var(--surface));
      --red-deep: #ff655e;
      --teal: #58d1c8;
      --teal-soft: color-mix(in srgb, #58d1c8 14%, var(--surface));
      --violet: #b99aff;
      --violet-soft: color-mix(in srgb, #b99aff 14%, var(--surface));
      --rose: #ff79b9;
      --rose-soft: color-mix(in srgb, #ff79b9 13%, var(--surface));

      --serif: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;
      --sans: Inter, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
      --font-display: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;
      --font-numeric: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

      --r-xs: 2px;
      --r-sm: 4px;
      --r: 6px;
      --r-lg: 8px;

      --shadow-xs: 0 1px 0 rgba(0, 0, 0, .42), 0 0 0 1px rgba(121, 200, 255, .03);
      --shadow-sm: 0 12px 30px -18px rgba(0, 0, 0, .9), 0 0 24px -18px rgba(66, 212, 255, .72);
      --shadow-md: 0 24px 56px -30px rgba(0, 0, 0, .96), 0 0 36px -24px rgba(66, 212, 255, .48);
      --shadow-lg: 0 40px 96px -30px rgba(0, 0, 0, .98), 0 0 54px -34px rgba(185, 154, 255, .4);
      --focus: 0 0 0 3px rgba(66, 212, 255, .5);

      --chart-grid: rgba(211, 232, 250, .1);
      --chart-axis: rgba(211, 232, 250, .4);
      --chart-tooltip-bg: #05080d;
      --chart-tooltip-ink: #edf6ff;
      --chart-label-bg: rgba(16, 23, 34, .92);
      --chart-accent-shadow: rgba(66, 212, 255, .22);
      --chart-accent-area: rgba(66, 212, 255, .09);
      --chart-red-shadow: rgba(255, 129, 120, .24);
      --mente-canvas-top: #0a1019;
      --mente-canvas-end: #132131;

      --theme-rail-ink: #f2f8ff;
      --theme-rail-soft: rgba(242, 248, 255, .82);
      --theme-rail-muted: rgba(242, 248, 255, .68);
      --theme-rail-green: #baeabe;
      --theme-rail-cyan: #a7e8e0;
      --theme-rail-blue: #b8d5ff;
      --theme-rail-red: #ffb8b2;
      --theme-rail-amber: #ffe09a;
      --theme-rail-veil: rgba(242, 248, 255, .04);
      --theme-rail-veil-2: rgba(242, 248, 255, .08);
      --theme-rail-veil-3: rgba(242, 248, 255, .14);
      --theme-rail-line: rgba(242, 248, 255, .09);
      --theme-rail-line-2: rgba(242, 248, 255, .44);
      --theme-backdrop: rgba(1, 4, 9, .78);
      --theme-veil: rgba(1, 4, 9, .32);
      --theme-fixed-dark: #05080d;
      --theme-fixed-dark-ink: #edf6ff;
      --theme-glow: rgba(66, 212, 255, .18);
      --theme-sheen: rgba(237, 246, 255, .05);
    }
  }
}
/* ══ Turno Noche · acabado visual ═════════════════════════════════════════
   Sólo piel: color, fondos, bordes, sombras y familia tipográfica. Ninguna
   regla cambia geometría o estructura del sistema v2.
   ═════════════════════════════════════════════════════════════════════════ */

@media screen {
  @layer base {
    :root[data-ui-theme="turno-noche"] body {
      background-color: var(--bg);
      background-image:
        radial-gradient(circle at 84% -12%, var(--theme-glow), transparent 34%),
        linear-gradient(to bottom, var(--bg), color-mix(in srgb, var(--surface-2) 35%, var(--bg)));
    }

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

    :root[data-ui-theme="turno-noche"] :is(input, select, textarea) {
      caret-color: var(--cyan);
    }

    :root[data-ui-theme="turno-noche"] :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="turno-noche"] ::selection {
      background: color-mix(in srgb, var(--accent) 34%, transparent);
      color: var(--ink);
    }
  }

  @layer layout {
    :root[data-ui-theme="turno-noche"] :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="turno-noche"] :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="turno-noche"] .topbar .connection-task-panel
      :is(button, a[href], [role="button"]):focus-visible {
      outline-color: var(--accent);
    }

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

    :root[data-ui-theme="turno-noche"] .sidebar {
      background-image:
        radial-gradient(circle at 50% 0, color-mix(in srgb, var(--accent) 14%, transparent), transparent 28%),
        linear-gradient(to bottom, var(--nav-2), var(--nav));
      border-right-color: var(--rail-line-2);
      box-shadow: var(--shadow-md);
    }

    :root[data-ui-theme="turno-noche"] .nav-item.active {
      border-color: color-mix(in srgb, var(--accent) 30%, transparent);
      box-shadow: inset 3px 0 0 var(--accent), var(--shadow-sm);
    }

    /* El v2 claro usa --surface como tinta blanca en algunos rincones del
       riel. En un tema oscuro esa misma variable es una tarjeta oscura, de
       modo que esos casos deben consumir la tinta local del riel. */
    :root[data-ui-theme="turno-noche"] :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="turno-noche"] :is(.nav-subsection-label, .sidebar-brand) {
      color: var(--rail-muted);
    }

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

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

    :root[data-ui-theme="turno-noche"] .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="turno-noche"] .status-dot.bad {
      background: var(--theme-rail-red);
    }

    :root[data-ui-theme="turno-noche"] .connection-progress span,
    :root[data-ui-theme="turno-noche"] .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="turno-noche"] .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="turno-noche"] .sidebar .connection-task--done .connection-task-pulse {
      background: var(--theme-rail-green);
      box-shadow: none;
    }

    :root[data-ui-theme="turno-noche"] .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="turno-noche"] .topbar .connection-task-panel .connection-task time {
      background: color-mix(in srgb, var(--accent) 11%, var(--surface));
      border-color: color-mix(in srgb, var(--accent) 52%, var(--surface));
      color: var(--accent);
    }

    :root[data-ui-theme="turno-noche"] .sidebar-foot {
      background-image: linear-gradient(to bottom, var(--rail-veil-3), var(--rail-veil));
      border-color: var(--rail-line-2);
    }
  }

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

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

    :root[data-ui-theme="turno-noche"] :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
    ) {
      background-image: linear-gradient(to bottom right, var(--theme-sheen), transparent 42%);
      border-color: var(--line);
      box-shadow: inset 0 1px 0 var(--theme-sheen), var(--shadow-xs);
    }

    :root[data-ui-theme="turno-noche"] .ph-toolbox {
      background: color-mix(in srgb, var(--surface) 82%, transparent);
      border-color: var(--line-2);
      box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 14%, transparent), var(--shadow-sm);
      -webkit-backdrop-filter: blur(22px) saturate(145%);
      backdrop-filter: blur(22px) saturate(145%);
    }

    :root[data-ui-theme="turno-noche"] .primary-action:not(.danger):not(.primary-action--cta):not(.success):not(:disabled):not(:focus-visible) {
      background-image: linear-gradient(to bottom right, var(--brand), var(--accent));
      border-color: var(--accent);
      box-shadow: 0 0 24px -14px var(--accent), var(--shadow-xs);
    }

    :root[data-ui-theme="turno-noche"] .primary-action:not(.danger):not(.primary-action--cta):not(.success):hover:not(:disabled):not(:focus-visible) {
      box-shadow: 0 0 30px -12px var(--accent), var(--shadow-sm);
    }

    :root[data-ui-theme="turno-noche"] :is(.modal-panel, .popover-panel, .notif-panel) {
      background-image: linear-gradient(to bottom right, var(--theme-sheen), transparent 36%);
      border-color: var(--line-2);
      box-shadow: var(--shadow-lg);
    }

    :root[data-ui-theme="turno-noche"] :is(.overview-kpi, .book-summary > article, .sales-summary > article, .report-kpi-strip > article) {
      background-image: linear-gradient(to bottom, var(--theme-sheen), transparent 48%);
      border-color: var(--line);
      box-shadow: inset 0 1px 0 var(--theme-sheen), var(--shadow-xs);
    }

    :root[data-ui-theme="turno-noche"] :is(.overview-kpi, .book-summary > article, .sales-summary > article, .report-kpi-strip > article)::after {
      box-shadow: 0 0 14px var(--kpi-accent);
    }

    :root[data-ui-theme="turno-noche"] .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) 12%, var(--nav));
    }

    :root[data-ui-theme="turno-noche"] .loader-progress {
      border-color: var(--theme-rail-line-2);
    }

    :root[data-ui-theme="turno-noche"] .app-loader.loading .loader-progress span::after {
      background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--theme-rail-ink) 48%, transparent),
        transparent
      );
    }

    :root[data-ui-theme="turno-noche"] .daily-chat-dock-toggle {
      background: var(--surface-2);
      color: var(--ink);
    }

    :root[data-ui-theme="turno-noche"] .daily-chat-dock-toggle small {
      color: var(--muted);
    }

    :root[data-ui-theme="turno-noche"] .daily-chat-dock.has-unread .daily-chat-dock-toggle {
      background: color-mix(in srgb, var(--red) 18%, var(--surface-2));
    }

    :root[data-ui-theme="turno-noche"] .daily-chat-dock.is-drop-target .daily-chat-dock-toggle {
      background: color-mix(in srgb, var(--green) 24%, var(--surface-2));
      box-shadow: inset 0 0 0 3px var(--theme-fixed-dark-ink);
    }

    :root[data-ui-theme="turno-noche"] .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="turno-noche"] .daily-chat-dock-avatar {
      background: color-mix(in srgb, var(--accent) 12%, var(--surface-3));
    }

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

  @layer vistas {
    :root[data-ui-theme="turno-noche"] .mente-stage {
      border-color: var(--line-2);
      box-shadow: var(--shadow-md);
    }

    :root[data-ui-theme="turno-noche"] .mente-av {
      color: var(--theme-rail-ink);
    }

    :root[data-ui-theme="turno-noche"] .mente-ctrl input[type="date"] {
      color-scheme: dark;
    }
  }
}