/*
 * Construction OS — variables de diseño (copiadas tal cual de la app: src/styles.css).
 *
 * Los colores están en oklch (formato original de la app). Al lado de cada uno va su
 * equivalente HEX para Canva, Figma o cualquier programa que no lea oklch.
 * Modo claro en :root, modo oscuro en .dark (igual que la app).
 */


:root {
  /* Tipografía — la app usa una sola familia */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Tamaños de texto (escala de Tailwind que usa la app) */
  --text-2xs: 0.6875rem;  /* 11px — badges, encabezados de tabla, etiquetas del menú */
  --text-xs: 0.75rem;     /* 12px — ayuda, metadatos */
  --text-sm: 0.875rem;    /* 14px — cuerpo de la app */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px — métrica secundaria */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px — título de página y métrica principal */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.75rem;    /* 60px */
  --tracking-tight: -0.025em;  /* títulos y cifras */
  --tracking-wide: 0.025em;    /* etiquetas en mayúsculas */
  --tracking-wider: 0.05em;    /* grupos del menú */

  /* Espaciado (múltiplos de 4px, escala de Tailwind) */
  --space-1: 0.25rem;  /* 4px */
  --space-1-5: 0.375rem; /* 6px */
  --space-2: 0.5rem;   /* 8px */
  --space-2-5: 0.625rem; /* 10px */
  --space-3: 0.75rem;  /* 12px — separación de tarjetas KPI */
  --space-4: 1rem;     /* 16px — margen de página en móvil */
  --space-5: 1.25rem;  /* 20px — relleno de tarjetas */
  --space-6: 1.5rem;   /* 24px — margen de página en tablet; separación de secciones */
  --space-8: 2rem;     /* 32px — margen de página en escritorio */
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --content-max: 1400px; /* ancho máximo del contenido en la app */
  --sidebar-width: 264px;
  --sidebar-width-collapsed: 76px;
  --topbar-height: 4rem; /* 64px */

  /* Radios — la app parte de 0.875rem (14px) */
  --radius: 0.875rem;
  --radius-sm: calc(var(--radius) - 4px);  /* 10px */
  --radius-md: calc(var(--radius) - 2px);  /* 12px */
  --radius-lg: var(--radius);              /* 14px */
  --radius-xl: calc(var(--radius) + 4px);  /* 18px */
  --radius-2xl: calc(var(--radius) + 8px); /* 22px — tarjetas KPI, estados vacíos */
  --radius-3xl: calc(var(--radius) + 12px);/* 26px */
  --radius-4xl: calc(var(--radius) + 16px);/* 30px */
  --radius-full: 9999px;                   /* badges y avatares */

  /* Sombras (tinta azul marino, no negra) */
  --shadow-card: 0 1px 2px oklch(0.22 0.06 258 / 0.06), 0 8px 24px -12px oklch(0.22 0.06 258 / 0.14);
  --shadow-pop: 0 12px 40px -12px oklch(0.22 0.06 258 / 0.28);
  /* Sombras de Tailwind que usan botones y pestañas */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Transiciones */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 150ms;
  --duration-sidebar: 200ms;
}

:root {
  /* Texto y fondos */
  --background: oklch(0.985 0.003 258);  /* #F9FAFC */
  --foreground: oklch(0.24 0.035 258);   /* #152030 */
  --card: oklch(1 0 0);                  /* #FFFFFF */
  --card-foreground: oklch(0.24 0.035 258); /* #152030 */
  --popover: oklch(1 0 0);               /* #FFFFFF */
  --popover-foreground: oklch(0.24 0.035 258); /* #152030 */
  --muted: oklch(0.965 0.006 258);       /* #F1F4F8 */
  --muted-foreground: oklch(0.55 0.025 258); /* #697280 */
  --border: oklch(0.925 0.008 258);      /* #E3E6EC */
  --input: oklch(0.925 0.008 258);       /* #E3E6EC */
  --ring: oklch(0.63 0.1 194);           /* #239C9B */
  /* Marca */
  --primary: oklch(0.34 0.085 259);      /* #1B3763 */
  --primary-foreground: oklch(0.99 0.002 258); /* #FBFCFD */
  --primary-soft: oklch(0.94 0.02 259);  /* #E3ECF9 */
  --secondary: oklch(0.96 0.008 258);    /* #EEF2F7 */
  --secondary-foreground: oklch(0.34 0.085 259); /* #1B3763 */
  --teal: oklch(0.63 0.1 194);           /* #239C9B */
  --teal-foreground: oklch(0.99 0.002 258); /* #FBFCFD */
  --teal-soft: oklch(0.95 0.03 194);     /* #D9F5F4 */
  --accent: oklch(0.55 0.19 297);        /* #8050D0 */
  --accent-foreground: oklch(0.99 0.002 258); /* #FBFCFD */
  --accent-soft: oklch(0.95 0.03 297);   /* #F0EBFF */
  /* Estados */
  --success: oklch(0.58 0.13 155);       /* #249057 */
  --success-foreground: oklch(0.99 0.002 258); /* #FBFCFD */
  --success-soft: oklch(0.95 0.04 155);  /* #DAF7E3 */
  --warning: oklch(0.72 0.15 72);        /* #DD9314 */
  --warning-foreground: oklch(0.25 0.05 72); /* #301D02 */
  --warning-soft: oklch(0.96 0.05 82);   /* #FFEFCD */
  --destructive: oklch(0.57 0.2 25);     /* #D42F34 */
  --destructive-foreground: oklch(0.99 0.002 258); /* #FBFCFD */
  --destructive-soft: oklch(0.955 0.03 25); /* #FFE9E6 */
  /* Gráficas */
  --chart-1: oklch(0.34 0.085 259);      /* #1B3763 */
  --chart-2: oklch(0.63 0.1 194);        /* #239C9B */
  --chart-3: oklch(0.55 0.19 297);       /* #8050D0 */
  --chart-4: oklch(0.72 0.15 72);        /* #DD9314 */
  --chart-5: oklch(0.58 0.13 155);       /* #249057 */
  /* Barra lateral (sidebar) */
  --sidebar: oklch(0.28 0.06 259);       /* #162946 */
  --sidebar-foreground: oklch(0.93 0.01 258); /* #E4E8EF */
  --sidebar-primary: oklch(0.63 0.1 194); /* #239C9B */
  --sidebar-primary-foreground: oklch(0.99 0.002 258); /* #FBFCFD */
  --sidebar-accent: oklch(0.35 0.07 259); /* #233A5F */
  --sidebar-accent-foreground: oklch(0.99 0.002 258); /* #FBFCFD */
  --sidebar-border: oklch(0.36 0.05 259); /* #2D3E57 */
  --sidebar-ring: oklch(0.63 0.1 194);   /* #239C9B */
  /* Categorías de costo (fondo pastel + tinta) */
  --cat-materials: oklch(0.94 0.05 155); /* #D2F6DD */
  --cat-materials-ink: oklch(0.42 0.11 155); /* #005E31 */
  --cat-subs: oklch(0.95 0.05 62);       /* #FFE8CD */
  --cat-subs-ink: oklch(0.5 0.13 52);    /* #9B4900 */
  --cat-labor: oklch(0.95 0.04 297);     /* #F1E9FF */
  --cat-labor-ink: oklch(0.46 0.16 297); /* #643DA4 */
  --cat-equipment: oklch(0.94 0.04 250); /* #D8EEFF */
  --cat-equipment-ink: oklch(0.45 0.13 254); /* #13559B */
  --cat-permits: oklch(0.94 0.045 194);  /* #C9F5F4 */
  --cat-permits-ink: oklch(0.44 0.09 200); /* #006166 */
  --cat-disposal: oklch(0.94 0.04 12);   /* #FFE1E4 */
  --cat-disposal-ink: oklch(0.5 0.15 10); /* #A6344F */
  --cat-delivery: oklch(0.94 0.03 80);   /* #F6E9D5 */
  --cat-delivery-ink: oklch(0.45 0.07 65); /* #704D29 */
  --cat-fuel: oklch(0.95 0.06 92);       /* #FDEEC1 */
  --cat-fuel-ink: oklch(0.47 0.11 82);   /* #795300 */
  --cat-other: oklch(0.945 0.006 258);   /* #EAEDF1 */
  --cat-other-ink: oklch(0.45 0.02 258); /* #4E5661 */
}

/* Modo oscuro: solo cambian estos valores (el resto se hereda del modo claro) */
.dark {
  /* Texto y fondos */
  --background: oklch(0.2 0.03 258);     /* #0D1624 */
  --foreground: oklch(0.97 0.005 258);   /* #F3F5F8 */
  --card: oklch(0.25 0.035 258);         /* #172232 */
  --card-foreground: oklch(0.97 0.005 258); /* #F3F5F8 */
  --popover: oklch(0.25 0.035 258);      /* #172232 */
  --popover-foreground: oklch(0.97 0.005 258); /* #F3F5F8 */
  --muted: oklch(0.3 0.035 258);         /* #232E3F */
  --muted-foreground: oklch(0.72 0.02 258); /* #9DA5B1 */
  --border: oklch(1 0 0 / 12%);          /* #FFFFFF @ 12% */
  --input: oklch(1 0 0 / 15%);           /* #FFFFFF @ 15% */
  /* Marca */
  --primary: oklch(0.72 0.09 240);       /* #6EACD7 */
  --primary-foreground: oklch(0.18 0.03 258); /* #09121F */
  --primary-soft: oklch(0.32 0.05 259);  /* #23334C */
  --secondary: oklch(0.3 0.035 258);     /* #232E3F */
  --secondary-foreground: oklch(0.97 0.005 258); /* #F3F5F8 */
  --accent: oklch(0.65 0.16 297);        /* #9B76E4 */
  --accent-foreground: oklch(0.18 0.03 258); /* #09121F */
  /* Categorías de costo (fondo pastel + tinta) */
  --cat-materials: oklch(0.34 0.06 155); /* #1B412A */
  --cat-materials-ink: oklch(0.86 0.09 155); /* #A1E3B7 */
  --cat-subs: oklch(0.35 0.06 62);       /* #513317 */
  --cat-subs-ink: oklch(0.87 0.09 70);   /* #FBCA93 */
  --cat-labor: oklch(0.34 0.06 297);     /* #3B3153 */
  --cat-labor-ink: oklch(0.86 0.08 297); /* #D6C7FF */
  --cat-equipment: oklch(0.33 0.05 254); /* #23374F */
  --cat-equipment-ink: oklch(0.86 0.07 254); /* #B2D4FF */
  --cat-permits: oklch(0.33 0.05 194);   /* #0D3D3D */
  --cat-permits-ink: oklch(0.86 0.07 194); /* #9AE0DE */
  --cat-disposal: oklch(0.34 0.06 12);   /* #522A30 */
  --cat-disposal-ink: oklch(0.87 0.08 12); /* #FFBFC6 */
  --cat-delivery: oklch(0.33 0.035 70);  /* #413221 */
  --cat-delivery-ink: oklch(0.86 0.05 70); /* #E7CCAE */
  --cat-fuel: oklch(0.35 0.06 92);       /* #463910 */
  --cat-fuel-ink: oklch(0.88 0.09 92);   /* #EDD692 */
  --cat-other: oklch(0.32 0.02 258);     /* #2D333D */
  --cat-other-ink: oklch(0.84 0.015 258); /* #C5CBD5 */
}