:root {
    --cp: #29446b; /* mismo color principal que usás en MiPerfil.ar */
    --cp-rgb: 41, 68, 107;
    --eyebrow-bg: #f7d9d0;
    --texto: #111827;
    --texto-muted: #6b7280;
    --texto-tenue: #9aa4af;
    --borde: #e4e9f0;
    --borde-input: #dbe3ec;
    --verde: #065f46;
    --verde-bg: #d1fae5;
    --rojo: #991b1b;
    --rojo-bg: #fee2e2;
    --disclaimer-bg: #f5e0da;
    --acento: #ea580c; /* naranja — segunda serie del radar de mercado laboral */
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    color: var(--texto);
    background: #f8fafc;
    margin: 0;
    /* Sticky footer real (NO position:fixed): el footer se empuja al piso
       en páginas con poco contenido, y baja con scroll normal en las que
       tienen mucho. main (o el contenedor equivalente) crece para llenar
       el espacio sobrante entre header y footer. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/* min-width:0 es necesario acá: sin esto, un hijo ancho (ej. una tabla
   con columnas que no cortan línea) puede forzar a este flex item a no
   encogerse por debajo de su contenido, empujando overflow horizontal
   de TODA la página en vez de quedar contenido en su propio wrapper
   con scroll (ej. .tabla-wrap). Bug real encontrado en el dashboard de
   empresa en mobile. */
body > main { flex: 1 0 auto; min-width: 0; }

/* width:100% explícito, no solo max-width: sin esto, como flex item de
   body (align-items:stretch), un contenido ancho adentro (ej. .tabla
   con columnas nowrap) hace que el stretch del cross-axis resuelva a
   max-width en vez de al ancho real del viewport — bug confirmado con
   Playwright a 375px en empresa/dashboard.php, min-width:0 solo no
   alcanzaba. Con width:100% queda igual en desktop (sigue centrado a
   880px) y se soluciona en cualquier página con contenido ancho. */
.contenedor { width: 100%; max-width: 880px; margin: 0 auto; padding: 24px 16px 60px; }
.contenedor--angosto { max-width: 480px; }

h1 { font-size: 1.6rem; margin-bottom: 6px; }
.texto-muted { color: var(--texto-muted); font-size: 0.9rem; }

/* Navegación: un solo header (includes/_header.php) para todas las páginas.
   Scrollea con la página (NO sticky/fixed) — no tiene que tapar pantalla.
   3 zonas en desktop: marca (izq) + menú centrado (medio) + volver a
   MiPerfil (der). Mobile-first: todo el menú son botones reales (fondo o
   borde), nunca texto plano suelto. */
.nav-publico {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 14px 20px; background: #fff; border-bottom: 1px solid var(--borde);
}
.nav-publico__marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-publico__logo-img { height: 56px; width: auto; display: block; }
.nav-publico__marca-sub { font-size: 0.78rem; color: var(--texto-muted); max-width: 160px; line-height: 1.25; }

.nav-publico__menu {
    flex: 1 1 auto; display: flex; justify-content: center; align-items: center;
    gap: 10px; flex-wrap: wrap;
}

.nav-publico__derecha { flex: 0 0 auto; }

/* "Volver a MiPerfil.ar": ícono grande, sin fondo ni borde — no compite
   visualmente con los botones de acción, es una referencia/explicación
   del ícono, no un botón más. */
.nav-publico__volver {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    text-decoration: none; padding: 4px;
}
.nav-publico__volver-icono { height: 34px; width: auto; display: block; }
.nav-publico__volver-texto {
    font-size: 0.7rem; font-weight: 700; text-decoration: underline;
    color: var(--texto-muted); white-space: nowrap;
}
.nav-publico__volver:hover .nav-publico__volver-texto { color: var(--cp); }

/* "Ofertas" (volver al inicio): en mobile es la forma principal de
   volver, se muestra como botón. En desktop se saca del todo — el logo
   ya cumple esa función ahí, mostrarlo también sería redundante. */
@media (min-width: 860px) {
    .nav-publico__ofertas-mobile { display: none; }
}

/* Desktop: logo más grande y layout de 3 zonas más respirado */
@media (min-width: 860px) {
    .nav-publico { padding: 14px 24px; gap: 20px; }
    .nav-publico__logo-img { height: 84px; }
    .nav-publico__menu { gap: 14px; }
}

/* Mobile: header compacto para que el contenido principal (hero/
   buscador) arranque cerca, sin obligar a scrollear primero por todo
   el header — el logo y los botones del menú NO se achican, se reduce
   el espacio vertical alrededor (padding/gaps) y se saca el subtítulo
   (ya está repetido en el eyebrow del hero, no se pierde info real).
   Marca + volver comparten la primera fila (compacta), el menú entero
   pasa a una segunda fila propia, apilado, con tap targets grandes. */
@media (max-width: 600px) {
    .nav-publico { justify-content: space-between; padding: 10px 14px; gap: 8px 12px; }
    .nav-publico__marca-sub { display: none; }
    .nav-publico__menu { flex-basis: 100%; order: 3; flex-direction: column; gap: 6px; }
    .nav-publico__menu .btn { width: 100%; padding: 12px 16px; font-size: 14px; }
    .nav-publico__derecha { order: 2; }
}

/* Formularios */
form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.9rem; }
input, select, textarea {
    padding: 11px 13px; border: 1.5px solid var(--borde-input); border-radius: 9px;
    font-size: 15px; font-family: inherit; color: var(--texto);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cp); }
fieldset { border: 1px solid var(--borde); border-radius: 10px; padding: 14px 16px; }

/* Ícono de "ver contraseña" (empresa/registro.php, empresa/login.php,
   admin/login.php) — botón posicionado adentro del input, togglea
   type="password"/"text" por JS (assets/js/toggle-password.js). */
.input-password-wrap { position: relative; display: flex; }
.input-password-wrap input { flex: 1 1 auto; padding-right: 42px; }
.input-password-toggle {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    background: none; border: none; padding: 6px; cursor: pointer;
    font-size: 16px; line-height: 1; color: var(--texto-muted);
}
.input-password-toggle:hover { color: var(--cp); }

/* Pegado inteligente (admin/ofertas-nueva.php, empresa/ofertas-nueva.php)
   — bloque de "herramienta" separado visualmente del form real de abajo. */
.pegado-inteligente {
    background: #f5f8fc; border: 1px dashed var(--borde-input); border-radius: 10px;
    padding: 16px 18px; margin-top: 16px;
}
.pegado-inteligente textarea { min-height: 140px; margin-bottom: 10px; }
.pegado-inteligente #pegado-inteligente-resultado { margin: 10px 0 0; }

/* Buscador simple de admin (admin/ofertas.php) — form de una sola línea, distinto del form vertical por defecto */
.admin-buscador { flex-direction: row; margin-top: 0; margin-bottom: 18px; max-width: 420px; gap: 8px; }
.admin-buscador input { flex: 1 1 auto; }
legend { font-weight: 700; padding: 0 6px; }
.checkbox-item { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }

/* Control de archivo propio: el input nativo dice "Choose File / No file
   chosen" en el idioma del sistema operativo del visitante (no se puede
   forzar en español) — lo ocultamos visualmente y armamos un botón +
   nombre de archivo propios en español, actualizados por JS al 'change'. */
.input-archivo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.input-archivo__nativo {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; padding: 0;
}
.input-archivo__nombre { font-size: 0.85rem; color: var(--texto-muted); }
.cv-tip { margin: 6px 0 0; }
.cv-tip a { color: var(--cp); font-weight: 600; }

.btn {
    display: inline-block; padding: 11px 20px; border-radius: 5px; border: none;
    font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; text-align: center;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primario { background: var(--cp); color: #fff; }
.btn--primario:hover { background: color-mix(in srgb, var(--cp) 85%, black); }
.btn--secundario { background: #fff; color: var(--cp); border: 1.5px solid var(--cp); }
.btn--secundario:hover { background: var(--cp); color: #fff; }
.btn--verde { background: var(--verde-bg); color: var(--verde); }
.btn--verde:hover { background: color-mix(in srgb, var(--verde-bg) 85%, black); }
.btn--rojo { background: var(--rojo-bg); color: var(--rojo); }
.btn--rojo:hover { background: color-mix(in srgb, var(--rojo-bg) 85%, black); }
.btn--nav { padding: 8px 14px; font-size: 13px; }

/* Badge chico dentro de un botón del nav (ej. "Empresas" con pendientes) */
.badge-nav {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px; margin-left: 5px;
    border-radius: 999px; background: var(--rojo); color: #fff;
    font-size: 10px; font-weight: 800; line-height: 1;
}

/* Mobile: los botones de submit de formulario (aplicar, publicar, guardar)
   son la acción principal de la pantalla — full-width, más fáciles de
   tocar sin puntería, en vez de quedar chicos alineados a la izquierda. */
@media (max-width: 480px) {
    form button[type="submit"].btn { width: 100%; }
}

/* Avisos */
.aviso { background: #eef2f7; padding: 12px 16px; border-radius: 8px; margin: 14px 0; font-size: 0.9rem; }
.aviso--ok { background: var(--verde-bg); color: var(--verde); }
.aviso--error { background: var(--rojo-bg); color: var(--rojo); }

/* Contadores públicos en vivo, arriba del título del hero — grandes y
   llamativos pero NUNCA más grandes que el h1 (jerarquía clara: el
   título sigue siendo lo primero que se lee). */
.contadores-globales { display: flex; justify-content: center; gap: 28px; margin-bottom: 18px; flex-wrap: wrap; }
.contadores-globales__item { display: flex; flex-direction: column; align-items: center; }
.contadores-globales__num { font-size: 1.5rem; font-weight: 800; color: var(--cp); line-height: 1; }
.contadores-globales__label { font-size: 0.75rem; color: var(--texto-muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }

/* Hero de la home */
.hero-publico { padding: 48px 0 36px; text-align: center; }
.hero-publico__eyebrow {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.8px;
    text-transform: uppercase; color: var(--cp); background: var(--eyebrow-bg);
    padding: 5px 14px; border-radius: 999px; margin-bottom: 14px;
}
.hero-publico h1 {
    font-size: clamp(1.7rem, 5vw, 2.5rem); font-weight: 800; color: #0f172a;
    line-height: 1.15; margin: 0 0 10px;
}
.hero-publico h1 span { color: var(--cp); }
.hero-publico__sub { font-size: .9rem; color: var(--texto-muted); margin: 0 auto 28px; max-width: 380px; }

/* Buscador home */
.form-busqueda { max-width: 680px; margin: 0 auto; gap: 0; }
.form-busqueda__principal { position: relative; margin-bottom: 14px; }
.form-busqueda__principal input {
    width: 100%; padding: 18px 20px 18px 52px; border: 2px solid var(--borde-input);
    border-radius: 14px; font-size: 18px; color: var(--texto); background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.06); transition: border-color .2s, box-shadow .2s;
}
.form-busqueda__principal input::placeholder { color: #adb5bd; }
.form-busqueda__principal input:focus { border-color: var(--cp); box-shadow: 0 2px 18px rgba(var(--cp-rgb),.13); }
.form-busqueda__principal svg {
    position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; color: #adb5bd; pointer-events: none;
}
.form-busqueda__filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.form-busqueda__filtros select { background: #f9fbfd; cursor: pointer; }
.form-busqueda__filtros select:focus { background: #fff; }
.form-busqueda__submit { width: 100%; padding: 15px; border-radius: 11px; font-size: 17px; letter-spacing: .5px; }

/* Cards */
.card-oferta, .card-oferta-empresa, .card-aplicacion, .card-postulante, .card-pendiente, .card-detalle {
    background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 16px 18px;
    margin-bottom: 10px; display: block; text-decoration: none; color: inherit;
}
.card-oferta__titulo, .card-oferta-empresa__titulo, .card-aplicacion__titulo, .card-postulante__nombre, .card-pendiente__nombre {
    font-weight: 700; color: var(--texto); margin-bottom: 4px;
}
.card-oferta__meta, .card-oferta-empresa__meta, .card-aplicacion__meta, .card-postulante__email, .card-pendiente__datos {
    font-size: 0.85rem; color: var(--texto-muted); margin-bottom: 6px;
}
.card-oferta__badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.card-oferta-empresa__stats, .card-oferta__stats, .card-detalle__stats { font-size: 0.85rem; font-weight: 600; color: var(--cp); margin-bottom: 8px; }
.card-oferta__stats { margin-top: 6px; margin-bottom: 0; }
.card-detalle__stats { margin-top: 4px; }
.card-oferta-empresa__acciones, .card-postulante__acciones, .card-pendiente__acciones { display: flex; gap: 12px; margin-top: 8px; }
.card-oferta-empresa__acciones a, .card-postulante__acciones a { font-size: 0.85rem; color: var(--cp); font-weight: 600; text-decoration: none; }
.card-pendiente__acciones { flex-direction: row; margin-top: 10px; }
.card-oferta-empresa__vincular { flex-direction: row; align-items: center; gap: 8px; margin-top: 8px; }
.card-oferta-empresa__vincular select { flex: 1 1 auto; padding: 8px 10px; font-size: 13px; }
.card-oferta-empresa__estado-acciones { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.card-pendiente__fecha, .card-postulante__fecha { font-size: 0.75rem; color: var(--texto-muted); margin-top: 4px; }

/* Card de oferta pública: barrita de color a la izquierda en hover, igual que en MiPerfil.ar */
.card-oferta { position: relative; transition: border-color .18s ease, box-shadow .18s ease; }
.card-oferta:hover { border-color: #cfd8e3; box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.card-oferta::before {
    content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
    border-radius: 2px; background: transparent; transition: background .2s;
}
.card-oferta:hover::before { background: var(--cp); }

/* Ofertas cubiertas: siguen listadas (van al final, ver ORDER BY de
   index.php), pero atenuadas para que se lean como "cerradas" sin
   desaparecer del todo. */
.card-oferta--cubierta { opacity: .65; }
.card-oferta--cubierta:hover { opacity: .85; }
.card-oferta { padding: 18px 20px; }

/* Oferta destacada (admin/ofertas-editar-todas.php, dura 7 días): borde
   azul + dos elementos separados sobre el borde superior derecho — el
   sello (grande, suelto) y el badge de texto (azul, letra blanca,
   compacto, como estaba desde el principio). Van en un wrapper flex
   para que se acomoden solos sin pisarse sea cual sea el ancho del
   texto del badge. */
.card-oferta--destacada { border-color: var(--cp); border-width: 2px; }
.card-oferta--destacada:hover { border-color: var(--cp); }
.card-oferta--destacada .card-oferta__enlace { padding-right: 116px; }
.card-oferta__destacada-wrap {
    position: absolute; top: 0; right: 16px; transform: translateY(-50%);
    display: flex; align-items: center; gap: 6px;
}
.card-oferta__sello-destacada { width: 36px; height: 36px; display: block; }
.card-oferta__badge-destacada {
    background: var(--cp); color: #fff; font-size: 10px; font-weight: 700;
    padding: 3px 10px; border-radius: 999px; letter-spacing: .02em; white-space: nowrap;
}

/* .card-oferta__enlace ahora envuelve SOLO el título (no puede envolver
   toda la card, porque el nombre de la empresa es un link propio adentro
   y un <a> no puede anidar otro <a> sin romper el HTML). El ::after
   "estira" ese link a toda el área de la card (mismo truco que un
   "stretched-link" de Bootstrap) para que siga siendo clickeable
   completa — con z-index:auto, así .btn-guardar (z-index:1) y
   .card-oferta__empresa-link (position:relative + z-index propio) quedan
   siempre por encima y su click no lo tapa. */
/* padding-right con margen de sobra (no ajustado al pixel): el ancho de
   "☆ Guardar" varía según la fuente del sistema (Roboto en Android
   renderiza más ancho que San Francisco/Segoe UI) — con 76px el título
   largo lo tapaba en mobile real. 104px deja lugar de sobra. */
.card-oferta__enlace { display: block; text-decoration: none; color: inherit; padding-right: 104px; }
.card-oferta__enlace::after { content: ""; position: absolute; inset: 0; }
.card-oferta__empresa-link, .card-detalle__empresa-link {
    position: relative; z-index: 1; color: var(--cp); font-weight: 600; text-decoration: none;
}
.card-oferta__empresa-link:hover, .card-detalle__empresa-link:hover { text-decoration: underline; }
.card-oferta__descripcion { font-size: 0.85rem; color: var(--texto-muted); line-height: 1.55; margin-top: 8px; }

/* Paginación: número actual en círculo blanco con borde/texto azul,
   números clickeables en círculo que invierte a azul en hover,
   Anterior/Siguiente como botones sólidos/con borde. */
.paginacion { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 40px 0 0; flex-wrap: wrap; }
.paginacion a, .paginacion .actual {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 8px; border-radius: 50%;
    font-size: 14px; font-weight: 700; text-decoration: none; transition: all .15s;
}
.paginacion a { color: var(--cp); background: #fff; border: 1.5px solid var(--borde-input); }
.paginacion a:hover { background: var(--cp); color: #fff; border-color: var(--cp); }
.paginacion .actual { background: #fff; color: var(--cp); border: 1.5px solid var(--cp); }
.paginacion a.paginacion__anterior, .paginacion a.paginacion__siguiente {
    border-radius: 999px; width: auto; padding: 0 18px;
}
.paginacion a.paginacion__siguiente { background: var(--cp); color: #fff; border: none; }
.paginacion a.paginacion__siguiente:hover { background: color-mix(in srgb, var(--cp) 85%, black); }
.paginacion a.paginacion__anterior { background: #fff; color: var(--cp); border: 1.5px solid var(--cp); }
.paginacion a.paginacion__anterior:hover { background: var(--cp); color: #fff; }
.paginacion__puntos { color: var(--texto-muted); font-weight: 700; padding: 0 2px; }

@media (max-width: 480px) {
    /* Con el recorte de páginas de arriba + el texto de Anterior/
       Siguiente escondido (queda solo la flecha) entra todo en una
       sola línea, incluso con 8-9 páginas. */
    .paginacion { gap: 6px; margin-top: 28px; }
    .paginacion a, .paginacion .actual { min-width: 32px; height: 32px; font-size: 13px; padding: 0 6px; }
    .paginacion a.paginacion__anterior, .paginacion a.paginacion__siguiente {
        width: 32px; height: 32px; padding: 0; border-radius: 50%;
    }
    .paginacion__texto { display: none; }
}

.card-aplicacion { transition: border-color .18s ease, box-shadow .18s ease; }
.card-aplicacion:hover { border-color: #cfd8e3; box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.card-aplicacion__vista { font-size: 0.8rem; color: var(--texto-muted); margin-top: 4px; }
.card-aplicacion__vista--si { color: var(--verde); font-weight: 600; }

/* Detalle de oferta: mismo sistema de spacing/bordes que las cards del
   panel de empresa, pero con más aire por ser el contenido principal de
   la página — eyebrow real para el rubro, separadores entre bloques. */
.card-detalle { padding: 26px 28px; }
.card-detalle__rubro {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--cp); background: var(--eyebrow-bg);
    padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;
}
a.card-detalle__rubro { text-decoration: none; }
a.card-detalle__rubro:hover { background: color-mix(in srgb, var(--eyebrow-bg) 70%, var(--cp)); }
.card-detalle h1 { margin-top: 0; }
.card-detalle h2 { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--borde); font-size: 1.1rem; }
.card-detalle form { gap: 18px; }

/* Botón de "guardar oferta para después", solo visible para personas logueadas */
.btn-guardar {
    position: absolute; top: 12px; right: 12px; z-index: 1;
    background: #fff; border: 1.5px solid var(--borde-input); border-radius: 999px;
    padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--texto-muted);
    cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s;
}
.btn-guardar:hover { border-color: var(--cp); color: var(--cp); }
.btn-guardar--activa { background: var(--eyebrow-bg); border-color: var(--cp); color: var(--cp); }
.btn-guardar--detalle { position: static; margin-top: 10px; }

.badge { font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: #eef2ff; color: var(--cp); }
/* Badge de rubro clickeable (link a la landing de SEO de ese rubro,
   ver rubro_landing_url()) — position:relative + z-index para que no
   quede tapado por el ::after "estirado" de .card-oferta__enlace
   (mismo criterio que .card-oferta__empresa-link). Sin subrayado ni en
   reposo ni en hover, a pedido: solo se distingue por el color/badge. */
.badge--link { position: relative; z-index: 1; text-decoration: none; cursor: pointer; }
.badge--link:hover { text-decoration: none; filter: brightness(0.94); }

/* "¿Buscás en otro rubro?" al pie de cada landing de rubro — pills en
   vez de texto plano con puntos separadores. */
.cross-rubros { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--borde); }
.cross-rubros__label { display: block; font-size: 0.85rem; color: var(--texto-muted); margin-bottom: 8px; }
.cross-rubros__links { display: flex; flex-wrap: wrap; gap: 8px; }
.cross-rubros__pill {
    display: inline-block; padding: 6px 14px; border-radius: 999px;
    background: #eef2ff; color: var(--cp); font-size: 0.85rem; font-weight: 600;
    text-decoration: none; transition: filter .15s ease;
}
.cross-rubros__pill:hover { filter: brightness(0.94); }
.cross-rubros__pill--todas { background: #fff; border: 1px solid var(--borde-input); color: var(--texto-muted); }

/* Breadcrumbs (oferta.php, landing de rubro) */
.breadcrumbs {
    display: flex; flex-wrap: wrap; align-items: center;
    font-size: 0.82rem; margin-bottom: 16px; padding: 8px 12px;
    background: #fff; border: 1px solid var(--borde); border-radius: 8px;
}
.breadcrumbs a { color: var(--cp); text-decoration: none; font-weight: 600; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs__sep { margin: 0 8px; color: var(--texto-tenue); }
.breadcrumbs__actual { color: var(--texto-muted); font-weight: 600; }
.badge--gris { background: #e5e7eb; color: #6b7280; }
.badge--verde { background: var(--verde-bg); color: var(--verde); }
.badge--azul { background: #dbeafe; color: #1e40af; }
.badge--ambar { background: #fef3c7; color: #92400e; }
.badge--violeta { background: #ede9fe; color: #5b21b6; }

/* Estados de una postulación (aplicaciones.estado) */
.badge--estado-nueva { background: #dbeafe; color: #1e40af; }
.badge--estado-en_revision { background: #fef3c7; color: #92400e; }
.badge--estado-entrevista { background: #ede9fe; color: #5b21b6; }
.badge--estado-seleccionado { background: var(--verde-bg); color: var(--verde); }
.badge--estado-rechazado { background: var(--rojo-bg); color: var(--rojo); }

/* Badges de rubro: mismos colores fijos por categoría que en MiPerfil.ar */
.badge--gastronomia    { background: #FEF3C7; color: #92400E; }
.badge--comercio       { background: #DBEAFE; color: #1E40AF; }
.badge--administracion { background: #EDE9FE; color: #5B21B6; }
.badge--servicios      { background: #D1FAE5; color: #065F46; }
.badge--industria      { background: #F3F4F6; color: #374151; }
.badge--construccion   { background: #FEE2E2; color: #991B1B; }
.badge--salud          { background: #ECFDF5; color: #064E3B; }
.badge--veterinaria    { background: #FEF9C3; color: #713F12; }
.badge--educacion      { background: #EFF6FF; color: #1D4ED8; }
.badge--agro           { background: #F0FDF4; color: #166534; }
.badge--tecnologia     { background: #F0F9FF; color: #0C4A6E; }
.badge--otro           { background: #F9FAFB; color: #6B7280; }

.vacio { text-align: center; padding: 50px 20px; color: var(--texto-muted); }

.metricas { display: flex; gap: 20px; margin: 16px 0 30px; flex-wrap: wrap; }
.metrica { background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 16px 20px; }
.metrica__num { font-size: 1.4rem; font-weight: 800; color: var(--cp); display: block; }

.caja-login-gate { background: #f5f8fc; border-radius: 10px; padding: 18px; text-align: center; margin-top: 16px; }

.caja-mensaje-empresa { background: var(--eyebrow-bg); border-radius: 10px; padding: 16px 18px; font-size: 0.9rem; color: var(--texto); margin-bottom: 20px; }
.caja-mensaje-empresa strong { color: var(--cp); }

/* Lupo como mascota-guía junto al título de "Mercado laboral" */
.mercado-laboral__intro { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 4px; }
.mercado-laboral__lupo { height: 92px; width: auto; flex-shrink: 0; }
.mercado-laboral__intro h1 { margin-top: 0; }
@media (max-width: 600px) {
    .mercado-laboral__intro { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
}

/* Radar de "Mercado laboral" por rubro (mercado-laboral.php): SVG puro
   generado en PHP, dos series superpuestas (ofertas activas / aplicaciones
   totales), cada eje normalizado independiente 0-100%. */
.radar-card {
    background: #fff; border: 1px solid var(--borde); border-radius: 10px;
    padding: 20px; margin: 20px 0; text-align: center;
}
.radar-svg { width: 100%; max-width: 480px; height: auto; }
.radar-svg__grid { fill: none; stroke: var(--borde); stroke-width: 1; }
.radar-svg__spoke { stroke: var(--borde); stroke-width: 1; }
.radar-svg__etiqueta { font-size: 11px; fill: var(--texto-muted); font-weight: 600; }
.radar-svg__serie { stroke-width: 2; }
.radar-svg__serie--ofertas { fill: color-mix(in srgb, var(--cp) 25%, transparent); stroke: var(--cp); }
.radar-svg__serie--aplicaciones { fill: color-mix(in srgb, var(--acento) 20%, transparent); stroke: var(--acento); }

.radar-leyenda { display: flex; justify-content: center; gap: 20px; margin-top: 12px; flex-wrap: wrap; }
.radar-leyenda__item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--texto-muted); }
.radar-leyenda__punto { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.radar-leyenda__punto--ofertas { background: var(--cp); }
.radar-leyenda__punto--aplicaciones { background: var(--acento); }

/* Tabla simple y densa — panel de empresa y admin (postulaciones
   recientes, ranking de empresas, etc.), estética de herramienta de
   gestión seria, no de card social. */
.tabla-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--borde); border-radius: 10px; margin-bottom: 20px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
.tabla th, .tabla td { padding: 12px 16px; text-align: left; white-space: nowrap; }
.tabla th {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: .5px;
    color: var(--texto-muted); border-bottom: 1px solid var(--borde); font-weight: 700;
}
.tabla td { border-bottom: 1px solid var(--borde); color: var(--texto); }
.tabla tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover td { background: #f9fbfd; }
.tabla td.tabla__accion a { color: var(--cp); font-weight: 600; text-decoration: none; }
.tabla td.tabla__accion a:hover { text-decoration: underline; }

/* Celda de acciones con link + form de cambio de estado juntos (admin/ofertas-todas.php) */
.tabla td.tabla__acciones { white-space: normal; }
.tabla__acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tabla__acciones a { color: var(--cp); font-weight: 600; text-decoration: none; }
.tabla__acciones a:hover { text-decoration: underline; }
.tabla__acciones form { flex-direction: row; margin: 0; gap: 8px; }

/* Tabla de mercado-laboral.php: los títulos largos ("Aplicaciones
   totales") necesitan poder pasar a 2 líneas en vez de forzar columnas
   anchas + scroll lateral en mobile. */
.tabla--mercado-laboral th, .tabla--mercado-laboral td { white-space: normal; }
@media (max-width: 600px) {
    /* table-layout:fixed + anchos explícitos: con auto, "Rubro" y
       "Aplicaciones totales" se llevaban tanto espacio que "Promedio
       por oferta" quedaba afuera del ancho visible (scroll lateral
       adentro de .tabla-wrap, aunque la página en sí no scrolleaba). */
    .tabla--mercado-laboral { table-layout: fixed; }
    .tabla--mercado-laboral th, .tabla--mercado-laboral td { padding: 8px 6px; word-break: break-word; }
    .tabla--mercado-laboral th { font-size: 0.62rem; letter-spacing: 0; }
    .tabla--mercado-laboral td { font-size: 0.78rem; }
    .tabla--mercado-laboral th:nth-child(1), .tabla--mercado-laboral td:nth-child(1) { width: 30%; }
    .tabla--mercado-laboral th:nth-child(2), .tabla--mercado-laboral td:nth-child(2) { width: 17%; }
    .tabla--mercado-laboral th:nth-child(3), .tabla--mercado-laboral td:nth-child(3) { width: 31%; }
    .tabla--mercado-laboral th:nth-child(4), .tabla--mercado-laboral td:nth-child(4) { width: 22%; }
    /* Los badges de rubro no tienen que partirse a la mitad de la
       palabra — o entran en una línea o el badge se estira un poco,
       nunca "Administraci-ón". */
    .tabla--mercado-laboral td:nth-child(1) { word-break: normal; }
    .tabla--mercado-laboral td:nth-child(1) .badge { white-space: nowrap; }
}

/* Rubros que no entraron en el radar, marcados dentro de la misma
   tabla (antes era una segunda tabla duplicada) */
.tabla__fila--fuera-radar td { background: color-mix(in srgb, var(--eyebrow-bg) 45%, #fff); }
.tabla__fila--fuera-radar:hover td { background: color-mix(in srgb, var(--eyebrow-bg) 60%, #fff); }
.mercado-laboral__leyenda-tabla { display: flex; align-items: center; gap: 6px; }
.mercado-laboral__swatch {
    display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0;
    background: color-mix(in srgb, var(--eyebrow-bg) 45%, #fff); border: 1px solid var(--eyebrow-bg);
}

/* Stats en fondo navy, número grande + label chico debajo. auto-fit en
   vez de un número fijo de columnas: el dashboard de admin tiene 5
   tiles, el de empresa 4 — se acomodan solos sin tocar CSS de nuevo si
   se suma/saca alguno. */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px; }
.stat-card { background: var(--cp); border-radius: 10px; padding: 18px 16px; }
.stat-card__num { display: block; font-size: 1.8rem; font-weight: 800; color: #fff; line-height: 1; }
.stat-card__label { display: block; margin-top: 6px; font-size: 0.75rem; color: #fff; opacity: .75; }
a.stat-card { text-decoration: none; display: block; transition: background-color .15s; }
a.stat-card:hover { background: color-mix(in srgb, var(--cp) 85%, black); }

@media (max-width: 600px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* Dashboard de persona: aplicaciones + resumen de alertas + estado de CV + ofertas recientes */
.dashboard-seccion { margin-top: 32px; }
.dashboard-seccion__titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.dashboard-seccion__titulo h2 { margin: 0; font-size: 1.15rem; }
.dashboard-seccion__link { font-size: 0.85rem; color: var(--cp); font-weight: 600; text-decoration: none; }
.dashboard-seccion__link:hover { text-decoration: underline; }
.resumen-alertas, .resumen-cv { background: #f5f8fc; border-radius: 10px; padding: 16px 18px; font-size: 0.9rem; color: var(--texto); }
.resumen-alertas { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Lupo invitando a configurar alertas cuando todavía no hay ninguna
   (ver persona/mis-aplicaciones.php) — globo de diálogo con CSS puro,
   solo aparece acá, no como decoración permanente. */
.lupo-globo { display: flex; align-items: center; gap: 12px; }
.lupo-globo__lupo { height: 56px; width: auto; flex-shrink: 0; }
.lupo-globo__burbuja {
    position: relative;
    background: #fff; border: 1.5px solid var(--borde-input); border-radius: 14px;
    padding: 10px 14px; font-size: 0.88rem; font-weight: 600; color: var(--texto);
}
.lupo-globo__burbuja strong { color: var(--cp); }
.lupo-globo__burbuja::before,
.lupo-globo__burbuja::after {
    content: ""; position: absolute; top: 50%; transform: translateY(-50%);
    border-style: solid; border-color: transparent;
}
.lupo-globo__burbuja::before { left: -9px; border-width: 8px 9px 8px 0; border-right-color: var(--borde-input); }
.lupo-globo__burbuja::after  { left: -7px; border-width: 6.5px 7px 6.5px 0; border-right-color: #fff; }
.resumen-ofertas { display: flex; flex-direction: column; gap: 10px; }
.resumen-perfil { background: var(--cp); border-radius: 10px; padding: 20px; text-align: center; color: #fff; }
.resumen-perfil p { margin: 0 0 12px; opacity: .9; }

/* Modal genérico (overlay + hoja que sube desde abajo en mobile, centrada
   en desktop) — mismo patrón que ya usaba el sistema viejo de WordPress
   para sus modals de aplicación (referencia-empleos-css.css: .emp-overlay
   / .emp-modal), portado con nuestros propios nombres de clase. */
.modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5);
    z-index: 9999; align-items: flex-end; justify-content: center;
}
.modal-overlay.abierto { display: flex; }
.modal-caja {
    background: #fff; border-radius: 18px 18px 0 0; padding: 28px 24px 32px;
    width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; position: relative;
}
.modal-caja__handle { width: 40px; height: 4px; background: #e5e7eb; border-radius: 2px; margin: 0 auto 18px; }
.modal-caja__cerrar {
    position: absolute; top: 16px; right: 18px; background: #f3f4f6; border: none;
    width: 30px; height: 30px; border-radius: 50%; font-size: 16px; color: #6b7280;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.modal-caja__cerrar:hover { background: #e5e7eb; color: #111; }
.modal-caja h2 { margin-top: 0; }

@media (min-width: 600px) {
    .modal-overlay { align-items: center; padding: 20px; }
    .modal-caja { border-radius: 14px; }
}

/* Modal de onboarding (wizard de bienvenida para personas, ver
   includes/_modal_onboarding.php) — reusa .modal-overlay/.modal-caja
   tal cual, solo agrega los pasos navegables y el nav de abajo. */
.onboarding__paso { display: none; }
.onboarding__paso--activo { display: block; }
.onboarding__titulo-paso { font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; }
.onboarding__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.onboarding__contador { font-size: 0.85rem; color: var(--texto-muted); font-weight: 600; }
.btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* Modal "¿Qué voy a poder hacer siendo empresa?" (empresa/login.php) —
   mismo .modal-overlay/.modal-caja de siempre, con una lista de
   funcionalidades a modo de checklist en vez de párrafo corrido. */
.lista-features { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lista-features li { position: relative; padding-left: 26px; font-size: 0.92rem; line-height: 1.45; }
.lista-features li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--verde); font-weight: 700; }
.lista-features__cta { text-align: center; margin: 22px 0 0; }

/* Modal "Ofertas activas de {empresa}" (admin/empresas-pendientes.php)
   — el número de la tabla es un botón sin chrome propio, se ve como
   texto normal pero clickeable; el modal reusa .modal-overlay/.modal-caja. */
.btn-link-ofertas {
    background: none; border: none; padding: 0; font: inherit; color: var(--cp);
    font-weight: 600; text-decoration: underline; cursor: pointer;
}
.modal-ofertas-empresa__lista { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.modal-ofertas-empresa__lista li { font-size: 0.92rem; }
.modal-ofertas-empresa__lista a { color: var(--cp); font-weight: 600; text-decoration: none; }
.modal-ofertas-empresa__lista a:hover { text-decoration: underline; }

/* Barra fina de acceso a Mercado laboral, arriba del footer-publico —
   para no depender solo del link chico del footer de marca. */
.mercado-laboral-hook { max-width: 880px; margin: 0 auto; padding: 14px 20px; text-align: center; border-top: 1px solid var(--borde); }
.mercado-laboral-hook a { color: var(--cp); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.mercado-laboral-hook a:hover { text-decoration: underline; }

/* Footer / disclaimer al pie del listado público */
.footer-publico { background: var(--disclaimer-bg); border-top: 2px solid var(--borde-input); padding: 36px 20px; margin-top: 40px; }
.footer-publico__contenido { max-width: 880px; margin: 0 auto; text-align: center; }
.footer-publico__titulo { font-size: 20px; font-weight: 800; color: #111827; margin: 0 0 8px; }
.footer-publico__sub { font-size: 14px; color: #374151; line-height: 1.7; margin: 0 0 20px; }
.footer-publico__link { margin: 0; font-size: 14px; }
.footer-publico__link a { color: var(--cp); font-weight: 700; text-decoration: none; }
.footer-publico__link a:hover { text-decoration: underline; }

/* Footer de marca (identidad, no navegación) — en todas las páginas,
   idéntico siempre. CAMBIO DE DIRECCIÓN respecto a una ronda anterior:
   ya NO es fondo azul sólido — ahora es el mismo hueso/blanco de
   body, con un divisor azul (border-top) separándolo del contenido de
   arriba. Con fondo claro, los logos (todos PNG con transparencia real,
   sin fondo blanco propio) ya no necesitan ningún tratamiento especial
   de contraste — se sacó el chip blanco que hacía falta contra el
   fondo azul viejo. Lupo (la mascota) grande, "asomándose" desde el
   borde inferior en desktop para darle personalidad a la franja en vez
   de que sea una franja genérica. En mobile se apila simple, sin el
   efecto de Lupo saliéndose del borde. */
.footer-marca {
    background: #f8fafc;
    border-top: 3px solid var(--cp);
    padding: 24px 20px 0;
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: visible;
}
.footer-marca__contenido {
    position: relative;
    max-width: 880px; margin: 0 auto; display: flex; justify-content: space-between;
    align-items: center; flex-wrap: wrap; gap: 20px;
    padding: 0 0 24px;
}

.footer-marca__marca { flex-shrink: 0; text-decoration: none; }
.footer-marca__logo { height: 100px; width: auto; display: block; }

/* Centrada de verdad en el medio del footer (no solo "empujada" por el
   flex) — se saca del flujo del flex y se centra contra
   .footer-marca__contenido, que a su vez ya está centrado en la banda
   completa del footer vía margin:0 auto. */
.footer-marca__lupa-col {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    text-decoration: none; opacity: .8; transition: opacity .2s;
}
.footer-marca__lupa-col:hover { opacity: 1; }
.footer-marca__icono-lupa { height: 85px; width: auto; }
.footer-marca__lupa-caption { font-size: 0.78rem; color: var(--texto-muted); white-space: nowrap; }
.footer-marca__lupa-caption strong { color: var(--cp); font-weight: 700; }

/* Lupo "asomándose" desde el borde inferior derecho — posicionado
   absoluto para que sobresalga del footer de verdad, no solo se vea
   grande dentro de la fila. */
.footer-marca__lupo-col {
    position: absolute; right: -20px; bottom: -24px;
    display: inline-flex; transition: transform .2s; text-decoration: none;
}
.footer-marca__lupo-col:hover { transform: translateY(-4px); }
.footer-marca__lupo { height: 140px; width: auto; display: block; filter: drop-shadow(0 8px 14px rgba(0,0,0,.15)); }

.footer-marca__links {
    max-width: 880px; margin: 0 auto; padding-bottom: 12px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.footer-marca__links-principal { color: var(--cp); font-weight: 700; font-size: 0.95rem; text-decoration: none; }
.footer-marca__links-principal:hover { text-decoration: underline; }
/* Links a las landing de rubro: deliberadamente menos protagonismo que
   "Mercado laboral" (sin negrita, más chicos) y apiladas — una debajo
   de la otra siempre, no en fila, para que no compitan visualmente. */
.footer-marca__links-rubros {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.footer-marca__links-rubros a { color: var(--texto-muted); font-weight: 400; font-size: 0.82rem; text-decoration: none; }
.footer-marca__links-rubros a:hover { color: var(--cp); text-decoration: underline; }

.footer-marca__copy { max-width: 880px; margin: 0 auto; padding: 0 0 20px; text-align: center; font-size: 0.8rem; color: var(--texto-muted); }
.footer-marca__admin {
    display: inline-block; margin-left: 10px; color: var(--texto-muted); opacity: .3;
    text-decoration: none; transition: opacity .2s;
}
.footer-marca__admin:hover, .footer-marca__admin:focus { opacity: .8; }

@media (max-width: 768px) {
    .footer-marca__contenido {
        flex-direction: column; align-items: center; text-align: center;
        /* padding-bottom achicado a propósito: en mobile Lupo es lo
           último de este bloque y "Mercado laboral" es lo próximo que
           sigue — que se sienta a un click de Lupo, no un elemento
           suelto más abajo. */
        padding: 20px 0 6px;
    }
    .footer-marca__logo { height: 44px; }
    .footer-marca__lupa-col {
        position: static; left: auto; top: auto; transform: none;
        margin-top: 4px;
    }
    .footer-marca__icono-lupa { height: 50px; }
    .footer-marca__lupo-col { position: static; margin-top: 2px; }
    .footer-marca__lupo { height: 90px; }
}

@media (max-width: 600px) {
    .form-busqueda__filtros { grid-template-columns: 1fr; }
    .form-busqueda__principal input { font-size: 16px; padding: 15px 16px 15px 46px; }
    .hero-publico { padding: 24px 0 28px; }
}

/* Compartir oferta con perfiles (admin/oferta-compartir.php) */
.buscador-perfiles { max-width: 480px; }
.lista-perfiles-compartir { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.perfil-compartir-item {
    display: flex; flex-direction: row; align-items: flex-start; gap: 10px;
    font-weight: 400; background: #fff; border: 1px solid var(--borde);
    border-radius: 10px; padding: 12px 14px;
}
.perfil-compartir-item input[type="checkbox"] { margin-top: 3px; }
.perfil-compartir-item__datos { display: flex; flex-direction: column; gap: 2px; }