/* ============================================================
   tables-unified.css
   Estilos unificados para todas las tablas de datos de la plataforma eCert.
   Aplicar la clase "table-ecert" a la etiqueta <table>.
   ============================================================ */

/* ── Variables de color ──────────────────────────────────── */

:root {
  /* Fondo de encabezados de tabla y lista */
  --ecert-header-bg: #f0efef;
  /* Color de texto de encabezados */
  --ecert-header-text: #667085;
  /* Fondo de celdas de datos */
  --ecert-cell-bg: #fff;
  /* Color de texto dentro de celdas */
  --ecert-cell-text: #003;
  /* Color de bordes horizontales entre filas */
  --ecert-border: #f0efef;
  /* Fondo al pasar el mouse sobre una fila */
  --ecert-hover-bg: #fcfcfc;
  /* Color de texto al pasar el mouse sobre una fila */
  --ecert-hover-text: rgb(15, 15, 15);
  /* Borde exterior de las listas tipo tabla */
  --ecert-list-border: #ddd;
  /* Fondo de los badges / contadores de empleados */
  --ecert-badge-bg: #f3f3f3;
  /* Fondo de celdas con error o estado crítico */
  --ecert-red: #F78C82;
  /* Fondo de celdas con estado OK o positivo */
  --ecert-green: #C8E6C9;
  /* Fondo de filas alternas (DataTables pares) */
  --ecert-row-alt: #f9f9f9;

  /* ── Variantes de color de encabezado (tablas legacy) ── */
  /* Encabezado cyan */
  --ecert-header-cyan: #00BCD4;
  /* Encabezado teal */
  --ecert-header-teal: #009688;
  /* Encabezado verde */
  --ecert-header-green: #4CAF50;
  /* Encabezado verde lima */
  --ecert-header-lime: #8BC34A;
  /* Encabezado oliva */
  --ecert-header-olive: #C0CA33;

  /* Texto blanco para encabezados legacy de colores vivos */
  --ecert-legacy-header-text: var(--ecert-cell-bg);
}

/* ── Globales de tabla (antes en main.css) ──────────────── */
table {
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  border-collapse: collapse !important;
  line-height: 120% !important;
}

table td {
  padding: 3px !important;
  line-height: 120% !important;
}

/* ── Base ────────────────────────────────────────────────── */
.table-ecert {
  width: auto !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
  font-family: verdana, sans-serif !important;
  font-size: 13px !important;
  margin: 10px auto !important;
  line-height: 120% !important;
}

/* ── Encabezados ─────────────────────────────────────────── */
.table-ecert thead th,
.table-ecert th {
  background: var(--ecert-header-bg) !important;
  color: var(--ecert-header-text) !important;
  padding: 8px 10px !important;
  text-align: left !important;
  font-weight: bold !important;
  word-wrap: break-word !important;
  border: none !important;
}

/* Bordes redondeados en la primera y última celda del thead */
.table-ecert thead tr th:first-child {
  border-top-left-radius: 5px !important;
}

.table-ecert thead tr th:last-child {
  border-top-right-radius: 5px !important;
}

/* ── Celdas de datos ──────────────────────────────────────── */
.table-ecert td {
  padding: 6px 10px !important;
  border-top: 1px solid var(--ecert-border) !important;
  background: var(--ecert-cell-bg) !important;
  color: var(--ecert-cell-text) !important;
  word-wrap: break-word !important;
}

/* ── Hover en filas ─────────────────────────────────────── */
.table-ecert tbody tr:hover td {
  background: var(--ecert-hover-bg) !important;
  color: var(--ecert-hover-text) !important;
}

/* ── Imágenes dentro de celdas ──────────────────────────── */
.table-ecert td img {
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Variantes de color de encabezado ────────────────────── */
.table-ecert.table-header-cyan thead th {
  background: var(--ecert-header-cyan);
}

.table-ecert.table-header-teal thead th {
  background: var(--ecert-header-teal);
}

.table-ecert.table-header-green thead th {
  background: var(--ecert-header-green);
}

.table-ecert.table-header-lime thead th {
  background: var(--ecert-header-lime);
}

/* ── Utilidades de alineación ─────────────────────────────── */
.table-ecert .cell--align-left   { text-align: left !important;   }
.table-ecert .cell--align-center { text-align: center !important; }
.table-ecert .cell--align-right  { text-align: right !important;  }

/* ── Estados / colores de celda ─────────────────────────── */
.table-ecert td.red_cell  { background-color: var(--ecert-red) !important; }
.table-ecert td.green_cell { background-color: var(--ecert-green) !important; }

/* ── Clase standalone para tablas tipo import ──────────── */
.table-import {
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  border-collapse: collapse !important;
  font-family: verdana, sans-serif !important;
  font-size: 13px !important;
  line-height: normal !important;
}

.table-import thead th,
.table-import th {
  padding: 5px 10px !important;
  background: var(--ecert-header-bg) !important;
  color: var(--ecert-header-text) !important;
  text-align: left !important;
  font-weight: bold !important;
  border: none !important;
}

.table-import td {
  padding: 5px 10px !important;
  background: var(--ecert-cell-bg) !important;
  border-top: 1px solid var(--ecert-border) !important;
  color: var(--ecert-cell-text) !important;
  line-height: normal !important;
}

.table-import tbody tr:hover td {
  background: var(--ecert-cell-bg) !important;
}

.table-import td img {
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Modificador ancho automático (ajusta al contenido) ──── */
.table-ecert.table-ecert--fit {
  width: auto !important;
}

/* ============================================================
   LISTAS TIPO TABLA
   Para estructuras <ul><li> que se ven como tablas de datos.
   Aplicar la clase "list-ecert" a la etiqueta <ul>.
   ============================================================ */

.list-ecert {
  list-style: none !important;
  padding: 0 !important;
  margin: 10px auto !important;
  width: 1030px !important;
  border: 1px solid var(--ecert-list-border) !important;
  border-radius: 5px !important;
  overflow: hidden !important;
}

.list-ecert--fullwidth {
  width: 100% !important;
}

/* Header de la lista (primer li o li con clase .list-header) */
.list-ecert > li:first-child,
.list-ecert li.list-header {
  background: var(--ecert-header-bg) !important;
  color: var(--ecert-header-text) !important;
  font-weight: bold !important;
  line-height: 40px !important;
  padding-left: 20px !important;
  border-top-left-radius: 5px !important;
  border-top-right-radius: 5px !important;
}

/* Items de datos */
.list-ecert li {
  background: var(--ecert-cell-bg) !important;
  border-bottom: 1px solid var(--ecert-border) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Hover en items */
.list-ecert li:not(.list-header):hover {
  background: var(--ecert-cell-bg) !important;
}

/* Sub-listas anidadas (árbol jerárquico) */
.list-ecert li ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.list-ecert li ul li {
  background: var(--ecert-cell-bg) !important;
  border-bottom: 1px solid var(--ecert-border) !important;
}

/* El padding general va en la fila flex para no romper alineación */
.list-ecert li .list-ecert-row {
  padding: 10px 20px !important;
}

.list-ecert li.list-header .list-ecert-row {
  padding: 0 20px !important;
  height: 40px !important;
}

.list-ecert li.list-header .col-employees {
  white-space: nowrap !important;
}

.list-ecert li.list-header .col-employees strong {
  white-space: nowrap !important;
}

/* Indentación solo en la columna del nombre (mantiene columnas derechas alineadas) */
.list-ecert > li > ul > li .col-name { padding-left: 20px !important; }
.list-ecert > li > ul > li > ul > li .col-name { padding-left: 40px !important; }
.list-ecert > li > ul > li > ul > li > ul > li .col-name { padding-left: 60px !important; }
.list-ecert > li > ul > li > ul > li > ul > li > ul > li .col-name { padding-left: 80px !important; }

/* Layout flex para filas de lista */
.list-ecert-row {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.list-ecert .col-name {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.list-ecert .col-employees {
  width: 140px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

.list-ecert .col-actions {
  width: 170px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 5px !important;
}

.list-ecert .col-actions a {
  display: inline-block !important;
}

/* Anula floats inline de los botones para que el ancho sea consistente */
.list-ecert .col-actions .button_save {
  float: none !important;
  margin-left: 0 !important;
  display: inline-block !important;
}

/* Badges / contadores */
.list-ecert .mark-employ {
  background-color: var(--ecert-badge-bg) !important;
  border-radius: 3px !important;
  padding: 3px 5px !important;
  width: 100px !important;
  display: block !important;
  text-align: center !important;
  margin: 0 auto !important;
}

/* ── Scroll horizontal ──────────────────────────────────── */
.table-scroll-wrapper {
  overflow: auto;
  width: 100%;
  max-height: calc(100vh - 280px);
}

.table-scroll-wrapper #rounded-corner,
.table-scroll-wrapper #rounded-corner-hist-obj,
.table-scroll-wrapper #task-table {
  max-width: none;
  width: max-content;
  min-width: 100%;
}

/* Encabezados pegajosos */
.table-scroll-wrapper thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* ============================================================
   LEGACY SUPPORT — migrado desde main.css
   Estas reglas mantienen compatibilidad con tablas que usan
   id="rounded-corner", id="rounded-corner-hist-obj" e
   id="task-table".  A largo plazo, migrar a class="table-ecert".
   ============================================================ */

/* ── rounded-corner (azul) ───────────────────────────────── */

#rounded-corner {
  font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif !important;
  font-size: 13px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 95% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
}

#rounded-corner thead th.rounded-company {
  background: var(--ecert-header-bg) !important;
  border-top-left-radius: 5px !important;
}

#rounded-corner thead th.rounded-q4 {
  background: var(--ecert-header-bg) !important;
  border-top-right-radius: 5px !important;
}

#rounded-corner th {
  padding: 5px 10px !important;
  font-weight: bold !important;
  color: var(--ecert-header-text) !important;
  background: var(--ecert-header-bg) !important;
  word-wrap: break-word !important;
  font-family: verdana, sans-serif !important;
}

#rounded-corner td {
  font-size: 95% !important;
  background: var(--ecert-cell-bg) !important;
  border-top: 1px solid var(--ecert-border) !important;
  color: var(--ecert-cell-text) !important;
  padding: 5px 10px !important;
  margin: 0 !important;
  word-wrap: break-word !important;
  font-family: verdana, sans-serif !important;
}

#rounded-corner .bigtable { max-width: 150px !important; }
#rounded-corner td img { padding: 0 !important; margin: 0 !important; }

#rounded-corner tfoot td.rounded-foot-left {
  background: var(--ecert-cell-bg) !important;
  border-bottom-left-radius: 5px !important;
}

#rounded-corner tfoot td.rounded-foot-right {
  background: var(--ecert-cell-bg) !important;
  border-bottom-right-radius: 5px !important;
}

#rounded-corner td.red_cell { background-color: var(--ecert-red) !important; }

/* ── rounded-corner-hist-obj (verde lima) ──────────────────── */
#rounded-corner-hist-obj {
  font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif !important;
  font-size: 13px !important;
  margin: 5px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 95% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
}

#rounded-corner-hist-obj thead th.rounded-company {
  background: var(--ecert-header-lime) !important;
  border-top-left-radius: 5px !important;
}

#rounded-corner-hist-obj thead th.rounded-q4 {
  background: var(--ecert-header-lime) !important;
  border-top-right-radius: 5px !important;
}

#rounded-corner-hist-obj th {
  padding: 5px 10px !important;
  font-weight: bold !important;
  color: var(--ecert-legacy-header-text) !important;
  background: var(--ecert-header-lime) !important;
  word-wrap: break-word !important;
  font-family: verdana, sans-serif !important;
  font-size: 16px !important;
}

#rounded-corner-hist-obj td {
  font-size: 14px !important;
  background: var(--ecert-cell-bg) !important;
  border-top: 1px solid var(--ecert-border) !important;
  color: var(--ecert-cell-text) !important;
  padding: 5px 10px !important;
  margin: 0 !important;
  word-wrap: break-word !important;
  font-family: verdana, sans-serif !important;
}

#rounded-corner-hist-obj .bigtable { max-width: 150px !important; }
#rounded-corner-hist-obj td img { padding: 0 !important; margin: 0 !important; }

#rounded-corner-hist-obj tfoot td.rounded-foot-left {
  background: var(--ecert-cell-bg) !important;
  border-bottom-left-radius: 5px !important;
}

#rounded-corner-hist-obj tfoot td.rounded-foot-right {
  background: var(--ecert-cell-bg) !important;
  border-bottom-right-radius: 5px !important;
}

#rounded-corner-hist-obj td.red_cell { background-color: var(--ecert-red) !important; }

/* ── task-table (oliva) ────────────────────────────────────── */
#task-table {
  font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif !important;
  font-size: 13px !important;
  margin: 5px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 95% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
}

#task-table thead th.rounded-company {
  background: var(--ecert-header-olive) !important;
  border-top-left-radius: 5px !important;
}

#task-table thead th.rounded-q4 {
  background: var(--ecert-header-olive) !important;
  border-top-right-radius: 5px !important;
}

#task-table th {
  padding: 5px 10px !important;
  font-weight: bold !important;
  color: var(--ecert-legacy-header-text) !important;
  background: var(--ecert-header-olive) !important;
  word-wrap: break-word !important;
  font-family: verdana, sans-serif !important;
}

#task-table td {
  font-size: 95% !important;
  background: var(--ecert-cell-bg) !important;
  border-top: 1px solid var(--ecert-border) !important;
  color: var(--ecert-cell-text) !important;
  padding: 5px 10px !important;
  margin: 0 !important;
  word-wrap: break-word !important;
  font-family: verdana, sans-serif !important;
}

#task-table .bigtable { max-width: 150px !important; }
#task-table td img { padding: 0 !important; margin: 0 !important; }

#task-table tfoot td.rounded-foot-left {
  background: var(--ecert-cell-bg) !important;
  border-bottom-left-radius: 5px !important;
}

#task-table tfoot td.rounded-foot-right {
  background: var(--ecert-cell-bg) !important;
  border-bottom-right-radius: 5px !important;
}

#task-table td.red_cell { background-color: var(--ecert-red) !important; }

/* ── DataTables Bootstrap compatibilidad ─────────────────── */
.table-ecert.dataTable {
  width: 100% !important;
  margin: 0 !important;
  table-layout: auto !important;
}

.table-ecert.dataTable thead th {
  background: var(--ecert-header-bg) !important;
  color: var(--ecert-header-text) !important;
  font-family: verdana, sans-serif !important;
  font-weight: bold !important;
  border-bottom: 1px solid var(--ecert-border) !important;
}

.table-ecert.dataTable tbody td {
  background: var(--ecert-cell-bg) !important;
  color: var(--ecert-cell-text) !important;
  font-family: verdana, sans-serif !important;
  border-top: 1px solid var(--ecert-border) !important;
}

.table-ecert.dataTable tbody tr:nth-child(even) td {
  background: var(--ecert-row-alt) !important;
}