/* =============================================================
 * 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{
  /* Design system de /post-job (System B) — fuente de verdad global */
  --navy:#000B4E;
  --mg-100:#FBE2EE; --mg-200:#F7BFDA; --mg-300:#F08FBD; --mg-400:#E85D9F;
  --mg-500:#D63384; --mg-600:#B61272; --mg-700:#941C59; --mg-800:#6E1543; --mg-900:#4A0E2D;
  /* Superficies (claro) */
  --bg:#FAFAFA; --layer:#FFFFFF; --layer2:#F4F4F5; --field:#FFFFFF; --field-hover:#F4F4F5;
  --bd:#E4E4E7; --bd-strong:#D4D4D8;
  /* Texto (claro) */
  --t1:#18181B; --t2:#71717A; --t3:#A1A1AA; --inverse:#18181B; --on-inverse:#FFFFFF;
  /* Acento */
  --accent:var(--mg-600); --accent-hover:var(--mg-700); --accent-soft:#FDF2F7; --accent-text:var(--mg-800);
  /* Estados */
  --ok:#128550; --ok-bg:#E7F6EE; --warn:#96721C; --warn-bg:#FDF3DC; --err:#D14343; --err-bg:#FCEBEB;
  --navy-soft:#E4E7F7;
  /* Forma / motion */
  --r:8px; --rc:12px;
  --sh-sm:0 1px 2px rgba(24,24,27,.05),0 1px 1px rgba(24,24,27,.03);
  --sh-md:0 4px 10px rgba(24,24,27,.06),0 1px 3px rgba(24,24,27,.04);
  --sh-lg:0 16px 40px rgba(24,24,27,.10),0 4px 10px rgba(24,24,27,.05);
  --sh-glow:0 0 0 1px color-mix(in srgb,var(--mg-600) 12%,transparent),0 8px 24px color-mix(in srgb,var(--mg-600) 14%,transparent);
  --ease:cubic-bezier(.16,1,.3,1);

  /* Tokens de marca heredados (--jo-*) repuntados a la paleta nueva */
  --jo-magenta:#D63384;
  --jo-magenta-bright:#E85D9F;
  --jo-magenta-rgb:214,51,132;
  --jo-gold:#D9B67C;
  --jo-gold-bright:#EBCE9C;
  --jo-navy:#000B4E;
  --jo-navy-rgb:0,11,78;
  --jo-navy-deep:#00072E;
  --jo-paper:#FAFAFA;
  --jo-lav:#5B5D91;

  --jo-font-display:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --jo-font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --jo-font-brand:'Fredoka', 'Inter', system-ui, sans-serif;
  --jo-font-mono:ui-monospace, SFMono-Regular, Menlo, monospace;

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

  /* Primario/acento del sitio = magenta de marca (System B) */
  --bs-primary:#D63384;
  --bs-primary-rgb:214,51,132;

  /* Enlaces con el acento magenta */
  --bs-link-color:#B61272;
  --bs-link-color-rgb:182,18,114;
  --bs-link-hover-color:#941C59;
  --bs-link-hover-color-rgb:148,28,89;

  --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:#FAFAFA;      /* --bg */
  --bs-body-color:#18181B;   /* --t1 */
  --bs-emphasis-color:#000B4E;
  --bs-emphasis-color-rgb:0,11,78;
  --bs-secondary-bg:#FFFFFF; /* --layer (cards) */
  --bs-tertiary-bg:#F4F4F5;  /* --layer2 */
  --bs-secondary-color:#71717A; /* --t2 */
  --bs-tertiary-color:#A1A1AA;  /* --t3 */
  --bs-border-color:#E4E4E7;    /* --bd */
  --bs-border-color-translucent:rgba(24,24,27,.10);
  --bs-heading-color:#000B4E;   /* navy */
}

/* ---------- TEMA OSCURO ---------- */
[data-bs-theme="dark"], [data-theme="dark"]{
  /* Override de tokens System B a valores oscuros */
  --bg:#131316; --layer:#1C1C21; --layer2:#26262C; --field:#26262C; --field-hover:#2E2E35;
  --bd:#2E2E35; --bd-strong:#3D3D46;
  --t1:#F4F4F5; --t2:#A1A1AA; --t3:#71717A; --inverse:#F4F4F5; --on-inverse:#18181B;
  --accent:var(--mg-400); --accent-hover:var(--mg-300); --accent-soft:#3A1226; --accent-text:var(--mg-200);
  --ok:#4ADE96; --ok-bg:#0E2B1E; --warn:#E8C468; --warn-bg:#2E2410; --err:#F08585; --err-bg:#331414;
  --navy-soft:#1A2260;

  --bs-body-bg:#131316;      /* --bg */
  --bs-body-color:#F4F4F5;   /* --t1 */
  --bs-emphasis-color:#FFFFFF;
  --bs-emphasis-color-rgb:255,255,255;
  --bs-secondary-bg:#1C1C21; /* --layer (cards) */
  --bs-tertiary-bg:#26262C;  /* --layer2 */
  --bs-secondary-color:#A1A1AA; /* --t2 */
  --bs-tertiary-color:#71717A;  /* --t3 */
  --bs-border-color:#2E2E35;    /* --bd */
  --bs-border-color-translucent:rgba(255,255,255,.10);
  --bs-heading-color:#F4F4F5;

  /* Componentes comunes */
  --bs-card-bg:#1C1C21;
  --bs-card-border-color:#2E2E35;
  --bs-card-cap-bg:rgba(255,255,255,.03);
  --bs-list-group-bg:#1C1C21;
  --bs-modal-bg:#1C1C21;
  --bs-dropdown-bg:#1C1C21;
  --bs-dropdown-link-color:#F4F4F5;
  --bs-dropdown-link-hover-bg:rgba(255,255,255,.06);
  --bs-dropdown-border-color:#2E2E35;
  --bs-offcanvas-bg:#1C1C21;
  --bs-code-color:#F08FBD;
  --bs-link-color:#E85D9F;
  --bs-link-color-rgb:232,93,159;
  --bs-link-hover-color:#F08FBD;
  --bs-link-hover-color-rgb:240,143,189;

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

  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:#F4F4F5 !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:#26262C;
  border-color:rgba(255,255,255,.14);
  color:#F4F4F5;
}
[data-bs-theme="dark"] .form-control::placeholder{ color:rgba(231,230,242,.45); }
[data-bs-theme="dark"] .table{ --bs-table-color:#F4F4F5; --bs-table-bg:transparent; --bs-table-border-color:rgba(255,255,255,.12); }
[data-bs-theme="dark"] .bg-white{ background-color:#1C1C21 !important; }
[data-bs-theme="dark"] .text-dark{ color:#F4F4F5 !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{
  font-family:var(--jo-font-display);
  letter-spacing:-.015em;
}
/* Marca / logo en Fredoka (como /post-job) */
.navbar-brand,.jo-brand,.brand-logo{
  font-family:var(--jo-font-brand);
  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:#26262C; --bs-btn-border-color:rgba(255,255,255,.14); --bs-btn-color:#F4F4F5;
  --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:#1C1C21 !important; }
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer{ background-color:#1C1C21 !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:#1C1C21 !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; }

/* ---------- El texto dentro de botones hereda el color del botón ----------
   El override global de color de texto (span/div/etc con !important) pisaba el
   texto de botones de color (magenta con label en <span> salía oscuro). Aquí
   forzamos que el contenido de .btn/.btn-* herede el color del propio botón
   (blanco en sólidos, acento en outline), en ambos temas. */
body:not(.home-page) .btn span,
body:not(.home-page) .btn i,
body:not(.home-page) .btn strong,
body:not(.home-page) .btn small,
body:not(.home-page) [class*="btn-"] span,
body:not(.home-page) [class*="btn-"] i{ color: inherit !important; }