/* ─────────────────────────────────────────────────────────────────────────────
   FLMM Design System · Grafito · componentes
   Fuente de verdad: flmm-hub/design-system/components.css

   NO EDITAR ESTE ARCHIVO EN LOS PRODUCTOS. Se edita en el hub y se copia.

   Clases, no componentes React, por una razón concreta: los seis productos no
   comparten framework — Landing Optimizer es Flask — y esto funciona en los
   seis igual. Las primitivas React sobre Radix (dialog, select, dropdown) van
   aparte, en el registry, porque ahí sí hace falta comportamiento.

   Sin sombras en ningún componente: la jerarquía la lleva el borde de 1px.
   Es la decisión que define Grafito, así que si algo necesita una sombra para
   entenderse, el problema es la jerarquía, no la sombra que le falta.
   ──────────────────────────────────────────────────────────────────────────── */

@layer components {
  /* ── Superficie ─────────────────────────────────────────────────────────── */
  .fl-card {
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  /* ── Botones ────────────────────────────────────────────────────────────────
     Alto fijo de 36px: es lo que hace que un botón, un input y un select
     alineados en una fila queden a la misma altura sin ajustes por caso. */
  .fl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding-inline: 0.875rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .fl-btn:disabled,
  .fl-btn[aria-disabled='true'] {
    opacity: 0.5;
    pointer-events: none;
  }

  .fl-btn--primary {
    background: var(--primary);
    color: var(--primary-foreground);
  }
  .fl-btn--primary:hover:not(:disabled) {
    background: color-mix(in oklab, var(--primary) 88%, var(--background));
  }

  .fl-btn--secondary {
    background: var(--card);
    color: var(--foreground);
    border-color: var(--input);
  }
  .fl-btn--secondary:hover:not(:disabled) {
    background: var(--muted);
  }

  .fl-btn--ghost {
    background: transparent;
    color: var(--muted-foreground);
  }
  .fl-btn--ghost:hover:not(:disabled) {
    background: var(--muted);
    color: var(--foreground);
  }

  .fl-btn--danger {
    background: var(--destructive);
    color: var(--destructive-foreground);
  }
  .fl-btn--danger:hover:not(:disabled) {
    background: color-mix(in oklab, var(--destructive) 88%, var(--background));
  }

  /* ── Campos ─────────────────────────────────────────────────────────────── */
  .fl-field {
    width: 100%;
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem;
    background: var(--card);
    color: var(--foreground);
    border: 1px solid var(--input);
    border-radius: var(--radius);
    font-size: 0.875rem;
    line-height: 1.4;
  }
  .fl-field::placeholder {
    color: var(--muted-foreground);
  }
  .fl-field:focus {
    outline: 2px solid var(--ring);
    outline-offset: -1px;
    border-color: var(--ring);
  }
  .fl-field:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* ── Etiquetas y estados ────────────────────────────────────────────────────
     El punto de color antes del texto no es decorativo: es lo que deja leer el
     estado de un vistazo sin depender solo del color, que no todos distinguen. */
  .fl-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--muted-foreground);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  .fl-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  .fl-badge::before {
    content: '';
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background: currentColor;
    flex: none;
  }
  .fl-badge--brand {
    background: var(--brand-soft);
    color: var(--brand-ink);
  }
  .fl-badge--success {
    background: color-mix(in oklab, var(--success) 14%, var(--background));
    color: var(--success);
  }
  .fl-badge--warning {
    background: color-mix(in oklab, var(--warning) 14%, var(--background));
    color: var(--warning);
  }
  .fl-badge--danger {
    background: color-mix(in oklab, var(--destructive) 14%, var(--background));
    color: var(--destructive);
  }
  .fl-badge--info {
    background: color-mix(in oklab, var(--info) 14%, var(--background));
    color: var(--info);
  }

  /* ── Proveedores de IA ──────────────────────────────────────────────────────
     Los modelos aparecen en chips, leyendas y puntos de gráfico, y tienen que
     ser el mismo color en los tres sitios o la leyenda deja de servir. Un tono
     por proveedor, todos al mismo brillo, derivando fondo y texto del tono con
     color-mix: cada proveedor es un solo valor que mantener. */
  .fl-provider {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    border: 1px solid color-mix(in oklab, var(--provider, var(--muted-foreground)) 30%, transparent);
    border-radius: 999px;
    background: color-mix(in oklab, var(--provider, var(--muted-foreground)) 12%, var(--background));
    color: color-mix(in oklab, var(--provider, var(--muted-foreground)) 78%, var(--foreground));
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
  }
  .fl-provider--anthropic { --provider: var(--chart-2); }
  .fl-provider--openai    { --provider: var(--chart-3); }
  .fl-provider--google    { --provider: var(--chart-4); }

  .fl-dot--anthropic   { background: var(--chart-2); }
  .fl-dot--openai      { background: var(--chart-3); }
  .fl-dot--google      { background: var(--chart-4); }
  .fl-dot--desconocido { background: var(--muted-foreground); }

  /* ── Control segmentado ─────────────────────────────────────────────────────
     Para elegir una opción entre pocas y excluyentes (plataforma, formato,
     vista). Una sola caja con divisiones internas, en vez de N botones sueltos
     con borde grueso: ocupa menos, se lee de un vistazo y deja claro que las
     opciones compiten entre sí. */
  .fl-segmented {
    display: inline-flex;
    align-items: stretch;
    padding: 2px;
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--muted);
  }
  .fl-segmented--full {
    display: flex;
    width: 100%;
  }

  .fl-segment {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    min-height: 2rem;
    padding: 0.25rem 0.75rem;
    border: 0;
    border-radius: calc(var(--radius) - 2px);
    background: transparent;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .fl-segment:hover:not([aria-pressed='true']) {
    color: var(--foreground);
  }
  .fl-segment[aria-pressed='true'] {
    background: var(--card);
    color: var(--foreground);
    font-weight: 600;
  }
  .fl-segment svg {
    width: 0.875rem;
    height: 0.875rem;
    flex: none;
  }

  /* ── Volver al hub ──────────────────────────────────────────────────────────
     Todas las herramientas viven dentro del hub, así que todas necesitan la
     salida. Va siempre en el mismo sitio —arriba del todo, antes de la
     navegación propia del producto— porque la jerarquía real es esa: el hub
     contiene a la herramienta, no al revés.

     Discreto a propósito: es una salida, no una acción. Si compitiera con los
     botones del producto, estaría diciendo que irse es lo importante. */
  .fl-hub-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    margin-inline-start: -0.5rem;
    border-radius: calc(var(--radius) - 2px);
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .fl-hub-link:hover {
    background: var(--muted);
    color: var(--foreground);
  }
  .fl-hub-link svg {
    width: 0.875rem;
    height: 0.875rem;
    flex: none;
  }

  /* ── Rótulos ────────────────────────────────────────────────────────────────
     Versalitas espaciadas para nombrar secciones y columnas. */
  .fl-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-foreground);
  }
}