/* Mejoras de UX de Kiun aprobadas por Alex por Telegram (hermes/ux_mejora_loop.py).
   Hoja aditiva: cada bloque lleva su id; "Deshacer" quita sólo ese bloque. */

/* ux-mejora 86f82204 2026-09-27: En el celular agrandamos un poco los textos más pequeños (idioma, etiquetas y numeritos) para que se lean sin esfuerzo. */
@media (max-width: 480px) {
  #lang-es,
  #lang-en,
  .monitor-strip span.mono,
  .bento-piensa .bp-num,
  .card .uppercase.tracking-widest {
    font-size: 12px;
  }
}

/* ux-mejora f47e1206 2026-10-02: En el celular agrandamos un poco los textos más pequeños de las tarjetas (etiquetas, métricas, avisos y numeritos) para que se lean sin esfuerzo. */
@media (max-width: 480px) {
  body:has(#list) div.tpost > div.tpost-content > div.card-head > span.tag,
  body:has(#list) div.tpost-content > div.impact-card > div.imp-head > span.imp-metric,
  body:has(#list) div.tpost-content > div.impact-card > div.imp-head > span.imp-conf,
  body:has(#list) div.tpost > div.tpost-content > div.impact-card > div.impact-fail,
  body:has(#list) #bulkCount,
  body:has(#list) div.tpost-content > div.actions > button.iconbtn.like > span.cnt {
    font-size: 12px;
  }
}

/* ux-mejora 5f4ad670 2026-10-02: En el celular agrandamos un poco los textos más pequeños de esta página (menú inferior, avisos y botones de autonomía) para que se lean sin esfuerzo. */
@media (max-width: 480px) {
  body.k-has-tabbar nav.k-tabbar > a,
  body:has(#mainWrap) #mainWrap > div.ui-group > div.hint,
  body:has(#mainWrap) #auto-list > div.hint,
  body:has(#mainWrap) #auto-list > div.hint > a,
  body:has(#mainWrap) #autonomy-track > button.seg,
  body:has(#mainWrap) #autonomy-track > button.seg > small {
    font-size: 12px;
  }
}

/* ux-mejora ba50d765 2026-10-03: En el celular oscurecemos los numeritos verdes de las tarjetas de impacto para que se lean bien sobre el fondo blanco. */
@media (max-width: 480px) {
  body:has(#list) div.tpost-content > div.impact-card > div.imp-hero > span.imp-to {
    color: #0f766e !important;
  }
}

/* ux-mejora 6b775516 2026-10-03: Los numeritos verdes de las tarjetas de impacto ahora se ven con un tono más oscuro, para que se lean bien sobre el fondo blanco también en la computadora. */
/* ux-mejora: oscurecemos los numeritos verdes de las tarjetas de impacto para que se lean bien sobre el fondo blanco en pantalla grande. */
body:has(#list) div.tpost-content > div.impact-card > div.imp-hero > span.imp-to {
  color: #0f766e !important;
}

/* ux-mejora 32ce3ae6 2026-10-03: En el celular agrandamos un poquito los avisos pequeños de esta página para que se lean sin esfuerzo. */
@media (max-width: 480px) {
  body:has(#mainWrap) #integ-installed > div.hint,
  body:has(#mainWrap) #integ-installed > div.hint > a,
  body:has(#mainWrap) #mkt-grid > div.hint,
  body:has(#mainWrap) #mkt-grid > div.hint > a {
    font-size: 12px;
  }
}

/* ux-mejora 34255c5c 2026-10-03: En el celular agrandamos el área para tocar los enlaces verdes de cada tarjeta (los que dicen «Socio Proactivo ↗»), para que sea fácil abrirlos con el dedo sin  */
@media (max-width: 480px) {
  body:has(#list) div.tpost > div.tpost-content > div.card-head > a.src-loop {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    min-width: 24px;
    padding: 3px 2px;
  }
}

/* ux-mejora 7c3de2ec 2026-10-03: En el celular agrandamos un poquito las etiquetas pequeñas de las tarjetas (Negocio, Análisis IA, Sistema) para que se lean sin esfuerzo. */
@media (max-width: 480px) {
  body:has(#list) div.tpost > div.tpost-content > div.card-head > span.tag {
    font-size: 12px !important;
  }
}

/* ux-mejora 7589ad0e 2026-10-03: En el celular agrandamos el botón de ayuda y las barras de ajuste para que sea fácil tocarlas con el dedo. */
@media (max-width: 480px) {
  body:has(#mainWrap) #mainWrap > h2.ui-sec > kiun-help > button.khelp-b {
    min-width: 24px;
    min-height: 24px;
    padding: 3px;
  }
  body:has(#mainWrap) #AUTO_EXEC_THRESHOLD,
  body:has(#mainWrap) #FORRESTER_CHANGE_THRESHOLD {
    height: 24px;
  }
}

/* ux-mejora fd06d9d5 2026-10-03: En el celular agrandamos un poquito los textos de ayuda y las etiquetas del formulario de inicio de sesión, para que se lean sin esfuerzo. */
@media (max-width: 480px) {
  /* ux-mejora: en el celular subimos a 12px las etiquetas y los avisos del formulario de acceso, que estaban en 10.5px y 11.5px. */
  #login > div.auth-card > div.k-field > label,
  #login > div.auth-card > div.k-field > div.k-hint {
    font-size: 12px !important;
  }
}

/* ux-mejora 4399be67 2026-10-04: Oscurecemos un poco el verde del botón «Entrar» para que el texto blanco se lea con claridad. */
#l_btn.ui-btn {
  background-color: #0f766e;
}

/* ux-mejora 3c6375b6 2026-10-07: Hicimos más alto el enlace «¿Olvidaste tu contraseña?» para que sea fácil de tocar con el dedo en el celular. */
@media (max-width: 480px) {
  /* ux-mejora: el enlace «¿Olvidaste tu contraseña?» medía 167×16 px; le damos 24 px de alto
     para que cumpla el área táctil mínima de 24×24 px. */
  #login > div.auth-card > div.auth-links > a {
    display: inline-block;
    min-height: 24px;
    line-height: 24px;
    padding: 0 4px;
  }
}

/* ux-mejora 6cdc88c4 2026-10-11: Hicimos que el botón de filtro «Personal» se encoja y parta su texto para que quepa en la pantalla del celular sin arrastrar de lado. */
@media (max-width: 480px) {
  /* ux-mejora: el botón de filtro «Personal» medía 102 px y se salía 32 px de la pantalla; le permitimos encogerse y partir el texto para que quepa. */
  #filters > button.filter {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}