metis-desk/apps/web/src/global.css

@import "@repo/shadcn-ui/globals.css";

@font-face {
  font-family: "Inter";
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
  src: url("./fonts/inter-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/geist-mono-latin-ext-variable.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/geist-mono-latin-variable.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Roboto Serif";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/roboto-serif-latin-ext-variable.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Roboto Serif";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/roboto-serif-latin-variable.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@source "../../../modules";
@source "../../../packages/rdx-ui/src";
@source "../../../packages/shadcn-ui/src/components";

/* Los tokens del vendor se definen también en oscuro; se sobrescriben aquí
   para que las utilidades y los elementos nativos usen las mismas familias. */
:root,
.dark {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Roboto Serif", Georgia, "Times New Roman", serif;
  --font-mono:
    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    monospace;
}

/* El shell conserva su identidad visual sin alterar los tokens semánticos del vendor. */
@theme {
  --breakpoint-shell: 768px;
  --breakpoint-inventory: 1100px;
  --breakpoint-dashboard: 1200px;
  --color-shell-exterior: #000;
  --color-shell-content: var(--color-background);
  --color-shell-header: #fff;
  --color-shell-sidebar: #0e282c;
  --color-shell-sidebar-top: #0c252a;
  --color-shell-sidebar-bottom: #102c30;
  --color-shell-sidebar-foreground: #f4f7f7;
  --color-shell-sidebar-muted: rgb(255 255 255 / 82%);
  --color-shell-accent: #00d2c1;
  --color-shell-active-start: rgb(0 188 177 / 40%);
  --color-shell-active-end: rgb(0 128 130 / 45%);
  --color-shell-navy: #0c2850;
  --color-shell-muted-navy: #607895;
  --color-shell-border: #d1d9e2;
  --color-shell-search-icon: #1d3e6e;
  --radius-shell-control: 8px;
  --radius-shell-popover: 10px;
  --radius-shell: 20px;
  --radius-panel: 12px;
  --spacing-shell-sidebar: 228px;
  --spacing-shell-sidebar-inset: 20px;
  --spacing-shell-sidebar-collapsed: 72px;
  --spacing-shell-header: 88px;
  --spacing-shell-search: 41px;
  --spacing-shell-navigation: 48px;
  --spacing-shell-avatar: 35px;
  --shadow-shell-popover: 0 3px 12px rgb(12 40 80 / 8%);
}

/* Enlaces de contenido y controles que navegan: criterio común en toda la aplicación. */
@layer components {
  .app-link {
    color: var(--primary);
    cursor: pointer;
    text-underline-offset: 4px;
  }

  .app-link:hover {
    text-decoration-line: underline;
  }

  .app-link:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 3px;
  }

  .app-link:disabled,
  .app-link[data-disabled],
  .app-link[aria-disabled="true"] {
    cursor: default;
    text-decoration-line: none;
  }
}

/* Los diálogos necesitan separarse visualmente del fondo y de la capa de
   superposición sin depender de una variante concreta de formulario. */
[data-slot="dialog-content"] {
  box-shadow:
    0 18px 45px rgb(12 40 80 / 16%),
    0 4px 12px rgb(12 40 80 / 10%);
}

/* El diálogo activo necesita un límite inequívoco cuando aparece sobre otro. */
[data-slot="dialog-content"] {
  border: 1px solid color-mix(in oklch, var(--foreground) 1%, var(--border));
  box-shadow:
    0 24px 60px rgb(12 40 80 / 24%),
    0 8px 18px rgb(12 40 80 / 14%),
    0 0 0 1px rgb(12 40 80 / 8%);
}

[data-slot="dialog-content"] [data-slot="dialog-header"] {
  background-color: var(--popover);
}

/* La navegación móvil comparte un único scroll y reserva el bloque sticky al enfocar. */
@media (width < 768px) {
  [data-slot="workspace-scroll"] {
    scroll-padding-block-start: 128px;
  }

  [data-workspace-main],
  [data-workspace-main] :is(h1, h2, input, button, a, select, textarea) {
    scroll-margin-block-start: 128px;
  }
}