/* ==========================================================================
   puntosinfonavit.info - Global Stylesheet (Guía Laboral Cívica)
   Aligned with DESIGN.md specifications & WCAG AAA Contrast
   ========================================================================== */

:root {
  /* Color Palette */
  --color-primary: #B71C1C;
  --color-primary-hover: #991B1B;
  --color-primary-dark: #91000A;
  --color-primary-light: #FEE2E2;
  --color-secondary: #1A365D;
  --color-secondary-hover: #0F2544;
  --color-secondary-light: #E0E7FF;
  --color-tertiary: #059669;
  --color-tertiary-light: #ECFDF5;
  --color-tertiary-border: #A7F3D0;
  --color-warning: #B45309;
  --color-warning-bg: #FFFBEB;
  --color-warning-border: #FDE68A;
  
  /* Neutral Canvas */
  --bg-canvas: #F9F9FF;
  --bg-surface: #FFFFFF;
  --bg-surface-subtle: #F8FAFC;
  --bg-surface-hover: #F1F5F9;
  --border-subtle: #E2E8F0;
  --border-strong: #CBD5E1;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #64748B;
  --text-inverse: #FFFFFF;

  /* Typography */
  --font-main: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-code: 'Space Grotesk', monospace, sans-serif;
}

/* Base Setup */
html {
  scroll-behavior: smooth;
  font-family: var(--font-main);
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Accessibility Focus Ring */
:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* Typography Helpers */
.font-code-num {
  font-family: var(--font-code);
  font-variant-numeric: tabular-nums;
}

/* Interactive Details/Summary Accordion */
details summary::-webkit-details-marker {
  display: none;
}

details[open] summary svg,
details[open] summary .material-symbols-outlined {
  transform: rotate(180deg);
}

/* Table Responsive Container */
.table-container {
  width: 100%;
  overflow-x: auto;
  border-radius: 0.75rem;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

/* Card Hover Elevation */
.civic-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 0.75rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.civic-card:hover {
  border-color: var(--color-secondary);
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08);
}

/* Interactive Simulator Range Sliders */
input[type="range"] {
  accent-color: var(--color-primary);
}

/* ==========================================================================
   Global Button & Badge Contrast Fix (Guarantees Proper Text/Icons Contrast)
   ========================================================================== */
.text-on-primary,
.text-on-secondary,
.text-on-tertiary {
  color: #ffffff !important;
}

.text-primary {
  color: var(--color-primary) !important;
}

/* Primary Buttons & Links */
a.bg-primary,
button.bg-primary,
.btn-primary {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
}

a.bg-primary:hover,
button.bg-primary:hover,
.btn-primary:hover {
  background-color: var(--color-primary-hover) !important;
  color: #ffffff !important;
}

a.bg-primary > *,
button.bg-primary > *,
.btn-primary > * {
  color: #ffffff !important;
}

/* Secondary Buttons & Links */
a.bg-secondary,
button.bg-secondary,
.btn-secondary {
  background-color: var(--color-secondary) !important;
  color: #ffffff !important;
}

a.bg-secondary:hover,
button.bg-secondary:hover,
.btn-secondary:hover {
  background-color: var(--color-secondary-hover) !important;
  color: #ffffff !important;
}

a.bg-secondary > *,
button.bg-secondary > *,
.btn-secondary > * {
  color: #ffffff !important;
}

/* White Buttons on Red/Dark Banners */
.btn-white-on-brand,
a.bg-surface-card.text-primary,
a.bg-white.text-primary {
  background-color: #ffffff !important;
  color: var(--color-primary) !important;
}

.btn-white-on-brand:hover,
a.bg-surface-card.text-primary:hover,
a.bg-white.text-primary:hover {
  background-color: #f1f5f9 !important;
  color: var(--color-primary-hover) !important;
}


/* ==========================================================================
   Global Footer Styling (Matches Homepage Exactly & Bulletproof Across All Pages)
   ========================================================================== */
footer, .site-footer {
  background-color: #111c2d !important;
  color: #cfdaf2 !important;
  border-top: 1px solid #1e2e46 !important;
}

footer a, .site-footer a {
  color: #cfdaf2 !important;
  text-decoration: none;
  transition: color 0.15s ease, text-decoration 0.15s ease;
}

footer a:hover, .site-footer a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

footer .footer-title {
  color: #ffffff !important;
  font-weight: 800;
}

footer .footer-heading {
  color: #f9f9ff !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
}

footer .footer-badge {
  color: #85f8c4 !important;
}

footer .footer-official-link {
  color: #ffdad6 !important;
}

footer .footer-official-link:hover {
  color: #ffffff !important;
}

footer .footer-disclaimer {
  color: rgba(207, 218, 242, 0.8) !important;
  border-top: 1px solid #1e2e46 !important;
}

footer .footer-subtext {
  color: rgba(207, 218, 242, 0.6) !important;
}

/* Print Optimization */
@media print {
  header, footer, aside, .no-print {
    display: none !important;
  }
  main {
    max-width: 100% !important;
    padding: 0 !important;
  }
  .table-container {
    border: none;
  }
}