/* Colores de ARU ERP 360
   Solo los colores de la estética Arc. Se carga después de arc/css/arc-pantallas.css, así que lo que
   cambies aquí manda sobre el kit sin tocarlo (al actualizar el kit, este archivo no se pisa).
   Bloque 1: modo claro. Bloque 2: modo oscuro. Mismos nombres en los dos.
   Los valores van en oklch(luminosidad croma tono): 262 azul ARU, 300 lila, 45 melocotón; croma 0 es gris.

   Qué es cada uno:
     --fc-background   fondo de la página           --fc-card        fondo de tarjetas
     --fc-ink          texto principal              --fc-muted       texto secundario
     --fc-primary      botón principal y acciones   --fc-on-primary  texto sobre el botón principal
     --fc-secondary    fondos suaves (botón secundario al pasar, bandejas)
     --fc-selected     elemento seleccionado        --fc-row-hover   fila de tabla al pasar el ratón
     --fc-border       bordes                       --fc-input       borde de campos
     --fc-success / --fc-warning / --fc-error       verde, ámbar y rojo de estados
     --fc-nav / --fc-nav-border                     menú lateral y su borde
     --fc-ambient      las luces de colores del fondo (degradados)
     --arc-gradient*   degradados de avatares, bienvenida y detalles */

html[data-ui] {
  --fc-background:oklch(98.6% 0 0); --fc-ink:oklch(15% 0 0); --fc-muted:oklch(46% 0 0);
  --fc-card:oklch(100% 0 0); --fc-primary:oklch(23% 0 0); --fc-on-primary:oklch(100% 0 0);
  --fc-secondary:oklch(97.3% 0 0); --fc-selected:oklch(95.8% 0 0);
  --fc-row-hover:oklch(98.4% 0 0);
  --fc-border:oklch(93.5% 0 0); --fc-input:oklch(89.5% 0 0);
  --fc-success:oklch(49% .19 150); --fc-warning:oklch(52% .16 70); --fc-error:oklch(54% .21 25);
  --fc-nav:rgb(255 255 255 / .72); --fc-nav-border:oklch(93.5% 0 0 / .9);
  --fc-ambient:radial-gradient(ellipse at 0% 0%,oklch(95% .03 290) 0,transparent 48%),radial-gradient(ellipse at 100% 0%,oklch(96% .025 240) 0,transparent 42%),radial-gradient(ellipse at 100% 100%,oklch(96.5% .03 65) 0,transparent 50%);
  --arc-gradient:linear-gradient(100deg,oklch(90% .045 300),oklch(92% .045 65));
  --arc-gradient-soft:linear-gradient(135deg,oklch(97.5% .016 300),oklch(98% .016 65));
  --arc-gradient-ink:linear-gradient(100deg,oklch(47% .1 300),oklch(50% .09 55));
  --arc-gradient-fg:oklch(22% .01 300);
}

html[data-ui][data-theme="dark"] {
  --fc-background:oklch(16% 0 0); --fc-ink:oklch(96% 0 0); --fc-muted:oklch(73% 0 0);
  --fc-card:oklch(21.5% 0 0); --fc-primary:oklch(93% 0 0); --fc-on-primary:oklch(19% 0 0);
  --fc-secondary:oklch(26% 0 0); --fc-selected:oklch(28% 0 0); --fc-row-hover:oklch(24% 0 0);
  --fc-border:oklch(29% 0 0); --fc-input:oklch(34% 0 0);
  --fc-success:oklch(78% .18 150); --fc-warning:oklch(83% .17 80); --fc-error:oklch(76% .2 25);
  --fc-nav:oklch(21.5% 0 0 / .8); --fc-nav-border:var(--fc-border); --bg-deep:oklch(24% 0 0);
  --fc-ambient:none;
  --arc-gradient:linear-gradient(100deg,oklch(30% 0 0),oklch(37% 0 0));
  --arc-gradient-soft:linear-gradient(135deg,oklch(23% 0 0),oklch(27% 0 0));
  --arc-gradient-ink:linear-gradient(100deg,oklch(82% 0 0),oklch(92% 0 0));
  --arc-gradient-fg:var(--fc-ink);
  --table-stripe:var(--fc-card); --border-highlight:oklch(100% 0 0 / .08);
  --overlay:oklch(0% 0 0 / .65); --accent-border:var(--fc-input);
  --success-bg:oklch(28% .04 155); --warning-bg:oklch(30% .04 75);
  --danger-bg:oklch(28% .06 25); --info-bg:var(--fc-secondary);
  --info:var(--fc-ink); --neutral-bg:var(--fc-secondary);
  color-scheme:dark;
}

/* Los botones principales y el acento, casi negros como en Arc aunque la Identidad tenga color (#002978, azul
   ARU): brand.js pinta ese color en línea sobre <html>, y solo !important le gana. El color de
   Identidad sigue valiendo para los documentos y el resto de detalles de acento. */
html[data-ui] { --fc-primary:oklch(23% 0 0)!important; --fc-on-primary:oklch(100% 0 0)!important; }
html[data-ui][data-theme="dark"] { --fc-primary:oklch(93% 0 0)!important; --fc-on-primary:oklch(19% 0 0)!important; }
/* Lo mismo con el acento (iniciales de las listas, enlaces, raya de las pestañas): en Arc es la
   misma tinta que los botones, no el azul de la Identidad. */
html[data-ui] { --accent:var(--fc-primary)!important; --action:var(--fc-primary)!important; --action-hover:oklch(32% 0 0)!important; }
html[data-ui][data-theme="dark"] { --action-hover:oklch(85% 0 0)!important; }

/* ===== Fondos: los de PSR (lila y melocotón), los del kit tal cual.
   Los azules de ARU quedan aquí desactivados; para usarlos, quita el comentario que los envuelve
   y cambia los (* *) por barras y asteriscos.

(* ===== Fondos azules de ARU =====
   Un solo degradado para todos los fondos: azul más oscuro en la esquina de arriba a la izquierda y
   en la de abajo a la derecha, más suave en las otras dos y el centro casi blanco. Son los azules de la
   imagen de referencia que pasó Vidal.
   --aru-luces son las manchas; --aru-fondo, las manchas sobre su color base. Cambiando estas cuatro
   líneas cambian todos los fondos a la vez. *)
html[data-ui] { --aru-luces:radial-gradient(ellipse 60% 50% at 0% 0%,oklch(60% .13 262) 0,oklch(78% .085 262) 30%,oklch(90% .04 260) 58%,transparent 80%),radial-gradient(ellipse 60% 50% at 100% 100%,oklch(60% .13 262) 0,oklch(78% .085 262) 30%,oklch(90% .04 260) 58%,transparent 80%),radial-gradient(ellipse 70% 75% at 100% 0%,oklch(84% .07 262) 0,oklch(92% .035 260) 45%,transparent 78%),radial-gradient(ellipse 70% 60% at 0% 100%,oklch(85% .065 262) 0,oklch(93% .03 260) 45%,transparent 78%); --aru-fondo:var(--aru-luces),oklch(98.6% .004 260); }
html[data-ui][data-theme="dark"] { --aru-luces:radial-gradient(ellipse 60% 50% at 0% 0%,oklch(45% .16 263 / 0.5) 0,oklch(45% .16 263 / 0.22) 32%,transparent 80%),radial-gradient(ellipse 60% 50% at 100% 100%,oklch(45% .16 263 / 0.5) 0,oklch(45% .16 263 / 0.22) 32%,transparent 80%),radial-gradient(ellipse 70% 75% at 100% 0%,oklch(45% .16 263 / 0.18) 0,transparent 78%),radial-gradient(ellipse 70% 60% at 0% 100%,oklch(45% .16 263 / 0.16) 0,transparent 78%); --aru-fondo:var(--aru-luces),oklch(20% .01 260); }

(* Dónde se usa: acceso, telón de la bienvenida, banda del Inicio, pantallas de grupo y cifras de
   Contabilidad. Las manchas de colores que se movían encima pasan a azules suaves, con el mismo movimiento. *)
html[data-ui] #login-screen { background:var(--aru-fondo)!important; }
html.arc-entrando body::after { background:var(--aru-fondo); }
html[data-ui] :is(#view-dashboard .home-top-grid, #view-grupo-hub .res-cards) { background:var(--aru-fondo); }
html[data-ui] #contab-stats { background:var(--aru-fondo)!important; }
html[data-ui] :is(#view-dashboard .home-top-grid, #view-grupo-hub .res-cards, #contab-stats)::before {
  background:radial-gradient(ellipse 34% 30% at 22% 20%, oklch(31% .15 263 / 0.22), transparent 70%),
             radial-gradient(ellipse 34% 30% at 78% 80%, oklch(31% .15 263 / 0.22), transparent 70%),
             radial-gradient(ellipse 30% 26% at 60% 30%, oklch(96% .02 255), transparent 70%); }
html[data-ui][data-theme="dark"] :is(#view-dashboard .home-top-grid, #view-grupo-hub .res-cards, #contab-stats)::before {
  background:radial-gradient(ellipse 34% 30% at 22% 20%, oklch(38% .1 262 / .8), transparent 70%),
             radial-gradient(ellipse 34% 30% at 78% 80%, oklch(38% .1 262 / .8), transparent 70%); }

===== */

/* ===== El logotipo en negro en la pantalla (acceso, menú lateral, cabecera del correo en el móvil y quiosco); en modo
   oscuro, en blanco. Los documentos siguen con el logotipo tal cual, en el azul de ARU. ===== */
html[data-ui] :is(img[data-marca="logo"], [data-marca="inicial"] img) { filter:brightness(0); }
html[data-ui][data-theme="dark"] :is(img[data-marca="logo"], [data-marca="inicial"] img) { filter:brightness(0) invert(1); }

/* El logotipo del menú lateral, más pequeño que el de fábrica (84 px de alto) */
html body .nav-brand .nav-logo.marca-con-logo { height:52px; }
html body .nav-brand:has(.nav-logo.marca-con-logo) { padding:14px 12px 12px; }

/* El menú comparte la paleta elegida: blanco en claro y carbón en oscuro. */
html[data-ui] body:not(.employee-app) .nav-sidebar {
  background:var(--fc-card)!important; border-color:var(--fc-border)!important; color:var(--fc-ink);
  box-shadow:var(--fc-shadow)!important; }
html[data-ui] body:not(.employee-app) .nav-sidebar :is(.nav-item.active,.nav-group.active > .nav-group-head,.nav-group-head.active) {
  background:var(--fc-selected)!important; color:var(--fc-ink)!important; box-shadow:none!important; }

/* El icono de actualizar no participa en el reparto de ancho de los botones móviles. */
html[data-ui] #view-dashboard #home-refresh {
  flex:0 0 32px; width:32px!important; min-width:32px; max-width:32px;
  height:32px!important; min-height:32px!important; align-self:center;
}
@media (max-width:800px) {
  html[data-ui] #view-dashboard #home-refresh {
    flex-basis:44px; width:44px!important; min-width:44px; max-width:44px;
    height:44px!important; min-height:44px!important;
  }
}

/* Miniaturas estables: cada opción enseña su aspecto incluso si el otro tema está activo. */
html[data-ui] .appearance-preview {
  background:linear-gradient(90deg,#fff 0 22%,#f4f4f4 22%); border-color:#dedede;
}
html[data-ui] .appearance-preview::after {
  background:linear-gradient(#ededed 0 35%,transparent 35% 50%,#fff 50%); border-color:#dedede;
}
html[data-ui] .appearance-preview-dark {
  background:linear-gradient(90deg,#191919 0 22%,#0d0d0d 22%); border-color:#353535;
}
html[data-ui] .appearance-preview-dark::after {
  background:linear-gradient(#353535 0 35%,transparent 35% 50%,#202020 50%); border-color:#424242;
}

/* Arc oscuro: conserva sus escalas y componentes; las luces decorativas pasan a neutros. */
html[data-ui][data-theme="dark"] :is(#login-screen,.chatia-layout,#view-dashboard .home-top-grid,#view-grupo-hub .res-cards,#contab-stats) {
  background:var(--fc-background)!important;
}
html[data-ui][data-theme="dark"].arc-entrando body::after { background:var(--fc-background); }
html[data-ui][data-theme="dark"] :is(.chatia-layout,#view-dashboard .home-top-grid,#view-grupo-hub .res-cards,#contab-stats,.arc-rrhh,#rh-hoy .rhh-equipo,#rh-hoy .rhh-lateral)::before,
html[data-ui][data-theme="dark"] :is(.arc-rrhh,#rh-hoy .rhh-equipo,#rh-hoy .rhh-lateral)::after { display:none; }
html[data-ui][data-theme="dark"] :is(#login-screen > div,.asi-ia,.ai-assist,#ncr-form-inline,.chatia-lista-col,.chatia-panel,.arc-rrhh > .arc-rrhh-tarjeta:not(.arc-rrhh-presencia),#rh-hoy .rhh-grupo .rhh-persona,.rhh-lateral .rhh-nada,.rhh-cifra) {
  background:var(--fc-card)!important; border-color:var(--fc-border)!important; box-shadow:var(--arc-resting);
}
html[data-ui][data-theme="dark"] :is(.asi-chip,.ai-assist-icon,.ai-assist-actions .btn-primary:disabled,.arc-cobros-avatar,.arc-bienvenida-fondo) {
  background:var(--fc-secondary)!important; color:var(--fc-ink); border-color:var(--fc-border)!important;
}
/* Las tarjetas de resumen siguen oscuras aunque el botón principal sea blanco. */
html[data-ui][data-theme="dark"] :is(.ana-card,#contab-panel-libro-mayor .mayor-resumen,#contab-panel-fiscal .dash-card:has(.fiscal-resumen),.arc-rrhh-presencia,#view-contabilidad .fin-kpis > .fin-kpi:first-child,#terceros-contab-resumen > .dash-card:first-child,#view-contabilidad .ctz-hero) {
  --fc-primary:var(--fc-secondary); --fc-on-primary:var(--fc-ink);
}
html[data-ui][data-theme="dark"] .chatia-bv-ico {
  background:radial-gradient(circle at 32% 28%,oklch(60% 0 0),oklch(30% 0 0) 60%,oklch(22% 0 0))!important;
  box-shadow:0 18px 36px -20px oklch(0% 0 0 / .5),inset 0 4px 12px oklch(100% 0 0 / .12);
}
html[data-ui][data-theme="dark"] .chatia-bv-ico::before { background:conic-gradient(transparent,oklch(100% 0 0 / .4),transparent,oklch(100% 0 0 / .15),transparent); }
html[data-ui][data-theme="dark"] .chatia-bv-ico::after { background:none; }
html[data-ui][data-theme="dark"] :is(.ui-dialog-peligro .ui-dialog-ico,.ui-dialog-danger,.rh-task-urgent,.pyg-resultado-arc.negativo .pyg-res-badge) {
  background:var(--danger-bg)!important; color:var(--fc-error)!important;
}
html[data-ui][data-theme="dark"] :is(.login-otp-casillas input.ok,#tabla-rh-tar .rh-task-state.is-done,.pyg-resultado-arc.positivo .pyg-res-badge) {
  background:var(--success-bg)!important; color:var(--fc-success)!important;
}
html[data-ui][data-theme="dark"] .seg-switch span { background:var(--fc-input)!important; }
html[data-ui][data-theme="dark"] .seg-switch input:checked + span { background:var(--fc-primary)!important; }
html[data-ui][data-theme="dark"] .seg-switch input:checked + span::after { background:var(--fc-on-primary)!important; }
html[data-ui][data-theme="dark"] :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible {
  outline:2px solid var(--fc-ink)!important; outline-offset:3px;
}
html[data-ui][data-theme="dark"] ::selection { background:var(--fc-ink); color:var(--fc-background); }
/* La base glass fija un blanco translúcido en las tablas; las cabeceras de Arc son transparentes. */
html[data-ui][data-theme="dark"] :is(.data-table,.contab-table,.seg-table,.ctz-tabla,.chatia-tabla,.fin-table,.conc-tabla) {
  background:var(--fc-card)!important;
}
html[data-ui][data-theme="dark"] :is(.chatia-mov-btn,.gm-fab,.chatint-enviar) {
  background:var(--fc-primary); color:var(--fc-on-primary);
}

/* El cajón de Planificación debe cubrir también la barra móvil de Arc, igual que el visor. */
html[data-ui] .pla-cajon { z-index:1150; }