@charset "UTF-8";
/* Estilos generales */
body {
  background-color: #f0f3f5;
  font-family: "Roboto", sans-serif;
  color: #333333;
}

a {
  color: inherit;
  text-decoration: none;
}

.normalTextSize {
  font-size: 1rem;
}

td {
  vertical-align: middle;
}

h1 {
  color: #061F3F;
  font-size: 2rem;
}

.logodiv {
  width: 110px;
  height: 52px;
  background-image: url(/images/cota_logo_light.png);
  background-size: contain;
  background-repeat: no-repeat;
}

.btn {
  padding: 10px 20px 10px 16px;
  border-radius: 6px !important;
  border: none;
}

.btn-primary {
  background-color: #061F3F;
  color: white;
}
.btn-primary:hover {
  background-color: rgb(10.4347826087, 53.9130434783, 109.5652173913);
}

.btn-link {
  color: #061F3F;
}
.btn-link:hover {
  color: #061F3F;
}

.bt-tall {
  height: 58px;
}

.btn span {
  font-size: 33px;
  font-weight: 100;
  vertical-align: sub;
  margin-right: 6px;
  line-height: 20px;
}

.btn-sm {
  padding: 6px 18px 6px 12px;
}

.btn-sm span {
  font-size: 26px;
  line-height: 18px;
}

/* Botones personalizados */
.btn-custom {
  background-color: #061F3F;
}
.btn-custom:hover {
  background-color: rgb(1.5652173913, 8.0869565217, 16.4347826087);
}

/* Navbar */
.navbar {
  background-color: #061F3F !important;
  color: white !important;
}
.navbar .nav-link {
  color: white !important;
}
.navbar .navbar-brand {
  color: white !important;
}

@media (min-width: 992px) {
  .editTable div.row:not(:last-of-type) {
    border-bottom: 1px solid #eaeff3;
  }
}
@media (max-width: 992px) {
  .col-form-label {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.9rem;
  }
}
.editTable .col-form-label {
  font-weight: bold;
}

.small-text {
  font-size: 0.875em;
  color: #6c757d;
}

.input-small-text {
  font-size: 14px;
}

.row {
  --bs-gutter-x: 0;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}

.tabs .tab-link {
  text-decoration: none;
  color: #000;
  padding: 10px 15px;
  margin-right: 10px;
  transition: color 0.3s;
  position: relative;
}

.tabs .tab-link.active {
  font-weight: bold;
}

.tabs .tab-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 3px;
  background-color: #FB4036;
}

.btn-clipboard {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.65em;
  color: #0d6efd;
  background-color: #fff;
  border: 1px solid;
  border-radius: 0.25rem;
}

.btn-clipboard:hover, .btn-clipboard:focus {
  color: #fff;
  background-color: #0d6efd;
}

#upload-area {
  border: 2px dashed #ccc;
  cursor: pointer;
}

#file-list {
  list-style-type: none;
  padding: 0;
}

.file-item {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.hidden {
  display: none;
}

.offcanvas {
  width: 760px !important;
}

.dashboard-card {
  width: 230px;
  min-width: 200px;
  max-width: 240px;
  border-radius: 6px !important;
}

.dashboard-card h5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.card-title {
  font-weight: 400;
  font-size: 1.15rem;
}

.dashboard-card h5 i {
  font-size: 1.5rem;
}

.dropdown-item {
  padding: 0.35rem 0.75rem;
}

.dropdown-menu .dropdown-item i {
  width: 20px;
  text-align: center;
  margin-right: 6px;
}

.materiales .badge {
  --bs-badge-padding-x: 0.35em;
  --bs-badge-padding-y: 0.2em;
  --bs-badge-font-size: 0.9em;
  --bs-badge-font-weight: 400;
}

.input-align-right {
  margin-left: auto;
}

.navbar-nav .nav-link {
  height: 68px;
  line-height: 54px;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  border-bottom: 3px solid #ff6233;
}

.dropdown-item.active, .dropdown-item:active {
  color: inherit;
  background-color: inherit;
  border-bottom: 3px solid #ff6233;
}

.nobr {
  white-space: nowrap;
}

/* Saldos: truncar valores largos con ellipsis */
.balance-amount {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  cursor: default;
}

/* Paginación: permitir que baje de renglón */
.pagination {
  flex-wrap: wrap;
  gap: 6px;
}

.page-item {
  text-align: center;
}

.page-item a {
  font-size: 13px;
  padding: 8px 12px;
  color: inherit;
  border-radius: 5px;
}

.page-item.disabled span {
  font-size: 13px;
  padding: 8px 12px;
  color: inherit;
  border-radius: 5px;
}

.lightText {
  font-weight: 100;
}
.lightText a {
  color: inherit;
}

nav.navbar {
  height: 68px;
  box-sizing: border-box;
  padding: 0;
}

/* =============================================================
   .listTable — listado moderno tipo Gmail
   - Hover de fila con sombra suave + borde izquierdo en primary
   - Acciones que aparecen al hover (desktop) o siempre (mobile)
   - Jerarquía tipográfica más marcada en headers
   ============================================================= */
.listTable {
  border-collapse: separate;
  border-spacing: 0;
}

.listTable thead tr th {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6c757d;
  padding: 0.85rem 0.75rem;
  background-color: transparent;
  border-top: none;
  border-bottom: 1px solid #e9ecef;
}

.listTable tbody tr {
  position: relative; /* Ancla para los íconos de acción que flotan al hover */
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

.listTable tbody tr td {
  padding: 0.65rem 0.75rem;
  font-size: 0.88rem;
  border-bottom: 1px solid #f1f3f5;
  background-color: #fff;
  vertical-align: middle;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* El borde izquierdo "de seleccionado" se monta sobre la primera celda
   para no requerir un border-spacing distinto. Aparece al hover. */
.listTable tbody tr td:first-child {
  position: relative;
  border-left: 3px solid transparent;
}

.listTable tbody tr:hover td {
  background-color: #fafbfc;
  border-bottom-color: transparent;
}

.listTable tbody tr:hover td:first-child {
  border-left-color: var(--bs-primary, #0d6efd);
}

.listTable tbody tr:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  z-index: 1;
}

/* Filas auxiliares (quick-add, empty state, etc.) no deben tener el
   efecto hover de "tarjeta": no son items navegables. Optamos por
   excluir explícitamente clases conocidas en lugar de un opt-in para
   que cada listado nuevo no tenga que recordar agregar una clase. */
.listTable tbody tr.table-light:hover,
.listTable tbody tr.listTable-empty-row:hover {
  box-shadow: none;
}

.listTable tbody tr.table-light:hover td,
.listTable tbody tr.listTable-empty-row:hover td {
  background-color: inherit;
  border-bottom-color: #f1f3f5;
}

.listTable tbody tr.table-light:hover td:first-child,
.listTable tbody tr.listTable-empty-row:hover td:first-child {
  border-left-color: transparent;
}

/* Filas que navegan al hacer click (data-href).
   El cursor se aplica solo a celdas no editables, así CashFlow y
   listados con .editable-cell no sufren feedback engañoso. */
.listTable tbody tr[data-href] td {
  cursor: pointer;
}

.listTable tbody tr[data-href] td.editable-cell,
.listTable tbody tr[data-href] td.listTable-actions-cell {
  cursor: default;
}

/* ---------- Acciones de fila (estilo Gmail: flotantes al hover) ----------
   En desktop, la celda de acciones colapsa a 0px de ancho — todo el espacio
   horizontal lo aprovechan las columnas de contenido. Los íconos viven en
   un wrapper position:absolute anclado al `<tr>` (que es relative), aparecen
   al hover como una "tarjeta" flotante con sombra y fondo blanco, tapando
   visualmente el contenido de la derecha sin reservar ancho.
   En mobile la celda recupera ancho normal para que el kebab siempre visible
   no quede tapando contenido. */
.listTable .listTable-actions-cell {
  width: 0;
  padding: 0;
  white-space: nowrap;
  overflow: visible;
}

.listTable-actions {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  background-color: #fff;
  padding: 4px 8px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 5;
}

.listTable tbody tr:hover .listTable-actions,
.listTable tbody tr:focus-within .listTable-actions {
  opacity: 1;
  pointer-events: auto;
}

.listTable-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: #6c757d;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.listTable-action-btn:hover,
.listTable-action-btn:focus {
  background-color: #eef2f7;
  color: #212529;
  outline: none;
}

.listTable-action-btn.is-danger:hover {
  background-color: #fdecea;
  color: #b02a37;
}

/* Kebab (⋮): en desktop solo muestra las acciones secundarias
   (los items marcados primary se esconden vía CSS). En mobile muestra
   todas las acciones. Si una fila solo tiene acciones primarias, el
   kebab se oculta del todo en desktop. */
@media (min-width: 992px) {
  .listTable-actions .dropdown-menu [data-primary=true] {
    display: none;
  }
  .listTable-actions--no-secondary .listTable-kebab {
    display: none;
  }
}
/* ---------- Responsive: mobile collapsa todo en kebab ---------- */
@media (max-width: 991.98px) {
  /* En mobile recuperamos ancho normal para la celda de acciones (sin hover,
     los íconos están siempre visibles y no pueden flotar tapando contenido). */
  .listTable .listTable-actions-cell {
    width: 1%;
    padding: 0.65rem 0.5rem;
  }
  .listTable-actions {
    position: static;
    transform: none;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    opacity: 1;
    pointer-events: auto;
  }
  .listTable-actions .listTable-action-btn:not(.listTable-kebab) {
    display: none; /* esconder íconos directos */
  }
  .listTable-actions .listTable-kebab {
    display: inline-flex;
  }
}
/* ---------- Empty state ---------- */
.listTable-empty {
  text-align: center;
  padding: 3rem 1rem 3.5rem;
  color: #6c757d;
}

.listTable-empty-icon {
  font-size: 2.5rem;
  color: #ced4da;
  margin-bottom: 0.75rem;
}

.listTable-empty-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.25rem;
}

.listTable-empty-text {
  font-size: 0.88rem;
  margin-bottom: 1.25rem;
}

.import-wizard .step-indicator {
  display: flex;
  gap: 0;
  margin-bottom: 2rem;
}

.import-wizard .step-indicator .step {
  flex: 1;
  text-align: center;
  padding: 0.65rem 1rem;
  background: #e9ecef;
  color: #868e96;
  font-size: 0.9rem;
  font-weight: 400;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
}

.import-wizard .step-indicator .step:first-child {
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
}

.import-wizard .step-indicator .step:last-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%);
}

.import-wizard .step-indicator .step.active {
  background: var(--bs-primary, #0d6efd);
  color: #fff;
}

.import-wizard .step-indicator .step.done {
  background: #10bd6d;
  color: #fff;
}

.import-wizard .step-indicator .step .step-num {
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
}

.mapping-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid #f1f3f5;
}

.mapping-row .col-header {
  font-weight: 700;
  min-width: 175px;
  max-width: 175px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9rem;
}

.mapping-row .sample-vals {
  color: #adb5bd;
  font-size: 0.78rem;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-table th {
  background: #f8f9fa;
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
  font-size: 0.78rem;
}

.preview-table td {
  font-size: 0.8rem;
  white-space: nowrap;
  vertical-align: middle;
}

.preview-table select.form-select {
  font-size: 0.75rem;
  padding-right: 1.75rem !important;
  min-width: 50px;
}

/* Drag & drop zone */
#import-drop-area {
  border: 2px dashed #ccc;
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  border-radius: 0.375rem;
  transition: border-color 0.15s, background 0.15s;
}

#import-drop-area:hover {
  border-color: #0d6efd;
  background: #f0f6ff;
}

#import-drop-area.dragover {
  border-color: #0d6efd;
  background: #e8f1ff;
}

.row-ok {
  background: #f0fff4 !important;
}

.row-warn {
  background: #fff8e1 !important;
}

.row-err {
  background: #fff0f0 !important;
}