/* Evaluaciones de un bot (evaluaciones.js): el cajón #eval-panel del editor, con los casos, su formulario, el progreso
   de la corrida y los resultados. El cajón en sí (fijo a la derecha, abierto con .is-open) está en styles.css. */

#eval-panel { width: 540px; }
#eval-panel h4 { margin: 1.25rem 0 0.5rem; }
#eval-panel h5 { margin: 1rem 0 0.25rem; font-size: 1em; }
#eval-message:empty { display: none; }
#eval-message.error { color: oklch(0.5 0.19 25); }

.eval-simulated { padding: 0.6rem 0.75rem; border-radius: 10px; background: #8881; }
.eval-judge { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.75rem 0; }
.eval-empty { padding: 1.5rem 1rem; text-align: center; border: 1px dashed #8886; border-radius: 10px; }

/* Lista de casos */
.eval-cases, .eval-runs, .eval-checks { list-style: none; margin: 0; padding: 0; }
.eval-case { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.6rem 0; border-bottom: 1px solid #8883; }
.eval-case.is-off { opacity: 0.6; }
.eval-case-main { flex: 1; min-width: 10rem; display: flex; flex-direction: column; }
.eval-case-main strong { overflow-wrap: anywhere; }
.eval-case-actions { display: flex; gap: 0.35rem; }
.eval-switch { display: flex; align-items: center; gap: 0.3rem; font-size: 0.9em; }
.eval-runs li { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; padding: 0.3rem 0; }
.eval-link { border: 0; background: none; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

/* Estado: ✓ pasa, ✗ falla, ! error, – sin correr o cancelado */
.eval-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.6rem; height: 1.6rem;
  border: 0; border-radius: 999px; padding: 0; background: #8882; color: inherit; font: inherit; font-weight: 700; }
button.eval-icon { cursor: pointer; }
.eval-icon.is-pass { background: oklch(0.58 0.15 150 / 0.18); color: oklch(0.45 0.13 150); }
.eval-icon.is-fail { background: oklch(0.6 0.19 25 / 0.16); color: oklch(0.5 0.19 25); }
.eval-icon.is-error { background: oklch(0.75 0.15 75 / 0.25); color: oklch(0.48 0.12 60); }
/* ~ inestable: pasó algunas veces y otras no (repetir) */
.eval-icon.is-flaky { background: oklch(0.72 0.14 300 / 0.2); color: oklch(0.45 0.14 300); }

.eval-progress { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.75rem 0; padding: 0.6rem 0.75rem;
  border-radius: 10px; background: color-mix(in srgb, var(--brand, #12393d) 8%, transparent); }
.eval-progress progress { flex: 1; min-width: 6rem; }

/* Formulario de un caso */
.eval-form label { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.5rem 0; }
.eval-form input, .eval-form textarea, .eval-form select { width: 100%; box-sizing: border-box; }
.eval-message-row { display: flex; align-items: flex-start; gap: 0.4rem; margin: 0.4rem 0; }
.eval-message-row textarea { flex: 1; }
.eval-turn-number { flex: none; width: 1.4rem; padding-top: 0.35rem; text-align: right; color: #6b6b70; font-size: 0.9em; }
.eval-contact, .eval-mocks { margin: 0.75rem 0; }
.eval-contact summary, .eval-mocks summary { cursor: pointer; }
.eval-mock { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.5rem 0; padding: 0.6rem 0.75rem; border: 1px dashed #8886; border-radius: 10px; }
.eval-repeat { display: flex; align-items: center; gap: 0.4rem; }
.eval-repeat select { width: auto; }
.eval-security { align-items: center; flex-wrap: wrap; }
.eval-security .hint { flex: 1; min-width: 12rem; }
.eval-check { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.5rem 0; padding: 0.6rem 0.75rem; border: 1px solid #8884; border-radius: 10px; }
.eval-check-head { display: flex; gap: 0.4rem; }
.eval-check-head select { flex: 1; min-width: 0; }
.eval-form .eval-inline { flex-direction: row; align-items: center; gap: 0.5rem; margin: 0; }
.eval-form .eval-inline select { width: auto; }
.eval-primary { font-weight: 600; }

.eval-form-note { padding: 0.5rem 0.7rem; border-radius: 8px; background: oklch(0.75 0.15 75 / 0.18); }

/* El aviso antes de activar (espacio.js, askBeforeActivating) */
.eval-dialog { width: min(30rem, calc(100vw - 2rem)); }

/* Resultados de una corrida */
.eval-result { margin: 0.5rem 0; border: 1px solid #8884; border-radius: 10px; }
.eval-result > summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; cursor: pointer; }
.eval-result > summary strong { flex: 1; overflow-wrap: anywhere; }
.eval-result[open] > summary { border-bottom: 1px solid #8883; }
.eval-result > :not(summary) { margin-left: 0.75rem; margin-right: 0.75rem; }
.eval-badge { padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.8em; font-weight: 600; }
.eval-badge.is-broke { background: oklch(0.6 0.19 25 / 0.16); color: oklch(0.5 0.19 25); }
.eval-badge.is-fixed { background: oklch(0.58 0.15 150 / 0.18); color: oklch(0.45 0.13 150); }
.eval-badge.is-flaky { background: oklch(0.72 0.14 300 / 0.2); color: oklch(0.45 0.14 300); }
/* Cada intento de un caso repetido */
.eval-attempt { margin: 0.5rem 0; padding-top: 0.4rem; border-top: 1px solid #8883; }
.eval-attempt:first-child { border-top: 0; }
.eval-attempt-head { display: flex; align-items: center; gap: 0.4rem; margin: 0.3rem 0; }
.eval-turn { padding: 0.5rem 0; border-bottom: 1px dashed #8883; }
.eval-turn:last-child { border-bottom: 0; }
.eval-bubble { margin: 0.4rem 0; padding: 0.5rem 0.7rem; border-radius: 10px; background: #8881; white-space: pre-wrap; overflow-wrap: anywhere; }
.eval-bubble.from-user { margin-left: 2rem; background: color-mix(in srgb, var(--brand, #12393d) 10%, transparent); }
.eval-turn-actions { margin: 0.3rem 0; font-size: 0.9em; }
.eval-turn table { table-layout: fixed; width: 100%; font-size: 0.85em; }
.eval-turn td { overflow-wrap: anywhere; vertical-align: top; }
.eval-checks li { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.35rem 0; font-size: 0.92em; overflow-wrap: anywhere; }
.eval-checks .eval-icon { width: 1.3rem; height: 1.3rem; font-size: 0.85em; }

/* Comparar: cada caso en lo activo y en el borrador, lado a lado */
.eval-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.eval-compare-col { min-width: 0; }
.eval-compare-head { display: flex; align-items: center; gap: 0.4rem; margin: 0.5rem 0 0; }
.eval-result > summary .eval-icon + .eval-icon { margin-left: -0.3rem; }
.eval-compare .eval-turn-actions button { padding: 0.3rem 0.6rem; font-size: 0.85em; }

@media (max-width: 600px) {
  .eval-case-actions { width: 100%; }
  .eval-compare { grid-template-columns: 1fr; }
}