/* ============================================================
   Tabla genérica para vista de datos. 
   Ejemplo en: \operaciones\templates\carpeta\list.html
   http://localhost:8000/operaciones/carpetas/
   ============================================================ */
.pef-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  white-space: nowrap;
  border: 2px solid #f3f4f6;
  margin-bottom: 2px;
}

.pef-table > thead > tr th {
  color: rgb(15, 14, 14);
  background-color: #f3f4f6;
}

.pef-table > tbody > tr td {
  /* background: #fff; */
}

.pef-table > tbody > tr > td, th {
  white-space: normal;
  overflow-wrap: break-word;
  padding: 8px 6px;
  border-bottom: 1px solid #e5e5e5;
}

.pef-table> tbody> tr > th + th,
.pef-table> tbody> tr > td + td {
  border-left: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}

.pef-table>thead>tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align:left; 
  color:black;
}

.pef-table tbody tr:hover td {
  background: #f3f5f6 !important;
}

/* Filas clickeables */
.pef-table.click tr td {
  cursor: pointer;
}

.pef-table .freeze {
  position: sticky;
  box-shadow: 2px 0 5px rgba(0,0,0,0.06);
  z-index: 3;
}

.pef-table th.freeze {
  z-index: 4;
}

.pef-table th > div {
  display: flex;
  justify-content: space-between;
}

.pef-button {
  display: inline-flex;
  height: 36px;
  border: 1px solid;
  border-radius: 10px;
  padding: 0 16px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Poner bordes a cualquier tabla interna a pef-table */
.pef-table td td {
  padding: 6px;
  border-left: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
}

.pef-table table {
  border-top: 1px solid lightgray;
  border-right: 1px solid lightgray;
}

.colFilterBtn {
    background-color: #f3f4f6;
    border: none;
    padding: 4px 4px;
    cursor: pointer;
}


.filters {
    /* min-width: 24px; */
    align-content: center;
    margin-left: 6px;
    color: #6b7280;
}

.icon-active {
    color: #2563eb
}

.icon-inactive {
    /* color: #6b7280; */
}

.pef-upload {
  display: inline-block;
  padding: 6px 8px;
  background: #eee;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: pointer;
}

.pef-action {
  padding:4px 10px;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  margin-right:4px;
}

.pef-action.verde {
  border:1px solid #16a34a;
  color:#16a34a;
}

.pef-action.verde:hover {
  background-color: #f0fdf4;
  border-color: #15803d;
  color: #15803d;
}

.pef-action.azul {
  border:1px solid #3b82f6;
  color:#3b82f6;
}

.pef-action.azul:hover {
  background-color: #eff6ff;
  border-color: #2563eb;
  color: #2563eb;
}

.pef-action.rojo {
  border:1px solid #dc2626;
  color:#dc2626;
}

.pef-action.rojo:hover {
  background-color: #fef2f2;
  border-color: #b91c1c;
  color: #b91c1c;
}

.pef-action:disabled {
  color: gray;
  border-color: gray;
  background:#fff;
  cursor: not-allowed;
}