/*
 * Apariencia clara/oscura del CRM.
 *
 * Los colores de marca no viven aquí: provienen de la identidad visual
 * guardada para cada empresa. Este archivo solo define superficies, texto y
 * controles para que cualquier paleta funcione bien en claro y oscuro.
 */

:root {
  color-scheme: light;
  --theme-input-bg: #ffffff;
  --theme-subtle-bg: #f8fafb;
  --theme-soft-bg: #f4f7f9;
  --theme-quiet-bg: #fbfcfd;
  --theme-strong-line: #ccd7df;
}

body {
  background-color: var(--canvas);
  background-image: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #d5dadd;
  --muted: #929ca5;
  --line: color-mix(in srgb, var(--lime-500) 24%, #293239);
  --surface: #1a2024;
  --canvas: #12171b;
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  --theme-input-bg: #1d2429;
  --theme-subtle-bg: #20272c;
  --theme-soft-bg: #252d33;
  --theme-quiet-bg: #1b2227;
  --theme-strong-line: color-mix(in srgb, var(--lime-500) 38%, #313b42);
  --blue-100: color-mix(in srgb, var(--lime-500) 10%, #252d33);
  --cyan-100: #17282c;
  --orange-100: #352316;
  --lime-100: #283117;
  --purple-100: #2d2036;
  --red-100: #351c22;
  --amber-100: #382d16;
  --green-100: #173126;
}

html[data-theme="dark"] .topbar {
  border-bottom-color: var(--line);
  background: rgba(26, 32, 36, 0.94);
}

html[data-theme="dark"] .eyebrow {
  color: var(--lime-500);
}

html[data-theme="dark"] .company-context select,
html[data-theme="dark"] .button.ghost,
html[data-theme="dark"] .button.danger-ghost,
html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .filter-select,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .pipeline-context,
html[data-theme="dark"] .urgency-legend,
html[data-theme="dark"] .column-collapse,
html[data-theme="dark"] .opportunity-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .data-card,
html[data-theme="dark"] .client-card,
html[data-theme="dark"] .clients-actions,
html[data-theme="dark"] .service-company-card,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .opportunity-modal,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .form-grid input,
html[data-theme="dark"] .form-grid select,
html[data-theme="dark"] .form-grid textarea,
html[data-theme="dark"] .login-card input,
html[data-theme="dark"] .theme-form input,
html[data-theme="dark"] .theme-form select,
html[data-theme="dark"] .logo-upload input,
html[data-theme="dark"] .logo-upload select,
html[data-theme="dark"] .user-create-form input,
html[data-theme="dark"] .membership-row,
html[data-theme="dark"] .membership-row select,
html[data-theme="dark"] .catalog-toolbar select,
html[data-theme="dark"] .catalog-toolbar input,
html[data-theme="dark"] .pipeline-catalog-row,
html[data-theme="dark"] .pipeline-catalog-row input,
html[data-theme="dark"] .pipeline-add-form input,
html[data-theme="dark"] .service-add-form input,
html[data-theme="dark"] .service-library-search input,
html[data-theme="dark"] .service-library-filters select,
html[data-theme="dark"] .taxonomy-manager-grid section,
html[data-theme="dark"] .taxonomy-add-form input,
html[data-theme="dark"] .service-taxonomy-editor form,
html[data-theme="dark"] .service-taxonomy-editor select,
html[data-theme="dark"] .tag-check span,
html[data-theme="dark"] .form-steps span,
html[data-theme="dark"] .client-optional-details,
html[data-theme="dark"] .client-search-results,
html[data-theme="dark"] .client-result,
html[data-theme="dark"] .service-search-results,
html[data-theme="dark"] .service-result,
html[data-theme="dark"] .recovery-codes code {
  border-color: var(--line);
  color: var(--ink);
  background: var(--theme-input-bg);
}

html[data-theme="dark"] .opportunity-card.urgency-overdue,
html[data-theme="dark"] .urgency-swatch.urgency-overdue {
  border-color: #7f3942;
  background-color: #3b2328;
}

html[data-theme="dark"] .opportunity-card.urgency-today,
html[data-theme="dark"] .urgency-swatch.urgency-today {
  border-color: #77632c;
  background-color: #3a321d;
}

html[data-theme="dark"] .opportunity-card.urgency-scheduled,
html[data-theme="dark"] .urgency-swatch.urgency-scheduled {
  border-color: #34684f;
  background-color: #20392d;
}

html[data-theme="dark"] .opportunity-card.urgency-none,
html[data-theme="dark"] .urgency-swatch.urgency-none {
  background-color: var(--theme-input-bg);
}

html[data-theme="dark"] .column-volume-bar {
  background: var(--theme-quiet-bg);
  box-shadow: inset 0 0 0 1px var(--line);
}

html[data-theme="dark"] .column-volume-segment.urgency-none {
  background: var(--theme-input-bg);
  box-shadow: inset 0 0 0 1px var(--theme-strong-line);
}

html[data-theme="dark"] .column-collapse:hover,
html[data-theme="dark"] .column-collapse.is-active {
  border-color: var(--stage-color);
  color: var(--stage-color);
  background: color-mix(in srgb, var(--stage-color) 16%, var(--theme-input-bg));
}

html[data-theme="dark"] .pipeline-config-column,
html[data-theme="dark"] .user-create-form,
html[data-theme="dark"] .permissions-form,
html[data-theme="dark"] .audit-row,
html[data-theme="dark"] .access-policy-options > label,
html[data-theme="dark"] .file-drop,
html[data-theme="dark"] .client-picker,
html[data-theme="dark"] .client-data-panel,
html[data-theme="dark"] .client-contact-editor,
html[data-theme="dark"] .service-add-form,
html[data-theme="dark"] .taxonomy-manager,
html[data-theme="dark"] .service-readonly-note,
html[data-theme="dark"] .form-steps,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .qr-panel,
html[data-theme="dark"] .pipeline-order-button,
html[data-theme="dark"] .client-result.create-client-result {
  color: var(--ink);
  background: var(--theme-subtle-bg);
}

html[data-theme="dark"] .user-create-form select,
html[data-theme="dark"] .user-edit-grid input,
html[data-theme="dark"] .user-edit-grid select,
html[data-theme="dark"] .membership-row {
  border-color: var(--line);
  color: var(--ink);
  background: var(--theme-input-bg);
}

html[data-theme="dark"] .sidebar-note,
html[data-theme="dark"] .session-user {
  border-color: color-mix(in srgb, var(--lime-500) 36%, transparent);
}

html[data-theme="dark"] .nav-item:hover {
  background: color-mix(in srgb, var(--lime-500) 10%, transparent);
}

html[data-theme="dark"] .nav-item.active {
  background: color-mix(in srgb, var(--lime-500) 16%, transparent);
}

html[data-theme="dark"] .column-empty,
html[data-theme="dark"] .opportunity-card,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .attention-row,
html[data-theme="dark"] .ranking-row,
html[data-theme="dark"] .data-table td,
html[data-theme="dark"] .client-stats,
html[data-theme="dark"] .service-library-row,
html[data-theme="dark"] .service-group-section + .service-group-section,
html[data-theme="dark"] .form-section,
html[data-theme="dark"] .client-result,
html[data-theme="dark"] .service-result,
html[data-theme="dark"] .user-row,
html[data-theme="dark"] .catalog-row {
  border-color: var(--line);
}

html[data-theme="dark"] :where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--lime-500);
}

html[data-theme="dark"] :where(input, select, textarea):focus {
  border-color: var(--lime-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime-500) 18%, transparent);
}

html[data-theme="dark"] .kanban-column,
html[data-theme="dark"] .column-header,
html[data-theme="dark"] .kanban-column.unmatched,
html[data-theme="dark"] .history-folder,
html[data-theme="dark"] .history-subfolder,
html[data-theme="dark"] .service-group-heading,
html[data-theme="dark"] .catalog-list,
html[data-theme="dark"] .service-library-list,
html[data-theme="dark"] .form-grid input[readonly],
html[data-theme="dark"] .form-grid :is(input, select, textarea):disabled,
html[data-theme="dark"] .client-editor-modal select:disabled,
html[data-theme="dark"] .client-editor-modal input:read-only {
  color: var(--muted);
  background: var(--theme-soft-bg);
}

html[data-theme="dark"] .history-folder > summary > b,
html[data-theme="dark"] .history-folder-icon,
html[data-theme="dark"] .activity-icon {
  color: var(--stage-color);
  background-color: color-mix(in srgb, var(--stage-color) 12%, var(--theme-input-bg));
}

html[data-theme="dark"] .history-folder > summary:hover {
  background: color-mix(in srgb, var(--stage-color) 10%, var(--theme-soft-bg));
}

html[data-theme="dark"] .services-intro {
  color: var(--ink);
  background: var(--theme-subtle-bg);
}

html[data-theme="dark"] .pipeline-sync-control {
  border-color: var(--theme-strong-line);
  color: var(--ink);
  background: color-mix(in srgb, var(--lime-500) 7%, var(--theme-subtle-bg));
}

html[data-theme="dark"] .client-selected-card {
  border-color: #2b6750;
  background: #132a22;
}

html[data-theme="dark"] .client-result:hover,
html[data-theme="dark"] .client-result.active,
html[data-theme="dark"] .service-result:hover,
html[data-theme="dark"] .service-result.active,
html[data-theme="dark"] .service-taxonomy-editor[open] > summary,
html[data-theme="dark"] .pipeline-order-button:hover:not(:disabled) {
  background: var(--blue-100);
}

html[data-theme="dark"] .data-table tbody tr:hover {
  background: #1b252b;
}

html[data-theme="dark"] .archive-view-switch {
  border-color: var(--theme-strong-line);
  background: var(--theme-panel);
}

html[data-theme="dark"] .archive-view-button:hover {
  color: var(--ink);
  background: var(--blue-100);
}

html[data-theme="dark"] .archive-view-button.active {
  color: var(--on-primary);
  background: var(--navy-900);
}

html[data-theme="dark"] .bulk-action-bar {
  border-color: var(--theme-strong-line);
  background: color-mix(in srgb, var(--lime-500) 7%, var(--theme-subtle-bg));
}

html[data-theme="dark"] .bulk-action-bar strong {
  color: var(--ink);
}

html[data-theme="dark"] .data-table tbody tr.selected {
  background: color-mix(in srgb, var(--lime-500) 11%, var(--theme-panel));
}

html[data-theme="dark"] .progress,
html[data-theme="dark"] .bar-track {
  background: #2a3339;
}

html[data-theme="dark"] .logo-canvas {
  background: repeating-conic-gradient(#252b30 0 25%, #15191d 0 50%) 50% / 16px 16px;
}

html[data-theme="dark"] .theme-form > label,
html[data-theme="dark"] .logo-upload > label,
html[data-theme="dark"] .user-create-form > label,
html[data-theme="dark"] .catalog-toolbar > label,
html[data-theme="dark"] .catalog-toolbar form label,
html[data-theme="dark"] .form-grid label,
html[data-theme="dark"] .login-card label,
html[data-theme="dark"] .service-add-form > label,
html[data-theme="dark"] .service-library-search > span,
html[data-theme="dark"] .service-library-filters > label,
html[data-theme="dark"] .service-taxonomy-editor form > label,
html[data-theme="dark"] .service-taxonomy-editor legend,
html[data-theme="dark"] .service-picker > label {
  color: #a7b0b8;
}

html[data-theme="dark"] .workspace :is(h1, h2, h3, h4),
html[data-theme="dark"] .opportunity-modal :is(h1, h2, h3, h4),
html[data-theme="dark"] .login-card :is(h1, h2, h3, h4),
html[data-theme="dark"] .metric-value,
html[data-theme="dark"] .card-client,
html[data-theme="dark"] .section-heading strong,
html[data-theme="dark"] .clients-actions strong,
html[data-theme="dark"] .color-grid code,
html[data-theme="dark"] .audit-row strong {
  color: var(--ink);
}

html[data-theme="dark"] .button.ghost,
html[data-theme="dark"] .company-context select,
html[data-theme="dark"] .pipeline-order-button {
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .button.danger-ghost {
  border-color: #71333d;
  color: #ff9ca7;
}

html[data-theme="dark"] .toast {
  border-color: #2b6750;
  color: #a7e5c7;
  background: #132a22;
}

html[data-theme="dark"] .toast.error {
  border-color: #71333d;
  color: #ffadb6;
  background: #321b20;
}

html[data-theme="dark"] .pipeline-axis-badge,
html[data-theme="dark"] .company-pill,
html[data-theme="dark"] .rank,
html[data-theme="dark"] .service-library-index,
html[data-theme="dark"] .taxonomy-manager > summary,
html[data-theme="dark"] .service-taxonomy-editor > summary,
html[data-theme="dark"] .form-steps button:hover,
html[data-theme="dark"] .form-steps span,
html[data-theme="dark"] .section-heading > span,
html[data-theme="dark"] .client-result .client-result-company,
html[data-theme="dark"] .service-result > span,
html[data-theme="dark"] .service-result-message strong,
html[data-theme="dark"] .client-selected-card strong,
html[data-theme="dark"] .client-optional-details summary,
html[data-theme="dark"] .client-picker-heading strong,
html[data-theme="dark"] .client-data-heading strong,
html[data-theme="dark"] .client-contact-editor-head strong,
html[data-theme="dark"] .qr-panel code,
html[data-theme="dark"] .settings-heading > span,
html[data-theme="dark"] .user-permissions summary,
html[data-theme="dark"] .pipeline-semantic-badge {
  color: var(--ink);
}

html[data-theme="dark"] .client-result .client-result-company,
html[data-theme="dark"] .service-result > span,
html[data-theme="dark"] .client-optional-details summary small {
  background: var(--blue-100);
}

html[data-theme="dark"] .taxonomy-admin-chip,
html[data-theme="dark"] .taxonomy-chip {
  border-color: color-mix(in srgb, var(--taxonomy-color) 50%, var(--line));
  color: color-mix(in srgb, var(--taxonomy-color) 55%, var(--ink));
  background: color-mix(in srgb, var(--taxonomy-color) 12%, var(--theme-soft-bg));
}
.theme-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.theme-options-grid > label {
  display: grid;
  align-content: start;
  gap: 6px;
  color: #46576a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.theme-options-grid select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #ccd7df;
  border-radius: 9px;
  color: var(--ink);
  background: var(--surface);
  font-size: 12px;
  text-transform: none;
}

.theme-options-grid .field-help {
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}

html[data-theme="dark"] .theme-options-grid > label {
  color: #a7b0b8;
}

html[data-theme="dark"] .theme-options-grid select {
  border-color: var(--line);
  color: var(--ink);
  background: var(--theme-input-bg);
}

@media (max-width: 780px) {
  .theme-options-grid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}

.appearance-toggle {
  display: inline-flex;
  width: calc(100% - 10px);
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  margin: 0 5px 14px;
  padding: 6px 9px;
  border: 1px solid #d7dadd;
  border-radius: 4px;
  color: var(--navy-950);
  background: #f5f6f7;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: background .18s ease, border-color .18s ease;
}

.appearance-toggle:hover {
  border-color: #b8bec4;
  background: #ffffff;
}

.appearance-toggle:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 3px;
}

.appearance-toggle-icon {
  display: inline;
  width: auto;
  height: auto;
  color: var(--navy-900);
  background: transparent;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.appearance-toggle-copy {
  display: inline-flex;
  min-width: 0;
  align-items: baseline;
  gap: 2px;
}

.appearance-toggle-label {
  overflow: hidden;
  color: var(--navy-950);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appearance-toggle-hint {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
  white-space: nowrap;
}

.appearance-toggle-arrow {
  display: none;
}

@media (max-width: 780px) {
  .appearance-toggle {
    margin-inline: 0;
  }
}


/* Espacio de trabajo de oportunidad en modo oscuro */
html[data-theme="dark"] .workspace-hero,
html[data-theme="dark"] .workspace-card,
html[data-theme="dark"] .workspace-stage-select select,
html[data-theme="dark"] .workspace-form-grid input,
html[data-theme="dark"] .workspace-form-grid select,
html[data-theme="dark"] .workspace-form-grid textarea,
html[data-theme="dark"] .workspace-composer-fields input,
html[data-theme="dark"] .workspace-composer-fields select,
html[data-theme="dark"] .workspace-composer-fields textarea,
html[data-theme="dark"] .workspace-composer-tabs input:checked + span {
  border-color: var(--line);
  color: var(--ink);
  background: var(--theme-input-bg);
}
html[data-theme="dark"] .workspace-probability::before { background: var(--theme-input-bg); }
html[data-theme="dark"] .workspace-stage-path span,
html[data-theme="dark"] .workspace-health-row > div,
html[data-theme="dark"] .workspace-channel-table td > span { background: var(--theme-soft-bg); }
html[data-theme="dark"] .workspace-next-grid > div,
html[data-theme="dark"] .workspace-inline-form,
html[data-theme="dark"] .workspace-composer-tabs,
html[data-theme="dark"] .workspace-contact-company,
html[data-theme="dark"] .workspace-mini-empty,
html[data-theme="dark"] .workspace-log-stats span,
html[data-theme="dark"] .workspace-period,
html[data-theme="dark"] .workspace-event-channel,
html[data-theme="dark"] .workspace-archive-badge { color: var(--ink); background: var(--theme-subtle-bg); }
html[data-theme="dark"] .workspace-composer-footer { border-color: var(--line); background: var(--theme-quiet-bg); }
html[data-theme="dark"] .workspace-event-marker { border-color: var(--theme-input-bg); }
html[data-theme="dark"] .workspace-event-body,
html[data-theme="dark"] .workspace-channel-table td,
html[data-theme="dark"] .workspace-facts dl > div,
html[data-theme="dark"] .workspace-channel-section { border-color: var(--line); }
html[data-theme="dark"] .workspace-event-body p { color: var(--ink); }
html[data-theme="dark"] .workspace-code,
html[data-theme="dark"] .workspace-hero-value > div:last-child strong,
html[data-theme="dark"] .workspace-probability strong,
html[data-theme="dark"] .workspace-log-stats b,
html[data-theme="dark"] .workspace-health-row b,
html[data-theme="dark"] .workspace-contact-company strong { color: var(--ink); }
html[data-theme="dark"] .workspace-activity-chart { border-color: var(--line); background-image: repeating-linear-gradient(to top, transparent 0 41px, var(--theme-soft-bg) 42px); }
html[data-theme="dark"] .workspace-days-open { background: color-mix(in srgb, var(--workspace-stage) 10%, var(--theme-subtle-bg)); }
html[data-theme="dark"] .workspace-original-note { background: var(--amber-100); }

/* Controles generales: evita que componentes nuevos conserven texto oscuro. */
html[data-theme="dark"] :where(.workspace, .opportunity-modal, .login-card) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea) {
  border-color: var(--line);
  color: var(--ink);
  background-color: var(--theme-input-bg);
}

html[data-theme="dark"] :where(.workspace, .opportunity-modal, .login-card) :where(input, textarea)::placeholder {
  color: var(--muted);
  opacity: 1;
}

html[data-theme="dark"] .workspace :where(label, legend) {
  color: #a7b0b8;
}

html[data-theme="dark"] .workspace summary {
  color: var(--ink);
}

html[data-theme="dark"] .workspace :where(
  .accessibility-preference-row strong,
  .role-help strong,
  .commercial-company-access > strong,
  .commercial-groups-table-head strong,
  .commercial-member-option-copy strong,
  .access-policy-options strong,
  .bulk-action-bar strong,
  .load-error-card h2
) {
  color: var(--ink);
}

html[data-theme="dark"] .commercial-groups-table,
html[data-theme="dark"] .commercial-group-form,
html[data-theme="dark"] .policy-person {
  border-color: var(--line);
  background: var(--theme-subtle-bg);
}

html[data-theme="dark"] .commercial-group-name-cell input {
  border-color: transparent;
  color: var(--ink);
  background: transparent;
}

html[data-theme="dark"] .commercial-group-name-cell input:hover,
html[data-theme="dark"] .commercial-group-name-cell input:focus {
  border-color: var(--line);
  color: var(--ink);
  background: var(--theme-input-bg);
}

html[data-theme="dark"] .commercial-groups-table-head,
html[data-theme="dark"] .commercial-groups-intro span,
html[data-theme="dark"] .commercial-member-option-state.is-assigned {
  border-color: var(--line);
  color: var(--muted);
  background: var(--theme-soft-bg);
}

html[data-theme="dark"] .commercial-groups-heading-actions > span {
  color: #a9d7f2;
  background: color-mix(in srgb, var(--blue-500) 16%, var(--theme-soft-bg));
}

html[data-theme="dark"] .commercial-group-row:hover {
  background: color-mix(in srgb, var(--blue-500) 6%, var(--theme-subtle-bg));
}

html[data-theme="dark"] .commercial-member-chip {
  border-color: var(--line);
  color: var(--ink);
  background: var(--theme-input-bg);
}

html[data-theme="dark"] .commercial-member-add,
html[data-theme="dark"] .commercial-member-picker,
html[data-theme="dark"] .commercial-member-combobox {
  border-color: var(--line);
  color: var(--ink);
  background: var(--theme-input-bg);
}

html[data-theme="dark"] .commercial-member-option:hover:not(:disabled),
html[data-theme="dark"] .commercial-member-option:focus-visible {
  color: var(--ink);
  background: var(--theme-soft-bg);
}

html[data-theme="dark"] .appearance-toggle {
  border-color: var(--line);
  color: var(--ink);
  background: var(--theme-subtle-bg);
}

html[data-theme="dark"] .appearance-toggle:hover {
  border-color: var(--theme-strong-line);
  background: var(--theme-soft-bg);
}

html[data-theme="dark"] :where(.appearance-toggle-icon, .appearance-toggle-label) {
  color: var(--ink);
}

html[data-theme="dark"] .appearance-toggle-hint {
  color: var(--muted);
}

html[data-theme="dark"] .required-marker,
html[data-theme="dark"] .status-chip.off,
html[data-theme="dark"] .attention-pill.overdue {
  color: #ff9ca7;
}

html[data-theme="dark"] .status-chip.ok {
  color: #8ae0b8;
}

html[data-theme="dark"] .status-chip.pending,
html[data-theme="dark"] .attention-pill.today,
html[data-theme="dark"] .attention-pill.missing {
  color: #f3cf78;
}

html[data-theme="dark"] .pipeline-config-column > header > span {
  color: var(--ink);
}

html[data-theme="dark"] .owner-filter-label {
  color: #b9c4ca;
}

html[data-theme="dark"] .due-badge {
  color: #ff9ca7 !important;
}

html[data-theme="dark"] .stage-code,
html[data-theme="dark"] .stage-badge,
html[data-theme="dark"] .column-count {
  color: color-mix(in srgb, var(--stage-color) 42%, #ffffff);
  background: color-mix(in srgb, var(--stage-color) 14%, var(--theme-soft-bg));
}

html[data-theme="dark"] .activity-icon {
  color: color-mix(in srgb, var(--stage-color) 42%, #ffffff);
}

html[data-theme="dark"] .costing-empty > div span,
html[data-theme="dark"] .cost-values-list-panel > .panel-header > strong {
  color: var(--ink);
}

html[data-theme="dark"] .avatar-crop-card {
  border-color: var(--line);
  background: var(--theme-input-bg);
}
html[data-theme="dark"] .avatar-crop-header,
html[data-theme="dark"] .avatar-crop-actions { border-color: var(--line); }
html[data-theme="dark"] .avatar-crop-header h2,
html[data-theme="dark"] .avatar-crop-result strong,
html[data-theme="dark"] .avatar-crop-guidance strong { color: var(--ink); }
html[data-theme="dark"] .avatar-crop-result,
html[data-theme="dark"] .avatar-crop-guidance,
html[data-theme="dark"] .avatar-crop-actions,
html[data-theme="dark"] .new-user-avatar-picker {
  border-color: var(--line);
  background: var(--theme-subtle-bg);
}

/* Confirmaciones integradas en modo oscuro. */
html[data-theme="dark"] .confirmation-dialog-card {
  border-color: var(--line);
  color: var(--ink);
  background: var(--theme-input-bg);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .48);
}
html[data-theme="dark"] .confirmation-dialog-copy h2 { color: var(--ink); }
html[data-theme="dark"] .confirmation-dialog-copy > p:last-child { color: var(--muted); }
html[data-theme="dark"] .confirmation-dialog-icon {
  color: #a9d7f2;
  background: color-mix(in srgb, var(--blue-500) 18%, var(--theme-soft-bg));
}
html[data-theme="dark"] .confirmation-dialog.is-danger .confirmation-dialog-icon {
  color: #ff9ca7;
  background: color-mix(in srgb, var(--red-500) 15%, var(--theme-soft-bg));
}
html[data-theme="dark"] .pipeline-loss-dialog-card {
  border-color: var(--line);
  color: var(--ink);
  background: var(--theme-input-bg);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .48);
}
html[data-theme="dark"] .pipeline-loss-dialog-header h2 { color: var(--ink); }
html[data-theme="dark"] .pipeline-loss-dialog-actions,
html[data-theme="dark"] .pipeline-loss-dialog-fields input[readonly] { background: var(--theme-subtle-bg); }
html[data-theme="dark"] .email-preview-card { border-color: var(--line); background: var(--surface); box-shadow: 0 28px 80px rgba(0, 0, 0, .52); }
html[data-theme="dark"] .email-preview-header h2,
html[data-theme="dark"] .email-preview-attachments h3 { color: var(--ink); }
html[data-theme="dark"] .email-preview-body { border-color: var(--line); color: var(--ink); background: var(--theme-input-bg); }

/* Oportunidades recuperadas: prioridad, multiservicios, editor y copiado. */
html[data-theme="dark"] .workspace-service-editor > label { color: #a7b0b8; }
html[data-theme="dark"] .workspace-event-marker.service { color: #8fe1d2; background: #183f3a; }
html[data-theme="dark"] .workspace-event-marker.priority { color: #f5d475; background: color-mix(in srgb, #d6a600 16%, var(--theme-soft-bg)); }
html[data-theme="dark"] .workspace-event-marker.owner { color: #a9d7f2; }
html[data-theme="dark"] .workspace-details-editor fieldset,
html[data-theme="dark"] .workspace-editor-grid input,
html[data-theme="dark"] .workspace-editor-grid select,
html[data-theme="dark"] .workspace-editor-comments textarea { border-color: var(--line); color: var(--ink); background: var(--theme-input-bg); }
html[data-theme="dark"] .workspace-editor-context,
html[data-theme="dark"] .workspace-editor-grid input[readonly] { background: var(--theme-subtle-bg); }
html[data-theme="dark"] .workspace-loss-editor { border-color: color-mix(in srgb, var(--red-500) 38%, var(--line)); background: color-mix(in srgb, var(--red-500) 8%, var(--theme-subtle-bg)); }
html[data-theme="dark"] .priority-stars { color: #64717c; }
html[data-theme="dark"] .priority-stars .is-active,
html[data-theme="dark"] .priority-picker-stars button.is-active { color: #f5d475; }
html[data-theme="dark"] .priority-picker-stars button:hover,
html[data-theme="dark"] .priority-picker-stars button:focus-visible,
html[data-theme="dark"] .priority-clear { background: var(--theme-subtle-bg); }
html[data-theme="dark"] .client-copy-popover { border-color: var(--line); background: var(--theme-input-bg); box-shadow: 0 18px 42px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .client-copy-menu[open] > summary,
html[data-theme="dark"] .client-copy-option:hover:not(:disabled) { border-color: var(--theme-strong-line); color: var(--ink); background: var(--theme-soft-bg); }
html[data-theme="dark"] .client-copy-option { color: var(--ink); }
html[data-theme="dark"] .client-copy-option-icon { color: #a9d7f2; background: color-mix(in srgb, var(--blue-500) 16%, var(--theme-soft-bg)); }
html[data-theme="dark"] .client-copy-option-icon.email { color: #8ae0b8; background: color-mix(in srgb, var(--green-600) 16%, var(--theme-soft-bg)); }

/* Calendario comercial en modo oscuro. */
html[data-theme="dark"] .pipeline-view-tabs,
html[data-theme="dark"] .calendar-toolbar,
html[data-theme="dark"] .calendar-grid-card,
html[data-theme="dark"] .calendar-agenda,
html[data-theme="dark"] .calendar-type-filter,
html[data-theme="dark"] .calendar-type-legend { border-color: var(--line); color: var(--ink); background: var(--theme-input-bg); }
html[data-theme="dark"] .pipeline-view-tab:hover { color: var(--ink); background: var(--blue-100); }
html[data-theme="dark"] .pipeline-view-tab[aria-selected="true"] { color: var(--on-primary); background: var(--primary); }
html[data-theme="dark"] .calendar-navigation button,
html[data-theme="dark"] .calendar-month-summary > span,
html[data-theme="dark"] .calendar-filter-heading > span,
html[data-theme="dark"] .calendar-agenda > header,
html[data-theme="dark"] .calendar-weekdays,
html[data-theme="dark"] .calendar-more,
html[data-theme="dark"] .calendar-type-legend,
html[data-theme="dark"] .calendar-agenda-empty > span { border-color: var(--line); color: var(--ink); background: var(--theme-subtle-bg); }
html[data-theme="dark"] :is(.calendar-month-heading h2, .calendar-month-summary strong, .calendar-filter-heading strong, .calendar-agenda header h3, .calendar-type-filter strong, .calendar-event-copy strong, .calendar-type-legend strong, .calendar-agenda-empty strong) { color: var(--ink); }
html[data-theme="dark"] :is(.calendar-month-heading p, .calendar-agenda header p) { color: var(--lime-500); }
html[data-theme="dark"] .calendar-month-grid { background: var(--line); }
html[data-theme="dark"] .calendar-day { background: var(--theme-input-bg); }
html[data-theme="dark"] .calendar-day.is-outside { background: var(--theme-quiet-bg); }
html[data-theme="dark"] .calendar-event-mark { background: color-mix(in srgb, var(--calendar-bg) 78%, var(--theme-input-bg)); }
html[data-theme="dark"] .calendar-type-activity { --calendar-color: #8bd5ff; --calendar-bg: #183546; --calendar-border: #2d6985; }
html[data-theme="dark"] .calendar-type-expected-close { --calendar-color: #d3b3ff; --calendar-bg: #30243f; --calendar-border: #624682; }
html[data-theme="dark"] .calendar-type-actual-close { --calendar-color: #85e0b4; --calendar-bg: #1b382d; --calendar-border: #33785a; }
html[data-theme="dark"] .calendar-type-last-contact { --calendar-color: #ffc078; --calendar-bg: #3d2b1c; --calendar-border: #80512a; }
html[data-theme="dark"] .calendar-type-created { --calendar-color: #cbd5e1; --calendar-bg: #2a3138; --calendar-border: #596675; }