@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
@import 'bpmn-js/dist/assets/diagram-js.css';
@import 'bpmn-js/dist/assets/bpmn-js.css';
@import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';

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

@layer base {
  :root {
    /* ── Shadcn/ui tokens — primary cambiado a InQ Orange ─────────────────
       Antes: azul (221.2 83.2% 53.3%).
       Ahora: naranja InQ #F59845 ≈ HSL(28, 90%, 62%).
       Esto actualiza automáticamente Button default, Switch checked,
       Tabs ring, Slider y cualquier componente que use bg-primary/text-primary. */
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 28 90% 62%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 28 90% 62%;
    --radius: 0.5rem;

    /* ── InQ ROI brand variables ─────────────────────────────────────────
       Para uso en CSS inline, SVG y contextos donde Tailwind no aplica.
       En componentes React, preferir las clases Tailwind (bg-inq-orange, etc.) */
    --inq-orange: #F59845;
    --inq-orange-dark: #B45309;
    --inq-orange-light: #FEF3E2;
    --inq-orange-lighter: #FFF8ED;
    --inq-magenta: #ED3E8F;

    /* ── Semánticos ──────────────────────────────────────────────────────*/
    --color-success: #16A34A;
    --color-success-light: #F0FDF4;
    --color-warning: #F59E0B;
    --color-warning-bg: #FFFBEB;
    --color-danger: #EF4444;
    --color-danger-light: #FEE2E2;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground font-sans;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
  .font-mono {
    font-family: 'JetBrains Mono', monospace;
  }
}

/* ── bpmn-js canvas ─────────────────────────────────────────── */
.bpmn-container .djs-container {
  background: #f8fafc; /* slate-50 */
}

/* Elemento seleccionado desde nuestro código */
.bpmn-container .bpmn-selected .djs-visual > :first-child {
  stroke: hsl(var(--primary)) !important;
  stroke-width: 2.5px !important;
}

/* Elemento clickeable: cursor pointer en tasks */
.bpmn-container .djs-element[data-element-id] {
  cursor: default;
}

/* Hover visual en tasks */
.bpmn-container .djs-shape:hover .djs-visual > rect,
.bpmn-container .djs-shape:hover .djs-visual > path {
  filter: brightness(0.97);
}

/* heatmap overlays — para la Etapa 5 */
.heatmap-overlay {
  pointer-events: none;
  transition: fill 0.3s ease;
}

/* Asegurar que bpmn-js ocupa todo su contenedor */
.bpmn-container .djs-container svg {
  width: 100% !important;
  height: 100% !important;
}

/* Cursor pointer sobre tasks en el heatmap del reporte */
.bpmn-container .djs-shape[data-element-id] .djs-hit {
  cursor: default;
}

/* Selección en el heatmap del reporte — stroke más prominente */
.bpmn-container .bpmn-selected .djs-visual > rect {
  stroke: hsl(var(--primary)) !important;
  stroke-width: 3px !important;
  stroke-dasharray: none !important;
}
