/**
 * Red Solvers — Manual de marca 2020
 * Colores: #0c2a6b, #0099d7, #00d8ff | Secundarios: #686868, #373737
 * Tipografía: Bebas (títulos), Poppins (cuerpo)
 * Capa de override sobre el build Tailwind/shadcn.
 */

:root {
  /* Tokens marca (HSL sin función, compatible con hsl(var(--x))) */
  --rs-navy: 221 79.8% 23.3%;
  --rs-blue: 197 100% 42.2%;
  --rs-cyan: 189 100% 50%;
  --rs-gray-mid: 0 0% 40.8%;
  --rs-gray-dark: 0 0% 21.6%;

  --background: 0 0% 100%;
  --foreground: 0 0% 21.6%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 21.6%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 21.6%;

  --primary: 197 100% 42.2%;
  --primary-foreground: 0 0% 100%;

  --secondary: 221 22% 96%;
  --secondary-foreground: 221 79.8% 23.3%;

  --muted: 221 18% 96%;
  --muted-foreground: 0 0% 40.8%;

  --accent: 189 70% 94%;
  --accent-foreground: 221 79.8% 23.3%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;

  --border: 221 14% 90%;
  --input: 221 14% 90%;
  --ring: 197 100% 42.2%;

  --radius: 0.5rem;

  --sidebar-background: 221 20% 98.5%;
  --sidebar-foreground: 221 79.8% 23.3%;
  --sidebar-primary: 197 100% 42.2%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 189 55% 94%;
  --sidebar-accent-foreground: 221 79.8% 23.3%;
  --sidebar-border: 221 14% 91%;
  --sidebar-ring: 189 100% 50%;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
}

/* Títulos — Bebas Neue (equivalente Bebas para web) */
/* Tipografía de títulos; el color lo marcan las utilidades del build (text-gray-900, text-white…).
   Un color navy global en h1–h6 anulaba la herencia de text-white en secciones oscuras. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Bebas Neue", ui-sans-serif, sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* Bloques de titular grandes del sitio (utilidades Tailwind del build) */
.text-5xl,
.text-6xl,
.text-7xl,
.text-8xl {
  font-family: "Bebas Neue", ui-sans-serif, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em;
  line-height: 1.08;
}

.text-4xl.font-bold,
.text-4xl.font-extrabold,
.text-4xl.font-black,
.text-5xl.font-bold,
.text-5xl.font-extrabold,
.text-5xl.font-black,
.text-6xl.font-bold,
.text-6xl.font-extrabold,
.text-6xl.font-black {
  font-family: "Bebas Neue", ui-sans-serif, sans-serif !important;
  font-weight: 400 !important;
}

/* Enlaces: acento marca */
#root a:not([class*="bg-"]):hover {
  color: hsl(var(--rs-blue));
}

/* Hero inicio: "Ver patentes" — el <Link> hereda text-white del section; forzar texto oscuro en botón claro */
#root section.text-white a[href="/patentes"],
#root section.text-white a[href="/patentes"] button {
  color: #111827 !important;
}
#root section.text-white a[href="/patentes"] svg {
  color: #111827 !important;
}
#root section.text-white a[href="/patentes"]:hover button,
#root section.text-white a[href="/patentes"]:hover {
  color: #0c4a6e !important;
}
#root section.text-white a[href="/patentes"]:hover svg {
  color: #0c4a6e !important;
}

/* Focus visible coherente con anillo marca */
#root :focus-visible {
  outline: 2px solid hsl(var(--rs-cyan));
  outline-offset: 2px;
}

/* Imagotipo en navbar / footer (build React, data-rs-brand-mark) */
[data-rs-brand-mark] {
  flex-shrink: 0;
}

header a:has([data-rs-brand-mark]) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Pie: Células / Secciones / Recursos — contraste y tipografía legible a tamaño pequeño */
#root footer:has([data-rs-brand-mark]) h3 {
  color: #e0f2fe !important;
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.06em;
}

#root footer:has([data-rs-brand-mark]) ul a {
  color: #d1d5db !important;
}

#root footer:has([data-rs-brand-mark]) ul a:hover {
  color: #ffffff !important;
}

/* Scrollbar: dejar de usar tonos cálidos del bundle */
::-webkit-scrollbar-thumb {
  background: #0099d7 !important;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #0077b3 !important;
}

/* Forzar acentos cálidos residuales (p. ej. gráficos) hacia azul marca */
#root svg [stroke="#ff7300"],
#root svg [fill="#ff7300"],
#root svg [stroke="#ff8042"],
#root svg [fill="#ff8042"] {
  stroke: #0099d7 !important;
  fill: #0099d7 !important;
}