/*
 * 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: #f3f4f6;
  --muted: #aeb8c4;
  --line: #303941;
  --surface: #151a1e;
  --canvas: #0f1215;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
  --theme-input-bg: #151a1e;
  --theme-subtle-bg: #1a2025;
  --theme-soft-bg: #20272d;
  --theme-quiet-bg: #171c21;
  --theme-strong-line: #3c4750;
  --blue-100: #242b30;
  --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(21, 26, 30, 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"] .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"] .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 {
  color: var(--ink);
  background: 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"] .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"] .kanban-column,
html[data-theme="dark"] .kanban-column.unmatched,
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"] .services-intro {
  color: var(--ink);
  background: var(--theme-subtle-bg);
}

html[data-theme="dark"] .pipeline-sync-control {
  border-color: #3c5968;
  color: var(--ink);
  background: #17282f;
}

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"] .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: #b9c5d0;
}

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);
}
.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: #b9c5d0;
}

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;
  }
}