/**
 * suraTable.css
 * Estilos complementarios para suraTable.js
 * Requiere Bootstrap 5+ como base.
 */

/* ── Clases de fila: hover ──────────────────────────────────────────────── */
/* Se apunta a td/th para overridear el background-color que Bootstrap aplica
   a nivel de celda con .table-striped y .table (via CSS custom properties) */
.suraHoverRow > td,
.suraHoverRow > th {
  box-shadow: inset 0 0 0 9999px #c4fbff !important;
  color: rgb(255, 74, 74) !important;
}

/* ── Clases de botones de ordenamiento ───────────────────────────────── */
.sura-sortable {
  cursor: pointer;
  user-select: none;
}
.sura-sortable:hover {
  color: #22ff00 !important;
}

/* ── Clases de fila: seleccionada ───────────────────────────────────────── */
.suraSelectedRow > td,
.suraSelectedRow > th {
  box-shadow: inset 0 0 0 9999px #d2ff54f2 !important;
  color: #1212ff !important;
  font-weight: 400 !important;
}

/* ── Clases de fila: seleccionada + hover ───────────────────────────────── */
/*
 * font-weight: bolder SE OMITE INTENCIONALMENTE.
 * Cambiar el peso de fuente altera las métricas de los glifos y provoca
 * que las columnas de la tabla se ensanchen (layout shift inevitable).
 * En su lugar, text-shadow duplica el trazo del glifo visualmente,
 * simulando negrita sin afectar en absoluto el ancho calculado.
 */
.suraSelectedRowHover > td,
.suraSelectedRowHover > th {
  box-shadow: inset 0 0 0 9999px #fffe008f !important;
  color: #f00 !important;
  text-shadow:
    0 0 0.8px #f00,
    0 0 0.8px #f00,
    0 0 0.8px #f00,
    0.4px 0 0.4px #f00,
    -0.4px 0 0.4px #f00 !important;
}

/* Icono de ordenamiento en cabeceras */
.sura-sort-icon {
  font-size: 0.75em;
  opacity: 0.8;
  margin-left: 4px;
}

.sura-sort-none {
  opacity: 0.35;
}

/* Headers ordenables */
th[data-col] {
  white-space: nowrap;
}

/* Celdas de datos: sin saltos de línea para respetar el ancho del contenido */
.sura-datatable-wrapper td {
  white-space: nowrap;
  padding-inline-start: 0.5rem;
  padding-inline-end: 0.5rem;
  vertical-align: middle;
}

th[data-col]:hover .sura-sort-none {
  opacity: 0.7;
}

/* Wrapper general */
.sura-datatable-wrapper {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: lightgrey transparent;
}

/* Paginación alineada */
.sura-datatable-wrapper .pagination {
  margin-bottom: 0;
}

/* Evitar scroll horizontal en tabla responsive */
.sura-datatable-wrapper .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: lightgrey transparent;
}

/* ── Borde de tabla por default ─────────────────────────────────────────── */
.suraTableBorder {
  border: 1px solid #cccccccc;
}

.suraBorderCollapse {
  border-collapse: collapse;
}

/* ── Botones de control: select all (success hover) ─────────────────────── */
.sura-btn-select-all:hover {
  background-color: var(--bs-success) !important;
  border-color: var(--bs-success) !important;
  color: #fff !important;
}

/* ── Botones de control: deselect all (danger hover) ────────────────────── */
.sura-btn-deselect-all:not(.disabled):hover {
  background-color: var(--bs-danger) !important;
  border-color: var(--bs-danger) !important;
  color: #fff !important;
}

/* ── Botones de control: copy (primary hover) ───────────────────────────── */
.sura-btn-copy:not(.disabled):hover {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Dark theme — body.sura-dark-theme
   Tonos slate/azul oscuro. Texto claro pero sin contrastes agresivos.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tabla base ─────────────────────────────────────────────────────────── */
body.sura-dark-theme .sura-datatable-wrapper table {
  color: #cbd5e1;
}

body.sura-dark-theme .sura-datatable-wrapper th,
body.sura-dark-theme .sura-datatable-wrapper td {
  border-color: rgba(71, 85, 105, 0.45);
}

body.sura-dark-theme .suraTableBorder {
  border-color: rgba(71, 85, 105, 0.5);
}

/* ── Cabeceras ──────────────────────────────────────────────────────────── */
body.sura-dark-theme .sura-datatable-wrapper thead th {
  background-color: #1e293b;
  color: #94a3b8;
  border-bottom-color: rgba(71, 85, 105, 0.6);
}

/* ── Filas pares (si se usa striped) ───────────────────────────────────── */
body.sura-dark-theme .sura-datatable-wrapper tbody tr:nth-child(even) td {
  background-color: rgba(30, 41, 59, 0.35);
}

/* ── Hover de fila ──────────────────────────────────────────────────────── */
body.sura-dark-theme .suraHoverRow > td,
body.sura-dark-theme .suraHoverRow > th {
  box-shadow: inset 0 0 0 9999px #c4fbff !important;
  color: rgb(255, 74, 74) !important;
}

/* ── Ordenamiento ───────────────────────────────────────────────────────── */
body.sura-dark-theme .sura-sortable:hover {
  color: #7dd3fc !important;
}

/* ── Fila seleccionada ──────────────────────────────────────────────────── */
body.sura-dark-theme .suraSelectedRow > td,
body.sura-dark-theme .suraSelectedRow > th {
  box-shadow: inset 0 0 0 9999px #d2ff54f2 !important;
  color: #1212ff !important;
  font-weight: 400 !important;
}

/* ── Fila seleccionada + hover ──────────────────────────────────────────── */
body.sura-dark-theme .suraSelectedRowHover > td,
body.sura-dark-theme .suraSelectedRowHover > th {
  box-shadow: inset 0 0 0 9999px #fffe008f !important;
  color: #f00 !important;
  text-shadow:
    0 0 0.8px #f00,
    0 0 0.8px #f00,
    0 0 0.8px #f00,
    0.4px 0 0.4px #f00,
    -0.4px 0 0.4px #f00 !important;
}

/* ── Botones de control ─────────────────────────────────────────────────── */
body.sura-dark-theme .sura-btn-select-all:hover {
  background-color: #166534 !important;
  border-color: #166534 !important;
  color: #bbf7d0 !important;
}

body.sura-dark-theme .sura-btn-deselect-all:not(.disabled):hover {
  background-color: #7f1d1d !important;
  border-color: #7f1d1d !important;
  color: #fecaca !important;
}

body.sura-dark-theme .sura-btn-copy:not(.disabled):hover {
  background-color: #1e3a5f !important;
  border-color: #1e3a5f !important;
  color: #bfdbfe !important;
}

/* ── Paginación: color de texto en dark mode ───────────────────────────── */
body.sura-dark-theme .pagination .page-item .page-link {
  color: #ffffff !important;
}

@media (prefers-color-scheme: dark) {
  .pagination .page-item .page-link {
    color: #ffffff !important;
  }
}