/* PUBLIC THEME OVERRIDE — Jóvenes con Talento
   Archivo de ajustes visuales públicos.
   No reemplaza clean.css.
*/

:root {
  --jct-azul: #163B78;
  --jct-azul-vivo: #1D70B8;
  --jct-magenta: #A2195B;
  --jct-texto: #334155;
  --jct-muted: #64748B;
  --jct-fondo: #F4F7FB;
}

/* Tipografía general pública */
html,
body {
  min-height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--jct-texto);
}

/* Footer abajo cuando hay poco contenido */
main.wrap.page {
  flex: 1 0 auto;
}

.site-footer {
  margin-top: auto;
}

/* Barra de navegación */
.site-header .main-nav {
  background: linear-gradient(135deg, #0f172a 0%, var(--jct-azul) 52%, var(--jct-magenta) 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
}

.site-header .main-nav .nav-link,
.site-header .main-nav .dropdown-toggle {
  color: rgba(255,255,255,.95);
  font-weight: 800;
  border-radius: 999px;
}

.site-header .main-nav .nav-link:hover,
.site-header .main-nav .dropdown-toggle:hover {
  color: #fff;
  background: rgba(255,255,255,.14);
}

.site-header .main-nav .nav-link--right {
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.24);
}

.site-header .main-nav .nav-link--right:hover {
  background: #fff;
  color: var(--jct-azul);
}

/* Dropdown oferta académica */
#menu-oferta-academica > .dropdown-menu {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(15,23,42,.20);
  padding: 8px;
}

#menu-oferta-academica .dropdown-item {
  border-radius: 12px;
  font-weight: 800;
  color: var(--jct-texto);
}

#menu-oferta-academica .dropdown-item:hover {
  background: rgba(22,59,120,.08);
  color: var(--jct-azul);
}

/* =========================================================
   PUBLIC UI — Fuentes institucionales Branding + Montserrat
   ========================================================= */

@font-face {
  font-family: "Branding";
  src: url("/static/public/fonts/branding/Branding-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Branding";
  src: url("/static/public/fonts/branding/Branding-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat Local";
  src: url("/static/public/fonts/montserrat/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat Local";
  src: url("/static/public/fonts/montserrat/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat Local";
  src: url("/static/public/fonts/montserrat/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-branding-bold: "Branding", "Montserrat Local", system-ui, sans-serif;
  --font-branding-semibold: "Branding", "Montserrat Local", system-ui, sans-serif;
  --font-body-public: "Montserrat Local", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --public-heading-soft: #273244;
  --public-text-soft: #3B4658;
}

body,
.public-main,
.public-main p,
.public-main li,
.public-main td,
.public-main input,
.public-main select,
.public-main textarea,
.public-main button {
  font-family: var(--font-body-public) !important;
  font-weight: 500 !important;
  color: var(--public-text-soft);
}

.public-main h1,
.public-main h2,
.public-main h3,
.home-hero h1,
.home-section-title,
.home-card h3 {
  font-family: var(--font-branding-bold) !important;
  font-weight: 700 !important;
  color: var(--public-heading-soft) !important;
}

.home-hero p,
.home-section-subtitle,
.public-main .lead {
  font-family: var(--font-branding-semibold) !important;
  font-weight: 600 !important;
}

.home-hero h1,
.home-hero p,
.home-hero .home-eyebrow {
  color: #fff !important;
}

.main-nav .nav-link,
.main-nav .dropdown-toggle {
  font-family: var(--font-branding-semibold) !important;
  font-weight: 600 !important;
}

/* =========================================================
   PUBLIC UI — Override final anti Century Gothic
   Debe ir al final del archivo.
   ========================================================= */

/* Base general: Montserrat Medium */
html body,
html body .public-main,
html body .public-main *,
html body .site-header,
html body .site-header *,
html body .site-footer,
html body .site-footer * {
  font-family: "Montserrat Local", "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 500;
}

/* Títulos: Branding Bold */
html body .public-main h1,
html body .public-main h2,
html body .public-main h3,
html body .home-hero h1,
html body .home-section-title,
html body .home-card h3 {
  font-family: "Branding", "Montserrat Local", system-ui, sans-serif !important;
  font-weight: 700 !important;
}

/* Subtítulos: Branding Semibold */
html body .home-hero p,
html body .home-section-subtitle,
html body .public-main .lead {
  font-family: "Branding", "Montserrat Local", system-ui, sans-serif !important;
  font-weight: 600 !important;
}

/* Menú público */
html body .main-nav .nav-link,
html body .main-nav .dropdown-toggle {
  font-family: "Branding", "Montserrat Local", system-ui, sans-serif !important;
  font-weight: 600 !important;
}

/* =========================================================
   PUBLIC UI — Header polish mínimo
   ========================================================= */

/* Centrar mejor bloque de logos sin cambiar imágenes */
.site-header .brand-row {
  justify-content: center !important;
  gap: clamp(2.5rem, 12vw, 9rem) !important;
}

.site-header .brand-left,
.site-header .brand-right {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Menú institucional: oscuro, sobrio, sin saturar */
.site-header .main-nav,
.main-nav {
  background: linear-gradient(135deg, #0f172a 0%, #163B78 58%, #5B2C83 100%) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .16) !important;
}

.site-header .main-nav .nav-link,
.site-header .main-nav .dropdown-toggle,
.main-nav .nav-link,
.main-nav .dropdown-toggle {
  color: rgba(255,255,255,.96) !important;
  font-family: "Branding", "Montserrat Local", system-ui, sans-serif !important;
  font-weight: 600 !important;
}

.site-header .main-nav .nav-link:hover,
.site-header .main-nav .dropdown-toggle:hover,
.main-nav .nav-link:hover,
.main-nav .dropdown-toggle:hover {
  background: rgba(255,255,255,.13) !important;
  color: #fff !important;
}

.site-header .main-nav .nav-link--right,
.main-nav .nav-link--right {
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff !important;
  border-radius: 999px !important;
}

@media (max-width: 820px) {
  .site-header .brand-row {
    gap: 1rem !important;
  }
}

/* =========================================================
   PUBLIC UI — Unificación de heroes públicos
   Registro Talento + Oferta Académica
   ========================================================= */

.registro-hero,
.oferta-hero,
.ems-hero {
  background: linear-gradient(135deg, #0f172a 0%, #163B78 28%, #A2195B 68%, #E31B23 100%) !important;
  color: #fff !important;
  border-radius: 24px !important;
  padding: clamp(1.25rem, 2.6vw, 2.15rem) !important;
  margin-bottom: 1.5rem !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .18) !important;
  overflow: hidden;
  position: relative;
}

.registro-hero::after,
.oferta-hero::after,
.ems-hero::after {
  content: "";
  position: absolute;
  right: -110px;
  top: -125px;
  width: 310px;
  height: 310px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  pointer-events: none;
}

.registro-hero > *,
.oferta-hero > *,
.ems-hero > * {
  position: relative;
  z-index: 1;
}

.registro-hero h1,
.oferta-hero h1,
.ems-hero h1 {
  font-family: "Branding", "Montserrat Local", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.55rem, 2.7vw, 2.35rem) !important;
  line-height: 1.08 !important;
  color: #fff !important;
  margin-bottom: .55rem !important;
}

.registro-hero p,
.oferta-hero p,
.ems-hero p {
  font-family: "Branding", "Montserrat Local", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(.92rem, 1.2vw, 1.02rem) !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, .86) !important;
  margin-bottom: 0 !important;
}

.registro-chip,
.registro-chip-light {
  font-family: "Branding", "Montserrat Local", system-ui, sans-serif !important;
  font-weight: 600 !important;
}

/* Más compacto en móvil */
@media (max-width: 768px) {
  .registro-hero,
  .oferta-hero,
  .ems-hero {
    padding: 1.25rem !important;
    border-radius: 20px !important;
  }
}

/* =========================================================
   RESP-1B — Responsive público controlado
   ========================================================= */

html,
body {
  overflow-x: hidden;
}

/* Contenedores */
.wrap,
.container,
.page,
main.page {
  max-width: 100%;
}

/* Imágenes */
img {
  max-width: 100%;
  height: auto;
}

/* =========================================================
   HEADER / LOGOS
   ========================================================= */

@media (max-width: 900px) {

  .site-header .brand-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: .5rem 1rem !important;
  }

  .site-header .brand-left,
  .site-header .brand-right {
    justify-content: center !important;
    width: 100%;
  }

  .site-header .brand-left img {
    height: 52px !important;
  }

  .site-header .brand-right img {
    height: 34px !important;
  }

  .main-nav {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
  }

  .main-nav .nav-link,
  .main-nav .dropdown-toggle {
    font-size: .92rem !important;
    padding: .8rem .9rem !important;
  }
}

/* =========================================================
   HEROES PÚBLICOS
   ========================================================= */

@media (max-width: 900px) {

  .home-hero,
  .talentos-hero,
  .empresas-hero,
  .empresa-detail-hero,
  .registro-hero,
  .oferta-hero,
  .ems-hero {
    padding: 1.3rem !important;
    border-radius: 22px !important;
  }

  .home-hero h1,
  .talentos-hero h1,
  .empresas-hero h1,
  .empresa-detail-hero h1,
  .registro-hero h1,
  .oferta-hero h1,
  .ems-hero h1 {
    font-size: clamp(1.45rem, 6vw, 2rem) !important;
    line-height: 1.08 !important;
  }

  .home-hero p,
  .talentos-hero p,
  .empresas-hero p,
  .empresa-detail-hero p,
  .registro-hero p,
  .oferta-hero p,
  .ems-hero p {
    font-size: .94rem !important;
    line-height: 1.55 !important;
  }
}

/* =========================================================
   CARDS
   ========================================================= */

@media (max-width: 900px) {

  .home-grid,
  .talentos-grid,
  .empresas-grid,
  .home-kpis,
  .talentos-flow-grid,
  .empresa-detail-grid {
    grid-template-columns: 1fr !important;
  }

  .home-card,
  .talentos-card,
  .empresa-card,
  .empresa-detail-card,
  .talentos-flow,
  .home-kpi {
    border-radius: 20px !important;
    padding: 1rem !important;
  }
}

/* =========================================================
   FORMULARIOS
   ========================================================= */

@media (max-width: 900px) {

  form,
  .card,
  .table-responsive {
    min-width: 0 !important;
    width: 100% !important;
  }

  input,
  select,
  textarea,
  button {
    width: 100%;
    max-width: 100%;
    font-size: 16px !important; /* evita zoom iOS */
  }

  .btn,
  button {
    min-height: 46px;
  }

  .jct-login-card {
    padding: 1.2rem !important;
  }

  .jct-login-left,
  .jct-login-right {
    width: 100%;
  }
}

/* =========================================================
   TABLAS
   ========================================================= */

@media (max-width: 900px) {

  table {
    display: block;
    overflow-x: auto;
    width: 100%;
    white-space: nowrap;
  }

  th,
  td {
    font-size: .9rem !important;
  }
}

/* =========================================================
   FOOTER
   ========================================================= */

@media (max-width: 900px) {

  .site-footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    text-align: center;
  }

  .site-footer img {
    margin: 0 auto;
  }
}