/* ============================================================
   Jobi, la mascota de JobIn. Un robot pixel verde con la antena lima del logo y corbata lima.
   Sprites en /legacy/img/jobi/ (fuente y generador en el repositorio de material, carpeta Mascota).
   Regla de colocación (4/11/2026): Jobi nunca es una pegatina en una esquina. Siempre hace algo: va inclinado y
   mira o señala lo importante de la pantalla (las prácticas, el botón, el día, la barra de progreso).
   Excepción (4/11/2026, por petición de Jorge): en las cabeceras de cuatro secciones va recto y con el objeto de la sección.
   Los sprites miran a la derecha: para mirar a la izquierda, scale:-1 1. La inclinación usa las propiedades sueltas
   rotate y scale, que se suman a la animación jobi-flota sin pisarla.
   Reglas: siempre un <img class="jobi"> decorativo (alt vacío salvo en la portada), tamaños múltiplos de 12 px
   para que los píxeles queden enteros, ninguna regla al pasar el ratón, y la animación se apaga con prefers-reduced-motion.
============================================================ */
.jobi{display:inline-block;flex:none;vertical-align:middle;image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none;user-select:none;-webkit-user-drag:none}
@keyframes jobi-flota{50%{transform:translateY(-6px)}}
.jobi-flota{animation:jobi-flota 3.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.jobi-flota{animation:none}}

/* Portada: señala «Entrar a JobIn» desde su derecha, con el brazo a la altura del centro del botón (por eso sube y no flota).
   En el móvil ese botón no existe: allí señala la captura del paso 1. */
.landing .hero-cta{flex-direction:row;align-items:center;gap:calc(8 * var(--u))}
.landing .hero-cta .jobi-portada{width:calc(84 * var(--u));height:calc(84 * var(--u));scale:-1 1;rotate:-4deg;translate:0 calc(-22 * var(--u))}
.landing .paso-txt .jobi-pasos{align-self:flex-end;width:72px;height:72px;rotate:10deg}
@media (max-width:760px),(pointer:coarse) and (max-height:760px){
  .landing .paso-txt .jobi-pasos{align-self:center;margin-left:auto;width:48px;height:48px;rotate:24deg}
}

/* Inicio: señala «Completar mi perfil». */
.home-profile .jobi-aviso{width:48px;height:48px;margin:-6px -4px -6px auto;rotate:8deg}
@media (max-width:760px),(pointer:coarse) and (max-height:760px){
  .home-profile{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px 12px}
  .home-profile>div{grid-column:1/-1}
  .home-profile .jobi-aviso{margin:0}
  .home-profile .f-btn{justify-self:start}
}

/* Cabeceras de Prácticas, Summer, Candidaturas y Reunión: a la derecha del título, con lo que representa cada sección
   (maletín, sol, carpeta de candidaturas y bocadillo con cascos). Estas poses miden 36 × 24: 108 × 72 px y 54 × 36 en el móvil. */
#app .head .jobi-cabecera{width:108px;height:72px;margin-left:auto;align-self:flex-end}
#practicas.scope-summer .jobi-practicas,#practicas:not(.scope-summer) .jobi-summer{display:none}
@media (max-width:760px),(pointer:coarse) and (max-height:760px){
  #app .head{position:relative}
  /* 54 × 36: el título de Summer deja 57 px libres (1,5 px por píxel, enteros en pantallas de densidad 2 o más). */
  #app .head .jobi-cabecera{position:absolute;right:0;top:0;width:54px;height:36px;margin:0}
  /* «Reunión personalizada» ocupa todo el ancho: Jobi va encima del título. */
  #reunion .head{padding-top:30px}
}
@media (max-width:380px),(pointer:coarse) and (max-height:380px){
  #practicas.scope-summer .head{padding-top:30px}
}
/* Modo oscuro: el contorno tinta se pierde en el fondo; un halo fino devuelve brazos y piernas. */
:root[data-theme="dark"] #app .head .jobi-cabecera{filter:drop-shadow(0 0 1px rgba(255,255,255,.6))}

/* Tu perfil y Crear mi CV: camina sobre la barra de progreso; --p es el porcentaje completado. */
.jobi-carril{display:block;position:relative;height:0}
.jobi-carril .jobi-camina{position:absolute;bottom:-1px;rotate:6deg;transition:left .4s ease}
#perfil .jobi-carril .jobi-camina{left:calc(190px + (100% - 238px) * var(--p) / 100);width:48px;height:48px}
#cv.cvb .jobi-carril{flex:1;display:flex;height:auto;align-items:center}
#cv.cvb .jobi-carril .jobi-camina{left:calc((100% - 36px) * var(--p) / 100);bottom:6px;width:36px;height:36px}
@media (prefers-reduced-motion:reduce){.jobi-carril .jobi-camina{transition:none}}

/* Ficha de una práctica: señala «Aplicar»; en el móvil los botones se apilan y no hay sitio. */
.jd-actions{align-items:center;max-width:520px}
.jd-actions .jobi-postular{width:48px;height:48px;scale:-1 1;rotate:-8deg}
.jd-match .jobi{width:16px;height:16px;margin:-3px 4px 0 0}
.jd-applied-jobi{position:relative;flex:none;width:60px;height:60px}
.jd-applied-jobi .jobi{width:60px;height:60px;rotate:-6deg}
.jd-applied-jobi .jd-applied-ico{position:absolute;right:-8px;bottom:-4px;width:26px;height:26px;font-size:13px}
@media (max-width:760px),(pointer:coarse) and (max-height:760px){
  .jd-actions .jobi-postular{display:none}
}

/* Estados vacíos y de carga: inclinado, mirando el texto. */
.simple-card.empty .jobi{display:block;width:96px;height:96px;margin:0 auto 10px;rotate:-6deg}
.hd-empty .jobi{width:36px;height:36px;margin:-6px 8px -6px 0;rotate:-6deg}
.hd-head h2 .jobi{width:32px;height:32px;margin:-8px 8px -6px 0}

/* Reunión reservada: celebra, y el ✓ de siempre pasa a ser su insignia. */
.book-done-jobi{position:relative;width:120px;height:120px;margin:0 auto 18px}
.book-done-jobi .jobi{width:120px;height:120px;rotate:-5deg}
.book-done-jobi .tick{position:absolute;right:-8px;bottom:0;width:38px;height:38px;margin:0;font-size:17px}

/* Avisos y tarjetas: la cabeza de Jobi delante del texto. */
.toast{align-items:center;gap:10px}
.toast .jobi{width:28px;height:28px;rotate:-8deg}
.job-applied .jobi{width:16px;height:16px;margin:-2px 3px 0 0}