/* Public site theme system: IntegridadQHSE, QHSEproTools and FIREproTools */
:root {
  color-scheme: dark;

  /* IntegridadQHSE — Corporate Tech / DARK */
  --site-bg: #071310;
  --site-surface: #0d201c;
  --site-surface-soft: #143029;

  --site-primary: #0f766e;          /* Verde petróleo */
  --site-primary-strong: #0a4f4a;   /* Verde petróleo profundo */
  --site-tech: #14b8a6;             /* Turquesa tecnológico */
  --site-accent: #f59e0b;           /* Ámbar operativo */
  --site-accent-soft: rgba(245, 158, 11, 0.11);

  --site-text-main: #f2faf8;
  --site-text-muted: #a9c5bf;
  --site-link: #5eead4;

  --site-border: rgba(255, 255, 255, 0.13);
  --site-border-soft: rgba(255, 255, 255, 0.07);

  --site-panel-bg:
    radial-gradient(circle at 100% 0%, rgba(20, 184, 166, 0.08) 0%, transparent 34%),
    linear-gradient(145deg, #102822 0%, #071310 100%);

  --site-card-bg:
    radial-gradient(circle at 100% 0%, rgba(20, 184, 166, 0.055) 0%, transparent 34%),
    linear-gradient(145deg, #132c26 0%, #0b1c18 100%);

  --site-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);

  --site-btn-bg:
    linear-gradient(135deg, #0a4f4a 0%, #0f766e 52%, #14b8a6 100%);

  --site-btn-text: #ffffff;
  --site-focus-ring: 0 0 0 3px rgba(20, 184, 166, 0.28);
}

body[data-theme="light"] {
  color-scheme: light;

  /* IntegridadQHSE — Corporate Tech / LIGHT */
  --site-bg: #f3f8f6;
  --site-surface: #ffffff;
  --site-surface-soft: #e9f2ef;

  --site-primary: #0f766e;
  --site-primary-strong: #0b5f59;
  --site-tech: #0d9488;
  --site-accent: #d97706;
  --site-accent-soft: rgba(217, 119, 6, 0.08);

  --site-text-main: #172521;
  --site-text-muted: #5a706a;
  --site-link: #0f766e;

  --site-border: rgba(15, 118, 110, 0.15);
  --site-border-soft: rgba(15, 118, 110, 0.08);

  --site-panel-bg:
    radial-gradient(circle at 100% 0%, rgba(20, 184, 166, 0.05) 0%, transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #edf5f2 100%);

  --site-card-bg:
    linear-gradient(145deg, #ffffff 0%, #f7faf9 100%);

  --site-shadow: 0 16px 36px rgba(15, 80, 70, 0.10);

  --site-btn-bg:
    linear-gradient(135deg, #0b5f59 0%, #0f766e 58%, #14b8a6 100%);

  --site-btn-text: #ffffff;
  --site-focus-ring: 0 0 0 3px rgba(20, 184, 166, 0.22);
}

body {
  background: var(--site-bg) !important;
  color: var(--site-text-main) !important;
  transition: background-color 0.22s ease, color 0.22s ease;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 0% 0%, rgba(20, 184, 166, 0.075) 0%, transparent 34%),
    radial-gradient(circle at 100% 12%, var(--site-accent-soft) 0%, transparent 28%),
    var(--site-bg);
  pointer-events: none;
}

body .header {
  background:
    linear-gradient(
      90deg,
      var(--site-primary-strong) 0%,
      var(--site-primary) 48%,
      var(--site-primary-strong) 100%
    ) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05) !important;
}

body main,
body section,
body .software-page,
body .home-page {
  color: var(--site-text-main) !important;
}

body .software-page,
body .home-page,
body .qhse-bg,
body .container,
body .card-container,
body .buscador-container {
  background-color: transparent !important;
}

body .software-card,
body .home-card,
body .home-visual,
body .home-signal,
body .glass,
body .card-front,
body .card-back,
body .message-container,
body .ventana,
body .ventana1,
body .ventana2,
body .ventana3 {
  background: var(--site-card-bg) !important;
  border-color: var(--site-border-soft) !important;
  color: var(--site-text-main) !important;
  box-shadow: var(--site-shadow) !important;
}

body p,
body .muted,
body .software-card p,
body .home-card p,
body .home-signal span {
  color: var(--site-text-muted) !important;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  color: var(--site-text-main) !important;
}

body .header .navigation ul li a {
  color: #ffffff !important;
}

body .header .navigation ul li a:hover {
  background: rgba(255, 255, 255, 0.11) !important;
  color: #ffffff !important;
}

body .header .navigation ul li ul {
  background:
    linear-gradient(
      145deg,
      var(--site-primary-strong) 0%,
      var(--site-primary) 100%
    ) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.20) !important;
}

body button,
body .btn,
body .cta-btn,
body .software-actions a {
  background: var(--site-btn-bg) !important;
  color: var(--site-btn-text) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.20);
}

body img {
  transition: filter 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
}

body[data-theme="light"] img:not(.menu):not([src*="logo"]) {
  filter: saturate(0.96) contrast(0.99) brightness(1.03);
}

body[data-theme="dark"] img:not(.menu):not([src*="logo"]),
body:not([data-theme]) img:not(.menu):not([src*="logo"]) {
  filter: saturate(1.05) contrast(1.03) brightness(0.94);
}

body a {
  color: var(--site-link);
}

body input,
body select,
body textarea {
  background: var(--site-surface-soft);
  color: var(--site-text-main);
  border-color: var(--site-border);
}

body input:focus,
body select:focus,
body textarea:focus,
body button:focus-visible,
body a:focus-visible {
  outline: none;
  box-shadow: var(--site-focus-ring);
}

/* =========================================================
   IntegridadQHSE — Corporate Navigation
   La vitrina usa graphite + teal.
   QHSEproTools y FIREproTools conservan sus propios temas
   mediante data-brand.
   ========================================================= */

/* DARK / defecto: graphite con matiz teal */
body:not([data-brand]) .header,
body[data-brand="integridadqhse"] .header,
body:not([data-brand])[data-theme="dark"] .header,
body[data-brand="integridadqhse"][data-theme="dark"] .header {
  background:
    linear-gradient(135deg, #12211e 0%, #0f1b18 52%, #0a1412 100%) !important;
  border-bottom: 1px solid rgba(94, 234, 212, 0.12) !important;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* LIGHT: marfil técnico / verde grisáceo muy claro */
body:not([data-brand])[data-theme="light"] .header,
body[data-brand="integridadqhse"][data-theme="light"] .header {
  background:
    linear-gradient(135deg, #f4f8f6 0%, #eaf1ee 52%, #dfe9e5 100%) !important;
  border-bottom: 1px solid rgba(15, 118, 110, 0.12) !important;
  box-shadow:
    0 10px 26px rgba(15, 80, 70, 0.10),
    inset 0 -1px 0 rgba(255, 255, 255, 0.74) !important;
}

/* Menú principal */
body:not([data-brand]) .header .navigation > ul > li > a,
body[data-brand="integridadqhse"] .header .navigation > ul > li > a {
  color: #f2faf8 !important;
}

body:not([data-brand])[data-theme="light"] .header .navigation > ul > li > a,
body[data-brand="integridadqhse"][data-theme="light"] .header .navigation > ul > li > a {
  color: #172521 !important;
}

/* Hover teal */
body:not([data-brand]) .header .navigation > ul > li > a:hover,
body[data-brand="integridadqhse"] .header .navigation > ul > li > a:hover {
  background: rgba(20, 184, 166, 0.11) !important;
  color: #ffffff !important;
}

body:not([data-brand])[data-theme="light"] .header .navigation > ul > li > a:hover,
body[data-brand="integridadqhse"][data-theme="light"] .header .navigation > ul > li > a:hover {
  background: rgba(15, 118, 110, 0.09) !important;
  color: #0b5f59 !important;
}

/* Submenús — dark */
body:not([data-brand]) .header .navigation ul li ul,
body[data-brand="integridadqhse"] .header .navigation ul li ul,
body:not([data-brand]) .header .navigation ul li ul li,
body[data-brand="integridadqhse"] .header .navigation ul li ul li {
  background: #13231f !important;
  border-color: rgba(94, 234, 212, 0.08) !important;
}

body:not([data-brand]) .header .navigation ul li ul li a,
body[data-brand="integridadqhse"] .header .navigation ul li ul li a {
  color: #f2faf8 !important;
}

/* Submenús — light */
body:not([data-brand])[data-theme="light"] .header .navigation ul li ul,
body[data-brand="integridadqhse"][data-theme="light"] .header .navigation ul li ul,
body:not([data-brand])[data-theme="light"] .header .navigation ul li ul li,
body[data-brand="integridadqhse"][data-theme="light"] .header .navigation ul li ul li {
  background: #f4f8f6 !important;
  border-color: rgba(15, 118, 110, 0.09) !important;
}

body:not([data-brand])[data-theme="light"] .header .navigation ul li ul li a,
body[data-brand="integridadqhse"][data-theme="light"] .header .navigation ul li ul li a {
  color: #172521 !important;
}

body:not([data-brand])[data-theme="light"] .header .navigation ul li ul li a:hover,
body[data-brand="integridadqhse"][data-theme="light"] .header .navigation ul li ul li a:hover {
  background: #e2efea !important;
  color: #0f766e !important;
}

/* Mobile: neutraliza fondos heredados de styleA */
@media (max-width: 1500px) {
  body:not([data-brand]) .header .navigation,
  body[data-brand="integridadqhse"] .header .navigation,
  body:not([data-brand]) .header .navigation > ul > li,
  body[data-brand="integridadqhse"] .header .navigation > ul > li {
    background: #0f1b18 !important;
  }

  body:not([data-brand])[data-theme="light"] .header .navigation,
  body[data-brand="integridadqhse"][data-theme="light"] .header .navigation,
  body:not([data-brand])[data-theme="light"] .header .navigation > ul > li,
  body[data-brand="integridadqhse"][data-theme="light"] .header .navigation > ul > li {
    background: #eaf1ee !important;
  }
}

/* Firma visual IntegridadQHSE: teal + ámbar, sin tricolor nacional */
body:not([data-brand]) .header::after,
body[data-brand="integridadqhse"] .header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      #0f766e 18%,
      #14b8a6 48%,
      #f59e0b 72%,
      transparent 100%
    );
  opacity: 0.76;
  pointer-events: none;
}

/* =========================================================
   IntegridadQHSE — Logo adaptativo Light / Dark
   Se soportan las nuevas clases y las antiguas de QHSEfrance
   durante la transición para no romper el header copiado.
   ========================================================= */

body .header .logo .integridadqhse-logo-link,
body .header .logo .qhsefrance-logo-link {
  display: grid;
  align-items: center;
  justify-items: start;
  width: 100%;
  text-decoration: none;
}

body .header .logo .integridadqhse-logo,
body .header .logo .qhsefrance-logo {
  grid-area: 1 / 1;
  display: block;
  width: min(250px, 100%);
  max-width: 100%;
  height: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateZ(0);
  transition:
    opacity 0.24s ease,
    visibility 0.24s ease;
}

/* DARK por defecto */
body .header .logo .integridadqhse-logo--dark,
body[data-theme="dark"] .header .logo .integridadqhse-logo--dark,
body .header .logo .qhsefrance-logo--dark,
body[data-theme="dark"] .header .logo .qhsefrance-logo--dark {
  opacity: 1;
  visibility: visible;
}

body .header .logo .integridadqhse-logo--light,
body[data-theme="dark"] .header .logo .integridadqhse-logo--light,
body .header .logo .qhsefrance-logo--light,
body[data-theme="dark"] .header .logo .qhsefrance-logo--light {
  opacity: 0;
  visibility: hidden;
}

/* LIGHT */
body[data-theme="light"] .header .logo .integridadqhse-logo--dark,
body[data-theme="light"] .header .logo .qhsefrance-logo--dark {
  opacity: 0;
  visibility: hidden;
}

body[data-theme="light"] .header .logo .integridadqhse-logo--light,
body[data-theme="light"] .header .logo .qhsefrance-logo--light {
  opacity: 1;
  visibility: visible;
}

/* No aplicar filtros globales a logos de marca */
body[data-theme="light"] .integridadqhse-logo,
body[data-theme="dark"] .integridadqhse-logo,
body:not([data-theme]) .integridadqhse-logo,
body[data-theme="light"] .qhsefrance-logo,
body[data-theme="dark"] .qhsefrance-logo,
body:not([data-theme]) .qhsefrance-logo {
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body .header .logo .integridadqhse-logo,
  body .header .logo .qhsefrance-logo {
    transition: none;
  }
}