/* Kanban real de Seguimiento OR (assets/js/seguimientoOrKanban.js).
   Vista nueva e independiente de seguimientoOR.css (mock) — prefijo
   orkb- exclusivo para no colisionar con .or-* de esa hoja. Reutiliza
   las variables de app.css (:root) para mantener consistencia visual. */

.orkb-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 16px; }

/* ============================================================
   Identidad de color por frente.

   Cada frente tiene su color (de la paleta de app.css, sin inventar
   ninguno) y TODO el tablero se tiñe con él: pestaña activa, cabecera de
   columna, zona de arrastre y borde de las tarjetas. Así se sabe en qué
   frente se está sin tener que leer la pestaña.

   El enganche es `:has()` sobre el contenedor: detecta qué chip tiene la
   clase .active — la misma que seguimientoOrKanban.js ya conmuta — y de
   ahí salen las variables. Cero JavaScript nuevo. En un navegador sin
   `:has()` todo el tablero se queda en el azul por defecto, que es
   exactamente como se veía antes.
   ============================================================ */
#seguimientoOrKanbanContent { --frente: var(--azul-medium); --frente-bg: var(--info-bg); }
#seguimientoOrKanbanContent:has(.orkb-frente-chip[data-frente="CONSTRUCCION"].active) {
  --frente: var(--warn); --frente-bg: var(--warn-bg);
}
#seguimientoOrKanbanContent:has(.orkb-frente-chip[data-frente="RETIE"].active) {
  --frente: var(--violeta); --frente-bg: rgba(76,63,191,.13);
}

/* Selector de frente: misma pestaña .eg-tab de Gerencia, pero cada una se
   activa en su propio color. Se conservan las clases y el data-frente que
   usa seguimientoOrKanban.js. */
.orkb-frente-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.orkb-frente-chip {
  border: none; background: transparent; color: var(--text-2);
  border-radius: var(--r-md); padding: 9px 18px; font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.orkb-frente-chip:hover { background: var(--muted); color: var(--text); }
.orkb-frente-chip.active { background: var(--azul-medium); color: #fff; box-shadow: 0 2px 10px rgba(0,104,212,.30); }
.orkb-frente-chip[data-frente="CONSTRUCCION"].active { background: var(--warn); box-shadow: 0 2px 10px rgba(178,84,0,.30); }
.orkb-frente-chip[data-frente="RETIE"].active { background: var(--violeta); box-shadow: 0 2px 10px rgba(76,63,191,.30); }
/* Deshabilitados mientras hay una transición en curso (state.enVuelo) — cambiar de
   frente en ese momento reemplazaría todo el tablero y perdería el estado optimista. */
.orkb-frente-chip:disabled { opacity: .45; cursor: not-allowed; }
.orkb-frente-chip:disabled:hover { background: transparent; color: var(--text-2); }
.orkb-frente-chip.active:disabled:hover { background: var(--azul-medium); color: #fff; }
.orkb-frente-chip[data-frente="CONSTRUCCION"].active:disabled:hover { background: var(--warn); color: #fff; }
.orkb-frente-chip[data-frente="RETIE"].active:disabled:hover { background: var(--violeta); color: #fff; }

.orkb-undo-bar {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  background: var(--info-bg); border: 1px solid rgba(0,104,212,.28); border-radius: var(--r-lg);
  padding: 10px 14px; margin-bottom: 12px; font-size: 13px; color: var(--text);
}
.orkb-undo-btn {
  border: 1px solid var(--azul-medium); background: #fff; color: var(--azul-medium);
  border-radius: var(--r-md); padding: 7px 15px; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.orkb-undo-btn:hover { background: var(--azul-medium); color: #fff; }

.orkb-board { display: flex; gap: 10px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }

/* Columnas y tarjetas siguen el patrón kanban del sistema visual: la columna
   es el fondo gris (--muted) y las tarjetas van en blanco encima, que da más
   contraste que el gris sobre blanco que había antes. */
.orkb-column {
  /* El cuerpo también toma el tono del frente, no un gris neutro: así el
     tablero entero se lee del color correspondiente y las tarjetas blancas
     resaltan sobre él. */
  background: var(--frente-bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  /*
   * Las columnas se reparten el ancho disponible y se estrechan hasta 150px
   * para que un frente entero quepa sin desplazarse de lado: RETIE son 7
   * hitos y a 240px fijos se salían de pantalla. NO se envuelven en varias
   * filas (se probó y se manejaba peor) — siguen en una sola fila, solo que
   * compactas. Si aun así no caben, queda el desplazamiento de siempre.
   */
  min-width: 150px; max-width: 300px; flex: 1 1 0; display: flex; flex-direction: column;
  /* --head-h vale 0 en este módulo (app.css oculta la barra de Gerencia), así
     que la columna recupera ese alto en vez de dejarlo sin usar. Con la barra
     visible el resultado es el mismo 100vh - 260px de antes. */
  max-height: calc(100vh - var(--head-h) - 204px);
  overflow: hidden; transition: border-color .15s, box-shadow .15s;
  animation: orkbColIn .38s ease backwards;
}
.orkb-column:hover { border-color: var(--frente); box-shadow: 0 4px 14px rgba(16,32,80,.07); }
/* Entrada escalonada de izquierda a derecha: refuerza que las columnas son
   una secuencia de hitos, no un conjunto suelto. */
.orkb-column:nth-child(1) { animation-delay: .02s; }
.orkb-column:nth-child(2) { animation-delay: .07s; }
.orkb-column:nth-child(3) { animation-delay: .12s; }
.orkb-column:nth-child(4) { animation-delay: .17s; }
.orkb-column:nth-child(5) { animation-delay: .22s; }
.orkb-column:nth-child(n+6) { animation-delay: .27s; }
@keyframes orkbColIn { from { opacity: 0; transform: translateY(8px); } }

/* La cabecera lleva el color del frente activo: franja superior + título. */
/*
 * La cabecera lleva el color del frente (OR azul, Construcción ámbar, RETIE
 * violeta) y su intensidad dice si esa columna tiene trabajo:
 *
 *   - Con proyectos -> color pleno y texto en blanco. Salta a la vista.
 *   - Vacía         -> el mismo color lavado, y la columna atenuada.
 *
 * Con siete hitos en pantalla, todos iguales en blanco, encontrar dónde hay
 * algo que hacer obligaba a leer los contadores uno por uno. El enganche es
 * `:has(.orkb-empty)`, el mismo párrafo "Sin proyectos" que el JS ya pinta:
 * ningún dato nuevo y ninguna línea de JavaScript.
 */
.orkb-column-header {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px 11px;
  min-height: 56px; box-sizing: border-box;
  border-bottom: 1px solid var(--border); border-top: 3px solid var(--frente);
  background: var(--frente-bg); font-size: 12.5px; font-weight: 700; color: var(--frente); line-height: 1.3;
  transition: background .15s, color .15s;
}
.orkb-column-count {
  flex-shrink: 0;
  background: rgba(255,255,255,.6); color: var(--frente); border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 800;
}

/* Columna con trabajo: cabecera a color pleno. */
.orkb-column:not(:has(.orkb-empty)) .orkb-column-header {
  background: var(--frente); color: #fff; border-bottom-color: transparent;
}
.orkb-column:not(:has(.orkb-empty)) .orkb-column-count {
  background: rgba(255,255,255,.25); color: #fff;
}

/* Columna vacía: se apaga para que la vista vaya donde hay algo que hacer.
   No se oculta ni se bloquea: sigue siendo destino válido al arrastrar, y
   recupera el color entero al pasar el puntero o al soltar sobre ella. */
.orkb-column:has(.orkb-empty) { opacity: .74; }
.orkb-column:has(.orkb-empty):hover,
.orkb-column:has(.orkb-dragover) { opacity: 1; }
.orkb-column-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 60px; transition: background .15s, box-shadow .15s; }
/* Zona de soltado: se tiñe del color del frente y se marca con un borde
   interior, para que se vea claramente dónde va a caer la tarjeta. */
/* Al arrastrar, el hueco se aclara a blanco en vez de teñirse: ahora la
   columna YA es del color del frente, así que teñirla más no se notaría.
   El blanco con el borde de color se lee sin lugar a dudas. */
.orkb-column-body.orkb-dragover { background: #fff; box-shadow: inset 0 0 0 2px var(--frente); border-radius: var(--r-md); }

.orkb-empty { color: var(--text-3); font-size: 12.5px; text-align: center; margin: 10px 0; }

.orkb-card {
  background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--frente);
  border-radius: var(--r-lg); padding: 8px 10px;
  cursor: grab; box-shadow: 0 1px 2px rgba(16,32,80,.05);
  transition: border-color .15s, box-shadow .15s, transform .15s;
  animation: orkbCardIn .32s ease backwards;
}
@keyframes orkbCardIn { from { opacity: 0; transform: translateY(6px); } }
.orkb-card:hover { box-shadow: 0 5px 16px rgba(16,32,80,.10); transform: translateY(-1px); }
.orkb-card:active { cursor: grabbing; transform: none; }

/* Semáforo del borde izquierdo a partir del estado que la tarjeta YA pinta:
   verde si el hito está cumplido, ámbar si está esperando a otro hito, y el
   color del frente en el resto. Sin datos nuevos — solo lee lo que hay. */
.orkb-card:has(.orkb-card-bloqueo) { border-left-color: var(--naranja); }
.orkb-card:has(.orkb-card-completado) { border-left-color: var(--verde-ok); }

/* Estado "pendiente de confirmar" (UI optimista): la tarjeta ya está en su
   columna nueva mientras la petición real corre de fondo. El spinner
   reutiliza el @keyframes spin ya definido en app.css — no se duplica. */
.orkb-card-pendiente { opacity: .55; pointer-events: none; position: relative; }
.orkb-card-pendiente::after {
  content: ''; position: absolute; top: 8px; right: 8px; width: 14px; height: 14px;
  border: 2px solid var(--border); border-top-color: var(--frente); border-radius: 50%;
  animation: spin .7s linear infinite;
}
.orkb-card-codigo { font-size: 10.5px; font-weight: 700; color: var(--text-3); letter-spacing: .02em; font-family: var(--font-mono); }
.orkb-card-nombre { font-size: 13px; font-weight: 700; color: var(--text); margin-top: 3px; }
.orkb-card-responsable { font-size: 11.5px; color: var(--text-2); margin-top: 3px; }
.orkb-card-bloqueo { font-size: 12px; font-weight: 600; color: var(--warn); margin-top: 7px; background: var(--warn-bg); border-radius: var(--r-md); padding: 5px 8px; }

.orkb-card-completar {
  margin-top: 9px; width: 100%; border: 1px solid rgba(12,122,33,.35); background: var(--ok-bg); color: var(--ok);
  border-radius: var(--r-md); padding: 7px 8px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: background .15s, color .15s;
}
.orkb-card-completar:disabled { opacity: .45; cursor: not-allowed; }
.orkb-card-completar:not(:disabled):hover { background: var(--ok); color: #fff; }

/* Indicador PERMANENTE de hito cumplido: reemplaza al boton en las tarjetas
   ya completadas (no hay nada que pulsar). Deliberadamente SIN cursor ni
   hover: tiene que leerse como estado, no como accion — el problema que
   arregla era justamente un boton que se veia accionable sobre un hito ya
   cumplido. Mismo verde de .orkb-card-completar, sin colores nuevos. */
.orkb-card-completado {
  margin-top: 9px; width: 100%; box-sizing: border-box;
  border: 1px solid rgba(12,122,33,.35); background: var(--ok-bg); color: var(--ok);
  border-radius: var(--r-md); padding: 7px 8px; font-size: 12.5px; font-weight: 700; text-align: center;
}

.orkb-hint { color: var(--text-muted); font-size: 13.5px; padding: 20px 0; }
.orkb-hint.orkb-error { color: var(--danger); }

/* --- Alta de proyecto OR (modal "Nuevo proyecto OR") -------------------
   Reutiliza .modal/.form-grid/.form-field/.modal-actions/.btn-mini de
   app.css; aquí solo lo que no existe: el ancho del modal (el .modal base
   son 400px, estrecho para 7 campos), la previsualización en vivo y el
   aviso ámbar. Los tonos de advertencia son los mismos de
   .orkb-card-bloqueo, para no introducir un color nuevo. */

.orkb-toolbar-derecha { display: flex; align-items: flex-end; gap: 10px; }

.modal.orkb-modal-ancho { width: min(660px, 94vw); text-align: left; }

.orkb-form-hint { font-size: 13px; color: var(--text-2); line-height: 1.55; margin: 0 0 16px; }
.orkb-form-hint code { background: var(--muted); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 1px 6px; font-family: var(--font-mono); font-size: 11.5px; }
.orkb-form-hint.orkb-error { color: var(--danger); }

/* El select de proyecto ocupa las dos columnas del .form-grid: su texto es
   "nombre — ORDEN DE TRABAJO" y se corta en una sola columna. */
.form-field.orkb-campo-ancho { grid-column: span 2; }

.orkb-nota-sinid {
  background: var(--warn-bg); border: 1px solid rgba(178,84,0,.22); border-radius: var(--r-md);
  padding: 10px 12px; margin-bottom: 14px; font-size: 12.5px; color: var(--warn); line-height: 1.5;
}
.orkb-ot {
  display: inline-block; background: #fff; border: 1px solid rgba(178,84,0,.25);
  border-radius: var(--r-sm); padding: 1px 6px; margin: 2px 2px 0 0; font-weight: 700;
  font-family: var(--font-mono); font-size: 11.5px;
}

/* "Se guardará así": lo que el sistema deriva solo. Va como panel gris para
   que se lea como un resumen de salida y no como más campos por llenar. */
.orkb-preview {
  margin-top: 18px; background: var(--muted); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 14px;
}
.orkb-preview-titulo {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-2); margin-bottom: 10px;
}
.orkb-preview-grid { display: grid; gap: 7px; font-size: 13.5px; }
.orkb-preview-grid > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.orkb-preview-grid > div + div { border-top: 1px dashed var(--border); padding-top: 7px; }
.orkb-preview-grid span { color: var(--text-2); }
.orkb-preview-grid b { color: var(--navy); text-align: right; font-weight: 700; }
.orkb-preview-grid i { color: var(--text-3); font-weight: 400; font-size: 12px; }
.orkb-preview-aviso {
  margin-top: 12px; background: var(--warn-bg); border: 1px solid rgba(178,84,0,.22);
  border-radius: var(--r-md); padding: 9px 11px; font-size: 12.5px; color: var(--warn); line-height: 1.45;
}
.orkb-preview-aviso code { background: #fff; border-radius: var(--r-sm); padding: 1px 5px; font-family: var(--font-mono); }

/* Aviso persistente bajo la toolbar: showToast solo tiene navy y rojo, y
   dos toasts seguidos se pisan — no sirve para "guardado + advertencia". */
.orkb-aviso-bar {
  position: relative; background: rgba(242,201,76,.15); border: 1px solid var(--warning);
  border-radius: var(--radius-sm); padding: 9px 34px 9px 14px; margin-bottom: 12px;
  font-size: 13px; color: #8a5300; line-height: 1.5;
}
.orkb-aviso-cerrar {
  position: absolute; top: 4px; right: 6px; border: none; background: none;
  color: #8a5300; font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px;
}
.orkb-aviso-cerrar:hover { color: var(--danger); }

/* --- Panel de historial de hitos (§8) ---------------------------------
   Reutiliza .modal/.modal-backdrop/.modal-actions/.btn-mini/.form-grid/
   .form-field/.orkb-campo-ancho/.orkb-preview-aviso; aquí solo lo que no
   existe. Dos cosas que ningún modal del repo resuelve: un ancho para una
   fila de 22-25 hitos, y un cuerpo con scroll propio (.modal no tiene
   max-height ni overflow, así que la lista se desbordaría del viewport).
   Sin colores nuevos: todo sale de las variables de app.css, y el ámbar
   entra por reutilizar .orkb-preview-aviso. */

/* Mismas etiquetas y controles que la barra de filtros de Gerencia. */
.orkb-hist-field { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; }
.orkb-hist-field select {
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; font-size: 13px; min-width: 210px;
  background: #fff; color: var(--text); font-weight: 400; text-transform: none; letter-spacing: normal;
}
.orkb-hist-field select:focus { outline: 1px solid var(--azul-medium); border-color: var(--azul-medium); }
.orkb-hist-field select:disabled { opacity: .55; cursor: not-allowed; }

.modal.orkb-modal-historial { width: min(1080px, 96vw); text-align: left; }

/*
 * Barra superior fija del panel de historial. La lista de hitos es larga
 * (hasta 29) y el botón "Cerrar" del final obligaba a recorrerla entera solo
 * para salir. Queda pegada arriba mientras se hace scroll, con la ✕ siempre
 * a la vista. El fondo opaco y el margen negativo son para que tape el
 * contenido que pasa por debajo, cubriendo el padding lateral del modal.
 */
.orkb-hist-topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  background: #fff; margin: -22px -24px 12px; padding: 20px 24px 12px;
  border-bottom: 1px solid var(--border);
}
.orkb-hist-topbar h3 { margin: 0; }
.orkb-hist-cerrar {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: #fff; color: var(--text-2);
  font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.orkb-hist-cerrar:hover { background: var(--danger-bg); border-color: rgba(179,38,30,.3); color: var(--danger); }

.orkb-hist-cab { margin-bottom: 10px; }
.orkb-hist-cab > div { max-width: 420px; }

.orkb-hist-body {
  max-height: calc(100vh - 320px); overflow-y: auto; overflow-x: hidden;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 4px 0;
}

/* Con 22-25 filas, saber en qué frente vas importa: el encabezado se
   queda pegado arriba mientras se recorre su grupo. */
.orkb-hist-grupo {
  position: sticky; top: 0; z-index: 1;
  background: var(--energitel-navy); color: #fff;
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 5px 12px; margin: 8px 0 4px;
}
.orkb-hist-grupo:first-child { margin-top: 0; }

.orkb-hist-fila { border-bottom: 1px solid var(--border); padding: 8px 12px 8px 8px; }
.orkb-hist-fila:last-child { border-bottom: none; }

/* Fila híbrida: toggle · identidad · estado · fecha real · Guardar. Los
   otros cuatro campos van plegados (.orkb-hist-detalle), porque la carga
   histórica casi siempre solo necesita estado y fecha real. */
.orkb-hist-linea {
  /* Unico valor cambiado de la grilla: la 1a columna pasa de 26px a 124px
     para que el toggle quepa con su rotulo. Con solo la flecha no se leia
     como control. Las otras cuatro columnas quedan igual.
     align-items pasa de center a end para que el select de estado (sin
     rotulo, porque su propio valor lo nombra) siga alineado abajo con el
     campo de fecha, que ahora lleva rotulo encima. */
  display: grid; grid-template-columns: 124px minmax(180px, 1fr) 150px 150px auto;
  align-items: end; gap: 10px;
}
.orkb-hist-linea select, .orkb-hist-linea input {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px;
  font-size: 13px; font-family: inherit; color: var(--text); background: #fff; width: 100%;
}
.orkb-hist-linea select:disabled, .orkb-hist-linea input:disabled { opacity: .5; }

/* Rotulo corto y PERMANENTE sobre el campo de fecha de la linea visible:
   sin el, una fila plegada mostraba una sola fecha sin rotulo y no habia
   forma de saber si era la programada o la real sin desplegar. Ocupa la
   misma celda de la grilla, no agrega columnas. */
.orkb-hist-campo-linea { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.orkb-hist-campo-linea > span {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-muted); white-space: nowrap;
}

.orkb-hist-toggle {
  border: 1px solid var(--border); background: var(--bg); color: var(--text-muted);
  border-radius: var(--radius-sm); height: 28px; width: 100%; font-size: 11.5px; font-weight: 700;
  cursor: pointer; padding: 0 6px; white-space: nowrap; font-family: inherit;
}
.orkb-hist-toggle:hover { border-color: var(--energitel-blue); color: var(--energitel-blue); }
.orkb-hist-toggle-flecha { font-size: 10px; }

.orkb-hist-id { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.orkb-hist-id b { font-size: 11.5px; font-weight: 800; color: var(--energitel-blue); letter-spacing: .02em; white-space: nowrap; }
.orkb-hist-id span { font-size: 13px; color: var(--text); }
/* Una fila plegada con datos en los campos ocultos no debe parecer vacía. */
.orkb-hist-marca-detalle { font-size: 11px; font-style: normal; color: var(--text-muted); white-space: nowrap; }

.orkb-hist-completado { background: rgba(31,163,92,.06); box-shadow: inset 3px 0 0 var(--success); }

.orkb-hist-detalle { padding: 10px 0 4px 36px; }
.orkb-hist-detalle .form-field i { font-size: 11.5px; color: #8a5300; line-height: 1.4; }

/* Fecha que la hoja devolvió en un formato que <input type="date"> no
   acepta: se muestra cruda y de solo lectura, y NO se envía. Sin esto el
   saneado del navegador la convertiría en '' y el guardado la borraría. */
.orkb-hist-ilegible { background: rgba(242,201,76,.15) !important; color: #8a5300 !important; }

.orkb-hist-estado-fila { font-size: 12.5px; line-height: 1.45; margin: 6px 0 0 36px; }
.orkb-hist-estado-fila:empty { margin: 0; }
.orkb-hist-guardado { color: var(--success); font-weight: 700; }
.orkb-hist-error { color: var(--danger); }
.orkb-hist-neutro { color: var(--text-muted); }

/* Las advertencias NO son errores: la escritura ya ocurrió. Van en ámbar
   junto al hito que las generó, nunca en un toast (showToast tiene un
   único #toast con clearTimeout: dos avisos seguidos se pisan). */
.orkb-hist-avisos { margin-top: 4px; font-weight: 400; }
.orkb-hist-avisos-titulo { font-size: 11.5px; font-weight: 700; color: #8a5300; text-transform: uppercase; letter-spacing: .03em; }

@media (max-width: 900px) {
  .orkb-hist-linea { grid-template-columns: 124px 1fr; }
  .orkb-hist-detalle { padding-left: 0; }
  .orkb-hist-estado-fila { margin-left: 0; }
}

/* --- Filtros propios del tablero (P0-2b) ------------------------------
   #filtersBar es de Gerencia y se oculta en esta vista (ver render()).
   Estos filtran EN CLIENTE lo ya cargado. Reutilizan el mismo look del
   resto de campos de la toolbar (.orkb-hist-field). */
.orkb-hist-field select:disabled { opacity: .55; cursor: not-allowed; }

/* --- Guia de hitos (P2) -----------------------------------------------
   Reutiliza table.data-table de app.css con dos correcciones necesarias:
   sus `th` traen cursor:pointer (heredado de las tablas ORDENABLES de
   Gerencia, aqui engañoso porque esta no se ordena) y sus `td` traen
   white-space:nowrap, que dejaria la columna de descripcion sin envolver y
   la tabla desmesuradamente ancha. Nada se importa de seguimientoOR.css. */
.modal.orkb-modal-guia { width: min(980px, 96vw); text-align: left; }

.orkb-guia-wrap {
  max-height: calc(100vh - 300px); overflow-y: auto;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.orkb-guia-tabla th {
  cursor: default; position: sticky; top: 0; background: #fff; z-index: 1;
}
.orkb-guia-tabla td { white-space: normal; vertical-align: top; }
.orkb-guia-codigo { white-space: nowrap; }
.orkb-guia-codigo b { color: var(--energitel-blue); font-size: 12.5px; letter-spacing: .02em; }
.orkb-guia-desc { color: var(--text-muted); min-width: 260px; }
.orkb-guia-nota { color: var(--text-muted); font-size: 12px; }

/* Encabezado de grupo por proceso: la version huerfana concatenaba los
   grupos sin rotularlos. */
.orkb-guia-tabla tr.orkb-guia-grupo td {
  background: var(--energitel-navy); color: #fff;
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 5px 10px; white-space: nowrap;
}
.orkb-guia-tabla tr.orkb-guia-grupo td i { font-weight: 400; opacity: .75; }
.orkb-guia-tabla tr.orkb-guia-grupo:hover td { background: var(--energitel-navy); }

/* --- Franja de resumen de conteo por columna ---------------------------
   El frente RETIE no cabe en pantalla (9 columnas) y AC tampoco cuando se
   habilite: la franja da la distribucion completa de un vistazo, sin
   scroll horizontal. Muestra el CODIGO del hito (el nombre va en el
   title), y envuelve en pantallas estrechas en vez de tener scroll propio.
   Los conteos salen del MISMO tablero filtrado que las tarjetas.
   SOLO LECTURA: sin cursor, sin hover, sin listeners \u2014 es un indicador,
   no un control. */
.orkb-resumen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 10px 12px; margin-bottom: 12px;
}

.orkb-resumen-item {
  display: inline-flex; align-items: baseline; gap: 6px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 11px; background: var(--frente-bg); white-space: nowrap;
}
.orkb-resumen-item b {
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--frente); font-family: var(--font-mono);
}
.orkb-resumen-item i {
  font-style: normal; font-size: 14px; font-weight: 800; color: var(--text);
}

/* Las columnas sin proyectos se atenuan para que la vista vaya donde hay
   trabajo; las que tienen se quedan con el contraste pleno. */
.orkb-resumen-vacio { opacity: .45; }
.orkb-resumen-vacio b, .orkb-resumen-vacio i { color: var(--text-3); font-weight: 700; }

.orkb-resumen-total {
  margin-left: auto; padding: 4px 8px; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; color: var(--text-2);
}

/* --- Frente RETIE dentro del panel de historial (§6) -------------------
   Sección MÁS del panel, no una vista nueva: va debajo de la lista de hitos
   y reutiliza su lenguaje visual — .orkb-hist-grupo para el encabezado,
   .form-grid/.form-field para los campos y .orkb-hist-estado-fila para los
   mensajes de guardado. Aquí solo va lo que no existía: el marco de los dos
   bloques y la fila de un ciclo de NC.
   Comprobado antes de escribir esto que el archivo no había cambiado
   respecto al inicio de la tarea (criterio de la fase 5). */
.orkb-retie { padding: 4px 12px 0; }
.orkb-retie-bloque { padding: 10px 0 12px; border-bottom: 1px solid var(--border); }
.orkb-retie-bloque:last-child { border-bottom: none; }

.orkb-retie-acciones { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.orkb-retie-acciones .orkb-hist-estado-fila { margin: 0; }

.orkb-retie-ciclos-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.orkb-retie-ciclos-cab b { font-size: 12.5px; font-weight: 800; color: var(--text); }
.orkb-retie-ciclos-cab .orkb-retie-nuevo { margin-left: auto; }

.orkb-retie-lista { display: flex; flex-direction: column; gap: 8px; }

/* Cada ronda de subsanación es una tarjeta propia: con tres o cuatro
   ciclos, sin separación no se distingue dónde empieza cada uno. */
.orkb-retie-ciclo {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 10px 12px; background: #fff;
}
/* Mismo criterio que .orkb-hist-completado para un hito cumplido: franja
   verde a la izquierda, sin repintar el fondo entero. */
.orkb-retie-ciclo-cerrado { background: rgba(31,163,92,.06); box-shadow: inset 3px 0 0 var(--success); }

.orkb-retie-ciclo-cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.orkb-retie-ciclo-cab b { font-size: 11.5px; font-weight: 800; color: var(--energitel-blue); letter-spacing: .02em; }
.orkb-retie-marca { font-style: normal; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.orkb-retie-ciclo-cerrado .orkb-retie-marca { color: var(--success); font-weight: 700; }

/* --- Contadores de plazo y cronómetros en la interfaz (§6/§7) ----------
   Comprobado antes de escribir esto que este archivo no había cambiado
   respecto al inicio de la tarea.

   SIN COLORES NUEVOS: todo sale de las variables de :root que ya usan el
   resto del tablero y del panel — --danger para el atraso, --success para
   lo que va en plazo, --text-muted para lo que no se puede medir y
   --energitel-blue para el cronómetro, que NO es un incumplimiento y por
   eso nunca se pinta en rojo. */
.orkb-plazo {
  display: inline-block; white-space: nowrap; vertical-align: middle;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  border-radius: 999px; padding: 1px 7px; border: 1px solid var(--border);
  color: var(--text-muted); background: var(--muted);
}
/* Un plazo incumplido: es lo único que se pinta como alerta. */
.orkb-plazo-atraso { color: var(--danger); border-color: rgba(179,38,30,.3); background: var(--danger-bg); }
/* Un plazo cumplido o todavía dentro del límite. */
.orkb-plazo-ok { color: var(--success); border-color: rgba(31,163,92,.35); background: rgba(31,163,92,.08); }
/* Un CRONÓMETRO solo mide: ni verde de "cumplido" ni rojo de "incumplido". */
.orkb-plazo-cronometro { color: var(--energitel-blue); border-color: rgba(0,113,188,.3); background: rgba(0,113,188,.07); }
/* Sin fecha programada (o sin origen) no hay nada que medir, y se dice. */
.orkb-plazo-sin-ref { color: var(--text-muted); background: var(--muted); font-weight: 400; }

/* En la tarjeta del tablero va en su propia línea, bajo el responsable. */
.orkb-card-plazo { margin-top: 4px; }