/*
 * css/components/run-panel.css — Panel Run compartido (Migration, Daily, Util): formulario, notas, comando, log.
 *
 * 12-oct, fase 3 del kit de estilo: extraído del <style> de index.html (mismas reglas). El orden
 * de carga (index.html) es base -> components -> views; la verificación comparó los estilos
 * calculados de toda la página antes y después.
 */

/* ---- Run tab ---- */
.run-layout { display: grid; grid-template-columns: minmax(340px, 500px) minmax(0, 1fr); gap: 18px; align-items: start; transition: grid-template-columns 0.18s ease; }
.run-layout.collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.run-layout.collapsed .run-side { display: none; }
/* formulario en dos columnas (desde|hasta, cursor|modo, ...); con el panel angosto vuelve a una */
.run-fields-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); column-gap: 14px; }
.run-fields-grid .field { min-width: 0; }
/* 4-nov: fecha + hora en los campos de fecha con time_ok */
.run-dt { display: flex; gap: 6px; }
.run-dt input[type="date"] { flex: 1 1 auto; min-width: 0; }
.run-dt input[type="time"] { flex: 0 0 auto; width: 7.5em; }
@media (max-width: 860px) { .run-layout { grid-template-columns: 1fr; } .run-layout.collapsed { grid-template-columns: 1fr; } }
/* 18-oct, usabilidad: sin min-width:0 un <select> con textos largos estiraba el panel y la página entera en celular */
.run-layout > *, .run-side-wrap, .run-side { min-width: 0; }
.run-side select { max-width: 100%; }
.run-side-wrap { position: relative; }
.run-collapse-btn {
  position: absolute; top: 0; right: -14px; width: 28px; height: 28px; z-index: 5;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
  cursor: pointer; font-size: 0.8rem; line-height: 1; padding: 0; font-family: inherit;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.run-collapse-btn:hover { color: var(--text); }
.run-layout.collapsed .run-collapse-btn { position: static; margin-bottom: 10px; }
.run-side { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.run-side .field { margin-bottom: 14px; }
.run-side label { font-size: 0.8rem; font-weight: 600; }
.run-side .field-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; margin-bottom: 4px; }
.run-side input[type="text"], .run-side input[type="search"], .run-side input[type="number"], .run-side input[type="datetime-local"], .run-side select {
  width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 0.84rem;
}
.run-side input:focus, .run-side select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.run-side .check { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; cursor: pointer; }
.run-btn { width: 100%; margin-top: 2px; }
.run-divider {
  margin: 18px 0 6px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); font-weight: 600;
}
.run-actions { display: flex; gap: 8px; justify-content: space-between; margin-top: 6px; }
.run-actions .primary { flex: 1; }
.def-tag { font-size: 0.75rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; margin-left: 8px; white-space: nowrap; }
.def-tag.value { background: var(--accent-dim); color: var(--accent); }
.def-tag.job { background: var(--gold-bg); color: var(--gold); }
.run-side .def-tag { max-width: 100%; overflow-wrap: anywhere; }
.def-tag.omitted { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); }
.run-block { padding: 12px 18px; }
.run-sub { font-size: 0.75rem; color: var(--text-dim); font-weight: 600; margin: 10px 0 4px; }
.run-sub:first-child { margin-top: 0; }
.run-pre {
  margin: 0 0 6px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; font-family: var(--font-mono); font-size: 0.76rem; line-height: 1.55; overflow-x: auto; white-space: pre;
}
/* mismos comandos en verde que el HOWTO, con el botón Copiar dentro de la caja
   (.code-block / .copy-btn son globales; acá solo se pinta el <pre>) */
.run-cmd { margin: 0 0 6px; }
/* log de la ejecución (Cloud Logging) */
.run-log-bar { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 0.75rem; color: var(--text-dim); margin-bottom: 6px; }
.run-logbox pre.run-log-pre {
  padding: 10px 62px 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.5; max-height: 340px; overflow: auto;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.run-log-pre .ls { color: var(--text-dim); font-weight: 600; }
.run-log-pre .ll-ERROR .lx, .run-log-pre .ll-CRITICAL .lx, .run-log-pre .ll-ALERT .lx { color: var(--err); }
.run-log-pre .ll-WARNING .lx { color: var(--gold); }
.run-cmd .run-pre { background: var(--ok-bg); border-left: 3px solid var(--ok); }
.run-note { border-radius: 8px; padding: 8px 12px; font-size: 0.78rem; line-height: 1.45; margin: 10px 0 0; }
.run-note.warn { color: var(--gold); background: var(--gold-bg); }
.run-note.info { color: var(--accent); background: var(--accent-dim); }
.run-note.err { color: var(--err); background: var(--err-bg); }
.run-note.ok { color: var(--ok); background: var(--ok-bg); }
.run-simple { max-width: 640px; }
.run-kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 0.82rem; margin: 6px 0 10px; }
.run-kv dt { color: var(--text-dim); }
.run-kv dd { margin: 0; font-family: var(--font-mono); word-break: break-all; }