/* ==========================================================================
   GestionPYME - Estilos mínimos (Bootstrap 5 + overrides)
   Objetivo: web corporativa, rápida, accesible y fácil de mantener.
   Nota: Evitamos dependencias adicionales (fuentes externas, frameworks JS, etc.).
   ========================================================================== */

:root{
  /* Ajusta estos valores si quieres adaptar el branding */
  --gp-primary: #0b2a4a;        /* azul corporativo */
  --gp-primary-2: #123e6b;
  --gp-accent: #0d6efd;         /* bootstrap primary (para CTAs) */
  --gp-text: #1b1f24;
  --gp-muted: #5b6672;
  --gp-surface: #f6f8fb;
  --gp-border: #e7edf3;
}

/* Tipografía: usamos la pila del sistema (rápido, sin descargas). */
html, body{
  color: var(--gp-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Ajustes de lectura */
p{ line-height: 1.6; }
a{ text-underline-offset: 0.2em; }

/* Navbar */
.navbar-brand strong{ letter-spacing: 0.2px; }
.navbar .nav-link{
  color: var(--gp-text);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus{
  color: var(--gp-primary-2);
}
.navbar .nav-link.active{
  color: var(--gp-primary);
  font-weight: 600;
}

/* Hero */
.hero{
  background: linear-gradient(180deg, #ffffff 0%, var(--gp-surface) 100%);
  border-bottom: 1px solid var(--gp-border);
}
.hero h1{
  color: var(--gp-primary);
  letter-spacing: -0.2px;
}
.kicker{
  color: var(--gp-muted);
}

/* Secciones */
.section{
  padding: 4rem 0;
}
.section--compact{
  padding: 2.5rem 0;
}
.section-title{
  color: var(--gp-primary);
}

/* Cards */
.card{
  border-color: var(--gp-border);
}
.card .bi{
  font-size: 1.35rem;
}

/* Badges / pills */
.pill{
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  padding: .35rem .65rem;
  border: 1px solid var(--gp-border);
  border-radius: 999px;
  background: #fff;
  color: var(--gp-muted);
  font-size: .9rem;
}

/* Footer */
footer{
  border-top: 1px solid var(--gp-border);
  background: #fff;
}
.footer-muted{
  color: var(--gp-muted);
  font-size: .95rem;
}

/* Utilidades */
.bg-surface{ background: var(--gp-surface); }
.text-muted-2{ color: var(--gp-muted) !important; }

/* ==========================================================================
   Accesibilidad: contraste en fondos suaves (PageSpeed/Lighthouse)
   - Evita que enlaces y textos “secondary/muted” queden por debajo de WCAG AA
   - Especialmente relevante en secciones con .bg-surface
   ========================================================================== */

/* Asegura color de texto base legible en superficies suaves */
.bg-surface,
.bg-surface p,
.bg-surface li{
  color: var(--gp-text);
}

/* Ajusta grises de Bootstrap dentro de bg-surface (por defecto pueden fallar contraste) */
.bg-surface .text-muted,
.bg-surface .text-body-secondary,
.bg-surface .text-secondary,
.bg-surface .link-secondary{
  color: #495057 !important;
}

/* Enlaces dentro de bg-surface: azul más oscuro para asegurar contraste AA */
.bg-surface a{
  color: #0a58ca;
}
.bg-surface a:hover,
.bg-surface a:focus{
  color: #084298;
}

/* Accesibilidad: foco visible */
:focus-visible{
  outline: 3px solid rgba(13,110,253,.35);
  outline-offset: 2px;
}

/* Preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce){
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Cookie banner (minimal, Bootstrap-friendly) */
.cookie-banner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1080; /* por encima del footer y similar al modal backdrop */
  background: rgba(255,255,255,.98);
  border-top: 1px solid var(--gp-border);
  box-shadow: 0 -6px 18px rgba(0,0,0,.06);
}
.cookie-banner__text{
  font-size: .95rem;
  color: var(--gp-muted);
}
.cookie-banner a{ color: var(--gp-primary); }


/* ==========================================================================
   Accesibilidad: Botón primario con contraste AA holgado
   - PageSpeed puede marcar el primary default como "en el límite".
   - Oscurecemos ligeramente el fondo del btn-primary.
   ========================================================================== */

.btn-primary{
  /* Bootstrap 5 usa variables CSS para los botones; esto es seguro y reversible */
  --bs-btn-color: #fff;
  --bs-btn-bg: #0a58ca;
  --bs-btn-border-color: #0a58ca;

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #084298;
  --bs-btn-hover-border-color: #084298;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #06357a;
  --bs-btn-active-border-color: #06357a;

  --bs-btn-focus-shadow-rgb: 10,88,202;
}