:root {
  --hot-bg: #f5f7fa;
  --hot-fg: #111111;
  --hot-header-bg: #2f6bb0;
  --hot-header-fg: #ffffff;
  --hot-border: #d0d4da;
}

/* Fondo y texto generales */
.handsontable,
.handsontable .wtHolder,
.handsontable .ht_master,
.handsontable .ht_clone_top,
.handsontable .ht_clone_left,
.handsontable .ht_clone_top_left_corner {
  background: var(--hot-bg) !important;
  color: var(--hot-fg) !important;
}

/* Encabezados */
.handsontable th,
.handsontable .myColumnHeader {
  background: var(--hot-header-bg) !important;
  color: var(--hot-header-fg) !important;
  font-weight: 600;
  text-align: center;
}

/* Celdas normales */
.handsontable td {
  background: var(--hot-bg) !important;
  color: var(--hot-fg) !important;
  border-color: var(--surface-border) !important;

  text-align: center !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

/* Inputs o textareas dentro de celdas */
.handsontable input,
.handsontable textarea {
  color: var(--hot-fg) !important;
  border-color: var(--hot-border) !important;
  -webkit-text-fill-color: var(--hot-fg); /* Safari */
}

/* Borde de selección */
.handsontable .current,
.handsontable .area,
.handsontable .ht__highlight {
  border-color: #2f6bb0 !important;
}

/* Errores en HOT */
.handsontable td.htInvalid,
.handsontable td.htInvalidRFC {
  color: #b42318 !important;
  border-color: #e4b1ac !important;
}
.handsontable td:not(.htInvalid):not(.htInvalidRFC) {
  background: var(--hot-bg) !important;
  color: var(--hot-fg) !important;
  border-color: var(--hot-border) !important;
}

/*Si handsontable tiene un checkbox en un th o en un td */
.handsontable thead tr:has(input[type="checkbox"]) th {
  vertical-align: middle !important;
  line-height: 1.2 !important;
}

.handsontable th:has(input[type="checkbox"]) {
  padding-bottom: 0 !important;
}

.handsontable th input[type="checkbox"] {
  margin: 2px auto 0 !important; /* quita el margen inferior */
  display: block;
  background-color: var(--surface-bg);
  float: right !important;
}

.handsontable td input[type="checkbox"] {
  border-color: var(--color-primary) !important;
  line-height: 10px !important;
  margin-left: 4px !important;
}

.handsontable td input[type="checkbox"]:checked{
  border-color: var(--color-primary) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
}