/* ===========================================================
   JN ACEROS — Portal de Capacitación QHSE
   Estilo "Soft Corporate": fondos claros, navy de acento, lima solo logros
   =========================================================== */

/* ---------- Tipografía Gotham ---------- */
@font-face{font-family:'Gotham';src:url('/wp-content/uploads/brand/fonts/Gotham-Book.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Gotham';src:url('/wp-content/uploads/brand/fonts/Gotham-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Gotham';src:url('/wp-content/uploads/brand/fonts/Gotham-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Gotham';src:url('/wp-content/uploads/brand/fonts/Gotham-Black.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap;}

:root{
  --navy-50:#EAF1F8; --navy-100:#D7E4F1; --navy-200:#C4D6E8; --navy-300:#8FAFCF;
  --navy-400:#5683B0; --navy-500:#003770; --navy-600:#2A5C8F; --navy-700:#073461;
  --navy-800:#002F5C; --navy-900:#002855;
  --lime-500:#D6DF20; --lime-tint:#F7F9D8;
  --page-bg:#F7F9FC; --surface:#FFFFFF; --surface-alt:#F1F5FA;
  --border:#E2E8F0; --border-strong:#C4D6E8;
  --text-strong:#1A2A3F; --text-body:#33445C; --text-muted:#51627A;
  --font-sans:'Gotham','Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(0,40,85,.05);
  --shadow-sm:0 1px 3px rgba(0,40,85,.08),0 1px 2px rgba(0,40,85,.04);
  --shadow-md:0 4px 12px rgba(0,40,85,.08);
  --shadow-lg:0 10px 24px rgba(0,40,85,.10);
  --shadow-focus:0 0 0 3px rgba(0,55,112,.25);
}

/* ---------- Base ---------- */
body,.wp-site-blocks{background:var(--page-bg);color:var(--text-body);
  font-family:var(--font-sans);font-size:1.0625rem;line-height:1.6;}
p,li,span,a,div,input,button,select,textarea{font-family:var(--font-sans);}
h1,h2,h3,h4,h5,h6{font-family:var(--font-sans) !important;color:var(--navy-900);}
h1{font-weight:900 !important;line-height:1.15;}
h2{font-weight:700 !important;line-height:1.2;}
h3{font-weight:500 !important;line-height:1.3;color:var(--navy-800);}

/* ---------- Header: BLANCO con detalle navy ---------- */
header.wp-block-template-part{
  background:var(--surface) !important;
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-xs);
}
header.wp-block-template-part .wp-block-navigation a,
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content{
  color:var(--text-strong) !important;font-weight:500;
}
header.wp-block-template-part .wp-block-navigation a:hover{color:var(--navy-500) !important;}
/* Ítem activo: subrayado lima */
header.wp-block-template-part .current-menu-item a,
header.wp-block-template-part [aria-current] {
  color:var(--navy-500) !important;
  box-shadow:inset 0 -3px 0 var(--lime-500);
}
/* Logo de JN Aceros en el header (reemplaza el texto del título) */
header.wp-block-template-part .wp-block-site-title{font-size:0 !important;line-height:0 !important;}
header.wp-block-template-part .wp-block-site-title a{
  display:inline-block;box-sizing:border-box;width:180px;height:60px;
  background:url('/wp-content/uploads/brand/logo-jn-aceros.png') no-repeat left center / contain;
}

/* ---------- Botones: PRIMARIO / SECUNDARIO ---------- */
.wp-block-button__link,.wp-element-button,
.llms-button-action,.llms-button-primary,
.button,a.button,input[type="submit"],button[type="submit"]{
  background-color:var(--navy-500) !important;color:#fff !important;
  border:2px solid var(--navy-500) !important;border-radius:var(--radius-sm) !important;
  font-weight:700 !important;min-height:48px;padding:12px 28px !important;
  letter-spacing:.2px;transition:all .2s ease;line-height:1.2;
}
.wp-block-button__link:hover,.wp-element-button:hover,
.llms-button-action:hover,.button:hover,input[type="submit"]:hover,button[type="submit"]:hover{
  background-color:var(--navy-700) !important;border-color:var(--navy-700) !important;
}
:focus-visible{outline:0;box-shadow:var(--shadow-focus);}
/* SECUNDARIO (estilo outline) */
.wp-block-button.is-style-outline .wp-block-button__link,
.llms-button-secondary{
  background:transparent !important;color:var(--navy-500) !important;
  border:2px solid var(--navy-500) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.llms-button-secondary:hover{background:var(--navy-50) !important;color:var(--navy-700) !important;}

/* ---------- Tarjetas de cursos (LifterLMS) ---------- */
.llms-loop-item .llms-loop-item-content{
  background:var(--surface);border:1px solid var(--border);
  border-top:4px solid var(--navy-500);border-radius:var(--radius-md);
  overflow:hidden;box-shadow:var(--shadow-md);
  transition:transform .15s ease,box-shadow .15s ease;
}
.llms-loop-item .llms-loop-item-content:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.llms-loop-item .llms-loop-title,.llms-loop-item .llms-loop-title a{color:var(--navy-800) !important;}
.llms-loop-item .llms-action-button,.llms-loop-item .llms-button-action{width:100%;}

/* Barras de progreso: navy, lima al completar */
.llms-progress .llms-progress-bar,.llms-progress-bar{background:var(--navy-100) !important;border-radius:var(--radius-pill);height:10px;}
.llms-progress .progress-bar-complete,.progress-bar-complete{background:var(--navy-500) !important;border-radius:var(--radius-pill);}
.llms-progress.is-complete .progress-bar-complete{background:var(--lime-500) !important;}
/* Badges de estado completado */
.llms-status.llms-pass,.llms-donut.passing{color:var(--navy-900) !important;}

/* Marcadores de lección */
.llms-lesson-link{border-left:3px solid var(--navy-200);border-radius:var(--radius-sm);}
.llms-lesson-link.is-complete{border-left-color:var(--lime-500);}

/* ---------- Secciones / contenido ---------- */
.wp-block-group.has-background{border-radius:var(--radius-lg);}
.entry-content table th{background:var(--navy-500) !important;color:#fff !important;}
.entry-content table tr:nth-child(even){background:var(--surface-alt);}

/* ---------- Footer: navy tinte claro (no pesado) ---------- */
footer.wp-block-template-part{
  background:var(--navy-50) !important;border-top:1px solid var(--border);
}
footer.wp-block-template-part,footer.wp-block-template-part p,
footer.wp-block-template-part h1,footer.wp-block-template-part h2,footer.wp-block-template-part h3{
  color:var(--text-muted) !important;
}
footer.wp-block-template-part a{color:var(--navy-700) !important;}
footer.wp-block-template-part a:hover{color:var(--navy-500) !important;}
footer.wp-block-template-part h1,footer.wp-block-template-part h2,footer.wp-block-template-part h3{color:var(--navy-900) !important;}

/* ===========================================================
   PANTALLA DE LOGIN — clara, tarjeta blanca, botón navy
   =========================================================== */
body.login{
  background:var(--page-bg) !important;
  background:linear-gradient(160deg,#FFFFFF 0%,var(--navy-50) 100%) !important;
}
.login h1 a{
  background-image:url('/wp-content/uploads/brand/logo-jn-aceros.png') !important;
  background-size:contain !important;background-position:center !important;
  width:280px !important;height:110px !important;
}
.login form{
  background:var(--surface) !important;border:1px solid var(--border) !important;
  border-top:4px solid var(--navy-500) !important;border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow-lg) !important;padding:32px 28px !important;
}
.login label{color:var(--text-strong) !important;font-weight:500;}
.login input[type=text],.login input[type=password]{
  border:1px solid var(--border) !important;border-radius:var(--radius-sm) !important;
  min-height:48px;font-size:1.0625rem;
}
.login input:focus{border-color:var(--navy-500) !important;box-shadow:var(--shadow-focus) !important;}
.login .button-primary{
  background:var(--navy-500) !important;border-color:var(--navy-500) !important;color:#fff !important;
  text-shadow:none !important;box-shadow:none !important;font-weight:700 !important;
  border-radius:var(--radius-sm) !important;min-height:48px;width:100%;float:none;font-size:1.0625rem;
}
.login .button-primary:hover{background:var(--navy-700) !important;border-color:var(--navy-700) !important;}
.login #nav a,.login #backtoblog a{color:var(--navy-700) !important;}
.login #nav a:hover,.login #backtoblog a:hover{color:var(--navy-500) !important;}
.login #login_error{border-left-color:var(--navy-500) !important;}