/*
  Tokens visuales Fluent / D365 F&O (T067).
  Fuente: .claude/skills/d365-fno-design-language/references/visual-language.md
  y references/shell-anatomy.md. No se hard-codean valores fuera de esta capa;
  los componentes SIEMPRE consumen var(--m365-*).
*/

:root {
  /* Tipografia: Segoe UI en todo el armazon (shell-anatomy.md - ojo con --body-font de Fluent) */
  --m365-font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system,
    BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;

  --m365-fs-caption: 12px;
  --m365-fs-body: 13px;
  --m365-fs-body-lg: 14px;
  --m365-fs-label: 12px;
  --m365-fs-title: 21px;
  --m365-fs-kpi: 32px;

  --m365-fw-regular: 400;
  --m365-fw-semibold: 600;

  /* Rampa de acento Fluent (corporativo azul de referencia) */
  --m365-accent-10: #061724;
  --m365-accent-20: #082338;
  --m365-accent-30: #0a2e4a;
  --m365-accent-40: #0c3b5e;
  --m365-accent-50: #0e4775;
  --m365-accent-60: #0f548c;
  --m365-accent-70: #115ea3;
  --m365-accent-80: #0f6cbd; /* primario */
  --m365-accent-90: #2886de;
  --m365-accent-100: #479ef5;
  --m365-accent-110: #62abf5;
  --m365-accent-120: #77b7f7;
  --m365-accent-130: #96c6fa;
  --m365-accent-140: #b4d6fa;
  --m365-accent-150: #cfe4fa;
  --m365-accent-160: #ebf3fc;
  --m365-accent: var(--m365-accent-80);
  --m365-accent-fg: #ffffff;

  /* Superficies */
  --m365-surface-page: #f3f3f3;
  --m365-surface-card: #ffffff;
  --m365-surface-subtle: #faf9f8;
  --m365-surface-hover: #f5f5f5;
  --m365-surface-selected: #e8f1fb;

  /* Texto */
  --m365-text-primary: #242424;
  --m365-text-secondary: #616161;
  --m365-text-disabled: #a6a6a6;
  --m365-text-on-accent: #ffffff;
  --m365-text-link: var(--m365-accent-70);

  /* Trazos */
  --m365-stroke-divider: #e8e8e8;
  --m365-stroke-control: #d1d1d1;
  --m365-stroke-focus: var(--m365-accent-80);

  /* Estado (badges / barras de mensaje) */
  --m365-status-success-fg: #107c10;
  --m365-status-success-bg: #dff6dd;
  --m365-status-warning-fg: #835c00;
  --m365-status-warning-bg: #fff4ce;
  --m365-status-error-fg: #a4262c;
  --m365-status-error-bg: #fde7e9;
  --m365-status-neutral-fg: var(--m365-accent-70);
  --m365-status-neutral-bg: var(--m365-accent-160);

  /* Armazon (shell-anatomy.md - navy neutro oscuro, NUNCA azul saturado) */
  --m365-topbar-bg: #1a2836;
  --m365-topbar-fg: #ffffff;
  --m365-topbar-icon-hover: rgba(255, 255, 255, 0.14);
  --m365-topbar-pill-border: rgba(255, 255, 255, 0.35);
  --m365-topbar-height: 48px;

  --m365-navpane-bg: #ffffff;
  --m365-navpane-text: #424242; /* gris neutro; el acento SOLO en el activo */
  --m365-navpane-active-bg: var(--m365-accent-160);
  --m365-navpane-active-fg: var(--m365-accent-70);
  --m365-navpane-rail-width: 48px;
  --m365-navpane-expanded-width: 250px;
  --m365-navpane-border: #e1e1e1;

  /* Densidad / espaciado */
  --m365-space-1: 4px;
  --m365-space-2: 8px;
  --m365-space-3: 12px;
  --m365-space-4: 16px;
  --m365-space-5: 20px;
  --m365-space-6: 36px;

  --m365-radius-sm: 4px;
  --m365-radius-md: 6px;

  --m365-shadow-flyout: 0 4px 14px rgba(0, 0, 0, 0.18);
  --m365-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.08);

  --m365-z-flyout: 900;
  --m365-z-scrim: 950;
  --m365-z-dialog: 1000;
}

/*
  R04: NO hay @media (prefers-color-scheme: dark) aqui a proposito. Las capturas de
  referencia (uat-01, uat-05, uat-06, uat-10) muestran SIEMPRE rail y flyout sobre fondo
  blanco, y uat-07-theme-density.png indica que en F&O el tema es una PREFERENCIA EXPLICITA
  DEL USUARIO (Opciones de usuario), no una reaccion automatica al ajuste del sistema
  operativo. Un armazon que cambia de paleta solo porque el SO del visitante esta en modo
  oscuro se ve sistematicamente distinto de la referencia — eso es el defecto que este
  comentario documenta. Si mas adelante se quiere tema oscuro, es un ajuste de usuario (T162)
  que sobreescribe estas variables via un atributo/clase explicito, igual que F&O.
*/

/* Casing: MAYUSCULAS solo para leyendas de grupo/FastTab/FactBox/pestana de Action Pane */
.d365-caps {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}