/* =============================================================================
 * GLOBOS DE AYUDA — estilo
 *
 * Va por encima de TODO: el módulo de presupuesto está en z-index 10010, el
 * orquestador alumno en 10017 y el evaluador en 10016. Un globo que quede
 * detrás de su propio contenido no sirve para nada, así que se lo manda al
 * tope del rango entero en vez de perseguir el z-index más alto del momento.
 * ============================================================================= */

.zk-ayuda {
  position: fixed;
  z-index: 2147483000;
  max-width: 360px;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  border: 1px solid #475569;
  background: #0f172a;
  color: #e2e8f0;
  font: 400 0.78rem/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  pointer-events: none;      /* el globo nunca se interpone al clic */
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  white-space: normal;
  text-align: left;
}

.zk-ayuda.es-visible {
  opacity: 1;
  transform: translateY(0);
}

.zk-ayuda-titulo {
  display: block;
  margin-bottom: 0.22rem;
  color: #93c5fd;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Cada renglón del cuerpo es un bloque: una explicación de tres líneas se lee
   como tres líneas. Los renglones vacíos hacen de separación de párrafo. */
.zk-ayuda-linea {
  display: block;
  min-height: 0.35em;
}

.zk-ayuda-linea + .zk-ayuda-linea {
  margin-top: 0.12rem;
}

/* La flecha. Se dibuja con un cuadrado rotado para heredar borde y fondo, y su
   posición horizontal la fija el JS: el globo puede correrse para no salirse de
   la pantalla, pero la punta tiene que seguir señalando al elemento. */
.zk-ayuda-flecha {
  position: absolute;
  width: 9px;
  height: 9px;
  background: #0f172a;
  border-right: 1px solid #475569;
  border-bottom: 1px solid #475569;
  transform: translateX(-50%) rotate(45deg);
  bottom: -5.5px;
}

.zk-ayuda.es-abajo .zk-ayuda-flecha {
  bottom: auto;
  top: -5.5px;
  border-right: 0;
  border-bottom: 0;
  border-left: 1px solid #475569;
  border-top: 1px solid #475569;
}

/* Señal de que algo tiene explicación. Deliberadamente discreta: un subrayado
   punteado que aparece al acercarse, no un ícono en cada celda —con decenas de
   números por pantalla, un ícono por número sería ruido y taparía la tabla—. */
[data-ayuda] {
  cursor: help;
}

[data-ayuda]:hover,
[data-ayuda]:focus-visible {
  text-decoration: underline dotted currentColor 1px;
  text-underline-offset: 3px;
}

/* En celdas de tabla el subrayado corre el texto; ahí se marca con el fondo. */
td[data-ayuda]:hover,
th[data-ayuda]:hover,
td[data-ayuda]:focus-visible,
th[data-ayuda]:focus-visible {
  text-decoration: none;
  background: rgba(147, 197, 253, 0.09);
}

/* El punto de ayuda explícito, para cuando el elemento no es un número sino un
   título de sección y conviene que se vea que hay algo para leer. */
.zk-ayuda-punto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin-left: 0.28rem;
  border-radius: 50%;
  border: 1px solid #64748b;
  color: #94a3b8;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  cursor: help;
  user-select: none;
}

.zk-ayuda-punto:hover {
  border-color: #93c5fd;
  color: #93c5fd;
  background: rgba(147, 197, 253, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .zk-ayuda { transition: none; transform: none; }
  .zk-ayuda.es-visible { transform: none; }
}

/* ── Deslindes ──────────────────────────────────────────────────────────────
   Qué es y qué NO es cada resultado. Tiene que verse sin gritar: un cartel
   rojo y enorme se vuelve parte del decorado a la tercera vez y deja de
   leerse, que es exactamente lo contrario de lo que se busca. */
.zk-deslinde {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 1rem 0 0;
  padding: 0.6rem 0.8rem;
  color: #c9b98d;
  font-size: 0.72rem;
  line-height: 1.55;
  background: rgba(255, 200, 87, 0.07);
  border-left: 3px solid rgba(255, 200, 87, 0.55);
  border-radius: 0 6px 6px 0;
  cursor: help;
}
.zk-deslinde span[aria-hidden] { flex: 0 0 auto; color: #fbbf24; font-size: 0.85rem; line-height: 1.3; }

.zk-deslinde-vigencia {
  margin: 0.35rem 0 0;
  color: #6b7b8c;
  font-size: 0.66rem;
  font-style: italic;
}

/* El bloque largo, para documentos en pantalla. */
.zk-deslinde-bloque {
  margin: 1.2rem 0 0;
  padding: 0.9rem 1.1rem;
  color: #94a3b8;
  font-size: 0.78rem;
  line-height: 1.6;
  background: rgba(148, 163, 184, 0.08);
  border-left: 3px solid #94a3b8;
  border-radius: 0 8px 8px 0;
}
.zk-deslinde-bloque b { display: block; margin-bottom: 0.35rem; color: #cbd5e1; font-size: 0.82rem; }
.zk-deslinde-bloque p { margin: 0 0 0.5rem; }
.zk-deslinde-bloque p:last-child { margin-bottom: 0; }

/* En el evaluador el fondo es más oscuro y el amarillo pega distinto. */
.evalsimple-shell .zk-deslinde { margin: 0.7rem 1.2rem; }
/* El deslinde va al final de un contenedor flex en columna con altura tope: sin
   esto el navegador lo achica hasta hacerlo ilegible cuando falta lugar. */
#zmc-eval5-deslinde,
.evalsimple-shell > .zk-deslinde {
  flex: 0 0 auto;
}
#zmc-eval5-deslinde .zk-deslinde {
  margin: 0.5rem 1rem 0.9rem;
}


@media print {
  .zk-deslinde, .zk-deslinde-bloque { break-inside: avoid; }
}