/* =============================================================
 * 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;

  /* Primario del sitio = navy corporativo (compatibilidad con la identidad).
     El magenta es el ACENTO de marca, como en la landing. */
  --bs-primary:#0B0E3D;
  --bs-primary-rgb:11,14,61;

  /* 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:#0B0E3D;
  --bs-body-color:#E7E6F2;
  --bs-emphasis-color:#FFFFFF;
  --bs-emphasis-color-rgb:255,255,255;
  --bs-secondary-bg:#14173F;
  --bs-tertiary-bg:#05061E;
  --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:#14173F;
  --bs-card-border-color:rgba(255,255,255,.10);
  --bs-card-cap-bg:rgba(255,255,255,.03);
  --bs-list-group-bg:#14173F;
  --bs-modal-bg:#14173F;
  --bs-dropdown-bg:#14173F;
  --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:#0B0E3D;
  --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;

  color-scheme:dark;
}

/* 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:#0F1234;
  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:#14173F !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; } }