/* ============================================================
   ESTILOS -- BOLSA DE EMPLEO PÚBLICA
   ============================================================
   Hoja compartida por empleos.php, empleo_detalle.php,
   candidato_login.php y candidato_completar_perfil.php. Es
   independiente de estilos.css (el panel interno) a propósito --
   estas páginas las ve el público, nunca alguien logueado en el
   panel, así que no cargan el menú lateral ni nada de ahí.
   Mobile-first desde el inicio: las reglas base ya son las de
   celular, y las de PC se agregan encima con @media(min-width).
   ============================================================ */
:root{
  --azul-900:#0A1830; --azul-700:#0058B0; --azul-600:#0074E0; --azul-400:#4FA8E8;
  --acento:#00B4E8; --acento-suave:#E1F4FB;
  --papel:#F8FAFC; --papel-card:#FFFFFF; --linea:#E2E8F0; --hover-bg:#EEF2F7;
  --tinta:#1E293B; --tinta-suave:#64748B;
  --verde-bg:#DCFCE7; --verde:#15803D; --amarillo-bg:#FEF9C3; --rojo-bg:#FEE2E2; --rojo:#B23A2E;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --azul-900:#EAF1FB; --azul-700:#5CB0F5; --azul-600:#3B9AF5; --azul-400:#6EC2F5;
    --acento:#00C8F5; --acento-suave:#123A5C;
    --papel:#0A1830; --papel-card:#111F3A; --linea:#22314D; --hover-bg:#1A2C4E;
    --tinta:#EAF1FB; --tinta-suave:#94A9C9;
  }
}
:root[data-theme="dark"]{
  --azul-900:#EAF1FB; --azul-700:#5CB0F5; --azul-600:#3B9AF5; --azul-400:#6EC2F5;
  --acento:#00C8F5; --acento-suave:#123A5C;
  --papel:#0A1830; --papel-card:#111F3A; --linea:#22314D; --hover-bg:#1A2C4E;
  --tinta:#EAF1FB; --tinta-suave:#94A9C9;
}

*{ box-sizing:border-box; }
body{
  margin:0; font-family:'Inter',Arial,sans-serif; background:var(--papel); color:var(--tinta);
  font-size:15px; line-height:1.55;
}
a{ color:var(--azul-600); }
h1,h2,h3{ color:var(--azul-900); margin:0 0 8px; }
p{ margin:0 0 10px; }

/* ---------- Cabecera ---------- */
.cabecera-publica{ background:var(--papel-card); border-bottom:1px solid var(--linea); position:sticky; top:0; z-index:20; }
.cabecera-contenido{
  max-width:1100px; margin:0 auto; padding:14px 16px; display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.marca-publica{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.2rem; color:var(--azul-900); text-decoration:none; }
.marca-publica img{ height:38px; width:auto; }
.logo-claro{ display:inline-block !important; }
.logo-oscuro{ display:none !important; }
html[data-theme="dark"] .logo-claro{ display:none !important; }
html[data-theme="dark"] .logo-oscuro{ display:inline-block !important; }
.nav-publica{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.nav-publica a{ text-decoration:none; color:var(--tinta-suave); font-weight:600; font-size:.9rem; }
.nav-publica a.activo{ color:var(--azul-600); }
.btn-tema-publico{
  border:1px solid var(--linea); background:var(--papel-card); color:var(--tinta); border-radius:8px;
  padding:7px 12px; font-size:.82rem; font-weight:600; cursor:pointer; font-family:inherit;
}
.btn-tema-publico:hover{ background:var(--hover-bg); }

/* ---------- Menú de cuenta ----------
   En computadora se ve como enlaces normales, siempre visibles, sin
   tener que desplegar nada. Solo en celular (donde no caben todos
   los enlaces en una sola fila) se convierte en un botón que abre
   un desplegable. */
.menu-cuenta{ position:relative; display:flex; align-items:center; gap:8px; }
.saludo-cuenta{ font-size:.9rem; font-weight:600; color:var(--tinta-suave); }
.btn-menu-cuenta{
  border:1px solid var(--linea); background:var(--papel-card); color:var(--tinta); border-radius:8px;
  padding:7px 12px; font-size:.82rem; font-weight:600; cursor:pointer; font-family:inherit;
}
.btn-menu-cuenta:hover{ background:var(--hover-bg); }
.menu-cuenta-desplegable{
  display:none; position:absolute; right:0; top:calc(100% + 8px); background:var(--papel-card);
  border:1px solid var(--linea); border-radius:10px; box-shadow:0 8px 28px rgba(10,24,48,.14);
  min-width:210px; padding:6px; z-index:30;
}
.menu-cuenta.abierto .menu-cuenta-desplegable{ display:block; }
.menu-cuenta-desplegable a{
  display:block; padding:9px 12px; border-radius:7px; text-decoration:none; color:var(--tinta);
  font-size:.87rem; font-weight:500;
}
.menu-cuenta-desplegable a:hover{ background:var(--hover-bg); }
.menu-cuenta-desplegable a.opcion-peligro{ color:var(--rojo); }
.menu-cuenta-desplegable hr{ border:none; border-top:1px solid var(--linea); margin:6px 4px; }

/* En computadora: enlaces sueltos en fila, siempre visibles -- ya no
   hace falta el botón ni el "desplegable" (se vuelve una fila normal). */
@media(min-width:860px){
  .btn-menu-cuenta{ display:none; }
  .menu-cuenta-desplegable{
    display:flex !important; position:static; box-shadow:none; border:none; background:none;
    padding:0; margin:0; min-width:0; gap:2px;
  }
  .menu-cuenta-desplegable a{ padding:6px 10px; }
  .menu-cuenta-desplegable hr{ display:none; }
}

/* ---------- Campanita de notificaciones (Fase 3) ---------- */
.campana-notificaciones{ position:relative; }
/* La campanita ahora vive como hermano de .menu-cuenta (ver
   menu_cuenta_publico.php) -- este order:-1 la manda al inicio del
   <nav> en cualquier página, sin importar en qué orden esa página
   haya escrito sus demás enlaces (Empleos, Modo oscuro, etc). */
.nav-publica .campana-notificaciones{ order:-1; }
.btn-campana-notificaciones{
  position:relative; border:1px solid var(--linea); background:var(--papel-card); color:var(--tinta);
  border-radius:8px; padding:7px 10px; font-size:1rem; cursor:pointer; font-family:inherit; line-height:1;
  text-decoration:none; display:inline-block;
}
.btn-campana-notificaciones:hover{ background:var(--hover-bg); }
.badge-notificaciones{
  position:absolute; top:-6px; right:-6px; background:var(--rojo); color:#fff; border-radius:999px;
  font-size:.68rem; font-weight:800; line-height:1; padding:2px 5px; min-width:16px; text-align:center;
}
/* .notificacion-item, .notificacion-vacia y compañía se siguen
   usando en la pantalla independiente de "Notificaciones" (ver
   siguiente bloque, "Fase 5") -- ya no en un desplegable del menú:
   la campanita ahora va directo a esa pantalla. */
.notificacion-vacia{ padding:14px 10px; font-size:.85rem; color:var(--tinta-suave); text-align:center; }
.notificacion-item{
  display:flex; flex-direction:column; gap:2px; padding:9px 10px; border-radius:7px; text-decoration:none;
  color:var(--tinta); font-size:.83rem;
}
.notificacion-item:hover{ background:var(--hover-bg); }
.notificacion-item.sin-leer{ background:var(--hover-bg); font-weight:600; }
.notificacion-item.sin-leer .notificacion-mensaje::before{ content:'● '; color:var(--azul-700); }
.notificacion-fecha{ font-size:.72rem; color:var(--tinta-suave); font-weight:400; }

/* ---------- Pantalla independiente de notificaciones (Fase 5) ---------- */
.lista-notificaciones-completa{
  background:var(--papel-card); border:1px solid var(--linea); border-radius:12px; padding:6px; margin-top:16px;
}
.notificacion-item-completa{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 12px; border-radius:8px; text-decoration:none; color:var(--tinta); font-size:.92rem;
  border-bottom:1px solid var(--linea);
}
.notificacion-item-completa:last-child{ border-bottom:none; }
.notificacion-item-completa:hover{ background:var(--hover-bg); }
.notificacion-item-completa.sin-leer{ font-weight:600; }
.notificacion-item-completa.sin-leer .notificacion-mensaje::before{ content:'● '; color:var(--azul-700); }
.notificacion-item-completa .notificacion-fecha{ white-space:nowrap; }

/* ---------- Icono flotante de chats activos, tipo WhatsApp (Fase 5) ---------- */
.chats-flotante{ position:fixed; right:20px; bottom:20px; z-index:60; }
.btn-chats-flotante{
  position:relative; width:54px; height:54px; border-radius:999px; border:none; cursor:pointer;
  background:var(--verde, #22c55e); color:#fff; font-size:1.4rem; box-shadow:0 6px 20px rgba(10,24,48,.25);
  display:flex; align-items:center; justify-content:center;
}
.btn-chats-flotante:hover{ filter:brightness(1.05); }
.chats-flotante-panel{
  display:none; position:absolute; right:0; bottom:calc(100% + 12px); background:var(--papel-card);
  border:1px solid var(--linea); border-radius:12px; box-shadow:0 10px 32px rgba(10,24,48,.2);
  width:320px; max-height:420px; overflow-y:auto; padding:6px;
}
.chats-flotante.abierto .chats-flotante-panel{ display:block; }
.chats-flotante-titulo{ font-weight:700; font-size:.9rem; padding:8px 10px; color:var(--tinta-suave); }
.chat-flotante-item{
  display:flex; flex-direction:column; gap:2px; padding:10px; border-radius:8px; text-decoration:none;
  color:var(--tinta); font-size:.85rem; border-bottom:1px solid var(--linea);
}
.chat-flotante-item:last-child{ border-bottom:none; }
.chat-flotante-item:hover{ background:var(--hover-bg); }
.chat-flotante-item.sin-leer{ background:var(--hover-bg); font-weight:600; }
.chat-flotante-nombre{ font-weight:700; }
.chat-flotante-plaza{ font-size:.78rem; color:var(--tinta-suave); font-weight:400; }
.chat-flotante-ultimo{ font-size:.8rem; color:var(--tinta-suave); font-weight:400; }
@media(max-width:480px){
  .chats-flotante{ right:12px; bottom:12px; }
  .chats-flotante-panel{ position:fixed; right:10px; left:10px; bottom:80px; width:auto; }
}

/* ---------- Chat empresa/candidato por postulación (Fase 3) ---------- */
.chat-postulacion{
  display:flex; flex-direction:column; gap:10px; background:var(--papel-card); border:1px solid var(--linea);
  border-radius:12px; padding:16px; min-height:120px; max-height:60vh; overflow-y:auto; margin-top:12px;
}
.chat-burbuja{ max-width:80%; padding:9px 13px; border-radius:12px; font-size:.88rem; line-height:1.4; }
.chat-burbuja-propia{ align-self:flex-end; background:var(--azul-700); color:#fff; border-bottom-right-radius:3px; }
.chat-burbuja-otro{ align-self:flex-start; background:var(--hover-bg); color:var(--tinta); border-bottom-left-radius:3px; }
.chat-burbuja-texto{ white-space:pre-wrap; word-break:break-word; }
.chat-burbuja-fecha{ font-size:.68rem; opacity:.75; margin-top:4px; text-align:right; }
.chat-form{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.chat-form textarea{
  width:100%; border:1px solid var(--linea); border-radius:10px; padding:10px 12px; font-family:inherit;
  font-size:.9rem; color:var(--tinta); background:var(--papel-card); resize:vertical;
}
.chat-form button{
  align-self:flex-end; background:var(--azul-600); color:#fff; border:none; border-radius:8px; padding:10px 22px;
  font-weight:700; cursor:pointer; font-family:inherit;
}
.chat-form button:hover{ background:var(--azul-700); }
.chat-form button:disabled{ background:var(--linea); color:var(--tinta-suave); cursor:not-allowed; }

/* ---------- Contenedor general ---------- */
.contenedor-publico{ max-width:1100px; margin:0 auto; padding:20px 16px 60px; position:relative; z-index:1; }
.pie-publico{ position:relative; z-index:1; }
/* OJO: .cabecera-publica NO se toca aquí -- ya trae su propio
   position:sticky + z-index:20 más arriba en este archivo. Ponerle
   otra regla con position:relative + z-index:1 (como había antes)
   pisaba esa primera regla por venir después en el CSS, y esa era
   la causa real de que el menú desplegable quedara tapado. */

/* ---------- Fondo animado -- misma red del panel interno ---------- */
:root{
  --anim-art:var(--azul-600); --anim-fill:rgba(0,116,224,.05); --anim-grid:rgba(0,116,224,.025);
}
html[data-theme="dark"]{
  --anim-art:var(--azul-400); --anim-fill:rgba(110,194,245,.06); --anim-grid:rgba(110,194,245,.03);
}
.fondo-ambiente{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:var(--papel); }
.fondo-ambiente::before{
  content:""; position:absolute; inset:0; opacity:.6;
  background-image:linear-gradient(var(--anim-grid) 1px,transparent 1px),linear-gradient(90deg,var(--anim-grid) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(ellipse at center,transparent 20%,#000 100%);
}
.fondo-ambiente .scene{ position:absolute; inset:0; color:var(--anim-art); }
.fondo-ambiente .scene svg{ display:block; width:100%; height:100%; }
.network-link{ fill:none; stroke:currentColor; stroke-width:1; opacity:.06; stroke-dasharray:9 10; animation:fluirRedSuave 18s linear infinite; }
.network-link.strong{ stroke-width:1.3; opacity:.09; }
.network-node{ fill:var(--papel); stroke:currentColor; stroke-width:1.3; opacity:.14; animation:latirNodoSuave 6s ease-in-out infinite; }
.network-node.core{ fill:var(--anim-fill); stroke-width:2; }
.network-node:nth-of-type(3n){ animation-delay:-1.7s; }
.network-node:nth-of-type(3n + 1){ animation-delay:-3.4s; }
.network-halo{ fill:var(--anim-fill); opacity:.08; animation:expandirHaloSuave 7s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.network-halo:nth-of-type(2){ animation-delay:-2s; }
.network-halo:nth-of-type(3){ animation-delay:-4s; }
@keyframes fluirRedSuave{ to{ stroke-dashoffset:-190; } }
@keyframes latirNodoSuave{ 50%{ opacity:.06; } }
@keyframes expandirHaloSuave{ 50%{ transform:scale(1.32); opacity:.03; } }
@media(max-width:600px){ .fondo-ambiente .scene svg{ width:1050px; max-width:none; position:absolute; left:50%; transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .network-link,.network-node,.network-halo{ animation:none!important; } }
.intro-empleos{ margin-bottom:18px; }
.intro-empleos p{ color:var(--tinta-suave); }

/* ---------- Filtros ---------- */
.filtros-empleos{
  display:flex; flex-direction:column; gap:10px; background:var(--papel-card);
  border:1px solid var(--linea); border-radius:12px; padding:14px; margin-bottom:16px;
}
.filtros-empleos input, .filtros-empleos select{
  width:100%; padding:10px 12px; border:1px solid var(--linea); border-radius:8px;
  font-family:inherit; font-size:.92rem; color:var(--tinta); background:var(--papel-card);
}
.filtros-empleos button{
  padding:11px 16px; border:none; border-radius:8px; background:var(--azul-600); color:#fff;
  font-weight:700; font-size:.92rem; cursor:pointer;
}
.filtros-empleos button:hover{ background:var(--azul-700); }
@media(min-width:700px){
  .filtros-empleos{ flex-direction:row; align-items:center; }
  .filtros-empleos input{ flex:2; }
  .filtros-empleos select{ flex:1; }
  .filtros-empleos button{ flex:0 0 auto; }
}

.conteo-resultados{ color:var(--tinta-suave); font-size:.85rem; margin-bottom:0; }
/* El número de vacantes activas es un elemento de confianza (como en
   Tecoloco) -- se destaca más que el resto del texto del conteo. */
.conteo-resultados strong{ color:var(--azul-900); font-size:1.15rem; }
.sin-resultados{ text-align:center; padding:40px 20px; color:var(--tinta-suave); }

.barra-orden-empleos{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:14px;
}
.controles-orden-empleos{ display:flex; gap:8px; flex-wrap:wrap; }
.controles-orden-empleos .selector-publico{ width:auto; min-width:150px; }
@media (max-width:600px){
  .barra-orden-empleos{ flex-direction:column; align-items:stretch; }
  .controles-orden-empleos .selector-publico{ flex:1; min-width:0; }
}

.paginacion-empleos{
  display:flex; justify-content:center; align-items:center; gap:16px; margin-top:26px;
}

/* ---------- Menú lateral de categorías (Áreas / Rubros) ---------- */
.layout-empleos{ display:flex; flex-direction:column; gap:20px; }
@media(min-width:900px){
  .layout-empleos{ flex-direction:row; align-items:flex-start; }
  .sidebar-empleos{ width:250px; flex-shrink:0; }
  .contenido-empleos{ flex:1; min-width:0; }
}
.bloque-sidebar{
  background:var(--papel-card); border:1px solid var(--linea); border-radius:12px; padding:16px; margin-bottom:14px;
}
.bloque-sidebar h3{ font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; color:var(--tinta-suave); margin-bottom:10px; }
.lista-categorias{ list-style:none; margin:0; padding:0; }
.lista-categorias li{ margin-bottom:2px; }
.lista-categorias a{
  display:flex; justify-content:space-between; gap:8px; text-decoration:none; color:var(--tinta);
  font-size:.85rem; padding:7px 8px; border-radius:6px;
}
.lista-categorias a:hover{ background:var(--hover-bg); }
.lista-categorias a.activo{ background:var(--acento-suave); color:var(--azul-700); font-weight:700; }
.lista-categorias a span{ color:var(--tinta-suave); flex-shrink:0; }
.lista-categorias a.activo span{ color:var(--azul-700); }
.filtros-activos{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; font-size:.85rem; }
.filtros-activos a{ font-weight:600; text-decoration:none; }

/* ---------- Tarjetas de vacante ---------- */
.grid-tarjetas-empleo{ display:grid; grid-template-columns:1fr; gap:14px; }
@media(min-width:700px){ .grid-tarjetas-empleo{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .grid-tarjetas-empleo{ grid-template-columns:repeat(3,1fr); } }

.tarjeta-empleo{
  display:block; background:var(--papel-card); border:1px solid var(--linea); border-radius:12px;
  padding:18px; text-decoration:none; color:inherit; transition:border-color .15s ease, box-shadow .15s ease;
  position:relative;
}
.tarjeta-empleo:hover{ border-color:var(--azul-400); box-shadow:0 4px 14px rgba(10,24,48,.08); }
.tarjeta-empleo h3{ font-size:1.02rem; margin-bottom:4px; }
/* Insignia "Nuevo" -- misma idea que Tecoloco, marca las vacantes
   publicadas en los últimos 3 días para que salten a la vista. */
.insignia-nuevo-empleo{
  position:absolute; top:14px; right:14px; background:var(--verde-suave-bg); color:#15803D;
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  padding:3px 9px; border-radius:99px;
}
html[data-theme="dark"] .insignia-nuevo-empleo{ color:#4ADE80; }
/* Vacante "destacada" (pagada, ver paquetes_destacado.php) -- sale
   primero en el listado y con un borde/etiqueta propios para que
   resalte frente a las demás tarjetas. */
.tarjeta-empleo-destacada{ border-color:#F5B301; box-shadow:0 0 0 1px #F5B301; }
.tarjeta-empleo-destacada:hover{ box-shadow:0 0 0 1px #F5B301, 0 4px 14px rgba(10,24,48,.08); }
.insignia-destacada-empleo{ background:#FEF3C7; color:#92400E; }
html[data-theme="dark"] .insignia-destacada-empleo{ background:#78350F; color:#FDE68A; }
/* Logo de la empresa junto al título -- si no hay logo cargado, se
   muestra un círculo con la inicial del nombre en su lugar, para que la
   tarjeta nunca se vea "rota" por un logo faltante. */
.cabecera-tarjeta-empleo{ display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; padding-right:54px; }
.logo-tarjeta-empleo{
  width:40px; height:40px; border-radius:8px; object-fit:contain; background:var(--papel);
  border:1px solid var(--linea); flex-shrink:0;
}
.logo-tarjeta-empleo-vacio{
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem;
  color:var(--azul-700); background:var(--acento-suave);
}
.cabecera-tarjeta-empleo h3{ margin-bottom:2px; }
.empresa-empleo{ color:var(--tinta-suave); font-size:.85rem; margin-bottom:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cabecera-tarjeta-empleo .empresa-empleo{ margin-bottom:0; }
.etiquetas-empleo{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.etiqueta{ background:var(--acento-suave); color:var(--azul-700); font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:99px; }
.sueldo-empleo{ font-weight:700; color:var(--verde); font-size:.88rem; margin-bottom:8px; }
.pie-tarjeta-empleo{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px; }
.ver-mas-empleo{ font-size:.82rem; font-weight:700; color:var(--azul-600); }

/* ---------- Detalle de vacante ---------- */
.migaja{ font-size:.82rem; margin-bottom:16px; }
.migaja a{ text-decoration:none; }
.encabezado-detalle{ background:var(--papel-card); border:1px solid var(--linea); border-radius:12px; padding:20px; margin-bottom:16px; }
.encabezado-detalle h1{ font-size:1.35rem; }
.encabezado-detalle .empresa-detalle{ color:var(--tinta-suave); font-size:.95rem; }
.cabecera-empresa-detalle{ display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.logo-empresa-detalle{
  width:56px; height:56px; border-radius:10px; object-fit:contain; background:var(--papel);
  border:1px solid var(--linea); flex-shrink:0;
}
.logo-empresa-detalle-vacio{
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.3rem;
  color:var(--azul-700); background:var(--acento-suave);
}
.cabecera-empresa-detalle h1{ margin-bottom:2px; }
.bloque-detalle{ background:var(--papel-card); border:1px solid var(--linea); border-radius:12px; padding:20px; margin-bottom:14px; }
.bloque-detalle h2{ font-size:1rem; margin-bottom:10px; }
.bloque-detalle ul{ margin:0; padding-left:20px; }
.bloque-detalle li{ margin-bottom:6px; }
.barra-postular{
  position:sticky; bottom:0; background:var(--papel-card); border-top:1px solid var(--linea);
  padding:14px 16px; margin:0 -16px; display:flex; justify-content:center;
}
.barra-postular .btn-postular{
  width:100%; max-width:420px; padding:13px; border:none; border-radius:9px; background:var(--azul-600);
  color:#fff; font-weight:700; font-size:1rem; cursor:pointer; text-decoration:none; text-align:center;
}
.barra-postular .btn-postular:hover{ background:var(--azul-700); }
.barra-postular .btn-postular.ya-postulado{ background:var(--verde); cursor:default; }

.aviso-publico{ border-radius:10px; padding:12px 14px; margin-bottom:16px; font-size:.9rem; }
.aviso-publico.exito{ background:var(--verde-bg); color:#0B4A24; }
.aviso-publico.error{ background:var(--rojo-bg); color:var(--rojo); }
.aviso-publico.amarillo{ background:var(--amarillo-bg); color:#8A6D1A; font-size:.78rem; font-weight:700; border-radius:99px; display:inline-block; }
.aviso-publico.azul{ background:var(--acento-suave); color:var(--azul-700); font-size:.78rem; font-weight:700; border-radius:99px; display:inline-block; }
.aviso-publico.gris{ background:var(--linea); color:var(--tinta-suave); font-size:.78rem; font-weight:700; border-radius:99px; display:inline-block; }

/* ---------- Mis postulaciones ---------- */
.lista-postulaciones{ display:flex; flex-direction:column; gap:12px; }
.tarjeta-postulacion{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; background:var(--papel-card);
  border:1px solid var(--linea); border-radius:12px; padding:18px;
}

/* ---------- Tarjeta de postulante (portal de empresas) -- en
   columnas, para que no se vea todo amontonado en una sola lista. ---------- */
.tarjeta-postulante-empresa{
  display:grid; grid-template-columns:1.3fr 1fr 1fr .8fr; gap:18px; align-items:start;
  background:var(--papel-card); border:1px solid var(--linea); border-radius:12px; padding:18px;
}
.tp-col-identidad{ display:flex; gap:12px; }
.tp-col-identidad img{ width:48px; height:48px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.tp-col h4{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--tinta-suave); margin:0 0 8px; }
.tp-col p{ margin:0 0 6px; font-size:.85rem; }
.tp-col .btn-detalle{ width:100%; text-align:center; margin-top:0; display:block; }
.tp-col-acciones{ display:flex; flex-direction:column; gap:8px; }
.tp-col-estatus{ display:flex; flex-direction:column; gap:8px; }
@media (max-width:960px){
  .tarjeta-postulante-empresa{ grid-template-columns:1fr; }
}

.tp-precalificacion{
  grid-column:1 / -1; background:var(--acento-suave); border-radius:8px; padding:10px 14px;
}
.tp-precalificacion summary{ cursor:pointer; font-weight:700; font-size:.85rem; color:var(--azul-700); }
.tp-precalificacion dl{ margin:10px 0 0; }
.tp-precalificacion dt{ font-weight:700; font-size:.82rem; margin-top:8px; }
.tp-precalificacion dt:first-child{ margin-top:0; }
.tp-precalificacion dd{ margin:2px 0 0; font-size:.85rem; color:var(--tinta-suave); }

/* ---------- Botones de "solo texto" (Cerrar plaza / Eliminar / etc) --
   antes usaban .opcion-peligro sin que esa clase trajera color fuera
   del menú de cuenta, así que en modo oscuro salían con el negro por
   defecto del navegador. ---------- */
.btn-texto-publico{ background:none; border:none; cursor:pointer; padding:0; font-size:.9rem; font-family:inherit; }
.btn-texto-publico.azul{ color:var(--azul-600); }
.btn-texto-publico.azul:hover{ color:var(--azul-700); text-decoration:underline; }
.btn-texto-publico.tinta{ color:var(--tinta); }
.btn-texto-publico.tinta:hover{ text-decoration:underline; }

/* ---------- Selector de fecha -- el icono del calendario es negro
   por defecto (Chrome/Edge) y se vuelve invisible sobre fondo oscuro. ---------- */
:root[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator{ filter:invert(1); }
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) input[type=date]::-webkit-calendar-picker-indicator{ filter:invert(1); }
}

/* ---------- Campos de moneda (sueldo, etc): texto con formato de
   miles (##,##0.00), sin las flechitas de aumentar/disminuir de
   type=number -- se manejan como texto y se formatean por JS. ---------- */
.campo-moneda{ text-align:right; }

/* ---------- Formulario más ancho (editar plaza, etc.) ---------- */
.caja-publica.doble-ancha{ max-width:900px; }
.caja-publica.doble-ancha .fila-2-publica > div,
.caja-publica.doble-ancha > div[style*="flex"]{ min-width:220px; }

.selector-estatus{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-color:var(--azul-600); color:#fff; font-weight:700; font-size:.82rem;
  border:none; border-radius:8px; padding:10px 14px; cursor:pointer; width:100%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'><path d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='white' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:32px;
}
.selector-estatus:hover{ background-color:var(--azul-700); }
.selector-estatus option{ color:#0A1830; background:#fff; }

/* Selector suelto con el tema -- para un <select> que no vive dentro
   de .filtros-empleos ni .caja-publica pero debe verse igual de
   integrado (fondo/borde/texto según el tema claro u oscuro). */
.selector-publico{
  width:100%; padding:10px 12px; border:1px solid var(--linea); border-radius:8px;
  font-family:inherit; font-size:.92rem; color:var(--tinta); background:var(--papel-card); box-sizing:border-box;
}

/* Igual que .selector-publico, pero para un <input> suelto (fuera de
   .filtros-empleos o .caja-publica) que también debe respetar el tema. */
.input-publico{
  border:1px solid var(--linea); border-radius:8px; padding:10px 12px;
  font-family:inherit; font-size:.9rem; color:var(--tinta); background:var(--papel-card); box-sizing:border-box;
}

/* Cajita suelta con el tema, para agrupar un control o aviso corto
   (cupón, resumen) sin arrastrar el tamaño/scroll pensado para el chat. */
.caja-info-publica{
  background:var(--papel-card); border:1px solid var(--linea); border-radius:12px; padding:16px; margin-top:12px;
}

/* ---------- Formularios (login / registro / perfil) ---------- */
.caja-publica{
  max-width:440px; margin:30px auto; background:var(--papel-card); border:1px solid var(--linea);
  border-radius:14px; padding:26px 22px; box-shadow:0 4px 24px rgba(10,24,48,.06);
}
.caja-publica.ancha{ max-width:860px; }

/* Tamaño según tipo de dato -- que un teléfono o una fecha no ocupen
   el mismo ancho que un correo o un nombre completo. El límite es un
   max-width, así que en celular sigue ocupando el 100% disponible. */
.caja-publica input[type=text],
.caja-publica input[type=email],
.caja-publica input[type=url],
.caja-publica select{ max-width:480px; }
.caja-publica input[type=tel]{ max-width:220px; }
.caja-publica input[type=date]{ max-width:210px; }
.caja-publica input[type=number]{ max-width:190px; }
.caja-publica textarea{ max-width:100%; min-height:70px; }
.caja-publica h1{ font-size:1.3rem; }
.caja-publica label{ display:block; font-size:.82rem; font-weight:600; color:var(--tinta); margin:12px 0 4px; }
.caja-publica input, .caja-publica select, .caja-publica textarea{
  width:100%; padding:10px 12px; border:1px solid var(--linea); border-radius:8px;
  font-family:inherit; font-size:.92rem; color:var(--tinta); background:var(--papel-card); box-sizing:border-box;
}
.caja-publica button[type=submit]{
  width:100%; margin-top:0; padding:12px; border:none; border-radius:9px; background:var(--azul-600);
  color:#fff; font-weight:700; font-size:.95rem; cursor:pointer;
}
.caja-publica button[type=submit]:hover{ background:var(--azul-700); }

/* Barra de "Guardar perfil" -- fuera de cualquier sección colapsable y
   siempre visible (pegada abajo), igual que el botón "Postularme" del
   detalle de la vacante -- así nunca queda oculta dentro de una
   sección cerrada, y no hay que bajar hasta el final para guardar. */
.barra-guardar-perfil{
  position:sticky; bottom:0; background:var(--papel-card); border-top:1px solid var(--linea);
  padding:14px 22px; margin:20px -22px -26px; z-index:2;
}
.barra-guardar-perfil button[type=submit]{ max-width:480px; margin:0 auto; display:block; }
.caja-publica button.btn-peligro-publico{ background:var(--rojo); }
.caja-publica button.btn-peligro-publico:hover{ background:#8f2c22; }
.separador-o{ text-align:center; color:var(--tinta-suave); font-size:.8rem; margin:22px 0 6px; position:relative; }
.separador-o::before, .separador-o::after{ content:""; position:absolute; top:50%; width:40%; height:1px; background:var(--linea); }
.separador-o::before{ left:0; } .separador-o::after{ right:0; }
.hint-publico{ font-size:.78rem; color:var(--tinta-suave); font-weight:400; }

/* ---------- Contraseña: ver/ocultar + aviso de mayúsculas ---------- */
.campo-contrasena{ position:relative; }
.campo-contrasena input{ padding-right:42px !important; }
.btn-ver-contrasena{
  position:absolute; right:4px; top:50%; transform:translateY(-50%); border:none; background:none;
  cursor:pointer; font-size:1rem; padding:6px 8px; line-height:1; color:var(--tinta-suave);
}
.aviso-mayusculas{
  display:none; margin-top:4px; font-size:.78rem; font-weight:600; color:var(--rojo);
}

/* ---------- Filas repetibles (estudios / experiencia) ---------- */
.fila-repetible{
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; background:var(--papel);
  border:1px solid var(--linea); border-radius:8px; padding:12px; margin-bottom:10px;
}
.fila-repetible > div{ flex:1; min-width:130px; }
.fila-repetible label{ margin-top:0; font-size:.75rem; }
.check-row{ display:flex; align-items:center; gap:6px; margin-top:10px; }
.check-row input{ width:auto; }
.btn-quitar-fila{ align-self:center; color:var(--rojo); }
.btn-detalle{
  padding:9px 14px; border:1px solid var(--linea); border-radius:8px; background:var(--papel-card);
  color:var(--azul-600); font-weight:700; font-size:.85rem; cursor:pointer; margin-top:4px;
}
.btn-detalle:hover{ background:var(--hover-bg); }

/* ---------- Secciones del perfil público ---------- */
.fila-2-publica{ display:flex; gap:10px; flex-wrap:wrap; }
.fila-2-publica > div{ flex:1; min-width:160px; }
.fila-2-publica input:disabled{ background:var(--papel); color:var(--tinta-suave); }
.fila-3-publica{ display:flex; gap:10px; flex-wrap:wrap; }
.fila-3-publica > div{ flex:1; min-width:150px; }
.caja-publica h3.seccion{ margin:22px 0 10px; border-top:1px solid var(--linea); padding-top:14px; font-size:1rem; color:var(--azul-900); }
.caja-publica h3.seccion:first-of-type{ border-top:none; padding-top:0; margin-top:10px; }

/* ---------- Barra de avance del perfil ---------- */
.progreso-perfil{ margin:4px 0 20px; }
.progreso-perfil-barra-fondo{
  height:10px; border-radius:6px; background:var(--papel); border:1px solid var(--linea); overflow:hidden;
}
.progreso-perfil-barra{
  height:100%; width:0%; background:var(--azul-600); border-radius:6px 0 0 6px;
  transition:width .25s ease;
}
.progreso-perfil-barra.completo{ background:#2e8b57; }
#progresoPerfilTexto{ margin-top:6px; font-weight:600; }

/* ---------- Secciones colapsables (acordeón) ---------- */
.seccion-colapsable{
  border:1px solid var(--linea); border-radius:10px; margin-bottom:10px; overflow:hidden; background:var(--papel-card);
}
.encabezado-colapsable{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 16px; background:none; border:none; cursor:pointer; text-align:left;
  font-family:inherit; font-size:1rem; font-weight:700; color:var(--tinta);
}
.encabezado-colapsable:hover{ background:var(--hover-bg); }
.titulo-seccion-colapsable{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.chevron-colapsable{
  font-size:1.3rem; line-height:1; color:var(--tinta-suave); transition:transform .18s ease; flex-shrink:0;
}
.seccion-colapsable.abierta .chevron-colapsable{ transform:rotate(90deg); }
.contenido-colapsable{
  display:none; padding:4px 16px 18px;
}
.seccion-colapsable.abierta .contenido-colapsable{ display:block; }
.badge-seccion-completa{
  font-size:.72rem; font-weight:700; color:#2e8b57; background:rgba(46,139,87,.12);
  border-radius:20px; padding:2px 9px; white-space:nowrap;
}
.indicador-autoguardado{ font-weight:400; font-style:italic; white-space:nowrap; }

/* ---------- Foto de perfil (tamaño cédula) ---------- */
.acciones-foto-publica{ display:flex; gap:8px; flex-wrap:wrap; }
#pantallaCamaraPerfil{ margin-top:10px; }
#btnCapturarCamaraPerfil{
  padding:9px 16px; border:none; border-radius:8px; background:var(--azul-600);
  color:#fff; font-weight:700; font-size:.85rem; cursor:pointer;
}
#btnCapturarCamaraPerfil:hover{ background:var(--azul-700); }
.widget-foto-perfil{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:6px; }
.marco-foto-perfil-publico{
  width:110px; aspect-ratio:11/14; border:1px dashed var(--linea); border-radius:8px; background:var(--papel);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
  color:var(--tinta-suave); font-size:.75rem; text-align:center;
}
.marco-foto-perfil-publico img{ width:100%; height:100%; object-fit:cover; }
.widget-foto-perfil input[type=file]{
  width:100%; padding:8px; border:1px solid var(--linea); border-radius:8px; font-size:.82rem; background:var(--papel-card);
}

/* ---------- Pie ---------- */
.pie-publico{
  max-width:1100px; margin:0 auto; padding:24px 16px; border-top:1px solid var(--linea);
  color:var(--tinta-suave); font-size:.82rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px;
}
.enlaces-pie-publico a{ color:var(--tinta-suave); text-decoration:none; }
.enlaces-pie-publico a:hover{ color:var(--azul-600); text-decoration:underline; }

/* ============================================================
   PORTAL DE EMPRESAS (Fase 3)
   ============================================================ */
.grid-resumen-empresa{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:16px 0;
}
@media(min-width:700px){ .grid-resumen-empresa{ grid-template-columns:repeat(4,1fr); } }
.tarjeta-resumen-empresa{
  background:var(--papel-card); border:1px solid var(--linea); border-radius:10px;
  padding:16px; display:flex; flex-direction:column; gap:4px; text-align:center;
}
.tarjeta-resumen-empresa .numero-resumen{ font-size:1.9rem; font-weight:800; color:var(--azul-600); }
.tarjeta-resumen-empresa.destacada{ border-color:var(--azul-600); background:var(--acento-suave); }
.tarjeta-resumen-empresa.destacada .numero-resumen{ color:var(--azul-700); }

/* Tarjetas que además funcionan como filtro (empresa_panel.php) --
   son <a>, así que hay que quitarles el subrayado/color de enlace. */
.tarjeta-resumen-empresa.tarjeta-filtro{ text-decoration:none; color:inherit; cursor:pointer; transition:border-color .15s,transform .15s; }
.tarjeta-resumen-empresa.tarjeta-filtro:hover{ border-color:var(--azul-600); transform:translateY(-2px); }
.tarjeta-resumen-empresa.tarjeta-filtro.activa{ border-color:var(--azul-600); background:var(--acento-suave); box-shadow:0 0 0 2px var(--azul-600) inset; }

/* Panel de empresa (empresa_panel.php) -- tendencia + embudo de estados,
   uno al lado del otro en pantallas anchas y apilados en celular. */
.grid-indicadores-empresa{ display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:18px; }
@media(min-width:860px){ .grid-indicadores-empresa{ grid-template-columns:1.2fr 1fr; } }

/* Botón "lleno" independiente -- para cuando un enlace/botón debe verse
   como el CTA principal pero NO está dentro de una .barra-postular
   (esa clase, .btn-postular, solo se pinta ahí -- ver más abajo). */
.btn-primario-publico{
  display:inline-block; padding:12px 22px; border:none; border-radius:9px; background:var(--azul-600);
  color:#fff; font-weight:700; font-size:.95rem; cursor:pointer; text-decoration:none; text-align:center;
}
.btn-primario-publico:hover{ background:var(--azul-700); color:#fff; }

.modal-contactar{
  position:fixed; inset:0; z-index:50; background:rgba(10,24,48,.55);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.modal-contactar-caja{
  background:var(--papel-card); border-radius:14px; padding:22px; width:100%; max-width:420px;
  max-height:90vh; overflow-y:auto; box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.modal-contactar-caja h3{ margin-top:0; }

/* ============================================================
   MENÚ DE CUENTA -- versión vertical en escritorio (Fase 4)
   ============================================================
   En páginas donde ya se resolvió $empresa o $candidato (logueados),
   menu_empresa_publico.php / menu_cuenta_publico.php marcan
   <body class="tiene-sidebar-publica"> -- eso convierte todo el
   <nav class="nav-publica"> (que ya trae el enlace "Empleos", este
   menú de cuenta, y el botón de tema) en una barra lateral fija,
   igual que el panel interno (ver menu_lateral.php). En celular no
   se toca nada -- sigue siendo el botón "☰ Menú" de siempre. */
@media(min-width:860px){
  body.tiene-sidebar-publica .cabecera-publica{ padding-left:230px; }
  /* OJO: antes esto era "margin-left:230px" a secas -- como el
     margin-right se queda en "auto" (heredado de la regla base de
     .contenedor-publico), TODO el espacio sobrante de pantallas
     anchas se le iba a ese único margen derecho, empujando el
     contenido pegado contra el menú lateral y dejando una franja
     enorme y vacía a la derecha, que además no coincidía con el
     espacio (más angosto, sí centrado) que quedaba junto al logo en
     la cabecera. Con este cálculo se centra dentro del espacio que
     queda a la derecha del menú lateral -- igual que ya hacía
     .cabecera-contenido con su "margin:0 auto" -- así ambas franjas
     quedan parejas. El max() evita que se meta debajo del menú
     lateral en pantallas angostas (justo arriba de los 860px). */
  body.tiene-sidebar-publica .contenedor-publico,
  body.tiene-sidebar-publica .pie-publico{
    margin-left:max(230px, calc(230px + (100% - 1330px) / 2));
    max-width:1100px;
  }

  body.tiene-sidebar-publica .nav-publica{
    position:fixed; top:0; left:0; bottom:0; width:230px; z-index:15;
    flex-direction:column; align-items:stretch; justify-content:flex-start; flex-wrap:nowrap;
    gap:2px; background:var(--papel-card); border-right:1px solid var(--linea);
    padding:84px 14px 20px; overflow-y:auto; margin:0;
  }
  body.tiene-sidebar-publica .nav-publica > a,
  body.tiene-sidebar-publica .btn-tema-publico{
    width:100%; text-align:left; padding:10px 12px; border-radius:8px; border:none; background:none; margin:0;
  }
  body.tiene-sidebar-publica .nav-publica > a:hover,
  body.tiene-sidebar-publica .btn-tema-publico:hover{ background:var(--hover-bg); }
  body.tiene-sidebar-publica .btn-tema-publico{ order:99; margin-top:10px; border-top:1px solid var(--linea); border-radius:0; padding-top:14px; }

  body.tiene-sidebar-publica .menu-cuenta{ flex-direction:column; align-items:stretch; width:100%; gap:2px; }
  body.tiene-sidebar-publica .saludo-cuenta{ padding:8px 12px 2px; order:2; }
  body.tiene-sidebar-publica .campana-notificaciones{ order:-1; align-self:flex-start; margin-bottom:6px; }
  body.tiene-sidebar-publica .menu-cuenta-desplegable{ flex-direction:column !important; width:100%; gap:2px !important; order:3; }
  body.tiene-sidebar-publica .menu-cuenta-desplegable a{ padding:9px 12px !important; }
}

/* Banner discreto del canal de WhatsApp (empleos.php) -- una franja
   angosta, no un modal ni nada que tape contenido, con su propio
   botón de cerrar (se recuerda con localStorage, ver el script en
   empleos.php). */
.banner-canal-whatsapp{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:linear-gradient(135deg, rgba(37,211,102,.12), rgba(37,211,102,.04));
  border:1px solid rgba(37,211,102,.35); border-radius:12px;
  padding:12px 16px; margin-bottom:18px;
}
.banner-canal-whatsapp .icono-whatsapp{
  width:38px; height:38px; flex:0 0 auto; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.25rem;
}
.banner-canal-whatsapp .texto-banner-whatsapp{ flex:1 1 220px; min-width:0; }
.banner-canal-whatsapp .texto-banner-whatsapp strong{ color:var(--azul-900); }
.banner-canal-whatsapp .texto-banner-whatsapp p{ margin:1px 0 0; color:var(--tinta-suave); font-size:.85rem; }
.banner-canal-whatsapp .btn-canal-whatsapp{
  flex:0 0 auto; background:#25D366; color:#fff; font-weight:700; font-size:.85rem;
  padding:9px 16px; border-radius:8px; text-decoration:none; white-space:nowrap;
}
.banner-canal-whatsapp .btn-canal-whatsapp:hover{ background:#1DA851; }
.banner-canal-whatsapp .btn-cerrar-banner-whatsapp{
  flex:0 0 auto; background:none; border:none; color:var(--tinta-suave); font-size:1.1rem;
  cursor:pointer; line-height:1; padding:4px;
}
@media (max-width:600px){
  .banner-canal-whatsapp{ padding:10px 12px; }
  .banner-canal-whatsapp .btn-canal-whatsapp{ flex:1 1 100%; text-align:center; order:3; }
}