:root{
  --azul:#1e6fd9;
  --azul-oscuro:#14509e;
  --azul-claro:#eaf2fd;
  --verde:#2fae4e;
  --verde-oscuro:#1f8a3c;
  --verde-claro:#e6f8ec;
  --ambar:#e08a1e;
  --ambar-claro:#fdf1e0;
  --gris-texto:#2a2e34;
  --gris-suave:#667085;
  --gris-claro:#f4f5f7;
  --gris-borde-suave:#eef0f3;
  --borde:#e3e6ea;
  --rojo:#e5484d;
  --rojo-oscuro:#c93a3f;
  --rojo-claro:#fdecec;
  --sombra: 0 2px 10px rgba(20,30,50,.07);
  --sombra-md: 0 8px 24px rgba(20,30,50,.12);
  --sombra-lg: 0 16px 48px rgba(20,30,50,.22);
  --radius: 14px;
  --radius-sm: 8px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  overflow-x:clip;
  margin:0;
  font-family:'Segoe UI', Roboto, Arial, sans-serif;
  color:var(--gris-texto);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  width:100%;
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
.ef-icon{display:inline-block;vertical-align:middle;flex-shrink:0;}

.container{max-width:1180px;margin:0 auto;padding:0 20px;}

/* =====================================================
   BOTONES - interactivos en toda la app (hover + active/touch)
   ===================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1.5px solid transparent;
  border-radius:24px;
  padding:10px 20px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  white-space:nowrap;
}
.btn:active{transform:scale(.96);}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}

.btn-azul{background:var(--azul);color:#fff;}
.btn-azul:hover{background:var(--azul-oscuro);box-shadow:0 4px 14px rgba(30,111,217,.35);}
.btn-azul:active{background:var(--azul-oscuro);}

.btn-verde{background:var(--verde);color:#fff;}
.btn-verde:hover{background:var(--verde-oscuro);box-shadow:0 4px 14px rgba(47,174,78,.35);}

.btn-rojo{background:var(--rojo);color:#fff;}
.btn-rojo:hover{background:var(--rojo-oscuro);box-shadow:0 4px 14px rgba(229,72,77,.35);}

.btn-gris{background:var(--gris-claro);color:var(--gris-texto);border-color:var(--borde);}
.btn-gris:hover{background:#eaebee;border-color:#d7dade;}

.btn-outline{background:#fff;border-color:var(--azul);color:var(--azul);}
.btn-outline:hover{background:var(--azul);color:#fff;}

.btn-outline-rojo{background:#fff;border-color:var(--rojo);color:var(--rojo);}
.btn-outline-rojo:hover{background:var(--rojo);color:#fff;}

.btn-sm{padding:7px 14px;font-size:12.5px;border-radius:18px;}
.btn-block{width:100%;}

/* Botón sólo-ícono circular, usado en avatar/power/close */
.btn-icon-circle{
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--gris-claro);color:var(--gris-texto);
  border:1.5px solid var(--borde);
  transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn-icon-circle:hover{background:var(--rojo-claro);border-color:var(--rojo);color:var(--rojo-oscuro);}
.btn-icon-circle:active{transform:scale(.92);}

.avatar-admin{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--azul),var(--azul-oscuro));
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;
  flex-shrink:0;
}

/* =====================================================
   HEADER PÚBLICO — sticky, 3 zonas en desktop, compacto+hamburguesa en móvil
   ===================================================== */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 22px;
  border-bottom:1px solid var(--gris-borde-suave);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(6px);
  position:sticky;
  top:0;
  z-index:999;
  width:100%;
  transition:box-shadow .2s ease;
}
.site-header.scrolled{box-shadow:0 4px 16px rgba(20,30,50,.12);}
.site-header .brand{
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:800;
  color:var(--azul-oscuro);
  font-size:15px;
  letter-spacing:.01em;
  flex-shrink:0;
}
.site-header .brand .brand-icon{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--azul),var(--verde));
  color:#fff;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.site-header .nav-center{
  display:flex;align-items:center;gap:8px;
  flex:1;justify-content:flex-end;
}
.site-header .nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.nav-link{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:22px;
  font-size:13.5px;font-weight:600;color:var(--gris-texto);
  border:1.5px solid transparent;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.nav-link:hover{background:var(--gris-claro);}
.nav-link.active{color:var(--azul);}

.btn-hannmat{
  display:inline-flex;align-items:center;gap:7px;
  background:linear-gradient(135deg, var(--banner-color, var(--azul)), var(--banner-color-2, var(--azul-oscuro)));
  color:var(--banner-color-texto, #fff);font-weight:700;font-size:13.5px;
  padding:10px 18px;border-radius:22px;border:none;
  transition:transform .12s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn-hannmat:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(30,111,217,.35);}
.btn-hannmat:active{transform:translateY(0) scale(.97);}
.btn-hannmat.btn-hannmat-compact{padding:8px 12px;font-size:12.5px;gap:5px;display:none;}

/* Botón flotante para abrir a Hannmat (esquina inferior derecha). Usa el
   mismo color dinámico del banner; si no hay uno válido, cae al azul actual. */
.chat-fab{
  position:fixed;
  right:18px;
  bottom:18px;
  width:56px;height:56px;
  border-radius:50%;
  border:none;
  background:linear-gradient(135deg, var(--banner-color, var(--azul)), var(--banner-color-2, var(--azul-oscuro)));
  color:var(--banner-color-texto, #fff);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(20,30,50,.28);
  z-index:900;
  transition:transform .15s ease, box-shadow .15s ease;
}
.chat-fab:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(20,30,50,.32);}
.chat-fab:active{transform:translateY(0) scale(.95);}
.chat-fab.oculto{display:none;}

/* Burbuja de recordatorio junto al botón flotante ("¿Sigues interesado en X?") */
.chat-fab-hint{
  position:fixed;
  right:18px;
  bottom:82px;
  max-width:min(78vw, 280px);
  background:#fff;
  border:1.5px solid var(--gris-borde-suave);
  border-radius:16px 16px 4px 16px;
  padding:12px 14px;
  box-shadow:0 10px 28px rgba(20,30,50,.18);
  font-size:13px;
  color:var(--gris-texto);
  z-index:1300;
  display:flex;
  gap:8px;
  align-items:flex-start;
  animation:ef-hint-in .25s ease;
}
.chat-fab-hint.oculto{display:none;}
.chat-fab-hint button.chat-fab-hint-cerrar{
  flex-shrink:0;border:none;background:none;color:var(--gris-suave);
  width:18px;height:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.chat-fab-hint-texto{cursor:pointer;line-height:1.35;}
.chat-fab-hint-texto strong{color:var(--banner-color, var(--azul));}
@keyframes ef-hint-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@media(max-width:480px){
  .chat-fab{width:50px;height:50px;right:14px;bottom:14px;}
  .chat-fab-hint{right:14px;bottom:72px;}
}

.mobile-menu-btn{
  display:none;
  align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;flex-shrink:0;
  background:var(--gris-claro);border:1.5px solid var(--borde);color:var(--gris-texto);
}
.mobile-menu-btn:hover{background:#eaebee;}

.nav-mobile-menu{
  display:none;
  position:absolute;
  top:100%;left:0;right:0;
  background:#fff;
  border-bottom:1px solid var(--gris-borde-suave);
  box-shadow:var(--sombra-md);
  padding:10px 16px 16px;
  flex-direction:column;
  gap:6px;
  z-index:998;
}
.nav-mobile-menu.open{display:flex;}
.nav-mobile-menu .nav-link{justify-content:flex-start;border-radius:10px;}

@media(max-width:860px){
  .site-header .nav-center{display:none;}
  .site-header .nav-right{display:none;}
  .btn-hannmat.btn-hannmat-compact{display:inline-flex;}
  .mobile-menu-btn{display:flex;}
}
@media(min-width:861px){
  .nav-mobile-menu{display:none !important;}
}
@media(max-width:480px){
  .site-header .brand span.full{display:none;}
}

/* =====================================================
   BANNER PRINCIPAL - completo, sin recortes, HD
   ===================================================== */
.banner-wrap{
  position:relative;
  width:100%;
  background:linear-gradient(135deg,#eef4ff,#f7fbff);
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  line-height:0;
}
.banner-wrap img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
}
/* Banner del panel admin: siempre a todo el ancho, con altura contenida y la imagen rellenando el
   espacio (object-fit: cover) para que nunca quede una franja blanca a un lado. */
.banner-wrap.banner-admin{width:100%;max-width:100%;}
.banner-wrap.banner-admin img{width:100%;max-width:100%;height:auto;object-fit:cover;object-position:center;}
/* En pantallas grandes se limita la altura y la imagen rellena (cover) sin dejar huecos; en celular se ve completa. */
@media(min-width:900px){
  .banner-wrap.banner-admin{max-height:300px;}
  .banner-wrap.banner-admin img{height:300px;}
}

.banner-edit-btn{
  position:absolute;
  top:16px;
  right:16px;
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;
  border:1.5px solid var(--borde);
  box-shadow:var(--sombra-md);
  border-radius:22px;
  padding:9px 16px;
  font-weight:700;
  font-size:13px;
  color:var(--azul);
  transition:background-color .15s ease, color .15s ease;
}
.banner-edit-btn:hover{background:var(--azul);color:#fff;border-color:var(--azul);}

/* =====================================================
   SECCIÓN DE AYUDA — combina con el color dominante del banner
   ===================================================== */
.hero-assist{
  --hc: var(--banner-color, #1e6fd9);
  --hc-texto: var(--banner-color-texto, #ffffff);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  background:#fff;
  border:1px solid var(--gris-borde-suave);
  border-left:6px solid var(--hc);
  border-radius:16px;
  margin:22px auto;
  padding:18px 22px;
  max-width:1180px;
}
.hero-assist-text{display:flex;align-items:center;gap:14px;min-width:0;}
.hero-assist-icon{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  background:var(--hc);color:var(--hc-texto);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sombra);
}
.hero-assist h2{margin:0 0 3px;font-size:15.5px;font-weight:800;color:var(--gris-texto);}
.hero-assist p{margin:0;font-size:13px;color:var(--gris-suave);}
.hero-assist .btn-cercania{
  background:var(--hc);color:var(--hc-texto);border-color:var(--hc);
  flex-shrink:0;
}
.hero-assist .btn-cercania:hover{filter:brightness(.9);}
.hero-assist-status{font-size:12px;color:var(--gris-suave);width:100%;}

/* =====================================================
   BUSCADOR / TOOLBAR
   ===================================================== */
.toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  max-width:1180px;
  margin:0 auto 18px;
  padding:0 20px;
}
.toolbar .buscador{flex:1;min-width:200px;}
.toolbar-actions{display:flex;gap:8px;flex-wrap:wrap;min-width:0;}
.buscador{position:relative;}
.buscador .ef-icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--gris-suave);pointer-events:none;
}
.buscador input{
  width:100%;
  padding:11px 14px 11px 40px;
  border-radius:22px;
  border:1.5px solid var(--borde);
  background:#fff;
  font-size:14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.buscador input:focus{outline:none;border-color:var(--banner-color, var(--azul));box-shadow:0 0 0 3px color-mix(in srgb, var(--banner-color-2, var(--verde)) 25%, transparent);}

/* Buscador simple dentro de modales (ej. "Reactivar vacante") */
.input-buscador{
  width:100%;
  padding:11px 14px;
  border-radius:12px;
  border:1.5px solid var(--borde);
  background:#fff;
  font-size:14px;
}
.input-buscador:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(30,111,217,.15);}

/* Lista de vacantes inactivas: scroll propio para que el buscador se quede
   fijo arriba aunque haya muchas (evita que el modal se vuelva un mazacote
   ilegible si algún día hay 50+ vacantes inactivas). */
.lista-inactivas-scroll{
  max-height:min(50vh, 420px);
  overflow-y:auto;
  padding-right:4px;
}
.lista-inactivas-scroll::-webkit-scrollbar{width:6px;}
.lista-inactivas-scroll::-webkit-scrollbar-thumb{background:var(--borde);border-radius:6px;}

@media(max-width:640px){
  .toolbar{gap:8px;}
  .toolbar-actions{width:100%;}
  .toolbar-actions .btn{flex:1;padding:8px 6px;font-size:12px;gap:5px;}
}

/* =====================================================
   GRID Y TARJETA DE VACANTE (premium)
   ===================================================== */
.vacantes-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  max-width:1180px;
  margin:0 auto;
  padding:0 16px 50px;
  width:100%;
}
@media(min-width:900px){
  .vacantes-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;padding:0 20px 50px;}
  /* El panel de admin necesita más ancho por tarjeta (3 botones + Generar
     Flyer), así que ahí usamos 3 columnas en vez de 4 aunque haya espacio. */
  #grid-admin-vacantes.vacantes-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

.vacante-card{
  min-width:0;
  border:1px solid var(--gris-borde-suave);
  border-radius:var(--radius);
  padding:14px;
  background:#fff;
  box-shadow:var(--sombra);
  display:flex;
  flex-direction:column;
  gap:8px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  overflow:hidden;
}
@media(min-width:900px){
  .vacante-card{padding:18px;gap:10px;}
}
.vacante-card:hover{transform:translateY(-4px);box-shadow:var(--sombra-md);border-color:#dbe3ee;}
.vacante-card:active{transform:translateY(-1px) scale(.99);}

.vacante-card-top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.logo-box{
  width:54px;height:54px;flex-shrink:0;
  background:#fff;border:1.5px solid var(--gris-borde-suave);border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  padding:6px;
}
.logo-box img{width:100%;height:100%;object-fit:contain;}
#grid-admin-vacantes .logo-box{width:80px;height:80px;border-radius:12px;padding:8px;}
#grid-admin-vacantes.vacantes-grid .vacante-card{padding:20px;}
.vacante-card .logo{
  width:100%;
  height:100%;
  object-fit:contain;
}
.vacante-card .logo-fallback{
  height:100%;
  width:100%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-weight:800;
  font-size:12px;
  line-height:1.15;
  word-break:break-word;
  color:var(--azul-oscuro);
  letter-spacing:.01em;
}
.badge-prestaciones{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:var(--verde-claro);
  color:var(--verde-oscuro);
  font-size:10.5px;
  font-weight:700;
  padding:4px 10px;
  border-radius:12px;
  white-space:nowrap;
  flex-shrink:0;
}
.badge-distancia{
  display:flex;
  flex:1 1 100%;            /* en su propio renglón: cabe en cualquier pantalla y se lee grande */
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  background:var(--azul-claro);
  color:var(--azul-oscuro);
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  padding:8px 14px;
  border-radius:12px;
  text-align:left;
}
.badge-distancia strong{font-size:18px;font-weight:800;letter-spacing:-.2px;}
.badge-distancia small{font-size:11.5px;font-weight:600;opacity:.85;}
/* Todas las etiquetas de kilómetros llevan el mismo color (también las de "ruta por ..."). */
.badge-distancia.via-ruta{background:var(--azul-claro);color:var(--azul-oscuro);}
.chat-km{display:inline-block;color:var(--azul-oscuro);font-size:1.08em;white-space:nowrap;}
.cercania-status{font-size:12.5px;color:var(--gris-suave);}

.vacante-card .puesto{
  font-weight:800;
  font-size:16.5px;
  line-height:1.3;
  color:var(--gris-texto);
}
.vacante-card .precio-row{
  display:flex;
  align-items:baseline;
  gap:7px;
}
.vacante-card .precio{
  color:var(--verde-oscuro);
  font-weight:800;
  font-size:19px;
}
.vacante-card .periodo{
  font-size:11px;
  font-weight:700;
  color:var(--gris-suave);
  letter-spacing:.03em;
}
.vacante-card .info-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  font-size:12.5px;
  color:var(--gris-suave);
}
.vacante-card .info-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-width:0;
  word-break:break-word;
}
.vacante-card .info-item.empresa-item{
  font-weight:600;
  color:#556;
}
.vacante-card .btn-ver-vacante{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:auto;
  background:var(--azul);
  color:#fff;
  font-weight:700;
  font-size:13.5px;
  border-radius:10px;
  padding:11px 0;
  text-align:center;
  transition:background-color .15s ease, box-shadow .15s ease;
}
.vacante-card:hover .btn-ver-vacante{background:var(--azul-oscuro);box-shadow:0 4px 14px rgba(30,111,217,.3);}

.badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:12px;
  font-size:11px;
  font-weight:700;
  width:fit-content;
}
.badge-activa{background:var(--verde-claro);color:var(--verde-oscuro);}
.badge-inactiva{background:var(--rojo-claro);color:var(--rojo);}

.sin-resultados{
  grid-column:1/-1;
  text-align:center;
  color:var(--gris-suave);
  padding:50px 0;
  font-size:14px;
}

.flash-message{
  background:var(--verde-claro);
  border:1px solid #cdeed9;
  color:var(--verde-oscuro);
  border-radius:12px;
  padding:14px 40px 14px 20px;
  margin:18px auto;
  max-width:1180px;
  font-size:13.5px;
  font-weight:600;
  position:relative;
  transition:opacity .5s ease, transform .5s ease, margin .5s ease, padding .5s ease, max-height .5s ease;
  max-height:200px;
  overflow:hidden;
}
.flash-message-cerrar{
  position:absolute;top:8px;right:10px;
  width:26px;height:26px;border:none;background:none;
  color:var(--verde-oscuro);font-size:20px;line-height:1;cursor:pointer;
  border-radius:50%;
}
.flash-message-cerrar:hover{background:rgba(0,0,0,.06);}
.flash-message.flash-oculto{
  opacity:0;
  transform:translateY(-6px);
  max-height:0;
  padding-top:0;
  padding-bottom:0;
  margin-top:0;
  margin-bottom:0;
  border-width:0;
}

/* =====================================================
   ADMIN: tarjeta de vacante
   Fila principal (Editar / Desactivar), "Generar flyer" como acción secundaria
   y "Eliminar" escondido en el menú "..." de la esquina.
   ===================================================== */
#grid-admin-vacantes.vacantes-grid .vacante-card{padding:18px;gap:10px;overflow:visible;cursor:default;}
#grid-admin-vacantes.vacantes-grid .vacante-card:hover{transform:none;box-shadow:var(--sombra);border-color:var(--gris-borde-suave);}
#grid-admin-vacantes.vacantes-grid .vacante-card:active{transform:none;}

.admin-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:auto;padding-top:10px;}
.action-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:40px;padding:0 10px;
  border:none;border-radius:10px;
  font-size:13px;font-weight:600;
  min-width:0;white-space:nowrap;
  cursor:pointer;
  transition:background-color .15s ease, transform .1s ease;
}
.action-btn .ef-icon{flex-shrink:0;}
.action-btn:active{transform:scale(.97);}
.action-btn:focus-visible{outline:2px solid var(--azul);outline-offset:2px;}
.action-btn.editar{background:#e8f1fd;color:var(--azul-oscuro);}
.action-btn.editar:hover{background:#d5e5fb;}
.action-btn.desactivar{background:#fdf1e0;color:#9a5a0d;}
.action-btn.desactivar:hover{background:#fae2bf;}

.btn-flyer{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:42px;
  border:1.5px solid var(--azul);background:#fff;color:var(--azul);
  border-radius:10px;font-size:13.5px;font-weight:700;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease, transform .1s ease;
}
.btn-flyer:hover{background:var(--azul-claro);}
.btn-flyer:active{transform:scale(.98);}
.btn-flyer:focus-visible{outline:2px solid var(--azul);outline-offset:2px;}

/* Menú "..." de la tarjeta */
.card-menu{position:relative;margin-left:auto;align-self:flex-start;}
.card-menu-btn{
  width:36px;height:36px;border:none;border-radius:10px;background:transparent;
  color:var(--gris-suave);display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.card-menu-btn:hover,.card-menu.open .card-menu-btn{background:var(--gris-claro);color:var(--gris-texto);}
.card-menu-btn:focus-visible{outline:2px solid var(--azul);}
.card-menu-list{
  display:none;position:absolute;right:0;top:calc(100% + 6px);
  min-width:190px;padding:6px;
  background:#fff;border:1px solid var(--borde);border-radius:12px;box-shadow:var(--sombra-md);
  z-index:60;
}
.card-menu.open .card-menu-list{display:block;}
.card-menu-item{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:10px 12px;border:none;background:none;border-radius:8px;
  font-size:13.5px;font-weight:600;color:var(--gris-texto);text-align:left;cursor:pointer;
}
.card-menu-item:hover{background:var(--gris-claro);}
.card-menu-item.peligro{color:var(--rojo-oscuro);}
.card-menu-item.peligro:hover{background:var(--rojo-claro);}

.ruta-detectada{margin:0 0 8px;}

/* Herramientas avanzadas (Configuración) */
.dev-tools{margin-top:28px;border:1px solid var(--gris-borde-suave);border-radius:12px;background:#fbfcfd;}
.dev-tools summary{
  cursor:pointer;padding:14px 16px;list-style:none;
  display:flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:700;color:var(--gris-suave);
}
.dev-tools summary::-webkit-details-marker{display:none;}
.dev-tools[open] summary{border-bottom:1px solid var(--gris-borde-suave);}
.dev-tools-body{padding:6px 16px 14px;}
.dev-tools-item{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 0;margin:0;border-top:1px solid var(--gris-borde-suave);
}
.dev-tools-item strong{display:block;font-size:13.5px;}
.dev-tools-item .form-hint{display:block;margin:2px 0 0;}

/* =====================================================
   MODAL GENÉRICO - responsive, con flechas de scroll
   ===================================================== */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(15,20,30,.6);
  display:flex;align-items:flex-start;justify-content:center;
  padding:30px 14px;
  overflow-y:auto;
  z-index:1200;
}
.modal-overlay.hidden{display:none;}
.modal-box{
  background:#fff;
  border-radius:16px;
  width:100%;
  max-width:560px;
  max-height:calc(100vh - 60px);
  overflow-y:auto;
  padding:24px;
  position:relative;
  box-shadow:var(--sombra-lg);
  -ms-overflow-style:none;
  scrollbar-width:thin;
}
.modal-box.modal-lg{max-width:780px;}
.modal-close{
  position:absolute;top:14px;right:14px;
  border:none;background:var(--gris-claro);color:var(--gris-suave);
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
  z-index:5;
}
.modal-close:hover{background:var(--rojo-claro);color:var(--rojo-oscuro);}
.modal-title{font-size:17.5px;font-weight:800;margin:0 0 18px;padding-right:30px;}

.modal-actions{
  display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--gris-borde-suave);
}
.top-actions{
  display:flex;justify-content:stretch;gap:10px;
  margin-top:38px; /* deja espacio libre para que el botón de cerrar (X) no se encime */
  margin-bottom:18px;
  flex-wrap:wrap;
}
.top-actions .btn{
  flex:1 1 160px;
  min-width:0;
  padding:11px 14px;
  font-size:13.5px;
  height:auto;
  min-height:42px;
  line-height:1.2;
  white-space:normal;
  text-align:center;
}
.top-actions .btn .ef-icon{flex-shrink:0;}
@media(max-width:480px){
  .top-actions{flex-direction:row;flex-wrap:wrap;margin-top:34px;gap:8px;}
  .top-actions .btn{flex:1 1 130px;padding:10px 10px;font-size:12.5px;min-height:40px;}
}

/* Flechas flotantes para desplazarse en modales largos */
.modal-scroll-nav{
  position:sticky;
  bottom:10px;
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:10px;
  pointer-events:none;
}
.modal-scroll-nav button{
  pointer-events:all;
  width:34px;height:34px;border-radius:50%;
  background:#fff;border:1px solid var(--borde);
  box-shadow:var(--sombra-md);
  display:flex;align-items:center;justify-content:center;
  color:var(--azul);
  transition:background-color .15s ease,color .15s ease;
}
.modal-scroll-nav button:hover{background:var(--azul);color:#fff;}
.modal-scroll-nav.hidden{display:none;}

/* Detalle de vacante en modal */
.detalle-header{display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap;align-items:center;}
.detalle-logo{height:48px;object-fit:contain;}
.detalle-empresa{font-size:13px;color:var(--gris-suave);display:flex;align-items:center;gap:6px;}
.detalle-puesto{font-weight:800;font-size:17px;margin:2px 0 14px;}
.detalle-descripcion,
.detalle-descripcion h1, .detalle-descripcion h2, .detalle-descripcion h3, .detalle-descripcion h4,
.detalle-descripcion p, .detalle-descripcion li, .detalle-descripcion span,
.detalle-descripcion strong, .detalle-descripcion em, .detalle-descripcion u, .detalle-descripcion a{
  color:#161a20 !important;
}
.detalle-descripcion{font-size:14px;line-height:1.65;}
.detalle-descripcion h3{font-size:14.5px;font-weight:800;margin:16px 0 6px;}
.detalle-descripcion a{text-decoration:underline;}
.detalle-descripcion ul, .detalle-descripcion ol{padding-left:20px;margin:4px 0 10px;}

/* Modal de ruta de transporte: el PDF se muestra directo dentro del modal
   (iframe), con un botón de respaldo para abrirlo/descargarlo aparte por si
   el navegador no puede incrustarlo. */
.pdf-modal-visor{
  width:100%;
  max-height:min(70vh, 620px);
  overflow-y:auto;
  border:1.5px solid var(--gris-borde-suave);
  border-radius:12px;
  background:var(--gris-claro);
  margin-bottom:12px;
  padding:6px;
}
.pdf-modal-visor canvas{display:block;margin:0 auto 10px;max-width:100%;border-radius:8px;box-shadow:0 2px 8px rgba(20,30,50,.12);}
.pdf-modal-fallback{
  display:none;
  flex-direction:column;align-items:center;text-align:center;
  gap:14px;padding:30px 20px;
  background:var(--gris-claro);border-radius:14px;margin-bottom:12px;
}
.pdf-modal-fallback.mostrar{display:flex;}
.pdf-modal-fallback .pdf-icon{
  width:64px;height:64px;border-radius:16px;
  background:var(--azul-claro);color:var(--azul);
  display:flex;align-items:center;justify-content:center;
}
.pdf-modal-fallback p{margin:0;color:var(--gris-suave);font-size:13.5px;max-width:320px;}

/* =====================================================
   FORMULARIOS
   ===================================================== */
.form-group{margin-bottom:16px;}
.form-group label{
  display:block;font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;
  margin-bottom:7px;color:#555;
}
.form-group input[type=text],
.form-group input[type=number],
.form-group input[type=tel],
.form-group select,
.form-group textarea{
  width:100%;padding:11px 13px;
  border:1.5px solid var(--borde);
  border-radius:10px;
  font-size:14px;
  background:var(--gris-claro);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;border-color:var(--azul);background:#fff;
  box-shadow:0 0 0 3px rgba(30,111,217,.12);
}
.form-group textarea{resize:vertical;min-height:90px;}

/* Colores de estatus de candidatos: Nuevo=azul, En entrevista=amarillo,
   Contratado=verde, Rechazado=rojo. */
select.estatus-select{
  font-weight:700;
  border-radius:8px;
  border:1.5px solid var(--borde);
  padding:7px 10px;
  cursor:pointer;
}
select.estatus-select[data-estatus="Nuevo"]{background:#e8f1fd;color:#1e6fd9;border-color:#c6dcf8;}
select.estatus-select[data-estatus="En entrevista"]{background:#fef6dd;color:#8a6d00;border-color:#f3e3a3;}
select.estatus-select[data-estatus="Contratado"]{background:#e5f7ea;color:#1f8a3c;border-color:#bfe8cb;}
select.estatus-select[data-estatus="Rechazado"]{background:#fce9e9;color:#c62828;border-color:#f3c3c3;}
.form-hint{font-size:12px;color:var(--gris-suave);margin-top:5px;}
.vacante-elegida{
  display:flex;flex-direction:column;gap:3px;
  background:var(--azul-claro);
  border:1px solid #dfe9fb;
  border-radius:12px;
  padding:14px 16px;
  margin-bottom:18px;
}
.vacante-elegida-label{
  display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--azul-oscuro);margin-bottom:3px;
}
.vacante-elegida strong{font-size:15px;color:var(--gris-texto);}
.vacante-elegida span:last-child{font-size:13px;color:var(--gris-suave);}
.radio-group{display:flex;flex-direction:column;gap:8px;}
.radio-group label{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:400;text-transform:none;
  border:1.5px solid var(--borde);border-radius:10px;padding:10px 13px;
  background:var(--gris-claro);cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease;
}
.radio-group label:hover{border-color:var(--azul);}
.radio-group input:checked + span,
.radio-group label:has(input:checked){border-color:var(--azul);background:var(--azul-claro);}

.upload-box{
  border:2px dashed var(--borde);
  border-radius:12px;
  padding:22px;
  text-align:center;
  color:var(--gris-suave);
  font-size:13px;
  cursor:pointer;
  background:var(--gris-claro);
  position:relative;
  transition:border-color .15s ease, background-color .15s ease;
}
.upload-box:hover{border-color:var(--azul);background:var(--azul-claro);}
.upload-box.has-file{border-style:solid;border-color:var(--verde);background:var(--verde-claro);color:var(--verde-oscuro);font-weight:700;}
.upload-box input[type=file]{
  position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;
}
.upload-preview{margin-top:10px;max-height:100px;border-radius:8px;overflow:hidden;}
.upload-preview img{max-height:100px;margin:0 auto;}
.upload-preview.pdf-preview{
  display:flex;align-items:center;gap:8px;justify-content:center;
  max-height:none;padding:8px;font-size:13px;color:var(--verde-oscuro);font-weight:600;
}

/* Vista previa de un archivo YA guardado (logo/ruta), con botón de basura para
   quitarlo de inmediato en vez de un checkbox confuso. */
.upload-actual{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--gris-claro);border:1.5px solid var(--borde);border-radius:10px;
  padding:8px 10px;margin-bottom:8px;
}
.upload-actual.oculto{display:none;}
.upload-actual-info{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;color:var(--gris-texto);font-weight:600;}
.upload-actual-info img{max-height:44px;max-width:70px;object-fit:contain;border-radius:6px;background:#fff;}
.upload-actual-info a{color:var(--azul-oscuro);text-decoration:underline;}
.upload-actual-quitar{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;border:1.5px solid #f6c9ca;
  background:#fff;color:var(--rojo);display:flex;align-items:center;justify-content:center;
  transition:background-color .15s ease,color .15s ease;
}
.upload-actual-quitar:hover{background:var(--rojo);color:#fff;border-color:var(--rojo);}

/* Editor enriquecido */
.editor-toolbar{
  display:flex;gap:4px;flex-wrap:wrap;
  border:1.5px solid var(--borde);border-bottom:none;
  border-radius:10px 10px 0 0;
  padding:7px;background:#fafbfc;
}
.editor-toolbar button{
  border:1px solid transparent;background:none;
  width:32px;height:32px;border-radius:7px;font-size:13px;color:#444;
  transition:background-color .15s ease;
}
.editor-toolbar button:hover{background:#e9ecf1;}
.editor-content{
  min-height:130px;
  border:1.5px solid var(--borde);
  border-radius:0 0 10px 10px;
  padding:11px 13px;
  font-size:14px;
  background:#fff;
}
.editor-content:focus{outline:2px solid var(--azul);outline-offset:-1px;}

/* =====================================================
   LOGIN
   Pantalla dividida en escritorio (banner + formulario) y hoja
   sobre un encabezado compacto en celular.
   ===================================================== */
[hidden]{display:none !important;}
.login-body{margin:0;background:#fff;min-height:100vh;min-height:100dvh;}
.login-shell{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  min-height:100vh;min-height:100dvh;
}
.login-hero{position:relative;background:linear-gradient(160deg,#0a2347 0%,#0f3d7a 58%,#14509e 100%);color:#fff;overflow:hidden;}
.login-hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 88% 12%, rgba(47,174,78,.28) 0, rgba(47,174,78,0) 38%),
    radial-gradient(circle at 8% 96%, rgba(30,111,217,.45) 0, rgba(30,111,217,0) 46%);
}
.login-hero-inner{
  position:relative;height:100%;
  display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  padding:40px 52px;
}
.login-brand{display:inline-flex;align-items:center;gap:11px;font-weight:800;font-size:17px;color:#fff;}
.login-brand .brand-icon{
  width:40px;height:40px;border-radius:11px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;
}
.login-hero-copy h2{margin:0 0 10px;font-size:30px;line-height:1.22;font-weight:700;max-width:15em;}
.login-hero-copy p{margin:0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.82);max-width:26em;}

.login-panel{display:flex;align-items:center;justify-content:center;padding:36px 28px;background:#fff;}
.login-card{width:100%;max-width:380px;}
.login-card h1{margin:0 0 6px;font-size:27px;font-weight:700;color:var(--gris-texto);}
.login-sub{margin:0 0 26px;color:var(--gris-suave);font-size:14.5px;line-height:1.5;}

.login-error{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--rojo-claro);border:1px solid #f6c9ca;color:var(--rojo-oscuro);
  border-radius:12px;padding:12px 14px;margin-bottom:18px;
  font-size:13.5px;line-height:1.4;
}
.login-error .ef-icon{flex-shrink:0;margin-top:1px;}

.login-field{margin-bottom:16px;}
.login-field label{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--gris-texto);}
.login-input{position:relative;display:flex;align-items:center;}
.login-input > .ef-icon:first-child{position:absolute;left:14px;color:#8a94a6;pointer-events:none;}
.login-input input{
  width:100%;height:48px;padding:0 46px 0 44px;
  border:1.5px solid var(--borde);border-radius:12px;
  background:#f8fafc;color:var(--gris-texto);font-size:15px;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.login-input input:hover{border-color:#cfd6e0;}
.login-input input:focus{outline:none;border-color:var(--azul);background:#fff;box-shadow:0 0 0 4px rgba(30,111,217,.14);}
.login-toggle{
  position:absolute;right:5px;width:38px;height:38px;
  border:none;border-radius:10px;background:none;color:#8a94a6;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.login-toggle:hover{color:var(--azul);background:var(--azul-claro);}
.login-toggle:focus-visible{outline:2px solid var(--azul);}

.login-submit{
  width:100%;height:50px;margin-top:6px;
  border:none;border-radius:12px;background:var(--azul);color:#fff;
  font-size:15.5px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  transition:background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.login-submit:hover{background:var(--azul-oscuro);box-shadow:0 8px 20px rgba(30,111,217,.3);}
.login-submit:active{transform:scale(.99);}
.login-submit:focus-visible{outline:3px solid rgba(30,111,217,.4);outline-offset:2px;}
.login-submit.is-loading{pointer-events:none;background:var(--azul-oscuro);}
.login-spinner{
  display:none;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:ef-spin .7s linear infinite;
}
.login-submit.is-loading .login-spinner{display:inline-block;}
@keyframes ef-spin{to{transform:rotate(360deg);}}

.login-back{
  display:inline-flex;align-items:center;gap:7px;margin-top:22px;
  color:var(--gris-suave);font-size:13.5px;font-weight:600;
}
.login-back:hover{color:var(--azul);}

@media(max-width:860px){
  .login-body{background:#0d2a52;}
  .login-shell{grid-template-columns:1fr;grid-template-rows:auto 1fr;}
  .login-hero-inner{padding:22px 22px 60px;gap:14px;}
  .login-hero-copy h2{font-size:20px;max-width:none;margin:0;}
  .login-hero-copy p{display:none;}
  .login-panel{
    align-items:flex-start;padding:0 22px 32px;
    margin-top:-28px;position:relative;
    border-radius:26px 26px 0 0;
  }
  .login-card{padding-top:30px;}
}
@media(prefers-reduced-motion:reduce){
  .login-spinner{animation-duration:1.6s;}
  .login-submit,.login-input input{transition:none;}
}

/* ---------- Confirmación ---------- */
.confirm-box p{font-size:14px;margin-bottom:18px;}
.confirm-box.confirm-peligro{border-top:4px solid var(--rojo);}

/* =====================================================
   ADMIN: header + navegación
   ===================================================== */
.admin-header{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding:14px 22px;border-bottom:1px solid var(--gris-borde-suave);
  background:#fff;position:sticky;top:0;z-index:200;
}
.admin-header .brand{
  display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;color:var(--azul-oscuro);
}
.admin-header .brand .brand-icon{
  width:36px;height:36px;border-radius:9px;
  background:linear-gradient(135deg,var(--azul),var(--azul-oscuro));
  color:#fff;display:flex;align-items:center;justify-content:center;
}
.admin-header-right{display:flex;align-items:center;gap:10px;}

.admin-nav{
  display:flex;gap:8px;flex-wrap:wrap;padding:12px 22px;
  border-bottom:1px solid var(--gris-borde-suave);background:#fbfcfd;
}
.admin-nav-link{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border-radius:20px;
  font-size:13px;font-weight:700;color:var(--gris-texto);
  border:1.5px solid var(--borde);background:#fff;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.admin-nav-link:hover{background:var(--azul);color:#fff;border-color:var(--azul);}
.admin-nav-link.active{background:var(--azul-claro);border-color:#cfe0fb;color:var(--azul-oscuro);}

.admin-mobile-toggle{
  display:none;
  align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;
  background:var(--gris-claro);border:1.5px solid var(--borde);color:var(--gris-texto);
}
.admin-mobile-toggle:hover{background:#eaebee;}

.admin-section-title{
  font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--gris-suave);
  margin:24px auto 12px;max-width:1180px;padding:0 20px;
}

/* Menú admin colapsable en móvil */
@media(max-width:760px){
  .admin-mobile-toggle{display:flex;}
  .admin-nav{
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }
  .admin-nav.open{display:flex;}
  .admin-nav-link{justify-content:flex-start;border-radius:10px;}
}

/* =====================================================
   TABLA CANDIDATOS
   ===================================================== */
.table-wrap{overflow-x:auto;max-width:1180px;margin:0 auto;padding:0 20px 50px;}
table.data-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:760px;}
table.data-table th, table.data-table td{
  padding:12px;border-bottom:1px solid var(--gris-borde-suave);text-align:left;white-space:nowrap;
}
table.data-table th{background:var(--gris-claro);font-size:11.5px;text-transform:uppercase;letter-spacing:.02em;color:#555;}
table.data-table tbody tr{transition:background-color .12s ease;}
table.data-table tbody tr:hover{background:#fafbfd;}
table.data-table td.wrap{white-space:normal;max-width:220px;}
select.estatus-select{
  padding:6px 9px;border-radius:8px;border:1.5px solid var(--borde);font-size:12.5px;
  transition:border-color .15s ease;
}
select.estatus-select:focus{outline:none;border-color:var(--azul);}
.telefono-cell{display:flex;align-items:center;gap:8px;}
.telefono-numero{font-variant-numeric:tabular-nums;}
.telefono-actions{display:flex;gap:5px;}
.icon-link-btn{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--borde);color:var(--gris-suave);
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.icon-link-btn.tel:hover{background:var(--azul);color:#fff;border-color:var(--azul);}
.icon-link-btn.wa:hover{background:var(--verde);color:#fff;border-color:var(--verde);}

.empty-state{
  text-align:center;padding:60px 20px;color:var(--gris-suave);font-size:14px;font-weight:700;
}

/* =====================================================
   FORMULARIO DE POSTULACIÓN (público)
   ===================================================== */
.postular{background:linear-gradient(180deg,#eef3fb 0%,#f7f9fc 100%);padding:22px 16px 56px;min-height:calc(100vh - 70px);}
.postular-card{
  width:100%;max-width:560px;margin:0 auto;
  background:#fff;border:1px solid var(--gris-borde-suave);border-radius:22px;
  box-shadow:0 12px 40px rgba(20,40,80,.10);
  padding:28px 22px 26px;
}
.postular-head{margin-bottom:20px;}
.postular-head h1{margin:0 0 6px;font-size:24px;line-height:1.2;font-weight:800;color:var(--gris-texto);}
.postular-head p{margin:0;font-size:14.5px;line-height:1.5;color:var(--gris-suave);}

.postular-vacante{
  display:flex;gap:14px;align-items:center;
  background:linear-gradient(135deg,#eaf2fd,#eef9f1);
  border:1px solid #d6e5fa;border-radius:16px;padding:14px 16px;margin-bottom:6px;
}
.postular-vacante-icono{
  flex-shrink:0;width:42px;height:42px;border-radius:12px;
  background:var(--azul);color:#fff;display:flex;align-items:center;justify-content:center;
}
.postular-vacante > div{display:flex;flex-direction:column;gap:2px;min-width:0;}
.postular-vacante-label{font-size:12px;font-weight:600;color:var(--azul-oscuro);}
.postular-vacante strong{font-size:16px;line-height:1.3;color:var(--gris-texto);}
.postular-vacante-empresa{font-size:13px;color:var(--gris-suave);overflow-wrap:anywhere;}

.pf-seccion{margin-top:24px;}
.pf-seccion h2{
  display:flex;align-items:center;gap:10px;
  margin:0 0 16px;font-size:15px;font-weight:800;color:var(--gris-texto);
  padding-bottom:10px;border-bottom:1px solid var(--gris-borde-suave);
}
.pf-seccion h2 span{
  width:24px;height:24px;border-radius:50%;background:var(--azul);color:#fff;
  font-size:12.5px;display:flex;align-items:center;justify-content:center;
}
.pf-campo{margin-bottom:16px;min-width:0;}
.pf-campo label,.pf-etiqueta{
  display:block;margin-bottom:7px;
  font-size:13.5px;font-weight:600;color:#344054;
}
.pf-campo input[type=text],
.pf-campo input[type=number],
.pf-campo input[type=tel],
.pf-campo select,
.pf-campo textarea{
  width:100%;height:50px;padding:0 14px;
  border:1.5px solid var(--borde);border-radius:12px;
  background:#f8fafc;color:var(--gris-texto);font:inherit;font-size:16px;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.pf-campo textarea{height:auto;min-height:118px;padding:13px 14px;line-height:1.5;resize:vertical;}
.pf-campo input::placeholder,.pf-campo textarea::placeholder{color:#9aa4b2;}
.pf-campo input:hover,.pf-campo select:hover,.pf-campo textarea:hover{border-color:#cdd5df;}
.pf-campo input:focus,.pf-campo select:focus,.pf-campo textarea:focus{
  outline:none;border-color:var(--azul);background:#fff;box-shadow:0 0 0 4px rgba(30,111,217,.14);
}
.pf-ayuda{margin:7px 0 0;font-size:12.5px;line-height:1.45;color:var(--gris-suave);}
.pf-fila{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;}

.pf-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.pf-chip{display:block;margin:0 !important;cursor:pointer;}
.pf-chip-ancho{grid-column:1 / -1;}
.pf-chip input{position:absolute;opacity:0;pointer-events:none;}
.pf-chip span{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:48px;padding:10px 12px;
  border:1.5px solid var(--borde);border-radius:12px;background:#f8fafc;
  font-size:14.5px;font-weight:600;color:#475467;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.pf-chip:hover span{border-color:#b7c9e6;}
.pf-chip input:focus-visible + span{box-shadow:0 0 0 4px rgba(30,111,217,.18);border-color:var(--azul);}
.pf-chip input:checked + span{border-color:var(--azul);background:var(--azul-claro);color:var(--azul-oscuro);box-shadow:inset 0 0 0 1px var(--azul);}

.pf-enviar{
  width:100%;height:54px;margin-top:8px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  border:none;border-radius:14px;background:var(--azul);color:#fff;
  font-size:16px;font-weight:700;cursor:pointer;
  box-shadow:0 8px 20px rgba(30,111,217,.28);
  transition:background-color .15s ease, transform .1s ease;
}
.pf-enviar:hover{background:var(--azul-oscuro);}
.pf-enviar:active{transform:scale(.99);}
.pf-enviar:disabled{opacity:.7;cursor:wait;}
.pf-privacidad{margin:12px 0 0;text-align:center;font-size:12.5px;color:var(--gris-suave);}

@media(min-width:640px){
  .postular{padding-top:40px;}
  .postular-card{padding:36px 36px 32px;}
  .pf-chips{grid-template-columns:repeat(3,minmax(0,1fr));}
  .pf-chip-ancho{grid-column:auto;}
  .pf-fila{grid-template-columns:120px minmax(0,1fr);}
}

/* Postulación éxito */
.exito-box{text-align:center;padding:40px 20px;}
.exito-box .icono{
  width:70px;height:70px;border-radius:50%;background:var(--verde-claro);color:var(--verde-oscuro);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
}

.footer-note{
  text-align:center;color:#aaa;font-size:12px;padding:24px 0 40px;
}

/* =====================================================
   CHAT VIRTUAL - HANNMAT (el panel se abre desde el botón del navbar,
   ya no existe un botón flotante permanente que tape contenido)
   ===================================================== */
.chat-panel{
  position:fixed;
  right:22px;bottom:22px;
  width:360px;
  max-width:calc(100vw - 28px);
  height:520px;
  max-height:calc(100vh - 100px);
  background:#fff;
  border-radius:18px;
  box-shadow:var(--sombra-lg);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  z-index:901;
}
.chat-panel.hidden{display:none;}
.chat-panel-header{
  background:linear-gradient(135deg,var(--azul),var(--azul-oscuro));
  color:#fff;padding:14px 16px;
  display:flex;align-items:center;gap:10px;
}
.chat-panel-header .chat-avatar{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.chat-panel-header .chat-title{font-weight:800;font-size:14.5px;}
.chat-panel-header .chat-subtitle{font-size:11.5px;opacity:.85;display:flex;align-items:center;gap:5px;}
.chat-panel-header .chat-subtitle .dot{width:7px;height:7px;border-radius:50%;background:#4ade80;display:inline-block;}
.chat-panel-close{
  margin-left:auto;background:rgba(255,255,255,.15);border:none;color:#fff;
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .15s ease;
}
.chat-panel-close:hover{background:rgba(255,255,255,.3);}

.chat-messages{
  flex:1;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:10px;
  background:#f7f9fc;
}
.chat-bubble{
  max-width:82%;
  padding:10px 13px;
  border-radius:14px;
  font-size:13.5px;
  line-height:1.5;
}
.chat-bubble.bot{
  align-self:flex-start;
  background:#fff;
  border:1px solid var(--gris-borde-suave);
  border-bottom-left-radius:4px;
}
.chat-bubble.user{
  align-self:flex-end;
  background:var(--azul);
  color:#fff;
  border-bottom-right-radius:4px;
}
.chat-bubble ul{margin:6px 0;padding-left:18px;}
.chat-bubble a{color:var(--azul-oscuro);font-weight:700;text-decoration:underline;}
.chat-bubble.bot a{color:var(--azul);}
.chat-suggestions{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px;background:#f7f9fc;}
.chat-suggestion-chip{
  background:#fff;border:1.5px solid var(--borde);border-radius:16px;
  padding:6px 12px;font-size:12px;font-weight:600;color:var(--azul-oscuro);
  transition:background-color .15s ease,border-color .15s ease;
}
.chat-suggestion-chip:hover{background:var(--azul-claro);border-color:var(--azul);}

.chat-input-row{
  display:flex;align-items:center;gap:8px;
  padding:12px;border-top:1px solid var(--gris-borde-suave);
  background:#fff;
}
.chat-input-row input{
  flex:1;border:1.5px solid var(--borde);border-radius:22px;
  padding:10px 15px;font-size:13.5px;
  transition:border-color .15s ease;
}
.chat-input-row input:focus{outline:none;border-color:var(--azul);}
.chat-send-btn{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--azul);color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .15s ease, transform .1s ease;
}
.chat-send-btn:hover{background:var(--azul-oscuro);}
.chat-send-btn:active{transform:scale(.9);}
.chat-typing{display:flex;gap:4px;align-items:center;padding:2px 4px;}
.chat-typing span{width:6px;height:6px;border-radius:50%;background:#b7c0cc;animation:ef-typing 1.2s infinite ease-in-out;}
.chat-typing span:nth-child(2){animation-delay:.15s;}
.chat-typing span:nth-child(3){animation-delay:.3s;}
@keyframes ef-typing{
  0%,60%,100%{transform:translateY(0);opacity:.5;}
  30%{transform:translateY(-4px);opacity:1;}
}

@media(max-width:480px){
  .chat-panel{
    right:8px;left:8px;bottom:72px;width:auto;
    height:min(72vh, 600px);
    max-height:calc(100vh - 92px);
  }
}
@supports (height:1dvh){
  @media(max-width:480px){
    .chat-panel{height:min(72dvh, 600px);max-height:calc(100dvh - 92px);}
  }
}

/* =====================================================
   RESPONSIVE GENERAL
   ===================================================== */
@media(max-width:600px){
  .hero-assist{
    padding:12px 14px;
    margin:14px auto;
    gap:10px;
    border-left-width:4px;
  }
  .hero-assist-text{gap:10px;}
  .hero-assist-icon{width:34px;height:34px;border-radius:9px;}
  .hero-assist-icon svg{width:16px;height:16px;}
  .hero-assist h2{font-size:13px;line-height:1.25;margin:0 0 2px;}
  .hero-assist p{font-size:11.5px;}
  .hero-assist .btn-cercania{width:100%;padding:9px 14px;font-size:12.5px;}
  .hero-assist-status{font-size:11px;}
  .modal-box{padding:18px;max-height:calc(100vh - 30px);}
}

/* Panel de admin en celular: 2 columnas (igual que la vista pública). Con tarjetas angostas los botones
   se apilan a todo el ancho de la tarjeta, con la misma altura y espacio entre sí, para que nada se amontone. */
@media(max-width:520px){
  #grid-admin-vacantes.vacantes-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 14px 50px;}
  #grid-admin-vacantes.vacantes-grid .vacante-card{padding:14px 12px 12px;gap:8px;}
  #grid-admin-vacantes .logo-box{width:64px;height:64px;padding:6px;}
  #grid-admin-vacantes .puesto{font-size:15.5px;line-height:1.25;}
  .admin-actions{grid-template-columns:1fr;gap:7px;padding-top:6px;}
  .action-btn{height:38px;font-size:13px;border-radius:10px;}
  .btn-flyer{height:40px;font-size:13px;border-radius:10px;}
  .card-menu-btn{width:32px;height:32px;}
  .card-menu-list{min-width:170px;}
}

/* =====================================================
   GENERADOR DE FLYERS
   ===================================================== */
.flyer-layout{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start;}
.flyer-preview-col{flex:1;min-width:240px;display:flex;justify-content:center;}
.flyer-canvas-wrap{
  width:100%;max-width:320px;
  border-radius:14px;overflow:hidden;
  box-shadow:var(--sombra-md);
  border:1px solid var(--gris-borde-suave);
  line-height:0;
}
#flyer-canvas{width:100%;height:auto;display:block;}
.flyer-options-col{flex:1;min-width:220px;}
.flyer-options-col h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--gris-suave);margin:0 0 10px;}
.flyer-galeria{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;
}
.flyer-bg-option{
  height:64px;border-radius:10px;border:2.5px solid transparent;
  background-size:cover;background-position:center;
  cursor:pointer;transition:border-color .15s ease, transform .1s ease;
}
.flyer-bg-option:hover{transform:scale(1.03);}
.flyer-bg-option.selected{border-color:var(--azul);box-shadow:0 0 0 2px rgba(30,111,217,.25);}
.flyer-actions{display:flex;flex-direction:column;gap:10px;}

@media(max-width:640px){
  .flyer-layout{flex-direction:column;}
}

/* Aviso discreto mientras se leen rutas PDF en segundo plano (admin) */
.ocr-toast{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  max-width:calc(100vw - 28px);padding:11px 18px;border-radius:24px;
  background:#14509e;color:#fff;font-size:13px;font-weight:600;text-align:center;
  box-shadow:var(--sombra-md);z-index:1200;
}
.ruta-ocr-estado{margin:8px 0 0;}

/* Botón "Compartir vacante" al final del detalle público */
.detalle-compartir{margin-top:22px;padding-top:18px;border-top:1px solid var(--gris-borde-suave);}
.btn-compartir{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;height:48px;border-radius:12px;
  border:0;background:#1877F2;color:#fff;
  font-size:14.5px;font-weight:700;cursor:pointer;
  box-shadow:0 4px 12px rgba(24,119,242,.30);
  transition:background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn-compartir:hover{background:#166FE5;box-shadow:0 6px 16px rgba(24,119,242,.38);}
.btn-compartir:active{background:#1464D2;transform:scale(.98);}

/* Estado de la ruta en la tarjeta del admin */
.ruta-estado{
  display:inline-flex;align-items:center;align-self:flex-start;
  margin:2px 0 0;padding:4px 10px;border-radius:999px;
  font-size:11.5px;font-weight:700;line-height:1.3;max-width:100%;
}
.ruta-estado.ok{background:var(--verde-claro);color:var(--verde-oscuro);}
.ruta-estado.pend{background:var(--azul-claro);color:var(--azul-oscuro);}
.ruta-estado.sin{background:#f1f2f4;color:var(--gris-suave);}
.ruta-estado.error{background:var(--rojo-claro);color:var(--rojo-oscuro);}

/* =====================================================
   ADMIN v8: acciones compactas
   [Editar] [Desactivar] en una fila (siempre con texto) y el menú ⋮ en la esquina de la tarjeta.
   Generar flyer, Ver información detectada y Eliminar viven dentro del menú ⋮.
   ===================================================== */
#grid-admin-vacantes .vacante-card{position:relative;}
#grid-admin-vacantes .vacante-card-top{display:flex;align-items:flex-start;justify-content:space-between;}
#grid-admin-vacantes .admin-actions{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;
  margin-top:auto;padding-top:10px;
}
#grid-admin-vacantes .action-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:38px;padding:0 6px;border-radius:10px;
  font-size:13px;font-weight:600;white-space:nowrap;min-width:0;
}
#grid-admin-vacantes .action-btn .ef-icon{width:14px;height:14px;}
#grid-admin-vacantes .card-menu{position:static;margin:0;}
#grid-admin-vacantes .card-menu-btn{
  position:absolute;top:10px;right:10px;
  width:34px;height:34px;border-radius:10px;
  background:#fff;border:1px solid var(--borde);color:var(--gris-suave);
}
#grid-admin-vacantes .card-menu-btn:hover{background:var(--gris-claro);color:var(--gris-texto);}
#grid-admin-vacantes .card-menu.open .card-menu-btn{background:var(--gris-claro);color:var(--gris-texto);}
/* el menú se ancla a la tarjeta (no al botón) para que nunca se salga de la pantalla */
#grid-admin-vacantes .card-menu-list{left:8px;right:8px;top:50px;bottom:auto;min-width:0;}
#grid-admin-vacantes .card-menu-item{font-size:13.5px;line-height:1.3;padding:10px;}
#grid-admin-vacantes .card-menu-item .ef-icon{flex-shrink:0;}
@media(max-width:430px){
  /* en 2 columnas la tarjeta es angosta: se quitan los iconos para que el texto completo ("Desactivar") siempre quepa */
  #grid-admin-vacantes .action-btn{font-size:13px;padding:0 4px;}
  #grid-admin-vacantes .action-btn .ef-icon{display:none;}
}
@media(max-width:380px){
  #grid-admin-vacantes.vacantes-grid{gap:10px;padding-left:10px;padding-right:10px;}
  #grid-admin-vacantes.vacantes-grid .vacante-card{padding:12px 9px 10px;}
  #grid-admin-vacantes .admin-actions{gap:5px;}
  #grid-admin-vacantes .action-btn{font-size:12px;padding:0 2px;letter-spacing:-.1px;}
}
@media(min-width:560px){
  #grid-admin-vacantes .action-btn{height:40px;font-size:14px;gap:6px;}
  #grid-admin-vacantes .action-btn .ef-icon{width:15px;height:15px;}
  #grid-admin-vacantes .card-menu-list{left:auto;right:10px;min-width:220px;}
}

/* Indicador de ruta (🟢 / 🟠 / 🔴): botón que abre "Información detectada" */
button.ruta-estado{
  border:none;cursor:pointer;text-align:left;font-family:inherit;
  transition:filter .15s ease;
}
button.ruta-estado:hover{filter:brightness(.96);}
.ruta-estado .ruta-estado-icono{font-size:10px;line-height:1;}
.ruta-estado.sin{background:var(--rojo-claro);color:var(--rojo-oscuro);}

/* Modal: información detectada + prueba de ruta */
.ruta-info-box{max-width:560px;}
.ruta-info-estado{margin:2px 0 14px;}
.ruta-probar{background:#f7f9fc;border:1px solid var(--gris-borde-suave);border-radius:12px;padding:12px 12px 10px;margin-bottom:14px;}
.ruta-probar label{display:block;font-size:13px;font-weight:700;margin-bottom:8px;color:var(--gris-texto);}
.ruta-probar-fila{display:flex;gap:8px;}
.ruta-probar-fila input{flex:1;min-width:0;height:40px;padding:0 12px;border:1.5px solid var(--borde);border-radius:10px;font:inherit;font-size:14px;background:#fff;}
.ruta-probar-fila input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(30,111,217,.14);}
.ruta-probar-res{margin-top:10px;font-size:13.5px;}
.rp-si{font-weight:800;color:var(--verde-oscuro);margin-bottom:6px;}
.rp-no{font-weight:700;color:var(--rojo-oscuro);}
.rp-no small,.rp-item small{display:block;font-weight:500;color:var(--gris-suave);margin-top:2px;}
.rp-item{padding:7px 0;border-top:1px solid var(--gris-borde-suave);}
.ri-sec{border:1px solid var(--gris-borde-suave);border-radius:12px;margin-bottom:8px;background:#fff;}
.ri-sec summary{cursor:pointer;list-style:none;padding:11px 14px;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:space-between;}
.ri-sec summary::-webkit-details-marker{display:none;}
.ri-sec[open] summary{border-bottom:1px solid var(--gris-borde-suave);}
.ri-n{background:var(--azul-claro);color:var(--azul-oscuro);border-radius:999px;font-size:12px;padding:2px 9px;}
.ri-sec ul{list-style:none;margin:0;padding:6px 14px 10px;max-height:240px;overflow:auto;}
.ri-sec li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:13.5px;border-bottom:1px dashed var(--gris-borde-suave);}
.ri-sec li:last-child{border-bottom:none;}
.ri-sec li small{color:var(--gris-suave);white-space:nowrap;}
.ri-vacia{display:flex;justify-content:space-between;padding:11px 14px;font-size:14px;font-weight:700;color:var(--gris-suave);}
.ri-vacia em{font-weight:500;font-style:normal;}
.ri-aviso{background:var(--rojo-claro);color:var(--rojo-oscuro);padding:10px 12px;border-radius:10px;}

/* =====================================================
   PÚBLICO v7: acción principal y secundaria del detalle
   ===================================================== */
.detalle-acciones{display:flex;flex-direction:column;gap:8px;margin:36px 0 18px;}
.btn-principal{
  display:flex;align-items:center;justify-content:center;gap:9px;
  height:48px;padding:0 18px;border-radius:12px;
  background:linear-gradient(135deg,#22b866,#1b9a55);color:#fff;
  font-size:15.5px;font-weight:700;
  box-shadow:0 6px 16px rgba(27,154,85,.28);
  transition:transform .1s ease, box-shadow .15s ease;
}
.btn-principal:hover{box-shadow:0 8px 20px rgba(27,154,85,.36);}
.btn-principal:active{transform:scale(.99);}
.btn-secundario{
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 16px;border-radius:10px;
  border:0;background:#1877F2;color:#fff;
  font-size:14px;font-weight:700;cursor:pointer;
  box-shadow:0 4px 12px rgba(24,119,242,.30);
  transition:background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn-secundario:hover{background:#166FE5;box-shadow:0 6px 16px rgba(24,119,242,.38);}
.btn-secundario:active{background:#1464D2;transform:scale(.98);}
@media(min-width:640px){
  .detalle-acciones{flex-direction:row;align-items:center;}
  .btn-principal{flex:1.5;}
  .btn-secundario{flex:1;}
}


.ruta-estado{align-items:flex-start;}
.ruta-estado .ruta-estado-icono{margin-top:3px;}

/* ===== Archivo elegido (logo / ruta PDF): vista previa + quitar ===== */
.upload-preview:empty{display:none;}
.archivo-elegido{display:flex;align-items:center;gap:10px;margin-top:8px;padding:8px 10px;background:#fff;border:1.5px solid var(--borde);border-radius:12px;}
.archivo-elegido[hidden]{display:none;}
.archivo-thumb{flex:0 0 56px;width:56px;height:56px;border-radius:8px;background:var(--gris-claro);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.archivo-thumb img,.archivo-thumb canvas{max-width:100%;max-height:100%;object-fit:contain;}
.archivo-pdf-icono{font-size:12px;font-weight:800;color:#fff;background:#d2323a;border-radius:6px;padding:6px 7px;}
.archivo-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.archivo-nombre{font-size:13px;color:var(--gris-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.archivo-detalle{font-size:12px;color:var(--gris-suave);}
.archivo-progreso{height:5px;background:var(--gris-claro);border-radius:3px;overflow:hidden;margin-top:4px;}
.archivo-progreso span{display:block;height:100%;width:4%;background:var(--azul);transition:width .25s;}
.archivo-acciones{display:flex;flex-direction:column;gap:4px;align-items:stretch;}
.archivo-ver,.archivo-quitar{font-size:12px;font-weight:700;padding:5px 9px;border-radius:8px;text-align:center;cursor:pointer;line-height:1.2;}
.archivo-ver{background:var(--azul-claro);color:var(--azul-oscuro);border:1px solid transparent;}
.archivo-quitar{background:#fff;color:var(--rojo);border:1.5px solid var(--rojo);}
.archivo-quitar:hover{background:var(--rojo);color:#fff;}
.upload-actual-aviso{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;padding:8px 10px;border-radius:10px;background:#fdecec;color:#a02a2f;font-size:13px;font-weight:600;}
.upload-actual-deshacer{border:0;background:#fff;color:var(--azul-oscuro);font-weight:700;font-size:12px;padding:5px 10px;border-radius:8px;cursor:pointer;}

.ubicacion-avanzada{margin:6px 0 14px;border:1.5px dashed var(--borde);border-radius:12px;padding:8px 12px;background:#fafbfd;}
.ubicacion-avanzada summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--gris-suave);}
.ubicacion-avanzada[open] summary{margin-bottom:6px;color:var(--gris-texto);}

/* =====================================================================
   MEJORA VISUAL / UX (solo estilos): sistema de color Hannmat tomado del banner,
   banner de instrucciones y "vacante más cercana" compactos, tarjetas con más aire.
   No cambia ninguna función: solo apariencia.
   ===================================================================== */
:root{
  --hn: var(--banner-color, var(--azul));
  --hn-2: var(--banner-color-2, var(--azul-oscuro));
  --hn-texto: var(--banner-color-texto, #fff);
  --hn-oscuro: color-mix(in srgb, var(--hn) 78%, #000);
  --hn-suave: color-mix(in srgb, var(--hn) 9%, #fff);
  --hn-borde: color-mix(in srgb, var(--hn) 28%, #fff);
  --hn-radio: 12px;
}

/* Marca "Empleo Fácil" con el color del banner */
.site-header .brand{color:var(--hn-oscuro);}
.site-header .brand .brand-icon{background:linear-gradient(135deg,var(--hn),var(--hn-2));color:var(--hn-texto);}

/* ---- Bloque de instrucciones (antes muy alto): ahora una franja compacta ---- */
.hero-assist{
  --hc:var(--hn);
  margin:12px auto 10px;
  padding:9px 14px;
  gap:8px 12px;
  background:var(--hn-suave);
  border:1px solid var(--hn-borde);
  border-left:4px solid var(--hn);
  border-radius:var(--hn-radio);
  box-shadow:none;
  align-items:center;
}
.hero-assist-text{gap:10px;}
.hero-assist-icon{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--hn),var(--hn-2));color:var(--hn-texto);box-shadow:none;}
.hero-assist-icon svg{width:16px;height:16px;}
.hero-assist h2{font-size:13px;line-height:1.28;margin:0 0 1px;font-weight:700;color:var(--gris-texto);}
.hero-assist p{font-size:12px;line-height:1.3;color:var(--gris-suave);}
/* "Vacante más cercana a mí": acción secundaria, compacta y con buen contraste */
.hero-assist .btn-cercania{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:#fff;color:var(--hn-oscuro);
  border:1.5px solid var(--hn);
  border-radius:999px;
  padding:0 14px;height:34px;font-size:12.5px;font-weight:700;line-height:1;
  box-shadow:none;
}
.hero-assist .btn-cercania:hover{background:var(--hn);color:var(--hn-texto);filter:none;}
.hero-assist-status{font-size:11.5px;}
.hero-assist-status:empty{display:none;}

/* ---- Hannmat: tres accesos, una sola identidad (color, radios, estilo) ---- */
/* Menú: acceso normal */
.btn-hannmat{
  background:linear-gradient(135deg,var(--hn),var(--hn-2));
  color:var(--hn-texto);
  border-radius:999px;
  padding:8px 15px;font-size:13px;font-weight:700;
  box-shadow:none;
}
.btn-hannmat:hover{filter:brightness(1.06);transform:translateY(-1px);}
.btn-hannmat.btn-hannmat-compact{padding:7px 12px;font-size:12.5px;}
/* Flotante: acceso rápido y discreto */
.chat-fab{
  width:48px;height:48px;right:14px;bottom:14px;
  background:linear-gradient(135deg,var(--hn),var(--hn-2));
  color:var(--hn-texto);
  box-shadow:0 4px 14px rgba(20,30,50,.22);
  opacity:.94;
}
.chat-fab:hover{opacity:1;}
.chat-fab svg{width:21px;height:21px;}
.chat-fab-hint-texto strong{color:var(--hn-oscuro);}
/* Panel del chat con la misma identidad */
.chat-panel-header{background:linear-gradient(135deg,var(--hn),var(--hn-2));color:var(--hn-texto);}
.chat-bubble.user{background:linear-gradient(135deg,var(--hn),var(--hn-2));color:var(--hn-texto);}
.chat-bubble.bot a{color:var(--hn-oscuro);}
.chat-suggestion-chip{color:var(--hn-oscuro);border-color:var(--hn-borde);border-radius:999px;}
.chat-suggestion-chip:hover{background:var(--hn-suave);border-color:var(--hn);}
.chat-send-btn{background:var(--hn);color:var(--hn-texto);}
.chat-send-btn:hover{background:var(--hn-oscuro);}
.chat-input-row input:focus{border-color:var(--hn);}

/* ---- Tarjetas de vacantes: misma estructura, más aire y mejor jerarquía ---- */
.vacantes-grid{gap:12px;}
.vacante-card{padding:14px 13px 13px;gap:9px;border-radius:14px;}
.vacante-card .puesto{font-size:15px;line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.vacante-card .precio{font-size:18px;line-height:1.1;}
.vacante-card .info-row{gap:5px 8px;line-height:1.35;}
.vacante-card .info-item{align-items:flex-start;}
.vacante-card .btn-ver-vacante{padding:9px 0;font-size:13px;border-radius:9px;background:var(--hn);color:var(--hn-texto);}
.vacante-card:hover .btn-ver-vacante{background:var(--hn-oscuro);box-shadow:none;}

@media(min-width:900px){
  .hero-assist{padding:11px 18px;}
  .vacante-card{padding:17px;}
  .vacante-card .btn-ver-vacante{padding:10px 0;}
}
@media(max-width:520px){
  .hero-assist{margin:8px 10px;padding:8px 10px;}
  .hero-assist h2{font-size:12px;}
  .hero-assist p{font-size:11px;}
  .hero-assist .btn-cercania{width:100%;height:32px;font-size:12px;}
  .vacantes-grid{gap:10px;padding-left:12px;padding-right:12px;}
  .vacante-card{padding:12px 11px 11px;}
  .vacante-card .puesto{font-size:14px;}
  .vacante-card .precio{font-size:17px;}
  .vacante-card .info-row{font-size:11.5px;}
}


/* ---------- Campos de contraseña con "ojito" para ver lo que se escribe (panel admin) ---------- */
.form-group input[type=password],
.form-group .pass-wrap input[type=text]{
  width:100%;padding:11px 13px;
  border:1.5px solid var(--borde);
  border-radius:10px;
  font-size:14px;
  background:var(--gris-claro);
}
.pass-wrap{position:relative;display:block;width:100%;}
.pass-wrap input{padding-right:46px !important;}
.pass-wrap .pass-ojo{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#64748b;border-radius:8px;
}
.pass-wrap .pass-ojo:hover{color:var(--azul);background:rgba(30,111,217,.08);}


/* ---------- Configuración: "Mi cuenta" desplegable con flecha ---------- */
.cuenta-acordeon{border:1px solid var(--borde);border-radius:12px;background:#fff;}
.cuenta-acordeon summary{
  cursor:pointer;padding:14px 16px;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:14px;font-weight:700;color:var(--azul-oscuro);
  -webkit-tap-highlight-color:transparent;
}
.cuenta-acordeon summary::-webkit-details-marker{display:none;}
.cuenta-acordeon-titulo{display:flex;align-items:center;gap:8px;}
.cuenta-acordeon-flecha{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--azul-claro);color:var(--azul);
  transition:transform .2s ease;flex:none;
}
.cuenta-acordeon[open] .cuenta-acordeon-flecha{transform:rotate(180deg);}
.cuenta-acordeon[open] summary{border-bottom:1px solid var(--gris-borde-suave);}
.cuenta-acordeon-body{padding:6px 16px 16px;margin-bottom:0;}
.cuenta-acordeon-body input[type=text]{
  width:100%;padding:11px 13px;border:1.5px solid var(--borde);border-radius:10px;
  font-size:14px;background:var(--gris-claro);
}
.cuenta-acordeon-body .form-hint{display:block;margin-top:8px;}

/* ---------- Accesos: fila de administrador con botón Eliminar siempre visible ---------- */
.acceso-fila{display:flex;align-items:flex-start;gap:8px;margin-top:8px;}
.acceso-det{flex:1;min-width:0;border:1px solid #d9dee7;border-radius:10px;padding:10px 12px;background:#fff;}
.acceso-det summary{cursor:pointer;font-weight:600;}
.acceso-eliminar-form{margin:0;flex:none;}
.acceso-eliminar{flex:none;white-space:nowrap;height:42px;display:inline-flex;align-items:center;gap:6px;}
.acceso-eliminar[disabled]{opacity:.45;cursor:not-allowed;}
@media(max-width:420px){
  .acceso-eliminar{padding:0 10px;font-size:12.5px;}
}


/* =====================================================
   v8: imagen de Hannmat, fila buscador + "Cerca de mí",
   aviso de bienvenida y botones de acción del detalle
   ===================================================== */

/* ---- Imagen circular de Hannmat ---- */
.hannmat-img{display:block;border-radius:50%;object-fit:cover;flex-shrink:0;}
.btn-hannmat .hannmat-img{
  width:24px;height:24px;
  box-shadow:0 0 0 2px rgba(255,255,255,.85);
  background:#fff;
}
.btn-hannmat.btn-hannmat-compact .hannmat-img{width:22px;height:22px;}
.btn-hannmat{gap:8px;padding-left:8px;}
.btn-hannmat.btn-hannmat-compact{padding-left:6px;}
.chat-fab{padding:0;}
.chat-fab .hannmat-img{
  width:40px;height:40px;
  box-shadow:0 0 0 2px rgba(255,255,255,.9);
}
.chat-fab svg{width:auto;height:auto;}
.chat-panel-header .chat-avatar{background:#fff;padding:0;overflow:hidden;}
.chat-panel-header .chat-avatar .hannmat-img{width:38px;height:38px;}
.exito-box .icono{width:84px;height:84px;background:transparent;overflow:visible;}
.exito-box .icono .hannmat-img{width:84px;height:84px;box-shadow:0 6px 18px rgba(20,30,50,.18);}
@media(max-width:520px){
  .chat-fab .hannmat-img{width:38px;height:38px;}
}

/* ---- Fila compacta: buscador + "Cerca de mí" (sigue el color del banner) ---- */
.toolbar.hero-assist{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;
  gap:8px 10px;
  max-width:1180px;margin:14px auto 14px;padding:0 20px;
  background:transparent;border:0;border-left:0;border-radius:0;box-shadow:none;
}
.toolbar.hero-assist .buscador{flex:1 1 0;min-width:0;}
.toolbar.hero-assist .buscador input{height:42px;padding-top:0;padding-bottom:0;}
.toolbar.hero-assist .btn-cercania{
  flex:0 0 auto;width:auto;height:42px;padding:0 16px;
  font-size:13.5px;font-weight:700;gap:6px;white-space:nowrap;
  border-radius:999px;
}
.toolbar.hero-assist .hero-assist-status{flex:1 1 100%;margin:0;padding:0 4px;}
@media(max-width:520px){
  .toolbar.hero-assist{margin:10px 0 10px;padding:0 12px;gap:6px 8px;}
  .toolbar.hero-assist .btn-cercania{width:auto;height:40px;padding:0 13px;font-size:12.5px;}
  .toolbar.hero-assist .buscador input{height:40px;font-size:13.5px;}
}

/* ---- Aviso de bienvenida de Hannmat ---- */
.bienvenida-hn{
  position:fixed;left:50%;bottom:20px;z-index:950;
  width:min(380px, calc(100vw - 24px));
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 36px 14px 14px;
  background:#fff;border-radius:16px;
  border:1px solid var(--hn-borde, #dbe4f3);
  border-left:5px solid var(--hn, var(--banner-color, #1e6fd9));
  box-shadow:0 14px 38px rgba(20,30,50,.22), 0 2px 6px rgba(20,30,50,.08);
  transform:translate(-50%, 24px);opacity:0;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.1), opacity .3s ease;
}
.bienvenida-hn.visible{transform:translate(-50%, 0);opacity:1;}
.bienvenida-hn.oculto{display:none;}
.bienvenida-hn-avatar{flex:0 0 auto;}
.bienvenida-hn-avatar .hannmat-img{
  width:46px;height:46px;
  box-shadow:0 0 0 3px var(--hn-suave, #eaf1fc), 0 0 0 4px var(--hn, var(--banner-color, #1e6fd9));
}
.bienvenida-hn-cuerpo{min-width:0;display:flex;flex-direction:column;gap:8px;}
.bienvenida-hn-fila{display:flex;align-items:flex-start;gap:8px;}
.bienvenida-hn-fila p{margin:0;font-size:13.5px;line-height:1.35;color:var(--gris-texto, #1f2a37);}
.bienvenida-hn-fila strong{font-weight:800;color:var(--hn-oscuro, var(--banner-color, #14509e));}
.bienvenida-hn-ico{
  flex:0 0 auto;width:24px;height:24px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--hn-suave, #eaf1fc);color:var(--hn-oscuro, var(--banner-color, #14509e));
}
.bienvenida-hn-btn{
  align-self:flex-start;margin-top:2px;
  height:34px;padding:0 16px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg,var(--hn, var(--banner-color, #1e6fd9)),var(--hn-2, var(--banner-color-2, #14509e)));
  color:var(--hn-texto, var(--banner-color-texto, #fff));
  font-size:13px;font-weight:700;
  transition:transform .12s ease, filter .15s ease;
}
.bienvenida-hn-btn:hover{filter:brightness(1.07);}
.bienvenida-hn-btn:active{transform:scale(.97);}
.bienvenida-hn-cerrar{
  position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  border:0;background:#f1f3f6;color:#5b6675;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.bienvenida-hn-cerrar:hover{background:#e4e8ee;}
@media(max-width:520px){
  /* deja libre la esquina del botón flotante */
  .bienvenida-hn{left:12px;right:74px;width:auto;bottom:14px;transform:translateY(24px);}
  .bienvenida-hn.visible{transform:translateY(0);}
  .bienvenida-hn-avatar .hannmat-img{width:40px;height:40px;}
  .bienvenida-hn-fila p{font-size:12.5px;}
}

/* ---- Botones del detalle: "Quiero esta vacante", "Ver ruta de transporte" y "Compartir vacante" ---- */
.detalle-acciones,.empleo-acciones{gap:10px;}
.btn-principal{
  height:54px;padding:0 20px;border-radius:14px;gap:11px;
  background:#16a34a;color:#fff;
  font-size:16.5px;font-weight:600;letter-spacing:.1px;
  box-shadow:0 8px 20px -6px rgba(22,163,74,.55), 0 1px 2px rgba(22,163,74,.25);
  transition:background-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.btn-principal:hover{background:#15963f;box-shadow:0 10px 24px -6px rgba(22,163,74,.6), 0 1px 2px rgba(22,163,74,.3);}
.btn-principal:active{background:#128a38;transform:scale(.985);}
.btn-principal .ef-icon-wa{width:24px;height:24px;flex:0 0 auto;}
.btn-secundario{
  height:52px;padding:0 20px;border-radius:14px;gap:11px;
  background:#fff;color:#12264d;
  border:1.5px solid #d7dde7;
  font-size:16px;font-weight:600;
  box-shadow:0 1px 2px rgba(20,30,50,.05);
  transition:background-color .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.btn-secundario .ef-icon{width:22px;height:22px;flex:0 0 auto;stroke-width:2;}
.btn-secundario:hover{background:#f5f7fb;border-color:#b9c3d4;box-shadow:0 4px 12px rgba(20,30,50,.08);}
.btn-secundario:active{background:#eceff5;transform:scale(.985);}
.btn-compartir{
  height:52px;border-radius:14px;gap:11px;
  background:linear-gradient(180deg,#2f80f5,#1a6ae6);color:#fff;
  font-size:16px;font-weight:600;
  box-shadow:0 8px 20px -6px rgba(26,106,230,.55), 0 1px 2px rgba(26,106,230,.25);
  transition:filter .15s ease, transform .12s ease, box-shadow .15s ease;
}
.btn-compartir .ef-icon{width:21px;height:21px;flex:0 0 auto;stroke-width:2;}
.btn-compartir:hover{filter:brightness(1.06);background:linear-gradient(180deg,#2f80f5,#1a6ae6);box-shadow:0 10px 24px -6px rgba(26,106,230,.6);}
.btn-compartir:active{filter:brightness(.96);background:linear-gradient(180deg,#2f80f5,#1a6ae6);transform:scale(.985);}
@media(min-width:640px){
  .detalle-acciones{align-items:stretch;}
}
@media(min-width:640px){
  .btn-principal{flex:1.25 1 0;}
  .btn-secundario{flex:1 1 auto;white-space:nowrap;padding:0 18px;font-size:15.5px;}
}

/* Botones rápidos del chat cuando hay una vacante en conversación */
.chat-suggestions{max-height:132px;overflow-y:auto;}
.chat-suggestion-chip.principal{background:linear-gradient(135deg,var(--hn),var(--hn-2));color:var(--hn-texto);border-color:transparent;}
.chat-suggestion-chip.principal:hover{filter:brightness(1.07);background:linear-gradient(135deg,var(--hn),var(--hn-2));}

/* Botones de respuesta rápida del chat (Hombre / Mujer) y pregunta del formulario */
.chat-botones,.pf-sexo-pregunta{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px;}
.pf-sexo-pregunta{background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:12px;margin:0 0 12px;}
.pf-sexo-pregunta p{width:100%;margin:0 0 4px;font-weight:600;}
.chat-boton{flex:1 1 40%;min-height:42px;padding:8px 14px;border:0;border-radius:999px;background:var(--azul,#1e6fd9);color:#fff;font-weight:700;font-size:15px;cursor:pointer;}
.chat-boton:active{transform:scale(.97);}

/* =====================================================
   IMAGEN DE LA TARJETA — de esquina a esquina y SIEMPRE completa (vista pública y admin)
   El recuadro toma la altura natural de la imagen (ancho 100%, alto automático), así no se recorta.
   Si una imagen fuera muy alta, se limita con max-height y se ve completa (contain) sobre fondo suave.
   --cp-x / --cp-t = relleno de la tarjeta (para "romper" el relleno y pegar la imagen a las esquinas).
   ===================================================== */
.vacante-card{--cp-x:13px;--cp-t:14px;}
@media(min-width:900px){.vacante-card{--cp-x:17px;--cp-t:17px;}}
@media(max-width:520px){.vacante-card{--cp-x:11px;--cp-t:12px;}}
#grid-admin-vacantes.vacantes-grid .vacante-card{--cp-x:18px;--cp-t:18px;}
@media(max-width:520px){#grid-admin-vacantes.vacantes-grid .vacante-card{--cp-x:12px;--cp-t:14px;}}
@media(max-width:380px){#grid-admin-vacantes.vacantes-grid .vacante-card{--cp-x:9px;--cp-t:12px;}}

.vacante-card .logo-box,
#grid-admin-vacantes .logo-box{
  flex:0 0 auto;
  width:calc(100% + var(--cp-x) * 2);
  height:auto;
  margin:calc(var(--cp-t) * -1) calc(var(--cp-x) * -1) 0;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:13px 13px 0 0;
  background:#f8fafc;
  box-sizing:border-box;
  display:block;
}
.vacante-card .logo-box img,
.vacante-card .logo{display:block;width:100%;height:auto;max-height:230px;object-fit:contain;object-position:center;}
.vacante-card .logo-fallback{min-height:104px;font-size:15px;letter-spacing:.02em;}

@media(min-width:560px){
  .vacante-card .logo-box img,.vacante-card .logo{max-height:260px;}
  .vacante-card .logo-fallback{min-height:124px;font-size:17px;}
}
@media(min-width:900px){
  .vacante-card .logo-box img,.vacante-card .logo{max-height:300px;}
  .vacante-card .logo-fallback{min-height:140px;font-size:19px;}
}

/* Admin: el menú ⋮ no ocupa espacio (flota sobre la imagen); evitamos que genere una fila extra */
#grid-admin-vacantes .vacante-card-top{flex-wrap:nowrap;gap:0;}
#grid-admin-vacantes .logo-box{flex:0 1 auto;min-width:0;}

/* Logo en el detalle de la vacante (modal): un poco más grande */
.detalle-logo{height:64px;max-width:100%;object-fit:contain;}

/* =====================================================
   MODAL DETALLE DE VACANTE: botones + logo FIJOS, todo lo demás con scroll
   Arriba (fijo): botones y logo.
   Abajo (scroll): ubicación/empresa, puesto/salario, descripción y "Compartir vacante".
   ===================================================== */
.modal-box.modal-detalle{
  display:flex;flex-direction:column;
  padding:0;
  overflow:hidden;               /* el scroll vive en .detalle-scroll, no en la caja */
  max-height:calc(100vh - 60px);
  max-height:calc(100dvh - 60px);
}
.modal-detalle .detalle-fijo{
  flex:0 0 auto;
  padding:56px 24px 12px;        /* arriba deja lugar a la X de cerrar (no se encima con los botones) */
  background:#fff;               /* sin raya ni sombra divisoria */
  position:relative;z-index:2;
}
.modal-detalle .modal-close{top:10px;right:12px;}
.modal-detalle .detalle-fijo .detalle-acciones{margin:0 0 12px;}
.modal-detalle .detalle-fijo .detalle-header{margin:0;}
.modal-detalle .detalle-fijo .detalle-header:empty{display:none;}
.modal-detalle .detalle-scroll{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:14px 24px 24px;
  scrollbar-width:thin;
}
.modal-detalle .detalle-scroll .detalle-puesto{margin:2px 0 12px;}
.modal-detalle .detalle-scroll .detalle-descripcion{margin:0;}
@media(max-width:600px){
  .modal-box.modal-detalle{padding:0;max-height:calc(100vh - 30px);max-height:calc(100dvh - 30px);}
  .modal-detalle .detalle-fijo{padding:54px 16px 10px;}
  .modal-detalle .detalle-fijo .detalle-acciones{gap:8px;margin-bottom:10px;}
  .modal-detalle .detalle-fijo .btn-principal{height:48px;font-size:15.5px;}
  .modal-detalle .detalle-fijo .btn-secundario{height:46px;font-size:15px;}
  .modal-detalle .detalle-logo{height:48px;}
  .modal-detalle .detalle-scroll{padding:12px 16px 20px;}
}
/* Pantallas bajitas (celular acostado): botones en una fila y logo chico para dejar espacio al scroll */
@media(max-height:560px){
  .modal-detalle .detalle-fijo{padding-top:50px;}
  .modal-detalle .detalle-fijo .detalle-acciones{flex-direction:row;}
  .modal-detalle .detalle-fijo .btn-principal,
  .modal-detalle .detalle-fijo .btn-secundario{flex:1 1 0;height:42px;font-size:14px;padding:0 10px;}
  .modal-detalle .detalle-logo{height:34px;}
}


/* =====================================================
   v9: botón de Hannmat en el encabezado (fondo blanco, sin cápsula azul),
   botón flotante con el mismo estilo y aviso de bienvenida más compacto.
   Solo estilos: no cambia ninguna función.
   ===================================================== */
:root{
  --hn-navy:#0b1d3a;
  --hn-turquesa:#19d3da;
  --hn-nombre:#0b2a5b;
}

/* ---- Icono: robot sobre círculo azul oscuro con detalle turquesa ---- */
.btn-hannmat .hn-avatar,
.chat-fab{
  background:var(--hn-navy);
  box-shadow:0 0 0 2px var(--hn-turquesa), 0 2px 8px rgba(11,29,58,.25);
}
.btn-hannmat .hn-avatar{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:36px;height:36px;border-radius:50%;padding:3px;
}
.btn-hannmat .hn-avatar .hannmat-img{
  width:100%;height:100%;box-shadow:none;background:transparent;
}

/* ---- Botón del encabezado: fondo blanco, nombre azul oscuro + subtítulo ---- */
.btn-hannmat,
.btn-hannmat.btn-hannmat-compact{
  background:#fff;color:var(--hn-nombre);
  border:1px solid #e3e8f0;border-radius:14px;
  padding:5px 12px 5px 6px;gap:9px;
  box-shadow:0 1px 3px rgba(11,29,58,.08);
}
.btn-hannmat:hover{
  background:#fff;filter:none;transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(11,29,58,.14);
}
.btn-hannmat .hn-textos{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;text-align:left;}
.btn-hannmat .hn-nombre{font-size:15px;font-weight:800;color:var(--hn-nombre);letter-spacing:.1px;}
.btn-hannmat .hn-sub{font-size:10.5px;font-weight:500;color:#5b6675;margin-top:2px;}
.btn-hannmat.btn-hannmat-compact .hn-avatar{width:34px;height:34px;}
@media(max-width:480px){
  /* "span.full" del nombre ya no se usa; que el botón nunca se oculte */
  .btn-hannmat.btn-hannmat-compact .hn-nombre{font-size:14px;}
}

/* ---- Botón flotante: mismo estilo (círculo azul oscuro, borde turquesa) ---- */
.chat-fab{
  width:52px;height:52px;padding:0;opacity:1;
  background:var(--hn-navy);
  box-shadow:0 0 0 2px var(--hn-turquesa), 0 4px 14px rgba(11,29,58,.3);
}
.chat-fab .hannmat-img{width:44px;height:44px;box-shadow:none;}
@media(max-width:520px){
  .chat-fab{width:50px;height:50px;}
  .chat-fab .hannmat-img{width:42px;height:42px;}
}

/* ---- Aviso emergente más pequeño: no tapa las vacantes ---- */
.bienvenida-hn{
  bottom:16px;width:min(300px, calc(100vw - 24px));
  gap:8px;padding:8px 30px 8px 10px;border-radius:12px;
  border-left-width:3px;
  box-shadow:0 8px 22px rgba(20,30,50,.2);
}
.bienvenida-hn-avatar{display:none;}
.bienvenida-hn-cuerpo{gap:4px;}
.bienvenida-hn-fila{gap:6px;}
.bienvenida-hn-fila p{font-size:12px;line-height:1.3;}
.bienvenida-hn-ico{display:none;}
.bienvenida-hn-btn{height:26px;padding:0 12px;font-size:12px;margin-top:0;}
.bienvenida-hn-cerrar{top:5px;right:5px;width:22px;height:22px;}
@media(max-width:520px){
  .bienvenida-hn{left:12px;right:74px;width:auto;bottom:12px;padding:8px 28px 8px 10px;}
  .bienvenida-hn-avatar{display:none;}
  .bienvenida-hn-fila p{font-size:11.5px;}
}

/* ---- v9.1: botón de Hannmat del encabezado más discreto (fondo blanco, sin borde ni sombra) ---- */
.site-header .btn-hannmat,
.site-header .btn-hannmat.btn-hannmat-compact{
  background:#fff;border:0;box-shadow:none;border-radius:12px;
  padding:3px 8px 3px 3px;gap:7px;
}
.site-header .btn-hannmat:hover,
.site-header .btn-hannmat:active{background:#fff;box-shadow:none;filter:none;transform:none;}
.site-header .btn-hannmat .hn-avatar,
.site-header .btn-hannmat.btn-hannmat-compact .hn-avatar{
  width:30px;height:30px;padding:2px;
  box-shadow:0 0 0 1px rgba(25,211,218,.55);
}
.site-header .btn-hannmat .hn-nombre{font-size:13.5px;}
.site-header .btn-hannmat .hn-sub{font-size:9.5px;margin-top:1px;}

/* ---- v9.2: el color dinámico del panel ("menu") pintaba el botón con !important; en el encabezado siempre va blanco ---- */
.site-header .btn-hannmat,
.site-header .btn-hannmat.btn-hannmat-compact,
.site-header .btn-hannmat:hover,
.site-header .btn-hannmat:active{
  background:#fff !important;
  background-image:none !important;
  color:var(--hn-nombre) !important;
  border:0 !important;
  box-shadow:none !important;
}

/* ---- v9.3: en celular el botón de Hannmat va pegado al menú hamburguesa (a su izquierda) ---- */
@media(max-width:860px){
  .site-header .btn-hannmat.btn-hannmat-compact{
    position:static;transform:none;
    margin:0 -6px 0 auto;
  }
}

/* ---- v10: tarjetas públicas más compactas (para que no superen la altura del banner) ---- */
@media(max-width:520px){
  .vacante-card{padding:10px 10px 10px;gap:5px;--cp-x:10px;--cp-t:10px;}
  .vacante-card .puesto{font-size:13.5px;line-height:1.22;}
  .vacante-card .precio{font-size:16px;}
  .vacante-card .info-row{gap:3px 6px;line-height:1.25;font-size:12.5px;}
  .vacante-card .btn-ver-vacante{padding:7px 0;font-size:12.5px;}
}

/* ---- v11: logo del propietario en el formulario de postulación ---- */
.postular-vacante-icono.postular-vacante-logo{
  width:52px;height:52px;background:#fff;border:1px solid #d6e5fa;border-radius:12px;padding:3px;box-sizing:border-box;
}
.postular-vacante-icono.postular-vacante-logo img{width:100%;height:100%;object-fit:contain;display:block;}

/* ---- v11: "Corregir datos del flyer" bien visible, con separación del botón de descarga ---- */
.flyer-editor{margin:6px 0 14px;}
.flyer-editor > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:14px;
  background:#fff8e1;border:2px solid #f5b400;color:#6b4300;
  box-shadow:0 2px 8px rgba(245,180,0,.25);
  -webkit-tap-highlight-color:transparent;
}
.flyer-editor > summary::-webkit-details-marker{display:none;}
.flyer-editor > summary::after{content:"▾";margin-left:auto;font-size:18px;transition:transform .2s ease;}
.flyer-editor[open] > summary::after{transform:rotate(180deg);}
.flyer-editor-ico{
  flex:0 0 auto;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#f5b400;color:#fff;font-size:20px;font-weight:700;
}
.flyer-editor-tit{display:flex;flex-direction:column;font-size:15.5px;font-weight:800;line-height:1.2;}
.flyer-editor-tit small{font-size:12px;font-weight:500;color:#8a5a00;margin-top:2px;}
.flyer-editor-body{display:flex;flex-direction:column;gap:10px;padding:12px 2px 4px;}
.flyer-editor-body label{display:block;font-size:12.5px;font-weight:700;margin-bottom:3px;}
.flyer-editor-body input,.flyer-editor-body textarea{width:100%;box-sizing:border-box;}

/* ---- v12: formulario de postulación personalizado con el banner y los colores del sistema ---- */
.postular{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--banner-color,#1e6fd9) 16%,#fff) 0%,
    color-mix(in srgb,var(--banner-color-2,#14509e) 8%,#f7f9fc) 100%);
}
.postular::before{
  content:"";position:absolute;inset:-30px;z-index:-1;
  background:var(--postular-banner) center top/cover no-repeat;
  filter:blur(26px) saturate(1.15);opacity:.42;
}
.postular::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(247,249,252,.85) 70%,#f7f9fc 100%);
}
.postular-card{
  --pc-x:22px;--pc-t:28px;
  overflow:hidden;border:0;
  box-shadow:0 18px 50px rgba(15,37,71,.22),0 2px 8px rgba(15,37,71,.08);
}
@media(min-width:640px){.postular-card{--pc-x:36px;--pc-t:36px;}}
/* Cabecera de la tarjeta: la imagen del banner con un velo del color del sistema */
.postular-head{
  margin:calc(var(--pc-t) * -1) calc(var(--pc-x) * -1) 22px;
  padding:26px var(--pc-x) 24px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--banner-color,#1e6fd9) 90%,transparent),
      color-mix(in srgb,var(--banner-color-2,#14509e) 84%,transparent)),
    var(--postular-banner) center/cover no-repeat;
  color:var(--banner-color-texto,#fff);
}
.postular-head h1{color:inherit;text-shadow:0 1px 6px rgba(0,0,0,.18);}
.postular-head p{color:inherit;opacity:.92;}
/* Detalles con el color del sistema */
.postular-vacante{
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--banner-color,#1e6fd9) 11%,#fff),
    color-mix(in srgb,var(--banner-color-2,#14509e) 9%,#fff));
  border-color:color-mix(in srgb,var(--banner-color,#1e6fd9) 30%,#fff);
}
.postular-vacante-label{color:color-mix(in srgb,var(--banner-color,#1e6fd9) 78%,#000);}
.pf-seccion h2{border-bottom-color:color-mix(in srgb,var(--banner-color,#1e6fd9) 22%,#fff);}
.pf-seccion h2 span{background:linear-gradient(135deg,var(--banner-color,#1e6fd9),var(--banner-color-2,#14509e));color:var(--banner-color-texto,#fff);}
.pf-campo input:focus,.pf-campo select:focus,.pf-campo textarea:focus{
  border-color:var(--banner-color,#1e6fd9);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--banner-color,#1e6fd9) 18%,transparent);
}
.pf-chip input:checked + span{
  border-color:var(--banner-color,#1e6fd9);
  background:color-mix(in srgb,var(--banner-color,#1e6fd9) 12%,#fff);
  color:color-mix(in srgb,var(--banner-color,#1e6fd9) 75%,#000);
  box-shadow:inset 0 0 0 1px var(--banner-color,#1e6fd9);
}
.pf-enviar{
  background:linear-gradient(135deg,var(--banner-color,#1e6fd9),var(--banner-color-2,#14509e));
  color:var(--banner-color-texto,#fff);
  box-shadow:0 8px 20px color-mix(in srgb,var(--banner-color,#1e6fd9) 38%,transparent);
}
.pf-enviar:hover{background:linear-gradient(135deg,var(--banner-color,#1e6fd9),var(--banner-color-2,#14509e));filter:brightness(1.07);}

/* ---- v12: edición directa sobre el flyer ---- */
.flyer-canvas-wrap{position:relative;}
.flyer-editar-btn{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;
  padding:12px 14px;margin:2px 0 8px;border-radius:14px;font:inherit;
  background:#fff8e1;border:2px solid #f5b400;color:#6b4300;
  box-shadow:0 2px 8px rgba(245,180,0,.25);
  -webkit-tap-highlight-color:transparent;
}
.flyer-editar-btn.activo{background:#e8f7ee;border-color:#2fae4e;color:#14532d;box-shadow:0 2px 8px rgba(47,174,78,.25);}
.flyer-editar-btn.activo .flyer-editor-ico{background:#2fae4e;}
.flyer-editar-btn .flyer-editor-tit small{color:inherit;opacity:.8;}
.flyer-zonas{position:absolute;inset:0;z-index:3;}
.flyer-zona{
  position:absolute;padding:0;cursor:text;
  background:rgba(245,180,0,.10);border:2px dashed #f5b400;border-radius:10px;
  -webkit-tap-highlight-color:transparent;
  animation:flyerZonaPulso 1.6s ease-in-out 2;
}
.flyer-zona::after{
  content:"✎";position:absolute;top:-9px;right:-6px;width:20px;height:20px;border-radius:50%;
  background:#f5b400;color:#fff;font-size:12px;line-height:20px;text-align:center;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.flyer-zona:hover,.flyer-zona:focus-visible{background:rgba(245,180,0,.22);outline:none;}
@keyframes flyerZonaPulso{0%,100%{background:rgba(245,180,0,.10);}50%{background:rgba(245,180,0,.30);}}
.flyer-inline-ed{
  position:absolute;z-index:6;box-sizing:border-box;line-height:1.3;
  background:#fff;border:2px solid #f5b400;border-radius:12px;padding:8px;
  box-shadow:0 10px 30px rgba(15,37,71,.35);
  display:flex;flex-direction:column;gap:4px;
}
.flyer-inline-ed label{font-size:11px;font-weight:700;color:#8a5a00;}
.flyer-inline-ed input,.flyer-inline-ed textarea{
  width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:#10213f;
  border:1.5px solid #d9e0ec;border-radius:8px;padding:6px 8px;background:#fff;resize:vertical;
}
.flyer-inline-ed input:focus,.flyer-inline-ed textarea:focus{outline:none;border-color:#f5b400;box-shadow:0 0 0 3px rgba(245,180,0,.25);}
.flyer-inline-ok{
  align-self:flex-end;margin-top:4px;border:0;border-radius:999px;cursor:pointer;
  background:#2fae4e;color:#fff;font-weight:700;font-size:13px;padding:6px 16px;
}
/* El formulario completo queda como opción secundaria, discreta */
.flyer-editor > summary{
  display:block;padding:8px 4px;background:none;border:0;box-shadow:none;border-radius:0;
  color:var(--gris-suave);font-size:13px;font-weight:600;text-decoration:underline;
}
.flyer-editor > summary::after{content:none;}

/* ---- v13: botón "Cerca de mí" más profesional (icono en círculo, sombra suave) y autobús sólido en las tarjetas ---- */
.toolbar.hero-assist .btn-cercania,
.hero-assist .btn-cercania{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:0 16px 0 6px;font-weight:700;letter-spacing:.1px;
  box-shadow:0 2px 8px rgba(15,37,71,.10);
  transition:box-shadow .15s ease, transform .1s ease, background-color .15s ease, color .15s ease;
}
.btn-cercania .cerca-ico{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:currentColor;
}
.btn-cercania .cerca-ico svg{width:14px;height:14px;color:#fff;stroke:#fff;}
.btn-cercania:hover{box-shadow:0 4px 14px rgba(15,37,71,.18);}
.btn-cercania:hover .cerca-ico{background:#fff;}
.btn-cercania:hover .cerca-ico svg{color:var(--hn,#1e6fd9);stroke:var(--hn,#1e6fd9);}
.btn-cercania:active{transform:scale(.97);}
.btn-cercania:disabled{opacity:.75;cursor:wait;}
@media(max-width:520px){
  .toolbar.hero-assist .btn-cercania{padding:0 13px 0 5px;gap:6px;}
  .btn-cercania .cerca-ico{width:24px;height:24px;}
}
.vacante-card .info-item svg.ef-icon-bus-lleno,.vacante-card .info-item .ef-icon-bus{flex-shrink:0;}

/* ---- v13.1: botón de Hannmat del encabezado con interacción sutil ---- */
.site-header .btn-hannmat .hn-avatar{transition:box-shadow .18s ease, transform .18s ease;}
.site-header .btn-hannmat .hn-nombre{transition:color .18s ease;}
.site-header .btn-hannmat,
.site-header .btn-hannmat.btn-hannmat-compact{transition:background-color .18s ease, transform .1s ease;cursor:pointer;}
.site-header .btn-hannmat:hover,
.site-header .btn-hannmat.btn-hannmat-compact:hover,
.site-header .btn-hannmat:focus-visible{
  background:#f3f7fc !important;           /* velo azul muy tenue */
  outline:none;
}
.site-header .btn-hannmat:hover .hn-avatar,
.site-header .btn-hannmat:focus-visible .hn-avatar{
  box-shadow:0 0 0 2px rgba(25,211,218,.85), 0 2px 8px rgba(25,211,218,.35);
  transform:scale(1.05);
}
.site-header .btn-hannmat:hover .hn-nombre{color:#0b3a8c;}
.site-header .btn-hannmat:active,
.site-header .btn-hannmat.btn-hannmat-compact:active{background:#e9f0fa !important;transform:scale(.97) !important;}
.site-header .btn-hannmat:focus-visible{box-shadow:0 0 0 2px rgba(25,211,218,.6) !important;}


/* =====================================================
   v14: aviso de bienvenida igual al de "¿Sigues interesado en...?" (burbuja junto al botón flotante),
   botones del detalle del mismo tamaño e imagen de la vacante más grande.
   ===================================================== */
.bienvenida-hn,
.bienvenida-hn.visible{
  position:fixed;left:auto;right:18px;bottom:82px;top:auto;
  width:auto;max-width:min(78vw, 280px);
  display:flex;flex-direction:row;gap:8px;align-items:flex-start;
  padding:12px 14px;
  background:#fff;border:1.5px solid var(--gris-borde-suave);border-left:1.5px solid var(--gris-borde-suave);
  border-radius:16px 16px 4px 16px;
  box-shadow:0 10px 28px rgba(20,30,50,.18);
  font-size:13px;color:var(--gris-texto);
  z-index:1300;
  transform:translateY(8px);opacity:0;
  transition:transform .25s ease, opacity .25s ease;
}
.bienvenida-hn.visible{transform:translateY(0);opacity:1;}
.bienvenida-hn.oculto{display:none;}
.bienvenida-hn .bienvenida-hn-texto{cursor:pointer;line-height:1.35;font-size:13px;}
.bienvenida-hn .bienvenida-hn-texto strong{color:var(--banner-color, var(--azul));font-weight:700;}
.bienvenida-hn .bienvenida-hn-cerrar{
  position:static;flex-shrink:0;width:18px;height:18px;border-radius:0;
  border:none;background:none;color:var(--gris-suave);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.bienvenida-hn .bienvenida-hn-cerrar:hover{background:none;color:var(--gris-texto);}
@media(max-width:520px){
  .bienvenida-hn,.bienvenida-hn.visible{left:auto;right:14px;bottom:72px;width:auto;padding:12px 14px;}
  .bienvenida-hn.visible{transform:translateY(0);}
}

/* ---- Detalle de vacante: "Quiero esta vacante" y "Ver ruta de transporte" idénticos en tamaño ---- */
.modal-detalle .detalle-fijo .detalle-acciones{display:flex;gap:10px;align-items:stretch;}
.modal-detalle .detalle-fijo .btn-principal,
.modal-detalle .detalle-fijo .btn-secundario{
  flex:1 1 0;min-width:0;width:auto;height:52px;padding:0 16px;border-radius:14px;gap:10px;
  font-size:16px;font-weight:600;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
}
.modal-detalle .detalle-fijo .btn-secundario{border:1.5px solid #d7dde7;}
.modal-detalle .detalle-fijo .btn-principal .ef-icon-wa,
.modal-detalle .detalle-fijo .btn-secundario .ef-icon{width:22px;height:22px;flex:0 0 auto;}
@media(max-width:600px){
  .modal-detalle .detalle-fijo .detalle-acciones{flex-direction:column;}
  .modal-detalle .detalle-fijo .btn-principal,
  .modal-detalle .detalle-fijo .btn-secundario{flex:0 0 auto;width:100%;height:48px;font-size:15.5px;}
}

/* ---- Detalle de vacante: imagen grande y completa ---- */
.modal-detalle .detalle-fijo .detalle-header{margin:12px 0 0;display:block;}
.modal-detalle .detalle-logo{
  display:block;width:auto;height:auto;max-width:100%;
  max-height:min(42vh, 360px);
  object-fit:contain;border-radius:12px;
}
@media(max-width:600px){.modal-detalle .detalle-logo{max-height:34vh;}}
@media(max-height:560px){.modal-detalle .detalle-logo{max-height:28vh;}}