@tailwind base;
@tailwind components;
@tailwind utilities;

@import "./tokens.css";

@import "tw-animate-css";

@import "shadcn/tailwind.css";

@layer components {
  /* Envoltorio principal de página (reemplaza a los px- manuales) */
  .page-layout {
    @apply flex-1 min-w-0 flex flex-col bg-neutral-background-1 pb-page-bottom pt-[48px] px-[20px] lg:px-[32px] overflow-x-clip;
  }

  /* Contenedor principal para restringir el ancho y centrar el aire horizontal */
  .content-container {
    @apply w-full max-w-[1200px] mx-auto;
  }
}

@layer utilities {
  .home-bg {
    background-image: url('/chatgpt-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--colorNeutralBackground1);
  }

  .noise {
    --_noise-texture: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'><defs><filter id='n' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='3' stitchTiles='stitch' result='t'/><feColorMatrix type='saturate' values='0' in='t' result='g'/><feComponentTransfer in='g' result='a'><feFuncA type='linear' slope='0.5'/></feComponentTransfer></filter></defs><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    --_noise-size: 12%;
    background-image: var(--_noise-texture);
    background-size: var(--_noise-size);
    background-position: center;
    background-repeat: repeat;
  }

  .frosted-backdrop {
    backdrop-filter: blur(var(--_gradient-blur)) contrast(100%) brightness(100%);
    -webkit-backdrop-filter: blur(var(--_gradient-blur)) contrast(100%) brightness(100%);
  }
}

hr {
  border: none;
  border-top: 1px solid #ebebeb;
  margin: 0;
}

.hero-card {
  position: relative;
  border: 1px solid var(--colorNeutralStroke1);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.hero-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--colorBrandBackground) 0%, #7c6af6 50%, var(--colorBrandStroke2) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: -1;
}

.hero-card:hover {
  border-color: transparent;
  box-shadow: 0 6px 24px rgba(70, 72, 212, 0.12);
}

.hero-card:hover::before {
  opacity: 1;
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0;
}

@layer base {
  .theme {
    --font-heading: var(--font-geist-sans);
    --font-sans: var(--font-geist-sans);
  }
  :root {
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.205 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.97 0 0);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.708 0 0);
    --chart-1: oklch(0.87 0 0);
    --chart-2: oklch(0.556 0 0);
    --chart-3: oklch(0.439 0 0);
    --chart-4: oklch(0.371 0 0);
    --chart-5: oklch(0.269 0 0);
    --radius: 0.625rem;
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: oklch(0.205 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.97 0 0);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.708 0 0);
  }
  .dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.205 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.922 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.556 0 0);
    --chart-1: oklch(0.87 0 0);
    --chart-2: oklch(0.556 0 0);
    --chart-3: oklch(0.439 0 0);
    --chart-4: oklch(0.371 0 0);
    --chart-5: oklch(0.269 0 0);
    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.556 0 0);
  }

  /* Lexy brand override — todos los componentes shadcn heredan el morado Lexy
   * (#4648d4) desde estos tokens. Modificar aquí afecta a Button, Input ring,
   * Slider track, Progress, Tooltip selección, etc. */
  :root {
    --primary: oklch(0.483 0.207 270.5);
    --primary-foreground: oklch(0.985 0 0);
    --ring: oklch(0.483 0.207 270.5);
    --radius: 0.5rem;
  }
  .dark {
    --primary: oklch(0.483 0.207 270.5);
    --primary-foreground: oklch(0.985 0 0);
    --ring: oklch(0.483 0.207 270.5);
  }

  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
  html {
    @apply font-sans;
  }
}

/* Reset Tailwind preflight overrides that interfere with Fluent UI button/icon layout.
   Tailwind preflight forces `button { font-family: inherit; line-height: inherit }` and
   `svg { display: block; vertical-align: middle }`, both of which break Fluent's internal
   icon centering (especially the chevron in SplitButton/MenuButton). */
.fui-FluentProvider button {
  font-family: revert;
  line-height: revert;
}

.fui-FluentProvider svg,
[class*="fui-Icon"],
[class*="MenuButton__menuIcon"] svg {
  display: inline-block;
  vertical-align: baseline;
}

/* Toolbar — peso ligero para coherencia con el resto del DS. */
.fui-Toolbar .fui-ToolbarButton,
.fui-Toolbar .fui-ToolbarToggleButton {
  font-weight: 450 !important;
}

/* ---------------------------------------------------------------------------
 * Sonner Toast — Lexy / Geist tuning.
 * Sonner por defecto es bastante compacto (padding 16px, font 13px). Lo subimos
 * para que se sienta del mismo peso visual que el resto del DS.
 * ------------------------------------------------------------------------- */
[data-sonner-toast].lexy-toast {
  padding: 18px 20px !important;
  min-height: 64px;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.005em;
  box-shadow:
    0 1px 2px rgba(15, 18, 45, 0.06),
    0 8px 24px rgba(15, 18, 45, 0.10);
  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
}

[data-sonner-toast].lexy-toast [data-title] {
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
}

[data-sonner-toast].lexy-toast [data-description] {
  font-size: 13.5px;
  line-height: 20px;
  color: #56565a;
  margin-top: 2px;
}

[data-sonner-toast].lexy-toast [data-icon] {
  width: 20px;
  height: 20px;
  margin-right: 12px;
}
[data-sonner-toast].lexy-toast [data-icon] svg {
  width: 20px;
  height: 20px;
}

[data-sonner-toast].lexy-toast [data-button] {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: #1f1f1f;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-geist-sans), sans-serif;
}
[data-sonner-toast].lexy-toast [data-button]:hover {
  background: #000000;
}

[data-sonner-toast].lexy-toast[data-type="success"] [data-button] {
  background: #4648d4;
}
[data-sonner-toast].lexy-toast[data-type="success"] [data-button]:hover {
  background: #313396;
}