#mappingTypeMenu { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--sf-border); }
#mappingHeaderActions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
#accountingImportControls { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
#accountingImportRight { display: flex; align-items: center; gap: 10px; }
#accountingMappingsFileName { font-size: 0.85rem; color: #706E6B; }
.import-button { display: inline-flex; align-items: center; gap: 6px; }
.import-button svg { width: 14px; height: 14px; }
#mappingTableWrapper { max-height: 480px; overflow-y: auto; overflow-x: auto; }
.table-scroll-wrapper { overflow-x: auto; }
#mappingTable thead th { position: sticky; top: 0; }
#mappingTable, #historyTable, #pendingReviewsTable, #usuariosTable { width: 100%; border-collapse: collapse; }
/* white-space: nowrap keeps each column at its natural content width
   instead of letting header labels wrap onto 2 lines to fit a narrow
   screen - that wrapping was defeating the whole point of the collapsible
   "Filtrar" panel (see common/filter-panel.js's overflowTable option): a
   table that can always shrink to fit never registers as overflowing, so
   the filters panel never collapsed even on a phone. Forcing nowrap here
   lets the table genuinely overflow its .table-scroll-wrapper/
   #mappingTableWrapper at narrow widths, which both triggers the
   collapse and gives the wrapper's own horizontal scroll something real
   to do. */
#mappingTable th, #mappingTable td, #historyTable th, #historyTable td, #pendingReviewsTable th, #pendingReviewsTable td, #usuariosTable th, #usuariosTable td { border: 1px solid var(--sf-border); padding: 6px 8px; text-align: left; white-space: nowrap; }
#mappingTable th, #historyTable th, #pendingReviewsTable th, #usuariosTable th { background: var(--sf-bg); font-size: 0.8rem; text-transform: uppercase; color: var(--sf-navy); }
/* Row data (not column headers) uses a distinct typeface from the rest of the site. */
#mappingTable td, #historyTable td, #pendingReviewsTable td, #usuariosTable td { font-family: var(--font-family-data); }

/* Usuarios: Nombre (1st, variable-length) stays left-aligned like Archivo in
   Archivos generados; Email/Rol/Estado are shorter and centered instead. */
#usuariosTable th:nth-child(2), #usuariosTable td:nth-child(2),
#usuariosTable th:nth-child(3), #usuariosTable td:nth-child(3),
#usuariosTable th:nth-child(4), #usuariosTable td:nth-child(4) {
  text-align: center;
}
.usuarios-actions-cell { display: flex; gap: 8px; }
.usuarios-actions-cell button { flex-shrink: 0; }

/* Archivos generados: every column centered except Archivo (2nd), which
   stays left-aligned since filenames are the one long/variable value. */
#historyTable th, #historyTable td { text-align: center; }
#historyTable th:nth-child(2), #historyTable td:nth-child(2) { text-align: left; }
/* Fecha (1st) and the download action (6th, no header label) shrink to fit
   their own content instead of being stretched by the table's auto layout -
   "width: 1%" + nowrap is the standard trick to size a column to its content
   in an auto-layout table. */
#historyTable th:nth-child(1), #historyTable td:nth-child(1),
#historyTable th:nth-child(6), #historyTable td:nth-child(6) {
  width: 1%;
  white-space: nowrap;
}
/* Shrinks the pill button's own box so a row with "Descargar" is the same
   height as a row with the plain "No disponible" text next to it. */
#historyTable .history-download-button { padding: 3px 14px; }
#mappingTable td input {
  width: 100%; padding: 6px 8px; border: 1px solid transparent; border-radius: 4px; font-size: 0.9rem;
  background: transparent;
}
#mappingTable td input:focus { outline: none; border-color: var(--sf-blue); background: #fff; }
/* border-width: 0 (not just a transparent color) so these contribute
   nothing to border-collapse's conflict resolution - otherwise the
   opaque border on the last real row (or a neighbouring filler row)
   can still win the tie and draw a visible line across blank space. */
#mappingTable tr.filler-row td, #historyTable tr.filler-row td, #pendingReviewsTable tr.filler-row td, #usuariosTable tr.filler-row td { border-width: 0; }
#mappingTable th.sortable, #historyTable th.sortable, #usuariosTable th.sortable { cursor: pointer; user-select: none; }
#mappingTable th.sortable:hover, #historyTable th.sortable:hover, #usuariosTable th.sortable:hover { color: var(--sf-blue); }
.mapping-delete-button { width: 30px; height: 30px; color: var(--sf-red); border-color: var(--sf-border); }
.mapping-delete-button svg { width: 15px; height: 15px; }
.mapping-delete-button:hover { background: #FDECEA; border-color: var(--sf-red); }
#mappingPagination, #historyPagination, #pendingReviewsPagination, #usuariosPagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; font-size: 0.85rem; color: var(--sf-navy); }

/* Reusable filter panel - see common/filter-panel.js. Sits to the left of a
   filterable table as its own card, shared identically across Archivos
   generados, Revisiones Pendientes and Codigos Contables. */
.table-with-filters { display: flex; gap: 20px; align-items: flex-start; }
.table-with-filters > .card:last-child { flex: 1; min-width: 0; }
.filters-panel {
  width: 240px; flex-shrink: 0; box-sizing: border-box;
  background: #fff; border: 1px solid var(--sf-border); border-radius: 4px; padding: 16px;
}
/* Hidden unless .collapsible (see common/filter-panel.js's overflowTable
   check) - on a wide screen where the table already fits, the panel stays
   exactly as it always was, fully expanded, no toggle in sight. */
.filters-panel-toggle {
  display: none; width: 100%; box-sizing: border-box;
  align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid var(--sf-border); border-radius: 4px;
  padding: 10px 14px; font-size: 0.85rem; font-weight: 600; color: var(--sf-navy); cursor: pointer;
}
.filters-panel-toggle::after {
  content: "▾"; font-size: 0.65rem; color: #706E6B; transition: transform 0.15s ease;
}
.filters-panel-toggle.open::after { transform: rotate(180deg); }
.filters-panel.collapsible .filters-panel-toggle { display: flex; }
.filters-panel.collapsible .filters-panel-header,
.filters-panel.collapsible .filters-panel-body {
  display: none;
}
.filters-panel.collapsible.expanded .filters-panel-header { display: flex; margin-top: 12px; }
.filters-panel.collapsible.expanded .filters-panel-body { display: block; margin-top: 12px; }
.filters-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.filters-panel-header h3 {
  margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--sf-navy);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.filters-panel-reset { padding: 5px 10px; font-size: 0.75rem; flex-shrink: 0; }
.filters-panel-field { margin-bottom: 16px; }
.filters-panel-field:last-child { margin-bottom: 0; }
.filters-panel-field label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--sf-navy); margin-bottom: 6px; }
.filters-panel-field input[type="text"] {
  width: 100%; box-sizing: border-box; padding: 8px 12px 8px 34px; border: 1px solid var(--sf-border);
  border-radius: 999px; font-size: 0.85rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23949289' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center; background-size: 14px 14px;
}
.filters-panel-field input[type="text"]:focus { outline: none; border-color: var(--sf-blue); box-shadow: 0 0 0 1px var(--sf-blue); }
.filter-date-range { display: flex; flex-direction: column; gap: 6px; }
.filter-date-range-row { display: flex; align-items: center; gap: 8px; }
.filter-date-range-label { font-size: 0.72rem; font-weight: 600; color: #706E6B; width: 38px; flex-shrink: 0; }
.filter-date-range-row input {
  flex: 1; min-width: 0; box-sizing: border-box; padding: 7px 12px; border: 1px solid var(--sf-border);
  border-radius: 999px; font-size: 0.8rem;
}
.filter-date-range-row input:focus { outline: none; border-color: var(--sf-blue); box-shadow: 0 0 0 1px var(--sf-blue); }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 4px; background: #EEF4FF; color: var(--sf-blue);
  border-radius: 999px; padding: 4px 4px 4px 10px; font-size: 0.78rem; font-weight: 600; max-width: 100%;
}
.filter-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-chip button {
  background: none; border: none; padding: 0; color: var(--sf-blue); cursor: pointer; font-size: 0.65rem;
  display: flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 50%; flex-shrink: 0;
}
.filter-chip button:hover { background: rgba(1, 118, 211, 0.15); }
.filter-option-pills { display: flex; flex-direction: column; gap: 6px; }
.filter-option-pill {
  text-align: left; background: #fff; border: 1px solid var(--sf-border); border-radius: 999px;
  padding: 7px 14px; font-size: 0.8rem; font-weight: 500; color: var(--sf-text); cursor: pointer;
}
.filter-option-pill.selected { background: #EEF4FF; border-color: var(--sf-blue); color: var(--sf-blue); font-weight: 700; }
.filter-toggle-field {
  display: flex; align-items: center; gap: 10px; font-size: 0.85rem; font-weight: 600;
  color: var(--sf-navy); cursor: pointer;
}
.filter-toggle-field input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; position: relative; margin: 0; flex-shrink: 0;
  width: 34px; height: 18px; border-radius: 999px; background: var(--sf-border);
  border: none; cursor: pointer; transition: background-color 0.15s ease;
}
.filter-toggle-field input[type="checkbox"]::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; transition: transform 0.15s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.filter-toggle-field input[type="checkbox"]:checked { background: var(--sf-blue); }
.filter-toggle-field input[type="checkbox"]:checked::before { transform: translateX(16px); }
@media (max-width: 900px) {
  .table-with-filters { flex-direction: column; }
  .filters-panel { width: 100%; box-sizing: border-box; }
  /* flex:1 only constrains width in row layouts - stacked (column) here,
     the card would otherwise grow to fit its widest descendant (the table)
     instead of respecting the viewport, since cross-axis sizing in a column
     flex container isn't clipped by min-width:0 the way main-axis is. */
  .table-with-filters > .card:last-child { width: 100%; box-sizing: border-box; }
}
.history-summary-card {
  flex: 1; min-width: 160px; background: var(--sf-bg); border: 1px solid var(--sf-border);
  border-radius: 4px; padding: 14px 16px;
}
.history-summary-card h3 {
  margin: 0 0 10px; font-size: 0.8rem; line-height: 1.2; color: var(--sf-navy); text-transform: uppercase; letter-spacing: 0.03em;
  /* Reserves room for 2 lines even when the title only needs 1, so the
     value below always sits at the same height across every tile,
     regardless of how long that tile's own title happens to be. */
  min-height: 2.4em;
}
.history-summary-row { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 4px 0; }
.history-summary-row span:first-child { color: #706E6B; }
.history-summary-row span:last-child { font-weight: 600; color: var(--sf-navy); }