/* ============================================================
   Cotizaciones — piel de marca CiberConsulting
   5 de septiembre de 2026
   ============================================================

   POR QUE EXISTE ESTE ARCHIVO
   La aplicacion se construyo con la paleta indigo por defecto de
   Tailwind, que tira a violeta: 145 usos de indigo frente a 4 de
   naranja y ningun color de la marca. Recompilar el bundle no es
   una opcion desde aqui, y editar el CSS compilado a mano es
   justo lo que rompio la aplicacion en una sesion anterior.

   COMO FUNCIONA
   Es Tailwind v4, que declara su paleta como variables CSS dentro
   de @layer theme. Una regla :root SIN capa gana en la cascada a
   cualquier regla que este dentro de una capa, sin importar el
   orden ni la especificidad. Asi que basta con redeclarar las
   variables: los 145 usos de indigo y los 21 de blue cambian de
   golpe, sin tocar ni un byte del bundle.

   DE DONDE SALEN LOS COLORES
   Muestreados pixel a pixel del logo, no copiados de memoria:
     naranja #fd7700 · azul #0072b1 · medio #1b5687
     profundo #003e73 · oscuro #00325a
   Son los mismos valores que ya usan el sitio corporativo y el
   Asesor ANCI, que son la fuente de verdad de la marca.

   COMO SE CONSTRUYO LA ESCALA
   Se conserva la rampa de LUMINOSIDAD del indigo original y solo
   se cambian tono e intensidad. Eso mantiene intactas todas las
   relaciones de contraste: ningun texto que hoy se lee deja de
   leerse. Los dos pasos mas usados van anclados al logo exacto:
     indigo-600 = #0072b1  (botones)        contraste  5.20:1
     indigo-900 = #003e73  (superficies)    contraste 10.84:1
   Comprobado: del 500 al 950, todos cumplen AA con texto blanco.

   SI ALGUN DIA SE RECOMPILA EL FRONTEND, esto sobra: lo correcto
   entonces es definir la marca en tailwind.config y borrar este
   archivo junto con su <link> en index.html.
   ============================================================ */

:root {
  /* --- Azul de marca sustituyendo al indigo de Tailwind --- */
  --color-indigo-100: oklch(93.0% 0.0169 243.7); /* #dfe9f3 */
  --color-indigo-400: oklch(67.3% 0.0904 243.7); /* #639cca */
  --color-indigo-500: oklch(58.5% 0.1157 243.7); /* #3382bb */
  --color-indigo-600: oklch(53.1% 0.1301 243.7); /* #0072b1  del logo */
  --color-indigo-700: oklch(45.7% 0.1192 243.7); /* #005c94 */
  --color-indigo-800: oklch(39.8% 0.0969 243.7); /* #014b77 */
  --color-indigo-900: oklch(36.1% 0.1069 251.6); /* #003e73  del logo */
  --color-indigo-950: oklch(25.7% 0.0447 243.7); /* #0e2537 */

  /* --- El azul de Tailwind, al mismo tono, para que no queden
         dos familias de azul distintas conviviendo --- */
  --color-blue-100: oklch(93.2% 0.0159 243.7); /* #e0eaf3 */
  --color-blue-300: oklch(80.9% 0.0522 243.7); /* #a5c5e0 */
  --color-blue-400: oklch(70.7% 0.0820 243.7); /* #73a7d0 */
  --color-blue-500: oklch(62.3% 0.1063 243.7); /* #488ec2 */
  --color-blue-600: oklch(54.6% 0.1217 243.7); /* #1d76b1 */
  --color-blue-700: oklch(48.8% 0.1207 243.7); /* #00659e */
  --color-blue-800: oklch(42.4% 0.0988 243.7); /* #0a5380 */
  --color-blue-900: oklch(37.9% 0.0725 243.7); /* #1a4666 */

  /* --- El naranja de la marca, disponible para quien lo quiera --- */
  --cc-naranja: #fd7700;
}

/* El degradado de las pantallas sin sesion (acceso, registro y
   recuperacion) va con valores literales en el propio componente
   —from-[#020024] via-[#090979]—, asi que no lo alcanzan las
   variables. Se redirigen las dos clases generadas, manteniendo el
   mismo efecto oscuro pero en el tono de la marca en vez de violeta. */
.from-\[\#020024\] { --tw-gradient-from: #000e24; }
.via-\[\#090979\]  { --tw-gradient-via:  #003e73; }

/* Tipografia. OJO, esto tiene trampa y conviene no "corregirlo":
   el sitio corporativo DECLARA "Outfit" y "Space Grotesk", pero sus
   @font-face ponen local("Segoe UI") y local("Century Gothic") ANTES
   del archivo. En Windows gana el local y los .ttf no se descargan
   nunca (comprobado: cero peticiones de fuente al cargar la portada).
   O sea que lo que el sitio renderiza de verdad es Segoe UI para el
   cuerpo y Century Gothic para los titulos.
   Cargar aqui el Outfit autentico ALEJARIA esta aplicacion del sitio
   en vez de acercarla, asi que se nombran las fuentes efectivas. */
body {
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
               Arial, sans-serif;
}

h1, h2, h3, h4 {
  font-family: "Century Gothic", "Questrial", "Segoe UI", system-ui,
               sans-serif;
}