/* Tema claro */
:root {
  color-scheme: light;

  /* Superficies. --color-surface-alt (cabeceras de grid, paneles fijos de
     ficha...) — un paso mas claro que el primer intento (aquel quedaba
     demasiado oscuro dentro del workspace). */
  --color-bg: #e7edf8;
  --color-surface: #ffffff;
  --color-surface-alt: #edf0f4;
  --color-surface-hover: #e6eaf0;
  --color-surface-selected: #d9ecff;
  --color-surface-warm: #fde8c6;

  /* Vida del tema claro (primer pase): sombra bajo las barras de listados y fichas (ver --shadow-toolbar) y cabecera de las
     tablas con un tinte del azul de marca. En oscuro no se definen: caen al borde sutil y a --color-surface-alt. */
  --color-grid-header-bg: color-mix(in srgb, #dceaff 70%, var(--color-surface));
  --color-grid-header-text: #25447a;
  /* En claro la cabecera lleva siempre el tinte (en oscuro es más discreta en reposo). */
  --color-grid-header-bg-rest: var(--color-grid-header-bg);
  --color-grid-header-text-rest: var(--color-grid-header-text);

  /* Fila seleccionada de las tablas: acento azul de marca a la izquierda. */
  --color-selected-accent: var(--color-primary);

  /* Insignias de estado con más presencia que el pastel por defecto (fondo algo más fuerte y texto más oscuro). */
  --color-badge-neutral-bg: var(--color-surface-alt);
  --color-badge-success-bg: #c8efd6;
  --color-badge-success-text: #0f6b30;
  --color-badge-info-bg: #cde1ff;
  --color-badge-info-text: #0a4bb3;
  --color-badge-warning-bg: #fbdfa8;
  --color-badge-warning-text: #9a5200;

  /* Tinte de fondo de fila (erp-editable-data-grid, .row-tint-a/b — ver
     "Artículos compuestos y kits" en AGENTS.md): mas claro que
     --color-surface-warm/--color-surface-alt tal cual, pedido
     explicitamente solo para el tema claro — sobre el blanco de
     --color-surface, esos dos tonos ya se notaban de sobra sin rebajarlos. */
  --color-row-tint-a: color-mix(in srgb, var(--color-surface-warm) 55%, var(--color-surface));
  --color-row-tint-b: color-mix(in srgb, var(--color-surface-alt) 55%, var(--color-surface));

  /* Buscador global de la cabecera (erp-top-bar): pedido explicitamente
     igualarlo al aspecto del buscador del menu lateral (--color-shell-
     search-bg) — poco contraste se detecto en iPad con el tono anterior
     (--color-border, muy cercano al blanco). Mismo tono de fondo Y borde
     (--color-search-border abajo) para que no se vea como un recuadro con
     borde propio, sino como una pastilla solida rellena, igual que el
     buscador del menu; con foco, blanco puro + texto casi negro (mismo
     --color-heading que ya usa el resto de la UI para el texto mas
     fuerte) — maximo contraste al escribir. */
  /* Un gris más claro que el del buscador del menú lateral (pedido): ya no van igualados. */
  --color-search-bg: #d5dce8;
  --color-search-bg-focus: var(--color-surface);
  --color-search-border: #d5dce8;
  --color-search-text-focus: var(--color-heading);
  /* Texto/placeholder sin foco: gris (no --color-text, casi negro), igual
     que el buscador del menu lateral. */
  --color-search-text: var(--color-text-secondary);

  /* Bordes */
  --color-border: #d6dee8;
  --color-border-subtle: #e6ebf2;

  /* Texto — mas oscuros que antes para mantener el contraste sobre los
     grises mas fuertes de arriba. */
  --color-text: #16202f;
  --color-text-active-tab: #000000;
  --color-text-secondary: #384658;
  --color-text-muted: #626d80;
  --color-text-on-primary: #ffffff;
  --color-heading: #16202f;

  /* Color de las etiquetas de campo cuando NO tienen el foco (ver
     field-styles.js). En claro, --color-text-secondary quedaba demasiado
     oscura y con el foco (--color-heading, igual de oscuro) apenas se
     notaba el resaltado — de ahi este tono, mas gris/mas claro, solo para
     este uso. En oscuro se deja igual que --color-text-secondary, que ya
     contrasta bien contra el blanco del foco. */
  --color-field-label: var(--color-text-muted);

  /* Marca — alineada con los colores exactos del logo (azul del rectangulo,
     verde del icono), en vez del azul ligeramente distinto que habia antes. */
  --color-primary: #0c6df5;
  --color-primary-hover: #0956c7;
  --color-primary-soft: #dceaff;
  --color-focus-ring: rgb(12 109 245 / 22%);
  --color-accent: #23923c;
  /* Verde de marca para las acciones que cierran un proceso (Emitir factura, Facturar...): azul = acción, verde = finalizar. */
  --color-finish: #23923c;
  --color-finish-hover: #1b7a31;

  /* Tercer color de marca, deliberadamente distinto del azul/verde del logo
     — para romper la monotonia de solo esos dos tonos. Un naranja intenso,
     distinguible a proposito del ambar mas apagado de --color-warning. Por
     ahora solo se usa en el item activo del menu principal. */
  --color-highlight: #f97316;
  --color-highlight-hover: #ea580c;
  --color-highlight-bg: #ffedd5;
  --color-highlight-text: #9a3412;

  /* Estados */
  --color-success: #16a34a;
  --color-success-bg: #dcf6e6;
  --color-danger: #dc2626;
  --color-danger-bg: #fce4e2;
  --color-warning: #d97706;
  --color-warning-bg: #fdedd3;

  /* Estructura (barra lateral): grises claros/medio-claros en vez de la
     mezcla de azules de antes — el azul de marca queda reservado para
     --color-primary, no diluido aqui en varios tonos propios. El item
     activo usa el tercer color (naranja) en vez de azul, para que se
     distinga claramente de "hover"/"en el camino hacia el activo". */
  --color-shell-bg: #e2e8f1;
  /* Cabecera superior: sin cambios pedidos en claro, se deja igual que
     antes (ver comentario en dark.css). */
  --color-topbar-bg: var(--color-surface);
  /* Sin cambios pedidos en claro (ver comentario en dark.css). */
  --color-workspace-bg: var(--color-surface);
  /* Degradado sutil del menu principal (pedido explicitamente): un poco
     mas oscuro que --color-shell-bg arriba-izquierda, un poco mas claro
     abajo-derecha, en diagonal. */
  --color-shell-gradient: linear-gradient(135deg, #d2dae8 0%, #eef3f8 100%);
  --color-shell-border: #c8d1df;
  --color-shell-text: #1f2937;
  --color-shell-text-muted: #454e5c;
  /* Mas oscuro que antes (#d8dce3, pedido explicitamente) — con el
     degradado del menu (--color-shell-gradient) casi no contrastaba,
     sobre todo en la zona de arriba (mas oscura de por si en el degradado). */
  --color-shell-hover-bg: rgba(0, 0, 0, 0.12);
  /* Fondo del buscador del menu: mas fuerte que --color-shell-hover-bg —
     con el degradado del menu (--color-shell-gradient) casi no hacia
     contraste. */
  --color-shell-search-bg: #c4cedd;
  --color-shell-active-bg: var(--color-highlight-bg);
  --color-shell-active-text: var(--color-highlight-text);
  --color-shell-scrollbar: #b7bec9;

  /* Cabecera: mismo degradado de marca que el tema oscuro (ver dark.css),
     pero mucho mas tenue — sobre fondo blanco el mismo color a la misma
     opacidad se percibe bastante mas fuerte que sobre un fondo oscuro. */
  /* En móvil el degradado se atenúa (top-bar.js); en claro, menos, porque ya es más tenue de base. */
  --color-titlebar-gradient-mobile-opacity: 0.6;
  --color-titlebar-gradient: linear-gradient(
    100deg,
    rgb(255 255 255 / 0%) 0%,
    rgb(12 109 245 / 11%) 18%,
    rgb(12 109 245 / 16%) 34%,
    rgb(35 146 60 / 13%) 58%,
    rgb(35 146 60 / 5%) 82%,
    rgb(255 255 255 / 0%) 100%
  );

  /* Elevacion */
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 8%);
  --shadow-md: 0 14px 32px rgb(15 23 42 / 18%);
  /* Tarjetas de las vistas móviles (mobile-card-styles.js): entre --shadow-sm y --shadow-md. */
  --shadow-card: 0 2px 6px rgb(15 23 42 / 12%);
  --shadow-lg: 0 24px 64px rgb(15 23 42 / 22%);
  /* Sombra suave bajo las barras de listados y fichas (solo en claro). */
  --shadow-toolbar: 0 3px 8px rgb(15 23 42 / 7%);
  --shadow-active-tab: 0 -6px 14px rgb(15 23 42 / 8%);
}