/* ============================================================
   CONTRÁTAME · Hoja de estilos
   Mobile-first · marca azul/verde/naranja · claro y oscuro
   ============================================================ */

/* ---- Tokens ------------------------------------------------ */
:root {
  --azul:      #1E90E8;
  --azul-btn:  #1479ce;
  --verde:     #86C817;
  --verde-btn: #7bbd14;
  --naranja:   #FF8A00;
  --naranja-btn:#f78400;
  --purpura:   #7B5CD6;
  --tinta:     #0E2340;   /* navy, texto principal */

  --bg:        #e9e9e9;
  --card:      #ffffff;
  --texto:     #17233a;
  --muted:     #5c6b82;
  --borde:     #e2e8f1;
  --borde-fuerte:#cfd8e6;

  --ok:        #1f9d55;
  --ok-bg:     #e7f6ee;
  --error:     #d4353b;
  --error-bg:  #fdeceD;
  --warn-bg:   #fff3e0;

  --sombra:    0 1px 2px rgba(14,35,64,.05), 0 6px 20px rgba(14,35,64,.06);
  --sombra-sm: 0 1px 2px rgba(14,35,64,.06);
  --radio:     14px;
  --radio-sm:  10px;
  --radio-lg:  20px;
  --gap:       16px;
  --ancho:     1440px;   /* en pantallas grandes se desperdiciaba mucho lado */
  /* Alto del carrusel cuando va en el flujo de la página (pantallas
     estrechas). En pantallas anchas se fija a la derecha y ocupa todo el alto. */
  --banda-alto: clamp(200px, 32vw, 460px);
  --riel-ancho: 200px;
  /* El perfil de la estrella, en un solo sitio: lo usan el letrero de destacar,
     los trozos de su explosión y las estrellas del modal. Va dibujado y además
     repasado con un trazo grueso de puntas redondas (stroke-linejoin), que es
     lo que redondea los picos: recortar con clip-path los dejaba afilados y no
     hay forma de suavizarlos. */
  --perfil-estrella: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50,8L60.3,35.8L90,37L66.6,55.4L74.7,84L50,67.5L25.3,84L33.4,55.4L10,37L39.7,35.8Z' fill='white' stroke='white' stroke-width='14' stroke-linejoin='round'/%3E%3C/svg%3E");   /* ancho de esa columna fija */
  --riel-hueco: 24px;    /* aire entre el contenido y esa columna */
  --panel-ancho: 260px;  /* columna del menú del panel; el logo la comparte */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0c1424;
    --card:      #141f33;
    --texto:     #e7edf7;
    --muted:     #9aa8bf;
    --borde:     #24324a;
    --borde-fuerte:#33455f;
    --tinta:     #e7edf7;
    --ok-bg:     #143026;
    --error-bg:  #331a1d;
    --warn-bg:   #33270f;
    --sombra:    0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --sombra-sm: 0 1px 2px rgba(0,0,0,.35);
  }
}
:root[data-theme="light"] {
  --bg:#e9e9e9; --card:#fff; --texto:#17233a; --muted:#5c6b82; --borde:#e2e8f1;
  --borde-fuerte:#cfd8e6; --tinta:#0E2340; --ok-bg:#e7f6ee; --error-bg:#fdeced; --warn-bg:#fff3e0;
  --sombra:0 1px 2px rgba(14,35,64,.05),0 6px 20px rgba(14,35,64,.06);
}
:root[data-theme="dark"] {
  --bg:#0c1424; --card:#141f33; --texto:#e7edf7; --muted:#9aa8bf; --borde:#24324a;
  --borde-fuerte:#33455f; --tinta:#e7edf7; --ok-bg:#143026; --error-bg:#331a1d; --warn-bg:#33270f;
  --sombra:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
}

/* ---- Reset ligero ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* El atributo hidden manda: si no, cualquier `display` de una clase lo anula. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--texto);
  line-height: 1.55;
  font-size: 16px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img { max-width: 100%; display: block; }
a { color: var(--azul-btn); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3 { line-height: 1.2; color: var(--tinta); text-wrap: balance; }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; border-radius: 6px; }

.container { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 18px; }
.main { flex: 1 0 auto; padding-bottom: 48px; }
.con-margen-top { margin-top: 32px; }
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--tinta); color: #fff;
  padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---- Marca ------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand:hover { text-decoration: none; }
.brand-logo { border-radius: 9px; }
.brand-word { font-weight: 900; letter-spacing: .3px; font-size: 1.15rem; }
.brand-nombre { color: var(--verde-btn); }
.brand-co { color: var(--azul-btn); }

/* ---- Header / nav ------------------------------------------ */
/* El azul oscuro es de todo el sitio, no solo del panel: el listado y el
   panel se recorren seguido y con una cabecera blanca y otra azul parecían dos
   sitios distintos. El valor va escrito, no por token: --tinta se aclara en
   modo oscuro y aquí siempre es el fondo. */
.site-header {
  background: #0E2340;
  border-bottom: 1px solid rgba(255,255,255,.12);
  position: sticky; top: 0; z-index: 50;
}
.site-header .brand-word { color: #fff; }
.site-header .btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.site-header .btn-ghost:hover { background: rgba(255,255,255,.12); }
.site-header .nav-toggle span { background: #fff; }
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 62px; }
/* La cabecera no se centra aquí: el logo ocupa la misma columna que el menú,
   así queda justo encima del nombre en vez de flotar a su derecha. */
.site-header.es-panel .header-inner { max-width: none; padding: 0; }
.site-header.es-panel .brand {
  width: var(--panel-ancho); flex: 0 0 var(--panel-ancho);
  padding-left: 18px;   /* el mismo que .panel-yo, para que alineen */
}
.site-header.es-panel .site-nav { padding-right: 18px; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Los dos botones de faceta van en su propio formulario (así no enseñan el
   destino al pasar el ratón). display: contents saca al formulario de la
   maquetación: el botón participa en la fila del menú como si fuera hijo. */
.nav-ir { display: contents; }
.site-nav > a:not(.btn) {
  color: var(--texto); font-weight: 600; padding: 8px 10px; border-radius: 8px;
}
.site-nav > a:not(.btn):hover { background: var(--bg); text-decoration: none; }
.site-nav > a.is-active { color: var(--azul-btn); }
.nav-toggle { display: none; }

/* ---- Botones ----------------------------------------------- */
.btn {
  --b: var(--azul-btn);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--b); color: #fff; border: 1px solid transparent;
  padding: 11px 18px; border-radius: 999px; font-weight: 700; font-size: .95rem;
  cursor: pointer; min-height: 44px; text-align: center; transition: filter .15s, transform .05s;
}
.btn:hover { filter: brightness(1.05); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { --b: var(--azul-btn); }
.btn-azul    { --b: var(--azul-btn); }
.btn-verde   { --b: var(--verde); color: var(--tinta); }
.btn-naranja { --b: var(--naranja); color: #3a2500; }
.btn-peligro { --b: transparent; color: var(--error); border-color: var(--borde-fuerte); }
.btn-peligro:hover { background: var(--error-bg); filter: none; }
.btn-ghost {
  --b: transparent; color: var(--texto); border-color: var(--borde-fuerte);
}
.btn-ghost:hover { background: var(--bg); filter: none; }
.btn-sm { padding: 7px 13px; min-height: 36px; font-size: .85rem; }
.btn-lg { padding: 14px 24px; min-height: 52px; font-size: 1.05rem; }
/* Inhabilitado: no es un botón que se pueda pulsar, es una etiqueta con forma
   de botón ("Creada por ti"). Sin puntero de mano y sin reaccionar al ratón,
   para que no invite a pulsarlo. */
.btn:disabled, .btn[disabled] {
  cursor: default; opacity: .65; filter: none;
  background: var(--bg); color: var(--muted); border-color: var(--borde);
}
.btn:disabled:hover, .btn[disabled]:hover { filter: none; background: var(--bg); }
.btn:disabled:active, .btn[disabled]:active { transform: none; }
.btn-bloque { display: flex; width: 100%; }
.inline { display: inline-flex; gap: 6px; }

/* ---- Título del trabajo ------------------------------------ */
/* El título de una convocatoria va siempre en mayúscula sostenida, lo escriba
   como lo escriba quien publica. Se hace al mostrar, no al guardar: la base
   conserva el texto original. */
.job-titulo,
.detalle-titulo,
.oferta-fila-titulo,
.modal-oferta,
.notif-titulo { text-transform: uppercase; }
.pv-vacio { text-transform: none; }   /* el aviso de la vista previa, no */

/* ---- Chips ------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: var(--bg); color: var(--muted); border: 1px solid var(--borde);
  white-space: nowrap;
}
.chip-oficio { background: rgba(30,144,232,.12); color: var(--azul-btn); border-color: transparent; }
/* Destacada: la convocatoria que pagó por salir primero. Naranja, que es el
   color de lo que cuesta dinero en el sitio (la membresía, los créditos). */
.chip-destacada { background: var(--warn-bg); color: #9a6a00; border-color: rgba(255,138,0,.35); font-weight: 800; }
/* La oferta de destacar, dentro del modal de postulados. */
.destacar-caja {
  display: flex; justify-content: center; margin: 14px 0;
  background: var(--warn-bg); border-color: rgba(255,138,0,.35);
  border-radius: 20px;
}
/* Dentro del modal de la convocatoria la estrella se clava arriba a la derecha
   y sale del flujo: sin la tarjeta naranja de por medio, el listado de
   postulados sube y ocupa el hueco. Fuera del modal (la misma sección pintada
   como página entera, sin JS) se queda como una tarjeta centrada. */
.modal .destacar-caja {
  position: absolute; top: 12px; right: 16px; z-index: 2;
  margin: 0; padding: 0; background: none; border: 0; box-shadow: none;
  --estrella: 232px;
}
/* Sitio para ella: el título y el resumen no le pasan por debajo, y el resumen
   reserva su alto para que el listado empiece limpio, ya sin estrella encima. */
.modal-cuerpo:has(.destacar-caja) > .seccion-titulo,
.modal-cuerpo:has(.destacar-caja) > .seccion-sub { padding-right: 260px; }
/* El alto del letrero más su precio: es lo que hay que reservar para que el
   listado empiece por debajo y no se le monte encima. */
.modal-cuerpo:has(.destacar-caja) > .seccion-sub { min-height: 96px; }

/* ---- El modal de postulados, en azul de marca -------------------------
   La caja va del navy del panel y lo que se lee o se rellena —tarjetas, tablas
   y campos— se queda en blanco encima, que es donde tiene que caer la vista.
   Solo se toca lo que quedaría ilegible sobre azul: las tarjetas y los campos
   ya traen su propio fondo blanco, así que a esos solo hay que devolverles el
   color de texto, que si no lo heredan blanco de la caja. */
/* El mismo modal sirve para dos cosas: los postulados de una convocatoria
   propia (azul) y el detalle de un trabajo (blanco, como cualquier tarjeta).
   Se distingue por lo que trae dentro y no por quién lo abrió: así no hay que
   acordarse de poner una clase en cada disparador. */
#modal-oferta .modal-caja:has(.titulo-postulados) {
  background: var(--tinta); border-color: rgba(255,255,255,.18); color: #fff;
}
#modal-oferta :has(.titulo-postulados) .seccion-titulo { color: #fff; }
#modal-oferta :has(.titulo-postulados) .seccion-sub { color: rgba(255,255,255,.78); }
#modal-oferta :has(.titulo-postulados) .card,
#modal-oferta :has(.titulo-postulados) .vacio,
#modal-oferta :has(.titulo-postulados) .tabla-historico,
#modal-oferta :has(.titulo-postulados) .aviso-naranja,
#modal-oferta :has(.titulo-postulados) .chip { color: var(--texto); }
/* La tabla es lo único que no traía fondo: se apoyaba en el de la página. */
#modal-oferta .tabla-historico {
  background: var(--card); border-radius: var(--radio-sm); overflow: hidden;
}
/* El botón de cerrar sí va sobre el azul; los "Descartar" de las tarjetas no,
   así que se toca solo la fila de botones del propio modal. */
#modal-oferta .modal-caja:has(.titulo-postulados) .modal-botones .btn-ghost {
  color: #fff; border-color: rgba(255,255,255,.45);
}
#modal-oferta .modal-caja:has(.titulo-postulados) .modal-botones .btn-ghost:hover {
  background: rgba(255,255,255,.14);
}
/* El precio de destacar, en dorado: el ámbar oscuro se perdía sobre el navy. */
#modal-oferta .btn-destacar { color: #FFD24A; }

/* ---- El modal de destacar: feria ------------------------------------
   Fondo oscuro para que las luces se vean, aro de arcoíris girando por fuera,
   dos vueltas de bombillos encendiéndose por turnos y estrellas titilando en
   las esquinas. Todo el adorno son elementos aparte y aria-hidden, así que
   nada de esto se lee ni se puede pulsar. */
.es-feria .modal-caja {
  position: relative; overflow: visible;
  background: linear-gradient(155deg, #141f3c 0%, #241543 55%, #3d1030 100%);
  border: 0; color: #fff; border-radius: 26px; padding: 26px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
/* El aro: va detrás del fondo de la caja (z-index negativo), así solo asoma lo
   que sobresale por los bordes. Sin máscaras ni trucos que puedan fallar: si
   el navegador ignorara el z-index, taparía el modal entero.

   Los colores corren de lado, no gira la pieza: girándola, lo que daba vueltas
   era el rectángulo entero y sus esquinas barrían media pantalla. */
.fiesta-arco {
  position: absolute; inset: -7px; z-index: -1; border-radius: 33px;
  background: linear-gradient(90deg,
    #ff2d55, #ff9500, #ffd60a, #34c759, #32ade6, #5856d6, #ff2d55);
  background-size: 300% 100%;
  filter: blur(.5px) saturate(1.15);
  animation: fiesta-corre 7s linear infinite;
}
/* Los bombillos: un punto repetido por los cuatro lados. Dos capas desfasadas
   medio hueco que se encienden por turnos; con una sola sería un parpadeo
   plano. Van dentro del relleno del modal, lejos del texto. */
.fiesta-luces {
  position: absolute; inset: 7px; border-radius: 22px; pointer-events: none;
  --bombillo: radial-gradient(circle, #fff8d8 30%, rgba(255,200,60,.45) 42%, transparent 54%);
  background-image: var(--bombillo), var(--bombillo), var(--bombillo), var(--bombillo);
  background-size: 18px 18px;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  filter: drop-shadow(0 0 4px rgba(255,190,40,.9));
  animation: fiesta-turno 1s steps(1, end) infinite;
}
.luz-a { background-position: top left, bottom left, left top, right top; }
.luz-b {
  background-position: top left 9px, bottom left 9px, left top 9px, right top 9px;
  animation-direction: reverse;
}
/* Las estrellas de las esquinas: el mismo perfil de punta redonda del letrero. */
.fiesta-estrella {
  position: absolute; width: 26px; height: 26px; pointer-events: none;
  background: linear-gradient(155deg, #FFF6C8, #FFDE6B 40%, var(--naranja));
  -webkit-mask-image: var(--perfil-estrella); mask-image: var(--perfil-estrella);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  filter: drop-shadow(0 0 6px rgba(255,200,60,.9));
  opacity: 0; animation: fiesta-titila 2.6s ease-in-out infinite;
}
.fiesta-estrella.e1 { top: -13px;  left: 26px;  animation-delay: 0s; }
.fiesta-estrella.e2 { top: -16px;  right: 34px; width: 34px; height: 34px; animation-delay: .8s; }
.fiesta-estrella.e3 { bottom: -12px; left: 20%;  width: 20px; height: 20px; animation-delay: 1.4s; }
.fiesta-estrella.e4 { bottom: -15px; right: 18%; animation-delay: 2s; }
/* El título, en arcoíris que corre. El degradado se recorta contra la letra. */
.es-feria .modal-titulo {
  font-size: 1.35rem;
  background: linear-gradient(90deg, #ff5f6d, #ffc371, #ffe259, #7ee8a2, #6ec3f4, #b18cff, #ff5f6d);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fiesta-arcoiris 6s linear infinite;
}
.es-feria .modal-sub { color: rgba(255,255,255,.8); font-weight: 600; margin-bottom: 0; }
/* Título a la izquierda y precio a la derecha, que es lo que se viene a mirar. */
.feria-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.feria-precio {
  display: grid; justify-items: center; line-height: 1;
  padding: 10px 18px; border-radius: 16px;
  background: linear-gradient(180deg, #ffe07a, #ffb300 55%, #e08c00);
  color: #5a2a00; box-shadow: 0 0 1.4em rgba(255,190,40,.55);
}
.precio-cifra {
  font-size: 1.9rem; font-weight: 900; letter-spacing: -.02em;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.precio-nota { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

/* La convocatoria que se va a destacar, pintada como saldría de primera en el
   listado: barra dorada con su estrella. Un título largo se corta antes que
   partir la barra en dos líneas. */
.feria-demo { margin: 16px 0 4px; }
.demo-fila.demo-tuya {
  min-height: 30px; display: flex; align-items: center; gap: 6px;
  padding: 4px 14px; border-radius: 8px;
  font-size: .82rem; font-weight: 900; color: #5a2a00;
  background: linear-gradient(90deg, #ffe07a, #ffc02e);
  box-shadow: 0 0 1em rgba(255,190,40,.6);
}
.demo-fila.demo-tuya > span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Los beneficios, en tarjetas con icono: en fila corrida se leían como una
   lista de condiciones y no como lo que se gana. */
.es-feria .feria-beneficios {
  list-style: none; padding-left: 0; margin-top: 14px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px;
}
.es-feria .feria-beneficios li {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: start;
  padding: 10px 12px; border-radius: 14px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  color: #fff; font-size: .9rem;
}
.ben-icono { grid-row: span 2; font-size: 1.5rem; line-height: 1; }
.es-feria .feria-beneficios strong { font-size: .95rem; }
.ben-nota { color: rgba(255,255,255,.75); font-size: .84rem; line-height: 1.35; }
.es-feria .feria-letra { color: rgba(255,255,255,.65); }
/* Confirmar: oro, que es lo que se paga. Cerrar, discreto sobre el oscuro. */
.es-feria .btn-oro {
  background: linear-gradient(180deg, #ffe07a, #ffb300 55%, #e08c00);
  border-color: #ffcf5a; color: #3a2500;
  box-shadow: 0 0 1.2em rgba(255,190,40,.6);
}
.es-feria .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.es-feria .btn-ghost:hover { background: rgba(255,255,255,.14); }
/* El de membresía lleva su formulario dentro (no hay convocatoria que guardar,
   así que confirmar envía y ya). display:contents lo saca de la maquetación: el
   botón queda en la fila como si el formulario no estuviera. */
.modal-botones .form-suelto { display: contents; }

@keyframes fiesta-corre { to { background-position: 300% 0; } }
@keyframes fiesta-arcoiris { to { background-position: 220% 0; } }
@keyframes fiesta-turno {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: .25; }
}
@keyframes fiesta-titila {
  0%, 100% { opacity: 0; transform: scale(.5); }
  12%, 26% { opacity: 1; transform: scale(1.1); }
  45%      { opacity: 0; transform: scale(.5); }
}
@media (prefers-reduced-motion: reduce) {
  /* Quieto: las luces se quedan encendidas y el arco deja de girar. */
  .fiesta-arco, .fiesta-luces, .fiesta-estrella,
  .es-feria .modal-titulo { animation: none; }
  .fiesta-estrella { opacity: .95; }
}

/* Lo que se gana al destacar, en su propio modal. */
.feria-beneficios { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.feria-beneficios li { font-size: .94rem; }
.feria-beneficios .chip { vertical-align: baseline; }
.feria-letra { margin-top: 12px; color: var(--muted); font-size: .86rem; }

/* ---- El botón de destacar: letrero de feria ---------------------------
   Marco dorado con bombillos que se encienden por turnos, fondo rojo, el logo
   a la izquierda y una estrella al final. El precio va debajo, fuera del
   letrero, porque dentro no cabría legible.

   Todo se mide desde --estrella (el ancho del letrero) y se expresa en em o en
   porcentaje: así el mismo botón sirve grande en la página y pequeño clavado
   en la esquina del modal, sin una sola medida que retocar.

   Todo el movimiento se apaga con prefers-reduced-motion, al final de este
   bloque: es mucha animación para quien la haya desactivado. */
/* El mismo letrero sirve para las dos cosas que se pagan: destacar una
   convocatoria y activar la membresia. Solo cambia la palabra de dentro y lo
   que dice la nube del precio. */
.btn-destacar, .btn-letrero {
  /* Sin hueco entre letrero y precio: la nube se monta sobre el borde de abajo
     con un margen negativo, y el hueco la separaría de él. */
  display: inline-flex; flex-direction: column; align-items: center; gap: 0;
  background: none; border: 0; padding: 8px 12px 4px; cursor: pointer;
  color: #9a6a00; font-weight: 800; font-size: .9rem;
  /* Un solo número manda el tamaño del letrero: en el modal se achica para
     caber en la esquina y todo lo de dentro se achica con él. */
  --estrella: 300px;
}
.estrella-cuerpo {
  /* El letrero entero. La proporción es la del viewBox de los bombillos: si se
     deformara, los puntos redondos saldrían ovalados. */
  position: relative; width: var(--estrella); aspect-ratio: 300 / 96;
  border-radius: 999px;
  /* El marco: oro con luz arriba y sombra abajo, como una moldura. */
  background: linear-gradient(180deg, #ffe9a0 0%, #f0b310 38%, #a86c00 100%);
  box-shadow: 0 .1em .5em rgba(0,0,0,.45), 0 0 1.2em rgba(255,180,40,.55);
  /* Todo lo de dentro se mide desde aquí. */
  font-size: calc(var(--estrella) * .092);
  /* Levita: sube y baja despacio, sin salirse de su sitio. */
  animation: destacar-levita 3.2s ease-in-out infinite;
}
/* El fondo rojo, por dentro del marco y de los bombillos. Lleva su propio filo
   dorado y, detrás de la estrella, un abanico de rayos que sale de ella. */
.marq-fondo {
  /* En em y no en %: un porcentaje se mide contra el lado de cada eje, así que
     el mismo número daba un aro tres veces más ancho a los lados que arriba. */
  position: absolute; inset: .5em; border-radius: 999px;
  background:
    repeating-conic-gradient(from 0deg at 88% 50%,
      rgba(255,230,160,.20) 0deg 4deg, rgba(255,230,160,0) 4deg 11deg),
    radial-gradient(125% 160% at 50% 0%, #e01a13 0%, #b50f0b 52%, #7d0705 100%);
  box-shadow:
    inset 0 0 0 .085em #ffd76b,          /* filo dorado por dentro */
    inset 0 .09em 0 rgba(255,255,255,.28), /* brillo de arriba */
    inset 0 -.3em .55em rgba(0,0,0,.5);
}
/* Los bombillos: un trazo de puntos redondos siguiendo el contorno. Dos capas
   desfasadas medio hueco que se encienden por turnos; con una sola quedaría un
   parpadeo plano, y con puntos sueltos no seguirían la curva de los extremos. */
.marq-luces {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.marq-luces path {
  fill: none; stroke: #fffbe6; stroke-width: 5.6; stroke-linecap: round;
  stroke-dasharray: 0 13;
  filter: drop-shadow(0 0 2.5px #ffd24a) drop-shadow(0 0 6px rgba(255,170,20,.85));
}
.luces-a { animation: marq-turno 1s steps(1, end) infinite; }
.luces-b { stroke-dashoffset: 7; animation: marq-turno 1s steps(1, end) infinite reverse; }
@keyframes marq-turno {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: .22; }
}
/* La fila de dentro: logo, palabra y estrella, repartidos a lo ancho. */
.marq-fila {
  position: absolute; inset: .5em; z-index: 1;
  display: flex; align-items: center; gap: .25em; padding: 0 .3em;
}
/* El logo, en su medallón: disco blanco con aro dorado, como el del letrero de
   referencia. El isotipo es azul y verde sobre rojo, y sin el disco los dos
   colores se ensucian contra el fondo. */
.estrella-logo {
  height: 88%; width: auto; aspect-ratio: 1; object-fit: contain;
  background: #fff; border-radius: 50%; padding: .1em;
  box-shadow: 0 0 0 .11em #ffd76b, 0 0 .5em rgba(255,196,60,.8);
  animation: destacar-late 3.6s ease-in-out infinite;
}
/* La palabra: oro macizo con filo oscuro. El degradado se recorta contra la
   letra y las sombras van con filter, que sigue el contorno del texto y no la
   caja; con text-shadow encima del relleno recortado no se vería. */
.estrella-rotulo {
  flex: 1; text-align: center; white-space: nowrap;
  font-size: 1em; font-weight: 900; letter-spacing: .04em; line-height: 1;
  text-transform: uppercase;
  color: #ffd84a;
  /* paint-order pone el filo por debajo del relleno: sin él, un trazo de este
     grosor se come la letra por dentro y "DESTACAR" pierde los huecos. */
  -webkit-text-stroke: .13em #7c1105; paint-order: stroke fill;
  text-shadow:
    0 -.04em 0 #fff4c2,                    /* luz arriba */
    0 .07em 0 #b4600c,                     /* canto de abajo */
    0 .11em .1em rgba(70,6,0,.6),
    0 0 .5em rgba(255,205,80,.75);         /* resplandor */
  animation: destacar-late 3.6s ease-in-out infinite;
}
/* La estrella, al final del letrero. */
/* Encajada en el extremo redondeado, no colgando fuera: por eso va medida
   contra el alto de la fila y no contra el del letrero entero. */
.estrella-insignia {
  position: relative; height: 96%; width: auto; aspect-ratio: 1; flex: none;
}
.estrella-cara {
  position: absolute; inset: 0;
  /* Cinco paradas: crema arriba, dorado, naranja y ámbar quemado abajo, para
     que la estrella tenga volumen y no un tinte plano. */
  background: linear-gradient(155deg, #FFF6C8 0%, #FFDE6B 26%, #FFB020 58%, var(--naranja) 78%, #c85f00 100%);
  /* Estrella de cinco puntas de verdad, no un icono encima de un círculo. */
  -webkit-mask-image: var(--perfil-estrella); mask-image: var(--perfil-estrella);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  /* Respira y, aparte, el halo cambia de color: son dos propiedades distintas
     (transform y filter), así que conviven sin pisarse. */
  animation: destacar-late 3.6s ease-in-out infinite,
             destacar-halo 5.2s ease-in-out infinite;
}
/* Destellos: chispas de cuatro puntas que aparecen y se van, cada una a su
   ritmo, por el borde del letrero. La cruz se hace con dos degradados: uno
   horizontal y otro vertical, que es lo que da el brillo de estrella. */
.chispa {
  position: absolute; width: .8em; height: .8em; opacity: 0;
  background:
    linear-gradient(90deg, transparent 44%, #fff 50%, transparent 56%),
    linear-gradient(0deg,  transparent 44%, #fff 50%, transparent 56%);
  filter: drop-shadow(0 0 .25em rgba(255,214,90,1));
  animation: destacar-destello 2.4s ease-in-out infinite;
}
/* Ni todos iguales ni todos a la vez: tamaños, sitios y turnos distintos. */
.chispa.c1 { top: -.25em;  left: 14%;  animation-delay: 0s; }
.chispa.c2 { top: -.3em;   right: 9%;  animation-delay: .5s; width: .6em; height: .6em; }
.chispa.c3 { bottom: -.3em; left: 32%; animation-delay: 1s; width: .55em; height: .55em; }
.chispa.c4 { bottom: -.25em; right: 20%; animation-delay: 1.5s; }
.chispa.c5 { top: 34%;     right: -.3em; animation-delay: 2s; width: .65em; height: .65em; }
/* El precio va en una pastilla pegada al borde de abajo del letrero, y flota
   con él: la misma animación, así suben y bajan a la vez y se leen como una
   sola pieza. */
.estrella-texto {
  position: relative; z-index: 2;
  /* Al doble de tamaño. Todo lo suyo va en em, así que el margen que la monta
     sobre el letrero y los bultos crecen con ella sin tocar nada más. */
  font-size: 1.9em;
  margin-top: -.45em; padding: .26em .8em;
  border-radius: 1.1em;
  background: linear-gradient(180deg, #fffdf3 0%, #ffe9b4 100%);
  color: #7c1105; font-weight: 900; line-height: 1.2;
  filter: drop-shadow(0 .08em .14em rgba(0,0,0,.45));
  animation: destacar-levita 3.2s ease-in-out infinite;
}
/* Ya destacada: el mismo letrero en azul, sin precio y sin nada que pulsar.
   El azul es el color de lo que ya está hecho en el sitio; el rojo y el oro
   quedan para lo que todavía se puede comprar. */
.btn-destacar.es-destacado { cursor: default; }
.es-destacado .estrella-cuerpo {
  background: linear-gradient(180deg, #bfe3ff 0%, #4aa3e8 38%, #10508f 100%);
  box-shadow: 0 .1em .5em rgba(0,0,0,.4), 0 0 1.2em rgba(60,150,235,.5);
}
.es-destacado .marq-fondo {
  background:
    repeating-conic-gradient(from 0deg at 88% 50%,
      rgba(190,230,255,.20) 0deg 4deg, rgba(190,230,255,0) 4deg 11deg),
    radial-gradient(125% 160% at 50% 0%, #1b6fc0 0%, #12508f 52%, #0a3260 100%);
  box-shadow:
    inset 0 0 0 .085em #9fd2ff,
    inset 0 .09em 0 rgba(255,255,255,.3),
    inset 0 -.3em .55em rgba(0,0,0,.5);
}
.es-destacado .marq-luces path {
  stroke: #f2faff;
  filter: drop-shadow(0 0 2.5px #9fd2ff) drop-shadow(0 0 6px rgba(60,150,235,.9));
}
.es-destacado .estrella-rotulo {
  color: #eaf6ff; -webkit-text-stroke-color: #0a3260;
  text-shadow:
    0 -.04em 0 #ffffff, 0 .07em 0 #0c4478,
    0 .11em .1em rgba(4,25,50,.6), 0 0 .5em rgba(160,215,255,.75);
}
.es-destacado .estrella-logo { box-shadow: 0 0 0 .11em #9fd2ff, 0 0 .5em rgba(120,195,255,.85); }
/* La estrella se queda dorada: es la marca de destacada, la misma que sale en
   el listado, y en azul dejaría de reconocerse. */
.btn-destacar:hover .estrella-cuerpo,
.btn-letrero:hover .estrella-cuerpo { filter: brightness(1.07) saturate(1.05); }
.btn-destacar:focus-visible,
.btn-letrero:focus-visible { outline: 2px solid var(--naranja); outline-offset: 4px; border-radius: var(--radio-sm); }

@keyframes destacar-levita {
  0%, 100% { transform: translateY(-5px); }
  50%      { transform: translateY(6px); }
}
@keyframes destacar-late {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
/* El halo va del naranja al dorado y vuelve. Solo la sombra: el relleno se
   queda quieto, si no la estrella parecería una luz de discoteca. */
@keyframes destacar-halo {
  0%, 100% { filter: drop-shadow(0 6px 14px rgba(255,138,0,.55)); }
  50%      { filter: drop-shadow(0 8px 20px rgba(255,210,74,.85)); }
}
@keyframes destacar-destello {
  0%, 100%   { opacity: 0; transform: scale(.4); }
  8%, 18%    { opacity: 1; transform: scale(1.15); }
  30%        { opacity: 0; transform: scale(.4); }
}

/* Al pulsar solo se hunde un momento, como una tecla, y vuelve. Antes salía
   despedido en trozos y el letrero desaparecía: quedaba el hueco mientras
   llegaba el modal, y parecía que se había roto algo. */
.btn-destacar.es-pulsado .estrella-cuerpo {
  animation: destacar-clic .26s ease-out;
}
@keyframes destacar-clic {
  0%   { transform: scale(1); }
  35%  { transform: scale(.94); filter: brightness(1.25); }
  70%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  /* Sin movimiento: el letrero se queda quieto, los bombillos encendidos sin
     parpadear y ni siquiera el hundido del clic (app.js consulta lo mismo
     antes de esperar por él). */
  .estrella-cuerpo, .estrella-cara, .estrella-rotulo, .estrella-logo, .chispa,
  .estrella-texto, .luces-a, .luces-b,
  .btn-destacar.es-pulsado .estrella-cuerpo { animation: none; }
  .chispa { opacity: .9; }
  .luces-b { opacity: 1; }
}
.destacar-aviso { margin: 14px 0; }
.chip-hab    { background: rgba(134,200,23,.16); color: #4d7a0a; border-color: transparent; }
.chip-activa, .chip-elegida, .chip-verde-solido {
  background: rgba(31,157,85,.15); color: var(--ok); border-color: transparent;
}
.chip-verde-solido { background: var(--verde); color: var(--tinta); }
.chip-cerrada, .chip-descartada { background: var(--bg); color: var(--muted); }
.chip-enviada { background: rgba(30,144,232,.12); color: var(--azul-btn); }
.chip-vista   { background: var(--warn-bg); color: #9a6a00; }
.chip-estado  { background: var(--bg); color: var(--muted); }

/* ---- Flash / avisos ---------------------------------------- */
/* Avisos de sesión ("Perfil actualizado."): salen flotando arriba y se van
   solos. La desaparición la hace una animación de CSS, no el JS, para que
   funcione igual sin él. Solo afecta a los de .flash-zone: los errores de
   los formularios son .flash sueltos y tienen que quedarse en pantalla. */
.flash-zone {
  /* Por encima del modal (z-index 80): si no, un aviso que nace con el modal
     abierto —lo que falta al publicar, por ejemplo— se queda debajo del velo
     y no se lee. */
  position: fixed; z-index: 90;
  top: calc(var(--header-h, 62px) + 14px); right: 18px;
  display: grid; gap: 8px;
  width: min(360px, calc(100vw - 36px));
  pointer-events: none;   /* no tapa lo que haya debajo */
}
.flash-zone .flash {
  box-shadow: var(--sombra); border-color: var(--borde);
  animation: aviso-flotante 5s ease forwards;
}
@keyframes aviso-flotante {
  0%        { opacity: 0; transform: translateY(-8px); }
  6%, 80%   { opacity: 1; transform: none; }
  100%      { opacity: 0; transform: translateY(-8px); visibility: hidden; }
}
/* Quien prefiere no ver movimiento: aparece y se va sin desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  @keyframes aviso-flotante {
    0%      { opacity: 0; }
    6%, 80% { opacity: 1; }
    100%    { opacity: 0; visibility: hidden; }
  }
}
.flash { padding: 12px 16px; border-radius: var(--radio-sm); font-weight: 600; border: 1px solid transparent; }
.flash-exito, .aviso-exito { background: var(--ok-bg); color: var(--ok); }
.flash-error { background: var(--error-bg); color: var(--error); }
.flash-info  { background: rgba(30,144,232,.1); color: var(--azul-btn); }
.aviso { padding: 14px 16px; border-radius: var(--radio-sm); background: rgba(30,144,232,.08); border: 1px solid var(--borde); margin: 12px 0; }
.aviso-neutro { background: var(--bg); }
.aviso-naranja { background: var(--warn-bg); border-color: rgba(255,138,0,.35); }
.aviso-exito { border-color: transparent; }

/* ---- Buscador (cabecera del inicio) ------------------------ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* El buscador ya no va de borde a borde. El fondo no lo pinta ni la sección
   ni el .container, sino una caja dentro: el .container reparte los mismos
   18px de relleno que el de los resultados, así el borde de esta caja cae
   exactamente donde empiezan y acaban las tarjetas de abajo. */
.buscador { padding: 18px 0 0; }
.buscador-caja {
  background:
    radial-gradient(1100px 320px at 12% -30%, rgba(30,144,232,.20), transparent 62%),
    radial-gradient(900px 300px at 92% -20%, rgba(134,200,23,.18), transparent 62%),
    var(--card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
  padding: 16px 18px;
}
.split-panel.cargando { opacity: .55; }
.buscador-intro {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.buscador-titulo { font-size: clamp(1.25rem, 3vw, 1.7rem); font-weight: 900; letter-spacing: -.4px; }

.buscador-form { display: grid; grid-template-columns: 1fr; gap: 10px; }
.campo-busca { position: relative; }
.campo-busca .campo-icono {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: 1rem; opacity: .7; pointer-events: none; line-height: 1;
}
.campo-busca input { padding-left: 40px; min-height: 48px; }
.campo-busca .ac-input { padding-right: 38px; }
.campo-busca .ac-clear { top: 11px; }
.btn-buscar { min-height: 48px; }

.filtros-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip-select {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card); border: 1.5px solid var(--borde-fuerte);
  border-radius: 999px; padding: 0 6px 0 13px; min-height: 38px;
  font-size: .85rem; font-weight: 700; color: var(--muted); cursor: pointer;
}
.chip-select:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(30,144,232,.18); }
.chip-select.tiene-valor { border-color: var(--azul); color: var(--azul-btn); background: rgba(30,144,232,.08); }
.chip-select select {
  border: 0; background: transparent; padding: 6px 4px; min-height: 34px;
  width: auto; max-width: 190px; font-size: .85rem; font-weight: 700;
  color: var(--texto); cursor: pointer;
}
.chip-select select:focus { box-shadow: none; }
.btn-geo { white-space: nowrap; }
.geo-aviso {
  margin-top: 10px; font-size: .88rem; color: var(--muted);
  background: rgba(30,144,232,.08); border-radius: var(--radio-sm); padding: 8px 12px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.geo-aviso button { background: none; border: 0; padding: 0; font: inherit; color: var(--azul-btn); cursor: pointer; text-decoration: underline; }

/* ---- Carrusel de imágenes ---------------------------------- */
/* En pantalla ancha el carrusel se fija a la derecha, debajo de la cabecera
   y hasta abajo: no se mueve con el scroll porque no está en el flujo, y el
   hueco lo reservan main y el pie con un padding, así nunca le pasa nada por
   debajo. Si no hay sitio para esa columna, se queda en el flujo al final de
   la página como una banda normal, para no perderlo en el móvil. */
.riel-carrusel { width: 100%; max-width: var(--ancho); margin: 18px auto 0; padding: 0 18px; }
/* El logo solo tiene sentido en la columna: en el flujo saldría enorme y
   además ya está en la cabecera. */
.riel-marca { display: none; }

@media (min-width: 1100px) {
  .riel-carrusel {
    margin: 0; padding: 0;
    position: fixed; z-index: 20;
    top: calc(var(--header-h, 62px) + 12px);
    /* Al lado del contenido, no en el borde de la pantalla: en un monitor
       ancho el contenido queda centrado y el riel se iba lejísimos. Se le
       deja --riel-hueco de aire para que no roce con los botones del
       buscador; cuando ya no sobra sitio, se queda a 18px como cualquier
       margen. La cuenta es la misma que centra el contenido, al revés. */
    right: max(18px, calc(50vw
      - (var(--ancho) + var(--riel-ancho) + var(--riel-hueco)) / 2 + 18px));
    width: var(--riel-ancho);
  }
  /* El hueco lo reserva main, no <body>: así la cabecera sigue ocupando todo
     el ancho, ya que el riel arranca por debajo de ella. El pie tampoco lo
     reserva: va de lado a lado y tapa el riel al llegar abajo (ver .site-footer). */
  .main.con-riel { padding-right: calc(var(--riel-ancho) + var(--riel-hueco)); }

  /* La cabecera se alinea con la página, no consigo misma. Con el riel, el
     bloque visible de la página es contenido + hueco + riel, y va centrado con
     ese ancho total; si la cabecera se centrara solo con --ancho, su logo
     empezaría más adentro que el contenido y el botón acabaría antes que el
     riel. Con el mismo ancho máximo, los dos bordes coinciden.
     :has() ya se usa en el panel; donde no exista, la cabecera se queda
     centrada como antes y no se rompe nada. */
  body:has(.main.con-riel) .site-header:not(.es-panel) .header-inner {
    max-width: calc(var(--ancho) + var(--riel-ancho) + var(--riel-hueco));
  }

  /* Arriba la marca, debajo el carrusel. */
  .riel-marca {
    display: grid; place-items: center; padding: 10px; margin-bottom: 12px;
    background: var(--card); border: 1px solid var(--borde);
    border-radius: var(--radio); box-shadow: var(--sombra-sm);
  }
  .riel-marca img { width: 100%; height: auto; }

  /* Sin alto forzado: la pieza se ve entera y con su propia proporción, y el
     riel mide lo que mida ella. El tope descuenta la cabecera y el bloque de
     la marca —que es cuadrado, o sea del ancho del riel— para que en una
     pantalla baja el banner no se salga por abajo. Con los dos máximos y los
     tamaños en auto, el navegador la encoge sin deformarla ni recortarla. */
  .riel-carrusel .carrusel-lamina { height: auto; }
  .riel-carrusel .carrusel-lamina img {
    width: auto; height: auto;
    max-width: 100%;
    max-height: calc(100vh - var(--header-h, 62px) - var(--riel-ancho) - 60px);
    object-fit: contain;
  }
}

.carrusel { position: relative; min-width: 0; width: 100%; }
.carrusel-pista {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  border-radius: var(--radio); box-shadow: var(--sombra-sm);
  scrollbar-width: none; -ms-overflow-style: none;
}
.carrusel-pista::-webkit-scrollbar { display: none; }
/* Las piezas llevan texto: se muestran enteras (contain), nunca recortadas.
   Como no todas tienen la misma proporción, el hueco que sobra se rellena
   con la propia imagen desenfocada en vez de dejar franjas vacías. */
.carrusel-lamina {
  flex: 0 0 100%; scroll-snap-align: center; min-width: 0;
  position: relative; display: grid; place-items: center; overflow: hidden;
  height: var(--banda-alto); background: var(--bg);
}
.carrusel-lamina::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--fondo); background-size: cover; background-position: center;
  filter: blur(26px) saturate(1.15) brightness(.92); transform: scale(1.2);
}
.carrusel-lamina img {
  position: relative; z-index: 1;
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;
}
/* Sin flechas ni puntos: el carrusel pasa solo. Se puede deslizar a mano y,
   como la pista es enfocable, moverlo con las flechas del teclado. */

/* ---- Resultados: cabecera y filtros activos ---------------- */
.buscador-resultados { padding-top: 18px; }
.resultados-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.chips-activos { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip-filtro { background: var(--card); border-color: var(--borde-fuerte); color: var(--texto); }
.chip-filtro:hover { border-color: var(--error); color: var(--error); text-decoration: none; }

/* ---- Split: lista + panel de detalle ----------------------- */
.split { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.split.cargando { opacity: .55; pointer-events: none; }
/* Solo 5 tarjetas a la vista; el resto se alcanza con scroll vertical.
   El alto exacto lo mide el JS sobre la sexta tarjeta y lo escribe en
   --lista-alto; el valor de aquí es el respaldo cuando no hay JS. */
.job-lista {
  list-style: none; display: grid; gap: 10px;
  padding: 2px 6px 2px 2px;   /* aire para el borde izquierdo y la barra */
  max-height: var(--lista-alto, calc(5 * 141px + 4 * 10px + 4px));
  overflow-y: auto;
  overscroll-behavior: contain;   /* al llegar al final no arrastra la página */
  scrollbar-gutter: stable;
}
.job-card {
  background: var(--card); border: 1px solid var(--borde); border-left: 4px solid transparent;
  border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra-sm);
  cursor: pointer; display: grid; gap: 3px; transition: border-color .12s, box-shadow .12s;
}
.job-card:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra); }
.job-card.is-sel { border-left-color: var(--azul); border-color: var(--azul); background: rgba(30,144,232,.05); }
/* Todos los textos de la tarjeta al mismo tamaño: 14px. */
.job-card, .job-titulo, .job-pago, .job-pie, .job-card .chip { font-size: 14px; }
.job-titulo { font-weight: 800; }
.job-enlace { color: var(--tinta); }
.job-enlace:hover { text-decoration: none; }
.job-card.is-sel .job-enlace { color: var(--azul-btn); }
.job-pago { font-weight: 800; color: var(--ok); margin-top: 2px; }
/* Orden de la tarjeta: chips · título · pago · antigüedad y nivel. */
.job-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 2px; }
.job-card .chip { padding: 3px 9px; }
.job-pie {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  color: var(--muted); margin-top: 6px;
}

/* Pie del listado: el punto donde el scroll pide los siguientes 20. */
.job-mas { display: grid; place-items: center; padding: 8px 0 4px; min-height: 34px; }
.job-mas-cargando { color: var(--muted); font-size: 14px; }
.job-mas-enlace { color: var(--azul-btn); font-size: 14px; font-weight: 700; }

.split-panel { min-width: 0; }
.panel-vacio {
  background: var(--card); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio);
  padding: 48px 24px; text-align: center; color: var(--muted); display: grid; gap: 10px; justify-items: center;
}
.panel-vacio-icono { font-size: 2.2rem; }
.vacio-pista { font-size: .9rem; }

/* ---- Detalle (página propia y panel) ----------------------- */

/* ---- Filtros ----------------------------------------------- */
.filtros {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  background: var(--card); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 16px; box-shadow: var(--sombra-sm); margin: 22px 0;
}
.filtro-campo { display: flex; flex-direction: column; gap: 6px; }
.filtro-campo label { font-size: .8rem; font-weight: 700; color: var(--muted); }
.filtro-buscar { grid-column: 1 / -1; }
.filtro-accion { grid-column: 1 / -1; display: flex; gap: 10px; }

/* ---- Formularios ------------------------------------------- */
input, select, textarea {
  font-family: inherit; font-size: 1rem; color: var(--texto);
  background: var(--card); border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-sm); padding: 11px 13px; width: 100%;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px rgba(30,144,232,.18); }
.form { display: grid; gap: 15px; }
.form-fila { display: flex; flex-direction: column; gap: 6px; }
.form-fila > label { font-weight: 700; font-size: .9rem; }
.form-fila-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-fila-triple { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }
.form-detalle-oficio { border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 14px 16px 16px; }
.form-detalle-oficio legend { font-weight: 700; font-size: .9rem; padding: 0 6px; }
.opcional { color: var(--muted); font-weight: 500; font-size: .82rem; }
.campo-ayuda { color: var(--muted); font-size: .82rem; }
/* Aviso cuando el texto es muy corto (mínimo de palabras sin cumplir). */
.campo-aviso { color: var(--naranja-btn); font-size: .82rem; font-weight: 600; }
input.campo-corto, textarea.campo-corto { border-color: var(--naranja-btn); }
/* Pie del campo: aviso a la izquierda y contador de letras a la derecha, en línea. */
.campo-pie { display: flex; align-items: baseline; gap: 12px; margin-top: 2px; }
.campo-pie .campo-aviso { flex: 1 1 auto; min-width: 0; }
.campo-pie .contador { flex: none; margin-left: auto; margin-top: 0; }
.req { color: var(--error); }
.input-moneda { display: flex; align-items: center; gap: 8px; }
.input-moneda span { font-weight: 800; color: var(--muted); }

/* Autocompletado (municipios) */
.ac { position: relative; }
.ac-input { padding-right: 36px; }
.ac-clear {
  position: absolute; right: 8px; top: 8px; width: 26px; height: 26px;
  border: 0; border-radius: 50%; background: var(--bg); color: var(--muted);
  font-size: 1.2rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.ac-clear:hover { background: var(--borde); color: var(--texto); }
/* Flecha para desplegar el catálogo completo (cuando no se sabe qué escribir). */
.ac-toggle {
  position: absolute; right: 6px; top: 7px; width: 30px; height: 30px;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted);
  cursor: pointer; display: grid; place-items: center;
}
.ac-toggle::before {
  content: ""; width: 8px; height: 8px; margin-top: -3px;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ac-toggle:hover { background: var(--bg); color: var(--azul-btn); }
.ac.con-lista .ac-input { padding-right: 70px; }
.ac.con-lista .ac-clear { right: 40px; }
.ac-list {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: 4px; list-style: none; background: var(--card);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm);
  box-shadow: var(--sombra); max-height: min(320px, 50vh); overflow-y: auto;
}
.ac-item { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: .95rem; }
.ac-item:hover, .ac-item.is-active { background: rgba(30,144,232,.12); color: var(--azul-btn); }
.ac-empty { padding: 10px 12px; color: var(--muted); font-size: .9rem; cursor: default; }

/* ---- Ciclo de contratación ---- */
.chip-fase { background: var(--bg); color: var(--muted); border-color: var(--borde); }
.chip-aceptada, .chip-elegida { background: rgba(31,157,85,.15); color: var(--ok); }
.chip-rechazada, .chip-vencida, .chip-descartada { background: var(--bg); color: var(--muted); }
.chip-nuevo { background: rgba(123,92,214,.14); color: var(--purpura); }
.contrato-ok { border: 1px solid rgba(31,157,85,.4); background: rgba(31,157,85,.06); display: grid; gap: 10px; }
.contrato-ok h3 { color: var(--ok); }
.form-calificar { display: grid; gap: 10px; margin-top: 4px; }
.calificar-pregunta { font-weight: 800; }
/* Los dos botones van justo bajo la pregunta, así que lo que se separa es lo
   de después: el comentario y las fotos, que son lo opcional. */
.calificar-botones { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.postulacion-card { display: grid; gap: 12px; }
.postulacion-card.destacada { border-color: var(--verde); box-shadow: 0 0 0 2px rgba(134,200,23,.35); }
.postulacion-accion { display: grid; gap: 10px; }
.comentario-card { display: grid; gap: 6px; }
.comentario-texto { font-style: italic; }
.perfil-rep { margin-top: 4px; }
.rep-pct { color: var(--ok); }

/* ---- Estados de usuario / perfil ---- */
.chip-confirmado { background: rgba(30,144,232,.14); color: var(--azul-btn); }
.chip-validado   { background: rgba(255,138,0,.16); color: #b56b00; }
.estado-perfil { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.estado-perfil .seccion-sub { margin-top: 6px; }
.perfil-foto { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.perfil-avatar-img { object-fit: cover; }
.perfil-nombre .chip { vertical-align: middle; font-size: .7rem; }

/* Selección de rol */
.rol-elige { border: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rol-elige legend { font-weight: 700; margin-bottom: 8px; }
.rol-opcion {
  display: flex; flex-direction: column; gap: 3px; padding: 14px; cursor: pointer;
  border: 2px solid var(--borde-fuerte); border-radius: var(--radio-sm); position: relative;
}
.rol-opcion input { position: absolute; opacity: 0; }
.rol-opcion.is-sel, .rol-opcion:has(input:checked) { border-color: var(--azul); background: rgba(30,144,232,.06); }
.rol-titulo { font-weight: 800; }
.rol-desc { font-size: .84rem; color: var(--muted); }

/* ---- Cards genéricas --------------------------------------- */
.card {
  background: var(--card); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 18px; box-shadow: var(--sombra-sm);
}
.seccion-titulo { font-size: 1.35rem; font-weight: 800; }
.seccion-sub { color: var(--muted); margin-top: 4px; }
.lista-cabecera { margin: 8px 0 16px; }
.vacio {
  text-align: center; padding: 40px 20px; color: var(--muted);
  background: var(--card); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio);
  display: grid; gap: 14px; justify-items: center;
}

/* ---- Ofertas ----------------------------------------------- */
/* Del grid de tarjetas del histórico solo queda esto: la cabecera del
   detalle. El histórico pasó a ser una tabla y el buscador usa .job-card. */
.oferta-card-top { display: flex; align-items: start; justify-content: space-between; gap: 8px; }

/* ---- Histórico de trabajos --------------------------------- */
.historico { margin-top: 36px; border-top: 1px solid var(--borde); }
.historico-cab { margin-bottom: 16px; }
.historico-vacio {
  color: var(--muted); background: var(--card); border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio); padding: 22px; text-align: center;
}
.chip-contratada { background: rgba(31,157,85,.15); color: var(--ok); border-color: transparent; }
.chip-asignada   { background: var(--warn-bg); color: #9a6a00; border-color: transparent; }

/* ---- Histórico: tabla informativa --------------------------
   El envoltorio es quien se desplaza a lo ancho cuando la tabla no cabe,
   para que nunca lo haga la página entera. */
.tabla-envoltorio {
  overflow-x: auto;
  background: var(--card); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra-sm);
}
.tabla-historico { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla-historico th, .tabla-historico td {
  padding: 10px 14px; text-align: center; vertical-align: middle;
  border-bottom: 1px solid var(--borde); white-space: nowrap;
}
.tabla-historico thead th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); background: var(--bg); font-weight: 700;
}
.tabla-historico tbody tr:last-child td { border-bottom: 0; }
.tabla-historico tbody tr:hover { background: var(--bg); }
/* El título es lo único que puede ser largo: se le deja partir. */
.tabla-historico .col-titulo { white-space: normal; min-width: 220px; }
.tabla-historico .col-pago { color: var(--ok); font-weight: 700; }
/* Última columna: el botón. Sin padding lateral extra, para que quede pegado
   al borde de la tabla y no se lleve ancho de las columnas con datos. */
.tabla-convocatorias .col-accion { padding-left: 6px; padding-right: 10px; }
.tabla-convocatorias .col-accion .btn { white-space: nowrap; }
.tabla-historico .oferta-fila-titulo { font-size: .88rem; }

/* Sin ancho para siete columnas: cada fila se apila y el nombre de la
   columna lo pone el data-col, así no se pierde de qué es cada dato. */
@media (max-width: 719px) {
  .tabla-envoltorio { background: none; border: 0; box-shadow: none; overflow-x: visible; }
  .tabla-historico thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-historico, .tabla-historico tbody, .tabla-historico tr, .tabla-historico td { display: block; }
  .tabla-historico tr {
    background: var(--card); border: 1px solid var(--borde);
    border-radius: var(--radio); box-shadow: var(--sombra-sm);
    padding: 6px 4px; margin-bottom: 12px;
  }
  .tabla-historico td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    border-bottom: 0; padding: 5px 12px; white-space: normal;
  }
  .tabla-historico td::before {
    content: attr(data-col);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); font-weight: 700; flex: 0 0 auto;
  }
  }

/* ---- Paginación -------------------------------------------- */
.paginacion { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 28px 0; }
.paginacion-info { color: var(--muted); font-size: .9rem; }

/* ---- Detalle de oferta ------------------------------------- */
.detalle { padding-top: 22px; }
.volver { display: inline-block; margin-bottom: 14px; font-weight: 600; }
.detalle-titulo { font-size: 1.45rem; font-weight: 900; margin-top: 8px; }
/* Oficio, estado de la cuenta y antigüedad, en una sola línea. Con
   flex-wrap, en pantalla estrecha bajan en vez de desbordarse. */
.detalle-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.detalle-fecha { color: var(--muted); font-size: .9rem; }
.detalle-datos-rapidos {
  list-style: none; padding: 14px 0 0; margin-top: 12px; border-top: 1px solid var(--borde);
  display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .92rem; color: var(--muted);
}
.detalle-datos-rapidos .dato-pago { font-size: 1.05rem; }
.detalle-acciones {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 16px; padding: 14px; background: var(--bg); border-radius: var(--radio-sm);
}
.detalle-acciones .aviso { margin: 0; flex: 1; min-width: 200px; }
/* Título y acción en la misma línea. El título se lleva el espacio que
   sobre y, con min-width:0, parte en varias líneas en vez de estirar la
   fila; el botón no se encoge ni se parte. Solo cuando ya no quedan 260px
   para el título, el flex-wrap baja el botón a la línea siguiente. */
.detalle-cab {
  display: flex; align-items: start; justify-content: space-between;
  gap: 10px 16px; flex-wrap: wrap;
  /* Aire con la fila de chips: el botón queda justo debajo del chip de
     recepción y sin esto se tocan. */
  margin-top: 12px;
}
.detalle-cab .detalle-titulo { flex: 1 1 260px; min-width: 0; }
.detalle-accion { flex: 0 0 auto; }
.detalle-bloque { margin-top: 16px; }
.detalle-bloque h3 {
  font-size: .78rem; color: var(--azul-btn); margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: .06em;
}

/* Los datos van en rejilla (2 columnas, 3 en pantallas anchas) en lugar de una
   fila por dato: la ficha ocupaba mucho alto para lo poco que dice cada línea. */
.detalle-datos {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px;
}
.detalle-datos li {
  display: flex; flex-direction: column; gap: 1px;
  padding-bottom: 8px; border-bottom: 1px solid var(--borde); min-width: 0;
}
.detalle-datos span { color: var(--muted); font-size: .78rem; }
.detalle-datos strong { overflow-wrap: anywhere; }
.detalle-datos .dato-ancho { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .detalle-datos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.dato-pago { color: var(--ok); font-size: 1.15rem; }
.form-postular { display: grid; gap: 10px; }
.form-postular label { font-weight: 700; font-size: .9rem; }

/* ---- Modal -------------------------------------------------
   Sin JS es una sección normal al final del detalle y el formulario
   funciona igual; el JS le pone [hidden], lo mueve al <body> y le añade
   .is-abierto para mostrarlo encima de la página. */
.modal.is-abierto {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: 18px;
  background: rgba(14, 35, 64, .55);
  overflow-y: auto;                 /* si no cabe, se desplaza el modal */
  overscroll-behavior: contain;
}
.modal-caja {
  position: relative;
  background: var(--card); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 20px; margin-top: 16px;
}
.modal.is-abierto .modal-caja { width: 100%; max-width: 560px; margin: auto; }
.modal-titulo { font-size: 1.1rem; }
.modal-oferta {
  font-weight: 800; color: var(--tinta); line-height: 1.25;
  margin-top: 2px; margin-bottom: 14px;
}
.modal-pago-actual {
  background: var(--bg); border-radius: var(--radio-sm); padding: 8px 12px;
  font-size: .9rem; color: var(--muted);
}
.modal-pago-actual strong { color: var(--ok); }
.modal-sub { color: var(--muted); font-size: .92rem; margin-bottom: 14px; }
.modal .auth-alt { margin-top: 12px; font-size: .92rem; color: var(--muted); text-align: center; }
.modal-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.modal-botones .btn { flex: 1 1 140px; }
/* El cuerpo del modal de postulados llega vacío y se llena por red. */
.modal-cuerpo .seccion-titulo { margin-top: 0; }
.cargando-aviso { color: var(--muted); padding: 24px 0; text-align: center; }
/* El formulario de publicar trae dos columnas: necesita más caja.
   La rejilla del modal centra su contenido (place-items: center), y centrar
   encoge: la caja se quedaba del ancho de lo que llevara dentro. Con stretch
   ocupa el ancho disponible y el max-width es quien manda. */
.modal.modal-ancho.is-abierto { justify-items: stretch; }
.modal.modal-ancho.is-abierto .modal-caja { width: 100%; max-width: 1290px; }
/* En pantalla ancha .pub-wrap se parte en dos columnas para la vista previa.
   Dentro del modal esa vista previa no está, así que la segunda columna se
   quedaba vacía y el formulario ocupaba solo dos tercios de la caja.
   Con las dos clases juntas esta regla gana a la del @media, esté donde esté. */
.pub-wrap.pub-wrap-modal { grid-template-columns: 1fr; }
/* La barra de avance se pega arriba del modal, no debajo de la cabecera del
   sitio: dentro del modal esa cabecera no se ve. */
.pub-wrap-modal .pub-progreso { top: 0; }
/* Lo que no se puede cambiar al republicar: va como texto y sobre el fondo de
   la página, para que se lea como dato y no como campo. */
.rep-fijo {
  background: var(--bg); border-radius: var(--radio-sm);
  padding: 4px 14px 14px; margin-bottom: 16px;
}
.rep-fijo .detalle-bloque { margin-top: 12px; }
/* Los rótulos de cada bloque, en azul oscuro: aquí no son enlaces ni acciones,
   son etiquetas de datos. */
.rep-fijo .detalle-bloque h3 { color: var(--tinta); }
.rep-fijo p { font-size: .92rem; }
/* Con el modal abierto, la página de detrás no se desplaza. */
body.con-modal { overflow: hidden; }

/* ---- Trabajadores ------------------------------------------ */
.grid-trabajadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.trab-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.trab-avatar {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--azul), var(--verde)); color: #fff; font-weight: 800; font-size: 1.3rem;
}
.trab-avatar.sm { width: 44px; height: 44px; font-size: .95rem; }
.trab-nombre { font-size: 1.05rem; font-weight: 800; }
.trab-nombre a { color: var(--tinta); }
.trab-municipio { color: var(--muted); font-size: .88rem; }
.trab-habs { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.trab-sin-hab { color: var(--muted); font-size: .85rem; font-style: italic; }

/* ---- Perfil trabajador ------------------------------------- */
.perfil-cabecera { display: flex; gap: 18px; align-items: center; margin-top: 8px; }
.perfil-avatar {
  width: 84px; height: 84px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--azul), var(--verde)); color: #fff; font-weight: 800; font-size: 1.8rem;
}
.perfil-nombre { font-size: 1.5rem; font-weight: 900; }
.perfil-municipio { color: var(--muted); margin-top: 2px; }
.perfil-bio { margin-top: 8px; }
.grid-habilidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 8px; }
.hab-card { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.hab-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; }
.hab-nombre { font-size: 1.05rem; font-weight: 800; }
.hab-exp { font-weight: 800; color: var(--verde-btn); white-space: nowrap; }
.hab-desc { color: var(--muted); font-size: .9rem; }
.hab-ruta { color: var(--muted); font-size: .8rem; }
.hab-acciones { display: flex; gap: 6px; margin-top: 4px; }
.form-hab .form-fila { margin-bottom: 2px; }

/* ---- Auth -------------------------------------------------- */
.auth-wrap { max-width: 480px; margin: 34px auto; }
.auth-card { padding: 26px; }
.auth-titulo { font-size: 1.6rem; font-weight: 900; }
.auth-sub { color: var(--muted); margin: 4px 0 18px; }
.auth-alt { text-align: center; margin-top: 16px; color: var(--muted); }

/* ---- Dashboard --------------------------------------------- */
.dash { padding-top: 24px; }
.dash-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-titulo { font-size: 1.55rem; font-weight: 900; }
/* ---- Gráficos del panel ------------------------------------
   Los dos van en una fila; en pantalla estrecha se apilan, porque a media
   pantalla las fechas del eje se pisarían. */
.panel-graficos { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 22px 0 0; }
@media (min-width: 780px) {
  .panel-graficos { grid-template-columns: 1fr 1fr; }
}
.grafico-caja { margin: 0; padding: 16px; }
.grafico-caja figcaption strong { display: block; font-size: .98rem; }
.grafico-caja figcaption span { color: var(--muted); font-size: .82rem; }
/* El alto lo pone el propio dibujo (viewBox), que ya reserva la banda de las
   fechas: fijarlo aquí recortaría las etiquetas del eje. */
.grafico { display: block; width: 100%; height: auto; margin-top: 8px; }
/* Rejilla y ejes: 1px, sin rayas, un tono por encima del fondo. No compiten
   con los datos. */
.gr-rejilla { stroke: var(--borde); stroke-width: 1; }
.gr-linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.gr-area { opacity: .1; stroke: none; }          /* un lavado, no un bloque */
/* Anillo del color del fondo: así el punto se ve donde cruza la línea. */
.gr-dato { stroke: var(--card); stroke-width: 2; }
.gr-toque { fill: transparent; cursor: pointer; } /* zona de contacto amplia */
/* Guía vertical y punto crecido: señalan cuál se está leyendo. */
.gr-guia { stroke: var(--borde-fuerte); stroke-width: 1; }
.gr-punto.es-activo .gr-dato { r: 6; }
.grafico:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
/* El globo con el dato. Lo coloca el JS sobre el punto; no recibe el ratón,
   para que no se robe el hover del propio punto. */
.gr-globo {
  position: absolute; z-index: 5; pointer-events: none;
  transform: translate(-50%, -132%);
  display: grid; gap: 1px; text-align: center; white-space: nowrap;
  background: var(--tinta); color: #fff;
  padding: 5px 10px; border-radius: var(--radio-sm);
  box-shadow: var(--sombra-sm); font-size: .78rem;
}
.gr-globo strong { font-size: .95rem; font-variant-numeric: tabular-nums; }
.gr-globo span { opacity: .75; }
.gr-tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
/* Los números del eje Y acaban justo antes de la rejilla; las fechas van
   centradas bajo su punto. Sin esto la última fecha se saldría del lienzo. */
.gr-tick-y { text-anchor: end; }
.gr-tick-x { text-anchor: middle; }

.gr-valor { fill: var(--texto); font-size: 12px; font-weight: 800; }
.gr-eje { fill: var(--muted); font-size: 11px; font-weight: 700; text-anchor: middle; }
.grafico-vacio { color: var(--muted); font-size: .9rem; padding: 34px 0; text-align: center; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 22px 0; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-num { font-size: 2rem; font-weight: 900; color: var(--tinta); font-variant-numeric: tabular-nums; }
/* El número de las que están abiertas, en azul: es el que se mira. */
.stat-num.es-abierta { color: var(--azul-btn); }
/* El tope, más pequeño y apagado: lo que se lee de un vistazo es cuántas hay,
   y el "/3" está para saber si queda sitio. */
.stat-de { font-size: 1.15rem; font-weight: 800; color: var(--muted); }
.stat-lbl { font-weight: 700; font-size: .92rem; }
.stat-pie { color: var(--muted); font-size: .82rem; }

/* ---- Panel con menú lateral --------------------------------
   Como un escritorio: la barra oscura pegada al borde izquierdo, de alto
   completo, y el contenido al lado sobre el fondo gris de la página. Va a
   sangre, fuera de .container, para que no quede flotando en el medio. */
.panel-layout { display: flex; min-height: calc(100vh - var(--header-h, 62px)); }

.panel-menu {
  width: var(--panel-ancho); flex: 0 0 var(--panel-ancho);
  background: var(--tinta); color: #fff;
  padding: 18px 0 24px;
  position: sticky; top: var(--header-h, 62px);
  height: calc(100vh - var(--header-h, 62px));
  overflow-y: auto;
}

/* Quién eres: foto, nombre y correo, arriba del todo. */
.panel-yo {
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: 14px;
}
.panel-yo-foto {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%; object-fit: cover;
}
.panel-yo-iniciales {
  display: grid; place-items: center; font-weight: 800; font-size: 1.1rem;
  background: linear-gradient(135deg, var(--azul), var(--verde)); color: #fff;
}
/* min-width:0 para que un correo largo se recorte en vez de ensanchar la barra. */
.panel-yo-datos { display: grid; gap: 1px; min-width: 0; }
.panel-yo-nombre, .panel-yo-correo {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.panel-yo-nombre { font-size: .95rem; color: #fff; }
.panel-yo-correo { font-size: .78rem; color: rgba(255,255,255,.6); }

.panel-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.panel-op {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 9px;
  color: rgba(255,255,255,.75); font-weight: 600; font-size: .93rem;
  transition: background .18s, color .18s;
}
.panel-op:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.panel-op.is-active { background: var(--azul-btn); color: #fff; font-weight: 700; }
.panel-op-icono { font-size: 1.05rem; line-height: 1; }
/* Cuántas cosas hay en cada sección, al final de la fila. */
.panel-cuenta {
  margin-left: auto; min-width: 22px; text-align: center;
  background: rgba(255,255,255,.2); color: #fff;
  font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 999px;
}
.panel-op.is-active .panel-cuenta { background: rgba(255,255,255,.28); }

.panel-contenido { flex: 1; min-width: 0; padding: 26px 30px 48px; }
/* Hueco de errores dentro de cada formulario. */
.form-errores { margin-bottom: 14px; }
.panel-cab { margin-bottom: 22px; }
.panel-cab h1 { font-size: 1.5rem; font-weight: 900; margin-bottom: 4px; }
.panel-cab p { color: var(--muted); font-size: .95rem; }

/* Sin ancho para las dos columnas: la barra pasa arriba, en horizontal. */
@media (max-width: 899px) {
  .panel-layout { display: block; }
  .panel-menu {
    width: auto; height: auto; position: static;
    border-radius: 0; padding: 14px 0;
  }
  .panel-nav { flex-direction: row; flex-wrap: wrap; }
  .panel-op { flex: 1 1 auto; justify-content: center; }
  .panel-contenido { padding: 20px 18px 40px; }
}
.seccion-cta { margin: 4px 0 18px; }
.auth-nota { background: rgba(30,144,232,.08); border-radius: var(--radio-sm); padding: 10px 12px; font-size: .9rem; }

.tabla-ofertas { display: grid; gap: 12px; }
.oferta-fila { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.oferta-fila-main { display: flex; flex-direction: column; gap: 4px; min-width: 200px; flex: 1; }
.oferta-fila-titulo { font-weight: 800; color: var(--tinta); font-size: 1.02rem; }
.oferta-fila-meta { color: var(--muted); font-size: .85rem; }
.oferta-fila-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.badge { background: rgba(255,255,255,.28); border-radius: 999px; padding: 0 7px; font-size: .8rem; }
.btn-ghost .badge, .btn-sm .badge { background: var(--azul); color: #fff; }

/* Postulados */
/* La tabla de postulados: sin nombres, con foto, lo que propone cobrar, sus
   recomendaciones y sus trabajos. La foto es lo único que identifica, y va
   pequeña y redonda: el resto de la fila son datos, no personas. */
/* "POSTULADOS PARA <TÍTULO>": el título en azul, para separarlo de la frase.
   Dentro del modal el fondo es navy, así que ahí el azul tiene que aclararse o
   se funde con el fondo. */
.titulo-postulados { text-transform: uppercase; }
.titulo-postulados .titulo-oferta { color: var(--azul-btn); }
#modal-oferta .titulo-postulados .titulo-oferta { color: #7cc4f5; }

/* Los dos botones de la sección de trabajar: uno a cada lado. En pantalla
   estrecha se apilan, que es lo que hace flex-wrap por su cuenta. */
.seccion-cta-doble {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
}
/* El letrero de la membresía, en la fila de la sección: más pequeño que el de
   destacar —que va solo en su tarjeta— para no comerse la fila entera. Y sin
   margen abajo: la nube del precio ya cuelga por fuera y el hueco de la fila
   basta. */
/* El letrero es bastante más alto que el botón de al lado, así que la fila
   crece con él. Con los márgenes de una fila normal, arriba y abajo quedaban
   dos huecos vacíos que hacían parecer que faltaba algo: la fila va pegada al
   subtítulo y a lo que viene después, y el letrero un punto más pequeño. */
.seccion-cta-doble { margin: 0 0 2px; }
.seccion-cta-doble .btn-letrero { --estrella: 200px; padding: 0; }
.panel-cab:has(+ .seccion-cta-doble) { margin-bottom: 6px; }
.seccion-cta-doble + .seccion-titulo.con-margen-top { margin-top: 10px; }

/* Los dos botones de una fila de trabajo obtenido: en línea si caben y uno
   debajo del otro si no. */
/* El aviso de "te falta la habilidad": el triángulo a un lado y el texto al
   otro, para que se entienda de un vistazo que algo falta. */
.aviso-falta { display: flex; align-items: flex-start; gap: 14px; }
.aviso-falta-ico {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--warn-bg); color: var(--naranja);
}
.aviso-falta-ico .ico { width: 26px; height: 26px; }
.aviso-falta .modal-sub { margin-bottom: 0; }
/* La fecha a la que se podrá elegir: aparte del párrafo y en grande, que es lo
   que uno se apunta para volver. */
.recepcion-cuando {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--radio-sm);
  background: var(--warn-bg); color: var(--tinta);
  text-align: center; font-size: .92rem; line-height: 1.5;
}
/* Solo la primera letra: capitalize se las come todas y dejaba "Viernes, 31 De
   Julio, 9:41 P. M.". La fecha viene del navegador en minúscula. */
.recepcion-cuando strong { font-size: 1.06rem; }
.recepcion-cuando strong::first-letter { text-transform: uppercase; }

.fila-acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.tabla-trabajos form.inline { margin: 0; }

/* La fila de un trabajo al que te postulaste y te acaban de elegir: corre el
   reloj para aceptar, así que se marca. */
.tabla-trabajos tr.es-urgente td { background: var(--warn-bg); }
/* El reloj de aceptar: bajo el estado, en cifras que no bailen de ancho al
   contar. En el último minuto se pone rojo, que es cuando hay que correr. */
.cuenta-atras {
  display: block; margin-top: 4px;
  font-weight: 900; font-variant-numeric: tabular-nums; color: var(--naranja);
}
.cuenta-atras.es-poco { color: var(--error); }
.cuenta-atras.es-vencida { color: var(--muted); font-weight: 700; font-size: .82rem; }
/* El aviso de que te eligieron va arriba del todo: es lo único de la pantalla
   con fecha de caducidad. */
.aviso-elegido { margin-bottom: 14px; }

.tabla-postulados .post-foto {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--borde); background: var(--bg);
  display: inline-grid; place-items: center; font-size: 1.4rem;
}
.tabla-postulados .post-foto-vacia { color: var(--muted); }
.tabla-postulados .post-suelto { color: var(--muted); font-size: .82rem; }
/* El número de recomendaciones es lo que se compara entre filas: azul y
   grande, para que salte a la vista antes que el resto de la fila. */
/* Las columnas de texto libre no pueden estirar la tabla sin fin. */
.tabla-postulados .col-texto {
  white-space: normal; text-align: left; max-width: 240px; font-size: .84rem;
}
.tabla-postulados .col-de { color: var(--muted); font-weight: 700; }
.tabla-postulados .post-suelto { display: block; }

.tabla-postulados .col-cuenta { color: var(--azul-btn); font-size: 1.05rem; font-weight: 900; }
/* La aclaración va debajo de la cifra, no pegada a ella: en la misma línea
   se leía como parte del importe. */
.tabla-postulados .col-pago + .post-suelto { display: block; }
.tabla-postulados td { vertical-align: middle; }
.tabla-postulados form { margin: 0; }
/* La elegida se marca en verde: es la fila que ya decidió el empleador. */
.tabla-postulados tr.postulado-elegida td,
.tabla-postulados tr.postulado-aceptada td { background: rgba(134,200,23,.10); }
/* El contacto al cerrar el trato: el número en grande —es lo que se marca— y
   WhatsApp al lado, que es por donde se cuadra de verdad. */
/* El historial de trabajos de alguien: una tarjeta por trabajo, con lo que
   dijeron de él y las fotos que subieron al calificarlo. */
.lista-trabajos { display: grid; gap: 12px; }
.trabajo-hecho-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.trabajo-hecho-tit { font-size: 1rem; font-weight: 800; }
.trabajo-hecho-meta { color: var(--muted); font-size: .85rem; margin-top: 2px; }
.trabajo-hecho-com { font-style: italic; background: var(--bg); padding: 10px 12px; border-radius: var(--radio-sm); margin-top: 10px; }
.trabajo-hecho .oferta-fotos { margin-top: 10px; }

/* Centrados los dos: el botón es la acción de la tarjeta y el número, su
   respaldo. Alineados a la izquierda se leían como un dato más. */
.contacto-directo { display: grid; justify-items: center; gap: 10px; margin: 12px 0 4px; }
/* Con quién hay que hablar: centrado y grande, que es lo que se busca al abrir
   la tarjeta. El nombre, más marcado que el "Contacta a". */
.contacto-quien {
  font-size: 1.15rem; color: var(--muted); text-align: center; margin: 0;
}
.contacto-quien strong {
  display: block; font-size: 1.5rem; font-weight: 900; color: var(--tinta);
  line-height: 1.2; margin-top: 2px;
}
/* El verde de WhatsApp, no el del sitio: es el botón que la gente reconoce de
   lejos, y con otro color deja de reconocerse. */
.btn-wa {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 999px;
  background: #25D366; color: #fff; font-weight: 800; font-size: 1rem;
  box-shadow: 0 2px 8px rgba(37,211,102,.4);
}
.btn-wa:hover { background: #1eb85a; color: #fff; }
.tel-grande {
  font-size: 1.35rem; font-weight: 900; letter-spacing: .01em;
  color: var(--tinta); font-variant-numeric: tabular-nums;
}
.tel-grande.tel-vacio { color: var(--muted); font-size: 1rem; font-weight: 700; }

/* Membresía */
.membresia-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px; border-left: 5px solid var(--naranja); }
.membresia-card.activa { border-left-color: var(--verde); }
.membresia-info h2 { font-size: 1.15rem; }
.membresia-info p { color: var(--muted); margin-top: 4px; max-width: 60ch; }

/* Bloqueado / notificaciones */
.bloqueado { text-align: center; display: grid; gap: 12px; justify-items: center; padding: 30px; }
.bloqueado-icono { font-size: 2.4rem; }
.notif-marcar { margin: 8px 0 12px; }
.lista-notif { display: grid; gap: 10px; }
.notif-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.notif-item:hover { text-decoration: none; box-shadow: var(--sombra); }
.notif-item.no-leida { border-left: 4px solid var(--azul); }
.notif-titulo { font-weight: 800; color: var(--tinta); flex: 1; min-width: 160px; }
.notif-meta { color: var(--muted); font-size: .84rem; }

.dash-2col { display: grid; grid-template-columns: 1fr; gap: 18px; }
.form-hab h3 { margin-bottom: 12px; }

/* ---- Publicar: cabecera, pasos y vista previa --------------- */
.ico { width: 22px; height: 22px; flex: none; }
.ico-sm { width: 16px; height: 16px; vertical-align: -3px; }

.pub-hero {
  background:
    radial-gradient(900px 320px at 8% -40%, rgba(30,144,232,.28), transparent 60%),
    radial-gradient(760px 300px at 95% -20%, rgba(134,200,23,.26), transparent 60%),
    var(--card);
  border-bottom: 1px solid var(--borde);
}
.pub-hero-inner { display: flex; align-items: center; gap: 24px; padding: 22px 0 26px; }
.pub-hero-copy { flex: 1; min-width: 0; }
.volver-claro { color: var(--azul-btn); }
.pub-titulo { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 900; letter-spacing: -.6px; margin-top: 4px; }
.pub-sub { color: var(--muted); margin-top: 6px; }   /* en una sola línea */
.pub-arte { width: 220px; flex: none; filter: drop-shadow(0 10px 24px rgba(14,35,64,.12)); }

.pub-cupo {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 16px;
  padding: 9px 16px 9px 12px; border-radius: 999px; font-size: .9rem;
  border: 1.5px solid transparent;
}
.pub-cupo .ico { width: 18px; height: 18px; stroke-width: 2.4; }
.pub-cupo-ok    { background: var(--ok-bg); color: var(--ok); border-color: rgba(31,157,85,.3); }
.pub-cupo-aviso { background: var(--warn-bg); color: #9a6a00; border-color: rgba(255,138,0,.35); }
.pub-cupo-stop  { background: var(--error-bg); color: var(--error); border-color: rgba(212,53,59,.3); }
.pub-cupo a { color: inherit; font-weight: 800; text-decoration: underline; }

/* Encabezado del modal: título a la izquierda, cupo a la derecha */
.modal-cab-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.modal-cab-fila .modal-titulo, .modal-cab-fila .modal-sub { margin: 0; }
.modal-cab-fila .pub-cupo { margin-top: 0; }

.pub-wrap { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.pub-form { display: grid; gap: 10px; }

/* Barra de avance */
.pub-progreso {
  position: sticky; top: calc(var(--header-h, 62px) + 8px); z-index: 30;
  background: var(--card); border: 1px solid var(--borde); border-radius: 999px;
  padding: 2px 18px; box-shadow: var(--sombra-sm);
  display: flex; align-items: center; gap: 14px;
}
.pub-progreso-barra { flex: 1; height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.pub-progreso-barra span {
  display: block; height: 100%; width: 0; border-radius: 999px;
  /* Degradado de los 5 pasos: azul → verde → naranja → morado → teal. El tamaño
     se fija (por JS) al ancho de la pista, así el relleno va destapando el color
     que toca a medida que avanza y cierra con el teal del paso 5 (Resumen). */
  background-image: linear-gradient(90deg,
    var(--azul-btn) 0%, var(--verde-btn) 25%, var(--naranja-btn) 50%, var(--purpura) 75%, #0EA5A5 100%);
  background-repeat: no-repeat;
  background-size: var(--barra-full, 100%) 100%;
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.pub-progreso-txt { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.pub-progreso-txt strong { color: var(--azul-btn); font-size: 1rem; }
.pub-progreso.completo .pub-progreso-txt strong { color: var(--ok); }

/* Cada paso, con su color de marca */
.pub-paso {
  --tono: var(--azul);
  background: var(--card); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 18px; box-shadow: var(--sombra-sm);
  display: grid; gap: 15px; position: relative;
  transition: box-shadow .18s, border-color .18s;
}
/* Sin overflow:hidden — recortaría los desplegables. La franja se redondea sola. */
.pub-paso::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--tono);
  border-radius: var(--radio) 0 0 var(--radio);
  opacity: .55; transition: opacity .18s;
}
.pub-paso[data-color="verde"]   { --tono: var(--verde); }
.pub-paso[data-color="naranja"] { --tono: var(--naranja); }
.pub-paso[data-color="purpura"] { --tono: var(--purpura); }
.pub-paso[data-color="resumen"] { --tono: #0EA5A5; }   /* paso 5: teal, "revisar" */
.pub-paso:focus-within { border-color: var(--tono); box-shadow: var(--sombra); }
.pub-paso:focus-within::before { opacity: 1; }

.pub-paso-cab { display: flex; align-items: center; gap: 12px; }
.pub-paso-num {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--tono); color: #fff; font-weight: 900; font-size: .95rem;
  display: grid; place-items: center;
}
.pub-paso[data-color="verde"] .pub-paso-num { color: var(--tinta); }
.pub-paso-ico { color: var(--tono); display: grid; place-items: center; }
.pub-paso-txt { flex: 1; min-width: 0; }
.pub-paso-txt h2 { font-size: 1.08rem; font-weight: 800; }
.pub-paso-txt p { color: var(--muted); font-size: .86rem; margin-top: 2px; }
.pub-paso-ok {
  width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--ok-bg); color: var(--ok);
  opacity: 0; transform: scale(.5); transition: opacity .22s, transform .22s;
}
.pub-paso-ok .ico { width: 17px; height: 17px; stroke-width: 3; }
.pub-paso.completo .pub-paso-ok { opacity: 1; transform: scale(1); }

/* Bloque plegable del detalle del oficio */
.pub-afinar { border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-sm); padding: 0; }
.pub-afinar summary {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 14px; cursor: pointer; font-size: .9rem; list-style: none;
}
.pub-afinar summary::-webkit-details-marker { display: none; }
.pub-afinar summary:hover { color: var(--azul-btn); }
.pub-afinar-mas {
  width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--bg);
  position: relative; transition: transform .2s, background .2s;
}
.pub-afinar-mas::before, .pub-afinar-mas::after {
  content: ""; position: absolute; inset: 50% 4px auto 4px; height: 2px;
  background: var(--azul-btn); border-radius: 2px; transform: translateY(-50%);
}
.pub-afinar-mas::after { transform: translateY(-50%) rotate(90deg); transition: transform .2s; }
.pub-afinar[open] .pub-afinar-mas::after { transform: translateY(-50%) rotate(0); }
.pub-afinar[open] { border-style: solid; border-color: var(--azul); background: rgba(30,144,232,.04); }
.pub-afinar[open] > summary { border-bottom: 1px solid var(--borde); }
.pub-afinar .form-fila-triple { padding: 14px; }
.pub-fotos .fotos-zona { padding: 14px; }

/* Asistente por pasos (Atrás / Siguiente / Publicar) */
.pub-paso.paso-oculto { display: none; }

/* Paso 5 · Resumen: tarjetas de solo lectura, una por paso, con su color. */
.pub-resumen { display: grid; gap: 12px; }
.pub-resumen-grupo {
  --g: var(--azul-btn);
  border: 1px solid var(--borde); border-left: 4px solid var(--g);
  border-radius: var(--radio-sm); padding: 12px 14px; background: var(--bg);
}
.pub-resumen-grupo[data-color="azul"]    { --g: var(--azul-btn); }
.pub-resumen-grupo[data-color="verde"]   { --g: var(--verde-btn); }
.pub-resumen-grupo[data-color="naranja"] { --g: var(--naranja-btn); }
.pub-resumen-grupo[data-color="purpura"] { --g: var(--purpura); }
.pub-resumen-grupo h3 {
  display: flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 800; margin: 0 0 8px;
}
.pub-resumen-n {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  background: var(--g); color: #fff; font-size: .72rem; font-weight: 900; display: grid; place-items: center;
}
.pub-resumen-editar {
  margin-left: auto; border: 1px solid var(--borde-fuerte); background: var(--card);
  color: var(--g); font-weight: 700; font-size: .8rem; padding: 3px 12px;
  border-radius: 999px; cursor: pointer; transition: border-color .15s;
}
.pub-resumen-editar:hover { border-color: var(--g); }
.pub-resumen dl { display: grid; gap: 6px; margin: 0; }
.pub-resumen dl > div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: baseline; }
.pub-resumen dt { color: var(--muted); font-size: .82rem; font-weight: 700; }
.pub-resumen dd { margin: 0; font-size: .9rem; color: var(--texto); overflow-wrap: anywhere; white-space: pre-line; }
.pub-resumen dd.rs-vacio { color: var(--muted); font-style: italic; }
@media (max-width: 520px) {
  .pub-resumen dl > div { grid-template-columns: 1fr; gap: 1px; }
}
.pub-wizard { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.pub-wizard-info { margin-inline: auto; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.pub-wizard .pub-siguiente, .pub-wizard .pub-enviar { min-width: 170px; }
/* Cancelar a la izquierda; el resto (Atrás/Siguiente/Publicar) a la derecha. */
.pub-wizard [data-cierra-modal] { order: -1; margin-right: auto; }
.form-fila.campo-error input,
.form-fila.campo-error textarea,
.form-fila.campo-error select,
.form-fila.campo-error .ac-input { border-color: var(--error); box-shadow: 0 0 0 3px rgba(212,53,59,.18); }

/* Pestañas del asistente estilo hoja (Excel): ancho completo, color por paso */
.pub-tabs {
  display: flex; gap: 4px; margin: 8px 0 0; padding: 0 2px;
  border-bottom: 2px solid var(--borde);
}
.pub-tab {
  --c: var(--azul-btn);
  flex: 1 1 0; min-width: 0; position: relative; top: 2px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 10px;
  border: 1px solid var(--borde); border-bottom: none; border-top: 3px solid transparent;
  border-radius: 10px 10px 0 0; background: var(--bg);
  color: var(--muted); font-weight: 700; font-size: .92rem; line-height: 1.1;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.pub-tab[data-color="azul"]    { --c: var(--azul-btn); }
.pub-tab[data-color="verde"]   { --c: var(--verde-btn); }
.pub-tab[data-color="naranja"] { --c: var(--naranja-btn); }
.pub-tab[data-color="purpura"] { --c: var(--purpura); }
.pub-tab[data-color="resumen"] { --c: #0EA5A5; }
.pub-tab-n {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c); color: #fff; font-size: .78rem; flex: none;
}
.pub-tab-lbl { overflow: hidden; text-overflow: ellipsis; }
.pub-tab:hover { color: var(--texto); background: var(--card); }
.pub-tab.is-active {
  background: var(--card); color: var(--c);
  border-top-color: var(--c);
  border-bottom: 2px solid var(--card); margin-bottom: -2px;  /* se conecta con el contenido */
  box-shadow: 0 -2px 8px rgba(14,35,64,.06);
}
@media (max-width: 580px) {
  .pub-tab { padding: 10px 4px; font-size: .8rem; gap: 6px; }
  .pub-tab-lbl { display: none; }   /* en móvil solo el número */
}

/* Fotos del trabajo */
.fotos-zona { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.foto-ranura { position: relative; }
.foto-input { position: absolute; opacity: 0; width: 0; height: 0; }
.foto-caja {
  display: grid; place-items: center; gap: 2px; aspect-ratio: 4 / 3;
  border: 2px dashed var(--borde-fuerte); border-radius: var(--radio-sm);
  background: var(--bg); cursor: pointer; overflow: hidden; position: relative;
  color: var(--muted); font-size: .78rem; text-align: center; padding: 6px;
  transition: border-color .15s, background .15s, transform .1s;
}
.foto-caja:hover { border-color: var(--verde); background: rgba(134,200,23,.08); color: var(--verde-btn); }
.foto-input:focus-visible + .foto-caja { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(30,144,232,.2); }
.foto-mas { font-size: 1.5rem; line-height: 1; font-weight: 300; }
.foto-previa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto-ranura.con-foto .foto-caja { border-style: solid; border-color: var(--verde); }
.foto-ranura.con-foto .foto-mas, .foto-ranura.con-foto .foto-txt { display: none; }
.foto-ranura.cargando .foto-caja { opacity: .6; }
.foto-quitar {
  position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; z-index: 2;
  border: 2px solid var(--card); border-radius: 50%; background: var(--error); color: #fff;
  font-size: 1rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.foto-quitar:hover { filter: brightness(1.1); }

/* Galería en el detalle de la oferta */
/* Tope de 308x231 (4:3) por foto: sin él una sola imagen se estiraba a todo
   el ancho del panel. Puede encoger en pantallas angostas, nunca crecer. */
.oferta-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.oferta-fotos a {
  display: block; flex: 0 1 308px; max-width: 308px;
  border-radius: var(--radio-sm); overflow: hidden; border: 1px solid var(--borde);
}
.oferta-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .2s; }
.oferta-fotos a:hover img { transform: scale(1.05); }

/* En la tarjeta de una habilidad caben las tres en fila, más pequeñas. */
.hab-fotos { margin-top: 4px; }
.hab-fotos a { flex: 1 1 0; max-width: none; }
.hab-fotos img { aspect-ratio: 1; }
.foto-borrar {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  background: var(--card); border: 1px solid var(--borde-fuerte); border-radius: 999px;
  padding: 1px 9px; font-size: .7rem; font-weight: 700; color: var(--muted); cursor: pointer;
}
.foto-borrar:hover { color: var(--error); border-color: var(--error); }
.foto-borrar input { width: auto; margin: 0; accent-color: var(--error); }
.foto-ranura:has(.foto-borrar input:checked) .foto-caja { opacity: .35; border-color: var(--error); }

.pago-cotizan {
  display: flex; align-items: center; gap: 8px;
  background: var(--warn-bg); color: #9a6a00; font-weight: 700;
  border-radius: var(--radio-sm); padding: 12px 14px;
}
.pago-cotizan .ico { color: var(--naranja); flex: none; }

.contador { font-size: .76rem; color: var(--muted); text-align: right; margin-top: -2px; }
.contador.cerca { color: var(--naranja-btn); font-weight: 700; }

.pub-enviar { gap: 10px; margin-top: 2px; }
.pub-enviar .ico { width: 20px; height: 20px; }

/* Vista previa */
.pub-vista { display: grid; gap: 8px; }
.pub-vista-cab { font-weight: 800; font-size: .88rem; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.pub-vista-cab .ico { color: var(--naranja); }
.pub-vista-card { cursor: default; border-left: 4px solid var(--verde); }
.pub-vista-card:hover { box-shadow: var(--sombra-sm); }
.pv-vacio { color: var(--muted); font-weight: 500; font-style: italic; }
.pub-vista-nota { color: var(--muted); font-size: .78rem; }
.pv-late { animation: pv-late .4s ease; }
@keyframes pv-late { 0% { background: rgba(134,200,23,.22); } 100% { background: transparent; } }

/* ---- Planes ------------------------------------------------ */
.publicar-wrap { max-width: 760px; margin: 24px auto 0; }
.form-oferta { padding: 22px; margin-top: 16px; }
.planes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 22px 0; }
.plan { text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; position: relative; padding-top: 26px; }
.plan-destacado { border-color: var(--azul); box-shadow: 0 0 0 2px rgba(30,144,232,.25); }
.plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--azul-btn); color: #fff; font-size: .72rem; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.plan-membresia .plan-badge { background: var(--naranja); color: #3a2500; }
.plan-num { font-size: 2.6rem; font-weight: 900; color: var(--azul-btn); line-height: 1; }
.plan-lbl { color: var(--muted); font-weight: 700; }
.plan-precio { font-size: 1.5rem; font-weight: 900; color: var(--tinta); margin-top: 4px; }
.plan-precio.grande { font-size: 2.2rem; }
.plan-precio span { font-size: 1rem; color: var(--muted); font-weight: 600; }
.plan-unit { color: var(--muted); font-size: .82rem; }
.plan-lista { list-style: none; padding: 0; display: grid; gap: 8px; text-align: left; margin: 12px 0; width: 100%; }
.plan-lista li { color: var(--texto); font-size: .92rem; }
.plan form { width: 100%; margin-top: 8px; }
/* Los mismos paquetes dentro del letrero de feria: cada uno es su propio
   formulario, así que la tarjeta y el formulario son la misma caja. Sobre el
   fondo oscuro las cifras van claras; el precio, en el oro del sitio. */
.feria-planes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin: 18px 0 4px;
}
.feria-plan {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 22px 12px 12px; border-radius: 16px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  color: #fff; margin: 0;
}
.feria-plan.es-popular { border-color: #ffcf5a; box-shadow: 0 0 0 1px #ffcf5a, 0 0 1.2em rgba(255,190,40,.35); }
.feria-plan .plan-num { color: #fff; font-size: 2.2rem; }
.feria-plan .plan-lbl { color: rgba(255,255,255,.75); }
.feria-plan .plan-precio { color: #ffd84a; }
.feria-plan .plan-unit { color: rgba(255,255,255,.6); }
.feria-plan .plan-badge { background: linear-gradient(180deg, #ffe07a, #ffb300 55%, #e08c00); color: #5a2a00; }
.feria-plan .btn { margin-top: 10px; }
.modo-prueba { color: var(--muted); font-size: .85rem; margin-top: 16px; background: var(--warn-bg); padding: 12px 14px; border-radius: var(--radio-sm); }
.modo-prueba code { background: rgba(0,0,0,.08); padding: 1px 6px; border-radius: 5px; }

/* Orden */
.orden-card { margin-top: 16px; display: grid; gap: 12px; }
.orden-desc { color: var(--muted); }
.orden-destino { font-weight: 800; margin-top: 6px; }
.orden-nota { font-size: .88rem; color: var(--muted); }

/* Admin */
.admin-confirmar { flex-wrap: wrap; align-items: center; }
.input-ref { width: auto; max-width: 140px; padding: 7px 10px; min-height: 36px; }

/* ---- Footer ------------------------------------------------ */
/* Azul oscuro y solo dos líneas, las dos en blanco. El color va fijo, no por
   token: en modo oscuro --tinta se vuelve claro y el pie se despintaría.
   Va de lado a lado y por encima del riel del carrusel (z-index 20), así al
   llegar abajo el banner queda tapado y no asoma por debajo del pie. */
.site-footer { background: #0E2340; margin-top: auto; position: relative; z-index: 30; }
.footer-inner {
  padding: 22px 0; display: grid; gap: 6px; justify-items: center; text-align: center;
}
.footer-legal-nav {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px 10px; font-size: .9rem;
}
.footer-legal-nav a { color: #fff; }
.footer-legal-nav a:hover { text-decoration: underline; }
.footer-legal-nav span { color: rgba(255,255,255,.45); }
.footer-copy { color: #fff; font-size: .85rem; }

/* Las secciones del panel conviven en la página; solo se ve una.
   Con JS manda la clase. Sin JS manda el ancla de la URL (#perfil), que es
   lo que llevan los enlaces del menú: por eso no se usa [hidden], que con su
   !important no dejaría que :target lo destapara. */
.tab-panel { display: none; }
.tab-panel.is-abierta { display: block; }
.tab-panel:target { display: block; }
/* Si el ancla apunta a una sección, esa gana sobre la que traía el servidor. */
.panel-contenido:has(.tab-panel:target) .tab-panel.is-abierta:not(:target) { display: none; }

/* ---- Páginas legales del pie -------------------------------- */
.legal { max-width: 760px; }
.legal-aviso { margin-top: 18px; display: grid; gap: 10px; }
.legal-volver { margin-top: 18px; }

/* ---- Responsive ------------------------------------------- */
@media (min-width: 720px) {
  .filtros { grid-template-columns: 1fr 1fr auto; align-items: end; }
  .filtro-buscar { grid-column: auto; }
  .filtro-accion { grid-column: auto; }
  .dash-2col { grid-template-columns: 1.6fr 1fr; align-items: start; }
  .form-hab { position: sticky; top: 78px; }
  .buscador-form { grid-template-columns: 2fr 1.4fr auto auto; align-items: center; }
  .filtros-chips { grid-column: 1 / -1; }
}

/* --sticky-top lo calcula app.js con la altura real de cabecera + buscador. */
@media (min-width: 900px) {
  .pub-wrap { grid-template-columns: 1fr minmax(280px, 340px); gap: 24px; }
  .pub-vista { position: sticky; top: calc(var(--header-h, 62px) + 74px); }
}
@media (max-width: 899px) {
  .pub-arte { display: none; }
  .pub-vista { order: -1; }
}

/* En el inicio nada queda fijo al bajar salvo el menú principal:
   las dos columnas se desplazan con la página. */
@media (min-width: 1000px) {
  .split { grid-template-columns: minmax(300px, 400px) 1fr; gap: 20px; }
}

/* Sin espacio para el panel: la tarjeta es solo un enlace al detalle. */
@media (max-width: 999px) {
  .split-panel { display: none; }
  .job-card { cursor: default; }
}

@media (max-width: 719px) {
  .nav-toggle {
    display: inline-flex; flex-direction: column; gap: 5px; margin-left: auto;
    background: transparent; border: 0; padding: 8px; cursor: pointer;
  }
  .nav-toggle span { width: 24px; height: 2.5px; background: var(--texto); border-radius: 2px; transition: .2s; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%; background: var(--card);
    border-bottom: 1px solid var(--borde); flex-direction: column; align-items: stretch;
    gap: 4px; padding: 12px 18px; box-shadow: var(--sombra);
    display: none;
  }
  .site-nav.abierto { display: flex; }
  .site-nav .btn { width: 100%; }
  /* Aquí el menú se despliega sobre una tarjeta clara, no sobre el azul de la
     barra: el botón fantasma vuelve a su color o sería blanco sobre blanco. */
  .site-header .site-nav .btn-ghost { color: var(--texto); border-color: var(--borde); }
  .site-header .site-nav .btn-ghost:hover { background: var(--bg); }
  .rol-elige { grid-template-columns: 1fr; }
  .form-fila-doble, .form-fila-triple { grid-template-columns: 1fr; }
  .dash-cab .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}