/* =============================================================
 * Job One+ — Sistema de diseño global (dark/light togglable)
 * Toma el lenguaje visual de la landing y lo mapea sobre las
 * variables nativas de Bootstrap 5.3 (data-bs-theme) para que
 * todos los componentes hereden tema + marca sin editar cada vista.
 *
 * Cargar SIEMPRE después de bootstrap.min.css.
 * ============================================================= */

/* ---------- Tokens de marca (constantes en ambos temas) ---------- */
:root{
  --jo-magenta:#E91388;
  --jo-magenta-bright:#FF4FAA;
  --jo-magenta-rgb:233,19,136;
  --jo-gold:#D9B67C;
  --jo-gold-bright:#EBCE9C;
  --jo-navy:#0B0E3D;
  --jo-navy-rgb:11,14,61;
  --jo-navy-deep:#05061E;
  --jo-paper:#F6F5FB;
  --jo-lav:#5B5D91;

  --jo-font-display:'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --jo-font-body:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --jo-font-mono:'Space Mono', ui-monospace, monospace;

  /* Texto "fuerte" que era navy fijo (#E91388): navy en claro, claro en oscuro.
     Se usa para reemplazar `color:#E91388` (texto) en todo el sitio. */
  --jo-ink-strong:#E91388;

  /* Primario del sitio = navy corporativo (compatibilidad con la identidad).
     El magenta es el ACENTO de marca, como en la landing. */
  --bs-primary:#E91388;
  --bs-primary-rgb:233,19,136;

  /* Enlaces con el acento magenta */
  --bs-link-color:#C40E73;
  --bs-link-color-rgb:196,14,115;
  --bs-link-hover-color:#E91388;
  --bs-link-hover-color-rgb:233,19,136;

  --bs-body-font-family:var(--jo-font-body);
  --bs-border-radius:.65rem;
  --bs-border-radius-lg:1rem;
}

/* ---------- TEMA CLARO (por defecto) ---------- */
[data-bs-theme="light"]{
  --bs-body-bg:#F6F5FB;
  --bs-body-color:#161A46;
  --bs-emphasis-color:#05061E;
  --bs-emphasis-color-rgb:5,6,30;
  --bs-secondary-bg:#FFFFFF;
  --bs-tertiary-bg:#EFEDFA;
  --bs-secondary-color:rgba(11,14,61,.68);
  --bs-tertiary-color:rgba(11,14,61,.5);
  --bs-border-color:#E1DEF2;
  --bs-border-color-translucent:rgba(11,14,61,.12);
  --bs-heading-color:#0B0E3D;
}

/* ---------- TEMA OSCURO ---------- */
[data-bs-theme="dark"]{
  --bs-body-bg:#34343B;      /* grises neutros de la plantilla */
  --bs-body-color:#ECECEC;
  --bs-emphasis-color:#FFFFFF;
  --bs-emphasis-color-rgb:255,255,255;
  --bs-secondary-bg:#222226; /* cards */
  --bs-tertiary-bg:#2C2C31;
  --bs-secondary-color:rgba(231,230,242,.68);
  --bs-tertiary-color:rgba(231,230,242,.5);
  --bs-border-color:rgba(255,255,255,.14);
  --bs-border-color-translucent:rgba(255,255,255,.12);
  --bs-heading-color:#FFFFFF;

  /* Componentes comunes */
  --bs-card-bg:#222226;
  --bs-card-border-color:rgba(255,255,255,.10);
  --bs-card-cap-bg:rgba(255,255,255,.03);
  --bs-list-group-bg:#222226;
  --bs-modal-bg:#222226;
  --bs-dropdown-bg:#222226;
  --bs-dropdown-link-color:#E7E6F2;
  --bs-dropdown-link-hover-bg:rgba(255,255,255,.06);
  --bs-dropdown-border-color:rgba(255,255,255,.12);
  --bs-offcanvas-bg:#222226;
  --bs-code-color:#FF7AC0;
  --bs-link-color:#FF4FAA;
  --bs-link-color-rgb:255,79,170;
  --bs-link-hover-color:#FF7AC0;
  --bs-link-hover-color-rgb:255,122,192;

  /* Texto fuerte (antes navy) legible en oscuro */
  --jo-ink-strong:#E7E6F2;

  color-scheme:dark;
}

/* Texto que quedó navy/oscuro fijo → legible en oscuro (utilidades + custom-bootstrap-colors) */
[data-bs-theme="dark"] .text-primary{ color:#9FA1CC !important; }
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-body,
[data-bs-theme="dark"] .text-body-emphasis{ color:var(--bs-body-color) !important; }
[data-bs-theme="dark"] .text-black{ color:#E7E6F2 !important; }

/* Fondos oscuros para inputs/tables en dark */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text{
  background-color:#2A2A2E;
  border-color:rgba(255,255,255,.14);
  color:#E7E6F2;
}
[data-bs-theme="dark"] .form-control::placeholder{ color:rgba(231,230,242,.45); }
[data-bs-theme="dark"] .table{ --bs-table-color:#E7E6F2; --bs-table-bg:transparent; --bs-table-border-color:rgba(255,255,255,.12); }
[data-bs-theme="dark"] .bg-white{ background-color:#222226 !important; }
[data-bs-theme="dark"] .text-dark{ color:#E7E6F2 !important; }
[data-bs-theme="dark"] .border{ border-color:rgba(255,255,255,.12) !important; }
[data-bs-theme="dark"] .shadow-sm,[data-bs-theme="dark"] .shadow{ box-shadow:0 8px 30px rgba(0,0,0,.35) !important; }

/* ---------- Tipografías ---------- */
body{ font-family:var(--jo-font-body); }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6,
.navbar-brand{
  font-family:var(--jo-font-display);
  letter-spacing:-.01em;
}

/* ---------- Acentos de marca ---------- */
.text-magenta{ color:var(--jo-magenta) !important; }
.text-gold{ color:var(--jo-gold) !important; }
.bg-magenta{ background-color:var(--jo-magenta) !important; color:#fff !important; }
.bg-navy{ background-color:var(--jo-navy) !important; color:#fff !important; }
.border-magenta{ border-color:var(--jo-magenta) !important; }

/* Botón/acción de marca (CTA estilo landing) */
.btn-brand{
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff;
  background:linear-gradient(135deg,var(--jo-magenta),var(--jo-magenta-bright));
  border:none; color:#fff; font-weight:600;
  box-shadow:0 8px 22px rgba(var(--jo-magenta-rgb),.32);
}
.btn-brand:hover{ color:#fff; filter:brightness(1.06); transform:translateY(-1px); }
.btn-outline-brand{
  --bs-btn-color:var(--jo-magenta); --bs-btn-border-color:var(--jo-magenta);
  --bs-btn-hover-bg:var(--jo-magenta); --bs-btn-hover-border-color:var(--jo-magenta); --bs-btn-hover-color:#fff;
  --bs-btn-active-bg:var(--jo-magenta); --bs-btn-active-border-color:var(--jo-magenta);
}
.link-brand{ color:var(--jo-magenta); text-decoration:none; }
.link-brand:hover{ color:var(--jo-magenta-bright); }

/* ---------- Botón flotante de cambio de tema ---------- */
.jo-theme-toggle{
  position:fixed; z-index:1080; bottom:18px; left:18px;
  width:42px; height:42px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bs-secondary-bg); color:var(--bs-body-color);
  border:1px solid var(--bs-border-color);
  box-shadow:0 6px 20px rgba(0,0,0,.18); cursor:pointer;
  transition:transform .15s ease, background .2s ease;
}
.jo-theme-toggle:hover{ transform:translateY(-2px); }
.jo-theme-toggle svg{ width:20px; height:20px; }
.jo-theme-toggle .jo-ic-moon{ display:none; }
.jo-theme-toggle .jo-ic-sun{ display:block; }
[data-bs-theme="dark"] .jo-theme-toggle .jo-ic-moon{ display:block; }
[data-bs-theme="dark"] .jo-theme-toggle .jo-ic-sun{ display:none; }
@media print{ .jo-theme-toggle{ display:none !important; } }

/* ---------- Residuos de modo oscuro (navbars/utilidades heredadas) ---------- */
/* navbar-light quedó con texto oscuro; en dark lo forzamos a claro. */
[data-bs-theme="dark"] .navbar-light,
[data-bs-theme="dark"] .navbar.navbar-light{
  --bs-navbar-color:rgba(231,230,242,.72);
  --bs-navbar-hover-color:#fff;
  --bs-navbar-active-color:#fff;
  --bs-navbar-brand-color:#fff;
  --bs-navbar-brand-hover-color:#fff;
  --bs-navbar-toggler-border-color:rgba(255,255,255,.15);
}
[data-bs-theme="dark"] .navbar-light .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Utilidades de superficie clara que no siguen el tema por sí solas */
[data-bs-theme="dark"] .bg-light{ background-color:var(--bs-tertiary-bg) !important; }
[data-bs-theme="dark"] .text-muted{ color:var(--bs-secondary-color) !important; }
[data-bs-theme="dark"] .btn-light{
  --bs-btn-bg:#1b1e46; --bs-btn-border-color:rgba(255,255,255,.14); --bs-btn-color:#E7E6F2;
  --bs-btn-hover-bg:#232655; --bs-btn-hover-color:#fff; --bs-btn-hover-border-color:rgba(255,255,255,.2);
  --bs-btn-active-bg:#232655; --bs-btn-active-border-color:rgba(255,255,255,.2);
}

/* ---------- CRÍTICO: anular global.css en modo oscuro ----------
   global.css fuerza `color:#E91388 !important` en TODO el texto de páginas
   no-home (body, h1-h6, p, span, div, label, a). En oscuro eso = texto navy
   invisible. Estas reglas tienen +1 de especificidad (prefijo [data-bs-theme])
   y cargan después, así que ganan. */
[data-bs-theme="dark"] body:not(.home-page){ color:var(--bs-body-color) !important; }
[data-bs-theme="dark"] body:not(.home-page) h1,
[data-bs-theme="dark"] body:not(.home-page) h2,
[data-bs-theme="dark"] body:not(.home-page) h3,
[data-bs-theme="dark"] body:not(.home-page) h4,
[data-bs-theme="dark"] body:not(.home-page) h5,
[data-bs-theme="dark"] body:not(.home-page) h6{ color:var(--jo-ink-strong) !important; }
[data-bs-theme="dark"] body:not(.home-page) p,
[data-bs-theme="dark"] body:not(.home-page) span,
[data-bs-theme="dark"] body:not(.home-page) div,
[data-bs-theme="dark"] body:not(.home-page) label,
[data-bs-theme="dark"] body:not(.home-page) a{ color:var(--bs-body-color) !important; }
[data-bs-theme="dark"] body:not(.home-page) .text-muted{ color:var(--bs-secondary-color) !important; }

/* Logo del navbar: navy en claro, blanco (con + magenta) en oscuro */
.gnb-logo .gnb-logo-dark{ display:none; }
[data-bs-theme="dark"] .gnb-logo .gnb-logo-light{ display:none; }
[data-bs-theme="dark"] .gnb-logo .gnb-logo-dark{ display:block; }

/* Botón de tema en el navbar: sol en claro, luna en oscuro */
.gnb-ic-moon{ display:none; }
[data-bs-theme="dark"] .gnb-ic-sun{ display:none; }
[data-bs-theme="dark"] .gnb-ic-moon{ display:block; }
/* Respetar acentos e íconos con color propio inline (magenta/oro/estados) */
[data-bs-theme="dark"] body:not(.home-page) [style*="color:#E91388"],
[data-bs-theme="dark"] body:not(.home-page) [style*="color: #E91388"],
[data-bs-theme="dark"] body:not(.home-page) [style*="color:#f59e0b"],
[data-bs-theme="dark"] body:not(.home-page) [style*="color: #f59e0b"]{ color:inherit; }

/* ---------- FORZAR CARDS AZUL en oscuro (sidebar y cualquier .card) ---------- */
[data-bs-theme="dark"] .card{ background-color:#222226 !important; }
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer{ background-color:#222226 !important; border-color:rgba(255,255,255,.10) !important; }
[data-bs-theme="dark"] .card.bg-white,
[data-bs-theme="dark"] .card .bg-white{ background-color:#222226 !important; }

/* ---------- Modo CLARO: letras negras (anular global.css navy) ---------- */
[data-bs-theme="light"]{ --jo-ink-strong:#1A1A1A; }
[data-bs-theme="light"] body:not(.home-page){ color:#1A1A1A !important; }
[data-bs-theme="light"] body:not(.home-page) h1,
[data-bs-theme="light"] body:not(.home-page) h2,
[data-bs-theme="light"] body:not(.home-page) h3,
[data-bs-theme="light"] body:not(.home-page) h4,
[data-bs-theme="light"] body:not(.home-page) h5,
[data-bs-theme="light"] body:not(.home-page) h6,
[data-bs-theme="light"] body:not(.home-page) p,
[data-bs-theme="light"] body:not(.home-page) span,
[data-bs-theme="light"] body:not(.home-page) div,
[data-bs-theme="light"] body:not(.home-page) label,
[data-bs-theme="light"] body:not(.home-page) li{ color:#1A1A1A !important; }

/* ---------- Barras y anillos de progreso en ROSA (todo el proyecto) ---------- */
.progress-bar{ background-color: var(--jo-magenta); }
.progress-bar[style*="#E91388"],
.progress-bar[style*="#E91388"],
.progress-bar[style*="#0B0E3D"],
.progress-bar[style*="#0b0e3d"]{ background-color: var(--jo-magenta) !important; }
/* anillos/círculos de progreso navy → rosa (stroke por atributo o inline) */
circle[stroke="#E91388"],
circle[style*="#E91388"],
circle[style*="#E91388"]{ stroke: var(--jo-magenta) !important; }