/* Lo propio de la consola de Talos, encima de @overa/ui-kit (la última hoja, SUITE-CONSOLAS.md §1):
   app.css, page.css (las cajas `.sg-section`), console.css (estados y avisos breves), dialog.css,
   required-fields.css, suite-shell.css + suite-console.css (la barra, el menú, las migas y el sitio del
   contenido) y suite-font.css (Geist). Aquí solo lo que el kit no tiene, con el prefijo `tl-` y los
   colores de las variables del kit (claro y oscuro); la pantalla de comandos es oscura en los dos temas. */

/* ── EL CONTENIDO A PANTALLA COMPLETA (la consola de la suite) ──────────────────────────────────────
   `.layout` deja el sitio del menú lateral (suite-console.css); aquí, el de la cabecera fija (barra 70 +
   pestaña 46 + migas 40) y el margen de 24 px a la derecha. Sin ancho máximo: la consola usa toda la
   pantalla. Dentro de un iframe (sin armazón), el margen normal. */
/* EL AZUL DE LA SUITE (SUITE-CONSOLAS.md §7: el botón principal, azul): el acento de app.css es el naranja del
   portal; en la consola manda el de la navegación de la suite (suite-shell.css), en claro y en oscuro. `:root:root`
   pesa como los `:root:not([data-theme])` y `[data-theme=dark]` de app.css, y gana por ir después. */
:root:root { --a: var(--ov-sh-primary, #4a8bd4); --a2: var(--ov-sh-primary-text, #3f75b5); --a-soft: var(--ov-sh-primary-soft, #edf4fb); }

/* `.layout` de app.css es la del portal (barra propia de 44 px y alto fijo): en la consola de la suite el sitio
   de arriba lo da `.tl-main` y el lateral, suite-console.css. */
.layout.tl-layout { display: block; height: auto; min-height: 100vh; padding-top: 0; }
.tl-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 16px; }
body.ov-console .tl-main { padding: calc(var(--ov-sh-head) + 20px) 24px 32px 0; }
@media (max-width: 900px) { body.ov-console .tl-main { padding-left: 16px; padding-right: 16px; } }
.tl-main .sg-section { padding: 16px 20px; }
.tl-main h2 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.tl-main h3 { font-size: 14px; font-weight: 700; margin: 16px 0 8px; }

/* La cabecera de una pantalla (§6): título con su (i), el contador y, a la derecha, las acciones. */
.tl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-head h1 { font-size: 20px; font-weight: 700; margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.tl-count { color: var(--dim); font-size: var(--fs-sm); }
.tl-head-sub { flex-basis: 100%; order: 3; margin: 0; }
.tl-head-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.tl-info { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--bd2); color: var(--dim); font-size: 11px; font-weight: 700; cursor: help; }
.tl-icon-btn { width: 34px; padding: 0; }

/* Dos columnas cuando caben (la vista de un equipo, Mi bandeja…); en una pantalla estrecha se apilan. */
.tl-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1280px) { .tl-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .tl-cols > * { min-width: 0; } }
.tl-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.tl-role { color: var(--dim); font-size: var(--fs-sm); }

.tl-label { display: block; color: var(--dim); font-size: var(--fs-sm); margin: 8px 0 4px; }
.tl-reason { width: 100%; }
.tl-ops { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tl-op { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 200px; height: auto; padding: 8px 12px; text-align: left; }
.tl-op small { color: var(--dim); font-size: var(--fs-xs); font-weight: 400; }
.tl-live { font-size: var(--fs-xs); color: var(--term-dim); }

/* La consola de órdenes (§7): fondo oscuro y letra mono, `$ orden`, el estado, el código de salida. */
.tl-terminal { --term-bg: #0f1218; --term-fg: #d7dde8; --term-dim: #8a93a6; --term-bd: #232a36;
  background: var(--term-bg); color: var(--term-fg); border-radius: var(--radius-lg); border: 1px solid var(--term-bd); overflow: hidden; }
.tl-terminal .tl-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--term-bd); font-size: var(--fs-sm); color: var(--term-dim); flex-wrap: wrap; }
.tl-terminal .tl-title { color: var(--term-fg); font-weight: 600; font-family: var(--ov-font-mono, ui-monospace, Consolas, monospace); }
.tl-terminal pre { margin: 0; padding: 12px; min-height: 200px; max-height: 65vh; overflow: auto; font: 13px/1.45 var(--ov-font-mono, ui-monospace, "Cascadia Mono", Consolas, monospace); white-space: pre-wrap; word-break: break-word; }
.tl-state { font-weight: 600; }
.tl-state.ok { color: #4cc27a; }
.tl-state.crit { color: #f0705f; }
.tl-state.warn { color: #e0b341; }
.tl-state.muted { color: var(--term-dim); }
.tl-terminal .tl-actions { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--term-bd); flex-wrap: wrap; }

/* Tablas (§6): cabecera en mayúsculas y la fila pulsable que lleva a la ficha. */
.tl-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tl-table td, .tl-table th { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--bd); vertical-align: top; }
.tl-table th { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.tl-table td.tl-num, .tl-table th.tl-num { text-align: right; font-variant-numeric: tabular-nums; }
.tl-table tr.clickable { cursor: pointer; }
.tl-table tr.clickable:hover td { background: var(--bg3); }
.tl-table-wrap { overflow-x: auto; }

.hidden { display: none !important; }
@media (max-width: 560px) { .tl-op { min-width: 100%; } }

/* Las cifras de arriba (tarjetas con borde, el número en el color de su estado). */
.tl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.tl-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--bd); border-radius: var(--radius-lg); background: var(--bg2); }
.tl-kpi strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.tl-kpi span { color: var(--dim); font-size: var(--fs-sm); }
button.tl-kpi { text-align: left; cursor: pointer; font: inherit; color: inherit; }
button.tl-kpi:hover { border-color: var(--bd2); }
button.tl-kpi[aria-pressed="true"] { border-color: var(--a); box-shadow: inset 3px 0 0 var(--a); }
.tl-kpi-ok strong { color: var(--ok); }
.tl-kpi-warn strong { color: var(--warn); }
.tl-kpi-crit strong { color: var(--danger); }

/* Chapas de estado (§7): borde y texto del color, nunca solo el color. */
.tl-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; border: 1px solid var(--bd); white-space: nowrap; }
.tl-chip-ok { color: var(--ok); border-color: var(--ok); }
.tl-chip-warn { color: var(--warn); border-color: var(--warn); }
.tl-chip-crit { color: var(--danger); border-color: var(--danger); }
.tl-chip-unknown { color: var(--dim); }

.tl-form { margin: 10px 0; padding: 12px; border: 1px solid var(--bd); border-radius: var(--radius-lg); }
.tl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 12px; }
.tl-grid label { display: flex; flex-direction: column; gap: 4px; color: var(--dim); font-size: var(--fs-sm); }
.tl-days { border: 0; padding: 0; margin: 8px 0; display: flex; gap: 10px; flex-wrap: wrap; }
.tl-days legend { color: var(--dim); font-size: var(--fs-sm); margin-bottom: 4px; }
.tl-ring { border: 1px solid var(--bd); border-left-width: 4px; border-radius: var(--radius-lg); padding: 10px 12px; margin: 10px 0; }
.tl-ring-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.tl-ring-failed { border-left-color: var(--danger); }
.tl-ring-running { border-left-color: var(--warn); }
.tl-ring-completed { border-left-color: var(--ok); }

/* la operación propuesta desde atlas o Iris (#op=): resaltada */
.tl-op-picked { outline: 2px solid var(--a); outline-offset: 2px; }

/* EL PARQUE (selección, páginas, punto de conectividad). La barra de filtros es la de la suite (.ov-filters). */
.tl-check { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font-size: var(--fs-sm); white-space: nowrap; }
.tl-selection { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 12px; border: 1px solid var(--a); border-radius: var(--radius-lg); background: var(--a-soft); }
.tl-selection span { font-weight: 600; margin-right: auto; }
.tl-pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 10px; flex-wrap: wrap; }
.tl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--dim); }
.tl-dot-ok { background: var(--ok); }
.tl-dot-warn { background: var(--warn); }
.tl-dot-crit { background: var(--danger); }
/* Un filtro activo se ve y se quita (§5): «Solo: … ×». */
.tl-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tl-filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; border: 1px solid var(--a); background: var(--a-soft); font-size: var(--fs-sm); }
.tl-filter-chip button { border: 0; background: none; color: inherit; cursor: pointer; font: inherit; padding: 0 6px; }
/* Una ficha de datos (detalle de una solicitud o de un lote). */
.tl-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 8px 0 12px; font-size: var(--fs-sm); }
.tl-facts dt { color: var(--dim); }
.tl-facts dd { margin: 0; overflow-wrap: anywhere; }
/* Los equipos de un lote nuevo (chips que se pueden quitar). */
.tl-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; }
.tl-chip-remove { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 6px; font: inherit; }
/* El secreto de una suscripción (se enseña una vez). */
.tl-secret { padding: 10px 12px; border: 1px dashed var(--bd); border-radius: var(--radius-lg); background: var(--bg2); font: 13px/1.4 var(--ov-font-mono, ui-monospace, Consolas, monospace); overflow-wrap: anywhere; white-space: pre-wrap; user-select: all; }

/* Primeros pasos y Conexión: cada comprobación con su estado y su enlace a lo concreto. */
.tl-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tl-step { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--bd); border-left-width: 4px; border-radius: var(--radius-lg); background: var(--bg2); }
.tl-step.tl-step-ok { border-left-color: var(--ok); }
.tl-step.tl-step-warn { border-left-color: var(--warn); }
.tl-step.tl-step-crit { border-left-color: var(--danger); }
.tl-step strong { display: block; }
.tl-step p { margin: 2px 0 0; color: var(--dim); font-size: var(--fs-sm); }
.tl-step a { white-space: nowrap; font-size: var(--fs-sm); }
.tl-progress { height: 8px; border-radius: 999px; background: var(--bg3); overflow: hidden; }
.tl-progress-bar { height: 100%; width: 0; background: var(--ok); }

/* TODOS LOS SCRIPTS de un equipo (el catálogo de atlas): cada uno se despliega con su descripción y sus parámetros. */
.tl-scripts { display: flex; flex-direction: column; gap: 6px; }
.tl-script { border: 1px solid var(--bd); border-radius: var(--radius-lg); background: var(--bg2); }
.tl-script[open] { border-color: var(--a); }
.tl-script > summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; cursor: pointer; list-style: none; }
.tl-script > summary::-webkit-details-marker { display: none; }
.tl-script > summary::before { content: '▸'; color: var(--dim); }
.tl-script[open] > summary::before { content: '▾'; }
.tl-script-name { font-weight: 600; }
.tl-script-source { margin-left: auto; color: var(--dim); font-size: var(--fs-xs); }
.tl-script-body { padding: 0 12px 12px 30px; display: flex; flex-direction: column; gap: 8px; }
.tl-script-body p { margin: 0; color: var(--dim); font-size: var(--fs-sm); }

/* R7, los informes: las barras por día (lo fallado, en rojo abajo) y la comparación de dos salidas. */
.tl-bars { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding-top: 8px; overflow-x: auto; }
.tl-bar-col { flex: 1 0 14px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.tl-bar-col small { color: var(--dim); font-size: 10px; font-variant-numeric: tabular-nums; }
.tl-bar-stack { width: 100%; max-width: 28px; background: var(--a); border-radius: 3px 3px 0 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.tl-bar-failed { display: block; width: 100%; background: var(--danger); }
.tl-diff-added { color: #7ee2a8; background: rgba(46, 160, 67, .15); }
.tl-diff-removed { color: #ff9b9b; background: rgba(248, 81, 73, .15); }
.tl-diff-same { color: var(--term-dim); }

/* Copiar la salida: el icono en la esquina de la barra de cada consola. */
.tl-terminal .tl-copy { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--term-bd); border-radius: 6px; background: transparent; color: var(--term-dim); cursor: pointer; }
.tl-terminal .tl-copy:hover { color: var(--term-fg); border-color: var(--term-dim); }
.tl-terminal .tl-copy:focus-visible { outline: 2px solid var(--a); outline-offset: 1px; }
.tl-terminal .tl-copy.tl-copied { color: #7ee2a8; border-color: #7ee2a8; }