/* =============================================================
   contratos-index.css — estilos propios de contratos/index.html
   Vivían inline en el <head> (hasta 2026-10-09, revisión holística de
   bandejas, fase "un solo sistema de estilos"). Mismo orden en cascada:
   el <link> va donde estaba el <style>.
   ============================================================= */
/* Page-local — kit primitives handle the rest */

/* Hidden estado select drives bj-filtros (preserves JS contract) */
#filtroEstado { display: none; }

/* Resumen / counts inside the table footer */
#resumenContratos {
  display: flex; gap: var(--sp-3); align-items: center;
  font-size: 13px; color: var(--fg-3); flex-wrap: wrap;
}
#resumenContratos strong { color: var(--fg-1); font-weight: 700; }
#resumenContratos .badge {
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  border: 1px solid var(--border-subtle);
  background: var(--surface-card); color: var(--fg-2);
}
#resumenContratos .badge.pendiente { background: var(--chip-diag-bg);     color: var(--chip-diag-fg);     border-color: var(--chip-diag-bd); }
#resumenContratos .badge.aprobado  { background: var(--chip-aprobada-bg); color: var(--chip-aprobada-fg); border-color: var(--chip-aprobada-bd); }
#resumenContratos .badge.completo  { background: var(--chip-lista-bg);    color: var(--chip-lista-fg);    border-color: var(--chip-lista-bd); }

/* Action column — keep buttons inline and visible always (high density) */
.app-table td.acciones {
  white-space: nowrap;
  text-align: right;
}
.app-table td.acciones .btn { margin-left: var(--sp-1); }
/* The ⋯ overflow menu trigger sits flush after the inline CTA. */
.app-table td.acciones .overflow-menu { margin-left: var(--sp-1); vertical-align: middle; }

/* The overflow dropdown is position:absolute and must escape the table
   container; the kit default (.app-table-wrap { overflow-x:auto }) clips
   it. Mirror ordenes-index and make the wrap non-clipping. */
.app-table-wrap { overflow: visible; }

/* Los grupos de filtros por pestaña son display:contents (para fluir en
   la misma barra), y un display en línea le gana al atributo `hidden`:
   la pestaña Gestiones mostraba los chips de estado y composición de
   contratos, que ahí no filtran nada (visto 2026-10-08). */
#filtrosContratos[hidden], #filtrosGestiones[hidden] { display: none !important; }

/* Zebra stripe + readability bump — mirrors ordenes/index. The kit
   default (13px on a 1-row band) felt tight here; bumping td font to
   15px and using a slightly darker tint (#f1f5f9 vs #f8fafc) gives
   the same "agrupado" feel as ordenes. */
table.app-table tbody td { font-size: 15px; padding-top: 12px; padding-bottom: 12px; }
/* La cebra NO puede salir de :nth-child: entre fila y fila va la del
   expediente (oculta, pero el selector la cuenta igual). La marca la pone
   crearFila con .fila-par. */
table.app-table tbody tr.fila-par { background: #f1f5f9; }
table.app-table tbody tr[data-contrato-doc-id]:hover,
table.app-table tbody tr[data-gestion-id]:hover { background: var(--accent-soft, #E6F4FA); }
/* La fila del expediente no lleva zebra ni hover: es un panel, no una fila. */
table.app-table tbody tr[id^="exp-"] > td { padding: 0; }
/* Reskin F4 familia 3 (propuesta .tbl .id): número de contrato mono-azul,
   misma receta que órdenes (.orden-id) y cotizaciones (.cc-cell-num). */
.contrato-id {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-weight: 600; font-size: 13.5px;
  color: var(--accent, #0091D7); white-space: nowrap;
}

/* Equipos peek icon (inline emoji-style in table) */
.equipos-peek {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.equipos-peek:hover { background: var(--accent-soft); }

/* Tooltip floating: estilo vive en .tooltip-floating del kit
   (app-kit-extras.css). Aquí solo override de display por compatibilidad
   con el JS que toggle-ea style.display = 'block'/'none'. */
#equiposTooltip[style*="display: block"] { display: block !important; }

/* Toggle pill: definida en app-kit-extras.css del kit. */