/* Bootstrap Validation Summary Override */
:root {
  --text-primary-color-arb: #0067ab;
  --disabled-color-arb: #979797;
  --secondary-color: #f89420;
  --background-main-color: #f4f7ff;
  --font-gray: #6b7280;
}

/* Estilos para el formato de título y descripción en tablas */
.title-description {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.title-description .table-title {
  margin: 0;
}

.title-description .table-description {
  color: #8c8c8c;
  display: block;
  font-size: 11px;
}

/* Estilos para la estructura personalizada de tabla */
.table-responsive {
  overflow-x: auto;
}

.table-wrapper {
  width: 100%;
}


::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #507cc3;
}

::-webkit-scrollbar-thumb:hover {
  background: #173f80;
}

/* DARK MODE */

textarea {
  padding: 7px 12px !important;
}

body.mod-skin-dark {
  background-color: #646464 !important;
}

body.mod-skin-dark .btn-custom {
  background: #26272b;
  color: #a5abb1;
}

body.mod-skin-dark .btn-container {
  background-color: #8c8c8c;
}

body.mod-skin-dark .alert-banner {
  background-color: #3d3d3d;
  color: white;
}

body.mod-skin-dark .inputBackground {
  background-color: #51513b;
}

body.mod-skin-dark ::-webkit-scrollbar-track {
  background: #ababab;
}

/* Esto cambiará el color del thumb del scrollbar */
body.mod-skin-dark ::-webkit-scrollbar-thumb {
  background: #5e5e5e;
}

/* Cambiar el color del thumb del scrollbar al pasar el mouse */
body.mod-skin-dark ::-webkit-scrollbar-thumb:hover {
  background: #424242;
}

/* DARK MODE */

.autorizador {
  display: flex;
  flex-direction: row;
  padding: 10px;
  background-color: #e9e9e9;
  width: 100%;
  margin: 10px;
  max-width: 400px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

.grouper-content {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 24px;
}

.input-background-total {
  font-size: 18px;
  font-weight: 700;
  background-color: #ff030314 !important;
}

.autorizador div:nth-child(1) {
  width: calc(100% - 120px);
}

.autorizador div:nth-child(1) span {
  font-size: 14px;
  color: red;
}

.autorizador div:nth-child(2) {
  width: 120px;
}

.autorizador .autho {
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.autorizador .autho p {
  margin: 0;
  margin-bottom: 10px;
  font-size: 25px;
}

.autorizador .autho input {
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  padding: 10px 15px;
  margin-bottom: 10px;
  background-color: white !important;
  border: 1px solid gray;
  width: 100%;
  box-sizing: border-box;
}


.blocker {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  z-index: 10000;
}

.blocker.active {
  visibility: visible;
  transition: .4s opacity;
  opacity: 1;
}

.info-conciliation-file {
  font-size: 10px;
  opacity: 0;
  max-width: 200px;
  padding: 2px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.document-info {
  font-size: 0.9rem;
}

.document-info i {
  color: var(--primary-color);
  font-weight: 500;
}

.document-info-between {
  justify-content: space-between;
  display: flex;
}

.rcl-amount-positive {
  color: #28a745;
  font-weight: 500;
}

.rcl-amount-positive::before {
  content: '+ ';
}

.rcl-amount-negative {
  color: #dc3545;
  font-weight: 500;
}

.rcl-amount-negative::before {
  content: '- ';
}


.container-general {
  height: 96%;
  max-width: 1800px;
  margin: 0 auto;
}

.validation-summary-valid {
  display: none;
}

.validation-summary-errors ul {
  margin-bottom: 0;
  padding-left: 1rem;
}

.alert.validation-summary-errors {
  margin-bottom: 1rem;
}

.col-0 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 4.166665%;
  flex: 0 0 4.166665%;
  max-width: 4.166665%;
  width: 4.166665%;
}

.col-1 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 8.33333%;
  flex: 0 0 8.33333%;
  max-width: 8.33333%;
  width: 8.33333%;
}

.col-2 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 16.66666%;
  flex: 0 0 16.66666%;
  max-width: 16.66666%;
  width: 16.66666%;
}

.dataTables_empty {
  font-size: 1.5rem !important;
}

/* Reference classes, no implementation */
.base,
.needs-validation,
.flex-start,
.text-faded,
.app-container-demo,
.lang-js,
.lang-csharp,
.has-tooltip,
.has-popover {}

/* Keeps analyzers happy */
.js-waves-off,
.js-waves-on,
.js-get-date,
.js-collapse,
.js-modal-settings,
.js-filter-message,
.js-buttons,
.js-icon-class,
.js-icon-copy,
.js-bg-color,
.js-bg-gradient,
.js-bg-gradient-demo,
.js-bg-target {}

/* Small word wrap correction */
section>ol>li {
  word-break: break-all;
}

code {
  border: 1px solid silver;
  padding: 0.03rem 0.2rem !important;
}

pre.prettyprint {
  border-radius: 0.2rem;
  padding-left: 0.4rem !important;
  padding-right: 0.4rem !important;
}

.documentation h2 {
  color: var(--primary);
}

.documentation th:first-child,
.documentation th:nth-child(3) {
  width: 16%;
}

.documentation blockquote {
  margin-left: 1rem;
  padding: 1rem 1rem 0.01rem 1rem;
  font-weight: 400;
  border-radius: 0 4px 4px 0;
  background: #edf2f9;
  border-left: 3px solid var(--primary);
}

.documentation blockquote.info {
  background: #edf2f9;
  border-left: 3px solid var(--info);
}

.documentation blockquote.warning {
  background: #fff4db;
  border-left: 3px solid var(--warning);
}

.documentation blockquote.danger {
  background: #fadeeb;
  border-left: 3px solid var(--danger);
}

.panel-chart {
  padding: 15px;
  width: 100%;
  background-color: white;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .5);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  min-height: 200px;
  z-index: 100;
}

.panel-chart .title {
  width: 100%;
  min-height: 40px;
}

.title h2 {
  width: 100%;
  margin: 0;
}

.panel-container .title {
  margin: 0 0 0 16px;
}

.panel-container .title h4 {
  font-weight: 600;
  font-size: 20px;
}

.panel-chart .chart-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.panel-chart .panel-loader {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .72);
  top: 0;
  left: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.account-status-drawer {
  width: 100%;
  gap: 20px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  padding: 10px;
  position: relative;
  max-height: 400px;
  z-index: 100;
  border: 1px solid #ccc;
  background-color: #f3f3f3;
  /*-webkit-box-shadow: inset 0px 0px 15px 5px rgba(0,0,0,0.03);
    box-shadow: inset 0px 0px 15px 5px rgba(255,255,255,.5);*/
}

.account-status-drawer::-webkit-scrollbar {
  width: 10px;
}

.account-status-drawer::-webkit-scrollbar-thumb {
  background-color: #ccc;
}

.account-status-drawer>.transaction {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.account-status-drawer>.transaction>.parent {
  background-color: white;
  display: flex;
  gap: 10px;
  min-height: 50px;
  height: 50px;
  position: relative;
  border: 1px solid #ccc;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .1);
  cursor: pointer;
  z-index: 90;
}

.account-status-drawer>.transaction>.parent>div:nth-child(n) {
  height: 100%;
}

.account-status-drawer>.transaction>.parent>.drop {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 5%;
}

.account-status-drawer>.transaction>.parent>.parent-date {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 10%;
  font-size: 10px;
  flex-direction: column;
}

.account-status-drawer>.transaction>.parent>.parent-date>span {
  display: block;
}

.account-status-drawer>.transaction>.parent>.parent-transac {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15%;
}

.account-status-drawer>.transaction>.parent>.parent-transac>span {
  font-weight: bold;
}

.account-status-drawer>.transaction>.parent>.parent-nc {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;
  font-size: 14px;
}

.account-status-drawer>.transaction>.parent>.parent-balance {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;
  font-size: 14px;
}

.account-status-drawer>.transaction>.parent span {
  font-weight: bold;
}

.account-status-drawer>.transaction>.parent>.parent-pago {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;
  font-size: 14px;
}

.account-status-drawer>.transaction>.parent>.parent-status {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 10px;
  width: 10%;
  padding: 10px;
}

.account-status-drawer>.transaction>.childs {
  padding-left: 40px;
  /* background-color: white;*/
  padding-bottom: 10px;
  padding-right: 10px;
  transform: translateY(-50%);
  opacity: 0;
  display: none;
}

.account-status-drawer>.transaction>.childs>.table-responsive {
  background-color: white;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
}

.account-status-drawer>.transaction.show>.childs {
  display: block;
  animation: dropDownList .5s forwards;
}

.account-status-drawer>.transaction.show>.parent>.drop {
  transform: rotate(180deg);
  transition: 0.3s
}

@keyframes dropDownList {
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

/* .inputBackground {
    background-color: #ffffc5 !important;
} */

.centerElement {
  margin-left: 250px;
}


/*Socios*/
.associate-profile-pic {
  width: 100%;
  height: 169px;
  margin-bottom: 24px;
  position: relative;
  border-radius: 4px;
  border: 1px solid #cccccc;
}

.associate-profile-pic.h-95 {
  height: 203px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.associate-profile-pic>img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  position: absolute;
  position: relative;
}

img.full-container {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.associate-input-image {
  appearance: none;
  -webkit-appearance: none;
  visibility: hidden;
  position: absolute;
  width: 0;
  height: 0;
}

.associate-profile-pic .add-icon {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 44px;
  color: #ababab;
}

.associate-profile-pic .icons-open {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  bottom: -24px;
  width: 100%;
  justify-content: center;
  z-index: 999;
}

.associate-profile-pic .icons-open i {
  font-size: 24px;
  color: var(--text-primary-color-arb);
  cursor: pointer;
  animation: subirYBajar 2s normal;
}

.associate-label {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 20;
  cursor: pointer;
  display: flex;
  margin: 0;
}

.associate-label:not(.disable):hover {
  background-color: rgb(0 0 0 / 45%);
  transition: 0.3s;
}

.direction,
.phones,
.grouper {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  position: relative;
  transform: scale(1.4);
  opacity: 0;
  background-color: white;
}

.grouper-paragraph {
  font-weight: 600;
  font-size: 16px;
}

.direction.show,
.phones.show,
.grouper.show {
    transition: 0.4s;
    transform: none;
    opacity: 1;
    z-index: 40;
    /* min-height: 192px; */
}

.min-height {
  min-height: 173px;
}

/*SELECT 2 MY*/
.select2my {
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.select2my,
.select2my * {
  box-sizing: border-box;
}

.select2my.open {
  z-index: 80;
}

.select2my .holder {
  width: 100%;
  height: 34px;
  border: 1px solid #94949478;
  display: flex;
  position: relative;
  padding: 0 0.875rem;
  cursor: pointer;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border-radius: 4px;
}

.select2my .holder .show {
  width: 90%;
  overflow: hidden;
  height: 27.11px;
  display: flex;
  align-items: center;
  font-weight: 400;
  line-height: 1.47;
}

.select2my p {
  margin: 0;
}

.select2my .holder .drop {
  width: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ── Dropdown: oculto por defecto ───────────────────────── */
.select2my .dropdown-select2my {
    display: none;
    /* oculto por defecto */
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 5px;
    position: absolute;
    margin-top: 5px;
    left: 5px;
    width: calc(100% - 10px);
    z-index: 30;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s;
}

/* ── Dropdown: visible cuando open ─────────────────────── */
.select2my.open .dropdown-select2my {
    display: flex;
    /* restaura flex al abrir */
    opacity: 1;
    border-color: #4679cc;
    box-shadow: 0 3px 4px rgba(0, 0, 0, .2);
    z-index: 81;
}

.select2my.open .holder {
  border-color: #4679cc;
}

.select2my.open .holder i {
  color: #4679cc;
  transform: rotate(180deg);
}

.select2my.open .dropdown-select2my {
  visibility: visible;
  transition: 0.3s opacity;
  opacity: 1;
  border-color: #4679cc;
  box-shadow: 0 3px 4px rgba(0, 0, 0, .2);
  padding-bottom: 5px;
  z-index: 81;
}

.select2my.open .dropdown-select2my .search-select2my {
  border-color: #4679cc;
}

/* ── Options container ──────────────────────────────────── */
.select2my-option {
  overflow-x: hidden;
  overflow-y: scroll;
  max-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding-right: 5px;
  padding-bottom: 10px;
}

.select2my-option::-webkit-scrollbar {
  width: 8px;
}

.select2my-option::-webkit-scrollbar-thumb {
  background-color: #4679cc;
}

/* ── Search ─────────────────────────────────────────────── */
.select2my .dropdown-select2my .search-select2my {
  width: 100%;
  display: flex;
  color: #495057;
  background-color: #fff;
  border: 2px solid #E5E5E5;
  border-radius: 4px;
  overflow: hidden;
}

.select2my .dropdown-select2my .search-select2my i {
  display: block;
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.select2my .dropdown-select2my .search-select2my input {
  width: 80%;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 0;
  overflow: hidden;
  height: 37.11px;
  display: flex;
  align-items: center;
  height: calc(1.47em + 1rem + 2px);
  padding: 0.5rem 0.875rem;
  font-weight: 400;
  line-height: 1.47;
  appearance: none;
}

.select2my .dropdown-select2my .search-select2my input:focus {
  appearance: none;
  outline: 0;
  border: 0;
}

/* ── Options ────────────────────────────────────────────── */
.dropdown-select2my .option {
  border: 1px solid #ccc;
  width: 100%;
  padding: 8px 14px;
  border-radius: 5px;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}

.select2my.open .dropdown-select2my .option:hover,
.select2my.open .dropdown-select2my .option.selected {
  color: #fff;
  font-weight: 500;
  background-color: #4679cc;
  transition: 0.2s;
  border-color: #2016ff;
}

.select2my.open .dropdown-select2my .option:active {
  transition: 0.2s;
  transform: scale(.98);
}

/*SELECT 2 MY*/


/*Location Search*/

.blocker-location {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, .5);
  visibility: hidden;
  opacity: 0;
  z-index: 100000;
  width: 100%;
  height: 100%;
  transition: 0.2s;
}


.modal-location {
  width: 80%;
  height: 90%;
  padding: 20px 25px;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

/* Modal Centros de Costo — coordinado con el proyecto */
.modal-cost-center {
  width: 90%;
  max-width: 880px;
  max-height: 85vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

.modal-cost-center__head {
  flex-shrink: 0;
  padding: 0.875rem 1.25rem;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  border-radius: 12px 12px 0 0;
}

.modal-cost-center__head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.modal-cost-center__title-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.modal-cost-center__master-cb-wrap {
  display: flex;
  align-items: center;
  margin: 0;
}


.modal-cost-center__master-cb-wrap .custom-control-label {
  cursor: pointer;
}

.modal-cost-center__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: rgba(0, 103, 171, 0.1);
  color: var(--text-primary-color-arb, #0067ab);
  border-radius: 8px;
}

.modal-cost-center__icon i {
  font-size: 1rem;
}

.modal-cost-center__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: #212529;
  letter-spacing: 0.01em;
}

.modal-cost-center__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: #e9ecef;
  color: #495057;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.modal-cost-center__close:hover {
  background: #dee2e6;
  color: #212529;
}

.modal-cost-center__body {
  flex: 1;
  min-height: 0;
  padding: 0;
}

.modal-cost-center__scroll {
  max-height: 55vh;
  padding: 1rem;
}

.modal-cost-center__footer {
  flex-shrink: 0;
  padding: 1rem 1.25rem;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  border-radius: 0 0 12px 12px;
}

.modal-cost-center__footer-inner {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  width: 100%;
}

.modal-request {
  max-width: 820px !important;
  max-height: 800px !important;

}


.blocker-location.active {
  visibility: visible;
  opacity: 1;
  top: 0;
  left: 0;
}

/* ── Supplier CXP modal: ds-filter-global layout ────────────────────────── */
#cnt_spl_cxp_mdl #spl_cxp_filter_container {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 1.25rem 0.25rem;
}



.body-location {
  width: 100%;
  height: calc(100% - 180.52px);
  padding: 20px;
  display: flex;
  gap: 20px;
}

.selected-button {
  background-color: #3f6ad8;
  color: white !important;
}

.body-location>.shower-location {
  width: calc(100% / 3);
  position: relative;
}

.body-location ul::-webkit-scrollbar {
  width: 5px;
}

.body-location ul::-webkit-scrollbar-thumb {
  background-color: #4679cc;
  border-radius: 10px;
}

.body-location ul {
  width: 100%;
  height: calc(100% - 27.5px);
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

.body-location li {
  list-style: none;
  padding: 10px;
  -webkit-user-select: none;
  user-select: none;
  margin-right: 5px;
}

.body-location ul>li>.group {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}

.body-location ul>li:has(> .group) {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}

.body-location ul>li>.group>ul {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.body-location li:has(> p) {
  border: 1px solid #e9e9e9;
  transition: 0.2s;
}

.body-location li:has(> p):hover,
.body-location li.hightlight {
  background-color: #ffc2415e;
  color: black;
  cursor: pointer;
}

.body-location li.selected {
  background-color: #ffc241;
  color: black;
  font-weight: 500;
}

.body-location h5 {
  color: gray;
}

.body-location p {
  margin: 0;
}

.footer-location {
  width: 100%;
  padding-top: 10px;
  display: flex;
  position: relative;
}

.position-button {
  position: absolute;
  bottom: 4px;
  right: 4px;
}

.footer-location .detail {
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.footer-location .detail p {
  margin: 0;
}

.footer-location .detail p span {
  font-size: 14px;
}

.footer-location .result {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.footer-location .result p {
  margin: 0;
}

.footer-location .ok-btn {
  display: flex;
  flex-direction: column-reverse;
  width: 20%;
  padding: 10px;
}

.font-bold {
  font-weight: 500 !important;
}

.card-badge {
  /* background-color: #4679cc14; */
  color: #000000;
  border-radius: 4px;
  border: 1px solid #80808054;
  margin-left: 12px;
  min-width: 200px;
}

.card-badge p {
    font-weight: 300;
}

.card-badge span {
  color: var(--text-primary-color-arb);
  font-size: 16px;
  font-weight: 500;
}

.custom-bg-success {
  background-color: #c3eadc !important;
  font-size: 14px;
  font-weight: 500;
}

.custom-bg-danger {
  background-color: #efd0d0 !important;
  font-size: 14px;
  font-weight: 500;
}

/* Enter custom CSS rules for your application here */


.size-btn {
  width: 100%;
}

.btn-highlight {
  background-color: #109285;
  color: mintcream;
}

.custon-wrong-border {
  border: solid 1px red;
  box-shadow: 0 0 5px rgb(255 0 0 / 80%);
}


/*Facturas pendientes  en la solicitud de prestamos*/
.table-cabezera {
  position: relative;
}

.table-cabezera .pago-factura {
  width: 30%;
}

.table-cabezera .pago-factura .input-pago {
  height: 35px;
  text-decoration: none;
  line-height: 1.47;
  width: 100%;
}

.table-cabezera .pago-factura .input-group .input-group-append button .dowm {
  font-size: 20px !important;
}

/*    .table-cabezera button {
        position: absolute;
        right: 0;
        top: 38%;
        width: 15%;
        height: 58%;
        border: 0px;
        background-color: #4679cc;
    }*/

.table-cabezera .right {
  position: absolute;
  right: 0;
  top: 0;
}

.input-group .width-select {
  margin-left: -1px;
  width: 100%;
}

.background-disabled {
  background-color: #f3f3f3;
}

/*Menu de la tabla de tabla maestra*/
.menu-container {
  position: absolute;
  box-shadow: 0 0 0px 1PX #00000060;
  background-color: #ffffff;
  min-width: 217px;
  z-index: 999;
  right: 2%;
  border-radius: 4px;
  overflow: hidden;
}

.option-menu-container {
  /* border-bottom: 1px solid; */
  cursor: pointer;
  margin-bottom: 4px;
}

.option-menu-container:hover {
  background-color: #f0f0f0;
  transition: 0.4s;
}

.text-menu-option {
  padding: 6px 12px;
  gap: 6px;
  display: flex;
  align-items: center;
  transition: 0.2s;
  margin: 6px;
  border-radius: 4px;
}

.text-menu-option:hover {
  background-color: #e2e2e2;
}

.text-menu-option p {
  margin: 0;
  text-align: left !important;
}

.text-menu-option.btn-delete i,
.text-menu-option.btn-delete p {
  color: #dc3545;
}

.text-menu-option.btn-delete:hover {
  background-color: #fde8ea;
}

.hr-menu {
  background-color: #c7c7c7;
  height: 1px;
  margin: 0;
  margin: 0 11px 0 11px;
}

.background-ico {
  background-color: #cfcfcf;
}

.table-animation-menu {
  animation-name: bajar;
  animation-duration: 0.4s;
}

/* Menú contextual compacto en listado de detalles de presupuesto */
#bdg_cnt .menu-container.table-animation-menu {
  min-width: 140px;
  font-size: 0.8125rem;
}


#bdg_cnt .menu-container .text-menu-option {
  padding: 4px 10px;
  gap: 6px;
  margin: 4px;
}


#bdg_cnt .menu-container .text-menu-option i {
  font-size: 0.9rem;
}


#bdg_cnt .menu-container .text-menu-option p {
  font-size: inherit;
  margin: 0;
}

/* Overlay “próximamente” sobre bloques de funcionalidad en desarrollo */
.feature-overlay-container {
  min-height: 5rem;
}

.feature-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 50%);
  border-radius: 6px;
  color: #5a6c7d;
  font-size: 0.9rem;
}


.feature-overlay-icon {
  font-size: 1.25rem;
  opacity: 0.85;
}


.feature-overlay-text {
  font-weight: 600;
  letter-spacing: 0.02em;
}


.feature-overlay-subtext {
  font-size: 0.75rem;
  opacity: 0.9;
}

@keyframes bajar {
  0% {
    transform: translateY(-8%);
  }

  100% {
    transform: translateY(0%);
  }
}

.menu-opens-up {
  animation-name: subir;
}

@keyframes subir {
  0% {
    transform: translateY(8%);
  }

  100% {
    transform: translateY(0%);
  }
}

/*Barra progresiva */
.barraProgresivaContenedor {
  display: flex;
  background-color: #f3f3f3;
  border-radius: 4px;
  min-height: 30px;
  margin-top: 14px;
}

.barraContenido {
  background-color: #4679cc;
  min-width: 25%;
}

.pie-barra {
  position: relative;
  display: flex;
  color: forestgreen;
  font-weight: 700;
  font-size: 14px;
}

.porcentaje {
  position: absolute;
  right: 0;
}

.table-scroll {
  display: block;
}

.table-tbody {
  display: block;
  overflow-y: scroll;
}


/*Tablas*/

.table-content {
  width: 100%;
  margin: auto;
  font-size: 12px;
}

.content-table-responsive .table-without-data {
  position: absolute;
  top: 160px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: white;
}

.content-table-responsive .table-without-data img {
  width: 20%;
}

.content-table-responsive .table-without-data h2 {
  color: #721c24;
}

.content-receive-recipe {
  display: flex;
}

.content-receive-recipe .receive {
  display: flex;
  gap: 8px;
}

.content-receive-recipe .check-receive {
  width: 18px;
}

.content-receive-recipe .container-image-recipe {
  margin-bottom: 36px;
}

.content-receive-recipe .container-image-recipe img {
  width: 90px;
}

.table-min-height {
  height: 194px;
  overflow: hidden;
}

.table-content .custom-thead {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  font-weight: 600;
  border-top: 1px solid rgb(212, 212, 212);
  border-bottom: 1px solid rgb(212, 212, 212);
  box-shadow: 0px 2px rgba(128, 128, 128, 0.3294117647);
  color: #2f2f2fbe;
  background-color: #f3f3f38a;
}



.thead-min-height {
  height: 38px
}

.table-content .custom-thead .custom-tr {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  gap: 8px;
  align-items: center;
}

.custom-tr-focus {
  background-color: #dcdcff4f !important;
}

.content-log-auditory {
  background-color: #00000070;
  transition: 0.4s;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 9999;
  display: flex;
  align-items: center;
}

.content-log-auditory .logs {
  right: -600px;
  transition: 0.4s;
  position: absolute;
  height: 94vh;
  box-shadow: 2px 2px 10px #00000050;
  background-color: white;
  z-index: 99999;
  width: 30%;
  border-radius: 4px;
  overflow-y: hidden;
}

.table-content.custom-thead .custom-tr .custom-th {
  font-weight: 700;
}


.table-content .custom-tbody {
  flex-direction: column;
  max-height: 62vh;
  overflow-y: scroll;
}

.observer-sentinel {
  width: 100%;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  pointer-events: none;
  display: block;
}

.table-content .custom-tbody .custom-tr {
  width: 100%;
  display: flex;
  justify-content: center;
  height: auto;
  padding: 10px 0;
  align-items: center;
  box-shadow: 1px 1px 1px 1px rgb(243, 242, 242);
  gap: 8px;
}

.table-content .custom-tbody .custom-tr:hover {
  background-color: #f5f4f4;
  border-radius: 4px;
  box-shadow: 0, 0, 150px rgb(181, 181, 181)
}

.tr-active {
  background-color: #dcdcff4f !important;
  box-shadow: inset 1px 0 0 #3d6fd4, inset -1px 0 0 #597cc5, 0 1px 2px 0 rgb(163 163 163), 0 1px 3px 1px rgb(177 177 177 / 23%);
}

.table-content .custom-thead .custom-tr .custom-th {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  /* align-items: center; */
}

.table-content .custom-tbody .custom-tr .custom-td {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
}

/*max-height*/
.height-170 {
  max-height: 170px !important;
  padding: 0 0 25px 0 !important;
}

.height-120 {
  height: 120px !important;
}

.widt-lg {
  width: 46% !important;
  position: absolute !important;
  z-index: 40;
}

.position-initial {
  position: initial !important;
}

.custom-border-danger {
  border: solid 1px red !important;
  box-shadow: 0 0 4px red !important;
}

.tbPagoFacturaSuper thead tr th:nth-child(1) {
  width: 50px !important;
}

.tbPagoFacturaSuper thead tr th:nth-child(2) {
  width: 100px !important;
}

.tbPagoFacturaSuper thead tr th:nth-child(3) {
  width: 120px !important;
}

.tbPagoFacturaSuper thead tr th:nth-child(4) {
  width: 150px !important;
}

.tbPagoFacturaSuper thead tr th:nth-child(5) {
  width: 150px !important;
}

.tbPagoFacturaSuper thead tr th:nth-child(6) {
  width: 200px !important;
}

.tbPagoFacturaSuper thead tr th:nth-child(7) {
  width: 230px !important;
}

.max-witdh-1200 {
  max-width: 1200px;
}

.max-height-3 {
  max-height: 300px !important;
}

.max-height-4 {
  max-height: 400px !important;
}

.max-height-5 {
  max-height: 500px !important;
}

.max-height-6 {
  max-height: 630px !important;
}

.validate-input {
  border: solid 1px red;
  box-shadow: 0 0 4px red;
  border-radius: 4px;
}

.warning-input {
  border: solid 1px #b46606;
  box-shadow: 0 0 4px #ff7406;
}

/* Badges de Doc. NCF (Nota de Crédito CXP): mismo ancho para alinearlos */
.ncf-badge-cell .badge {
  display: inline-block;
  width: 160px;
  text-align: center;
  white-space: nowrap;
}

/* Comprobante NCF inválido (no es B01 ni E31): sombrea todo el input */
.comprobante-invalid,
.comprobante-invalid:focus {
  border: 1px solid #dc3545 !important;
  background-color: #fdecea !important;
  box-shadow: 0 0 0 0.18rem rgba(220, 53, 69, 0.25) !important;
}

/* CHARACTER LIMIT COUNTER */

.char-limit-counter {
  display: none;
}

.char-limit-counter--warn {
  color: #b46606;
}

.char-limit-counter--error {
  color: #c00;
  font-weight: 600;
}

/*ACCEPT REJECT BUTOM*/

.accept-reject-content {
  position: fixed;
  z-index: -1;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
}

.accept-content-modal {
  height: 0px;
  position: relative;
  width: 500px;
  background-color: white;
  border-radius: 6px;
  overflow: hidden;
  transition: 0.4s;
  left: 0;
  right: 0;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.accept-content-modal.important-modal i,
.accept-content-modal.important-modal h1,
.accept-content-modal.important-modal p {
  color: #DC3545 !important;
}

.accept-content-modal.important-modal #accept-button {
  background: #ff8400 !important;
}


.accept-content-modal.important-modal #reject-button {
  background: #ff0000 !important;
}

.accept-content-modal.important-modal i {
  font-size: 48px !important;
  margin-bottom: 10px !important;
}


.accept-content-modal.shake {
  animation: shake-it forwards 0.4s infinite;
}

@keyframes shake-it {
  0% {
    left: -20px;
  }

  15% {
    left: 0;
  }

  30% {
    right: -20px;
  }

  45% {
    right: 0;
  }

  60% {
    left: -20px;
  }

  75% {
    left: 0;
  }

  90% {
    right: -20px;
  }

  100% {
    right: 0;
  }

}

.show-content-modal {
  background-color: #33333357;
  z-index: 10000;
}

.show-accept-modal {
  height: 250px;
}

.accept-content-modal .text-content {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
}

.accept-content-modal .text-content i {
  font-size: 36px;
  color: #0067ab;
  margin-bottom: 10px;
}

.accept-content-modal .text-content h1 {
  font-size: 24px;
  color: #333333;
  text-align: center;
}

.accept-content-modal .text-content p {
  font-size: 18px;
  color: #7d7d7d;
  text-align: center;
}

.accept-content-modal .button-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
}

.accept-content-modal .button-content button.accept-btn {
  width: 140px;
  height: 40px;
  border-radius: 6px;
  border: none;
  background: var(--text-primary-color-arb);
  color: white;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}

.accept-content-modal .button-content button.accept-btn:active {
  background: #004eab;
}

.accept-content-modal .button-content button.reject-btn {
  width: 140px;
  height: 40px;
  border-radius: 6px;
  border: none;
  background-color: var(--disabled-color-arb);
  color: white;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}

.accept-content-modal .button-content button.reject-btn:active {
  background-color: #828282;
}

/*ACCEPT REJECT BUTOM*/

.btn-container.btn-auto-content {
  height: 111px;
  justify-content: start !important;
  transition: ease 0.4s;
  overflow: hidden;
  scroll-behavior: smooth;
}

.btn-container.btn-auto-content.active {
  height: 550px;
  overflow-y: scroll;
}

.process-row.active {
  background-color: #dcdcff4f !important;
  box-shadow: inset 1px 0 0 #3d6fd4, inset -1px 0 0 #597cc5, 0 1px 2px 0 rgb(163 163 163), 0 1px 3px 1px rgb(177 177 177 / 23%);
}

.loader-menu {
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00000020;
  z-index: 5000;
  padding: 10px;
}

/* HTML: <div class="loader"></div> */
.loader-menu .loaders {
  width: 35px;
  aspect-ratio: 1;
  --c: no-repeat linear-gradient(#fc5921 0 0);
  background:
    var(--c) 0% 50%,
    var(--c) 50% 50%,
    var(--c) 100% 50%;
  background-size: 20% 100%;
  animation: l1 1s infinite linear;
}

@keyframes l1 {
  0% {
    background-size: 20% 100%, 20% 100%, 20% 100%
  }

  33% {
    background-size: 20% 10%, 20% 100%, 20% 100%
  }

  50% {
    background-size: 20% 100%, 20% 10%, 20% 100%
  }

  66% {
    background-size: 20% 100%, 20% 100%, 20% 10%
  }

  100% {
    background-size: 20% 100%, 20% 100%, 20% 100%
  }
}

/* HTML: <div class="loader"></div> */
.general-custom-loader {
  display: none;
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #25b09b;
  --_m:
    conic-gradient(#0000 10%, #000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
  mask: var(--_m);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  animation: l3 1s infinite linear;
}

.general-custom-loader.show {
  display: initial;
}

@keyframes l3 {
  to {
    transform: rotate(1turn)
  }
}



/*Alert Banner*/
.alert-banner {
  transition: right 0.5s;
  border-radius: 5px;
  position: fixed;
  right: -510px;
  bottom: 50px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35);
  height: 125px;
  width: 500px;
  background-color: #E8E8E8;
  overflow: hidden;
  z-index: 500000;
}

.alert-banner.show {
  right: 60px;
}

.alert-banner .object-content {
  display: flex;
  height: 94%;
  align-items: center;
  padding: 0 20px;
}

.alert-banner .object-content .content-icon {
  width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-banner .object-content .content-icon i {
  font-size: 3rem;
  color: white;
}

.alert-banner .object-content .message-content {
  position: relative;
  height: 100%;
  width: 390px;
  display: flex;
  align-items: center;
  padding: 0 15px;
}

.alert-banner .object-content .message-content .message-alert p {
  font-size: 1rem;
  margin: 0;
}

.alert-banner .object-content .exit-content {
  height: 100%;
  position: relative;
}

.alert-banner .object-content .exit-content p {
  font-size: 2rem;
  font-weight: 600;
  position: absolute;
  top: 8px;
  left: 8px;
  cursor: pointer;
}

.icon-container {
  background: #a19d25;
}

.icon-container-warning,
.icon-container-danger,
.icon-container-success,
.icon-container-info {
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
}

.icon-container-warning {
  background: #a19d25;
}

.icon-container-danger {
  background: #b31914;
}

.icon-container-success {
  background: #2ea667;
}

.icon-container-info {
  background: #3daae9;
}

.loader-bar-warning,
.loader-bar-danger,
.loader-bar-success,
.loader-bar-info {
  width: 100%;
  transition: 0.2s;
}

.loader-bar-warning {
  border: solid 5px #a19d25;
}

.loader-bar-danger {
  border: solid 5px #b31914;
}

.loader-bar-success {
  border: solid 5px #2ea667;
}

.loader-bar-info {
  border: solid 5px #3daae9;
}

/*Fin Alert Banner*/
.custom-check {
  width: 20px !important;
  margin-left: 30px !important;
  cursor: pointer !important;
}

.gray {
  color: #808080ab;
}

.label-focus {
  font-weight: 700 !important;
  color: #00000091 !important;
}

.mh-58vh {
  max-height: 58vh !important;
}

.mh-86vh {
  max-height: 86vh !important;
}

.custom-scroll-table {
  overflow-y: scroll;
}

.mh-150 {
  max-height: 150px !important;
}

.mh-186 {
  max-height: 186px !important;
}

.mh-400 {
  max-height: 400px !important;
}

.mh-600 {
  max-height: 600px !important;
  overflow-y: scroll;
}

.content-add-img {
  position: absolute;
  box-shadow: 0 0 10px 2px #aaaaaa30;
  width: 75%;
  height: 167%;
  padding: 10px;
  margin: 10px 24px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-add-img .image-section {
  width: 180px;
  height: 70px;
  object-fit: contain;
}

.blue-shading {
  background-color: #dbfff8;
}

.red-shading {
  background-color: #ffe0e0;
}

.content-add-img i {
  font-size: 5rem;
  opacity: 0.2;
}

.content-add-img i.add {
  position: absolute;
  right: -13px;
  font-size: 1.2rem;
  bottom: -10px;
  opacity: 1;
  color: #2c568e;
  box-shadow: 0px 0px 8px 2px #9a9a9a5e;
  border-radius: 25px;
  padding: 4px 8px;
  z-index: 2;
  transition: 0.4s;
}

.content-add-img i.add label {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
}

.content-add-img i.add:hover {
  transform: translateY(-3px);
  box-shadow: 0px 0px 12px 4px #9a9a9a5e;
}

.content-center-cost {
  overflow-y: scroll;
  height: 70vh;
}

.content-list-center-cost {
  height: 70vh;
  overflow-y: scroll;
}

/* Estilos del perfil */
.content-tree {
  width: 100%;
}

.content-tree ul {
  list-style: none;
  line-height: 2em;
}

.content-tree summary {
  cursor: pointer;
  box-shadow: 0 0 4px 2px #4646463b;
  position: relative;
  padding: 1px 8px 1px 30px;
  border-radius: 8px;
  margin-bottom: 8px;
  font-weight: 700;
  display: flex;
  text-align: center;
  min-height: 30px;
  gap: 4px;
  transition: 0.4s;
}

.content-tree summary img {
  height: 26px;
  display: none;
}

.content-tree summary span {
  width: 70%;
  display: flex;
  justify-content: end;
  text-align: end;
  font-size: 12px;
  line-height: 13px;
  font-weight: 100;
  position: absolute;
  right: 12px;
  letter-spacing: 1px;
}

.content-tree summary::marker {
  display: none !important;
}

.content-tree summary::-webkit-details-marker {
  display: none !important;
}

.content-tree ul li {
  position: relative;
  margin-bottom: 8px;
}

details ul li .span {
  font-weight: 700;
  margin-right: 10px;
  display: flex;
  gap: 6px;
}

details ul li p {
  font-size: 12px;
  /* font-weight: 100; */
  /* letter-spacing: 1px; */
  margin: 0;
}

details ul li .permisos {
  margin-right: 8px;
  border: 1px solid #b1b1b1;
  padding: 8px 6px;
  font-size: 14px;
}

.content-tree ul li::before {
  position: absolute;
  left: -10px;
  top: -8px;
  border-left: 2px solid gray;
  border-bottom: 2px solid gray;
  content: "";
  width: 8px;
  height: 2em;
}

.content-tree ul li::after {
  position: absolute;
  left: -10px;
  bottom: 0px;
  border-left: 2px solid gray;
  content: "";
  width: 8px;
  height: 100%;
}

.content-tree ul li:last-child::after {
  display: none;
}

ul.tree>li:after,
ul.tree>li:before {
  display: none;
}

ul summary::before {
  position: absolute;
  left: -13px;
  top: 0px;
  content: "+";
  background-color: var(--text-primary-color-arb);
  display: block;
  width: 28px;
  height: 33px;
  border-radius: 8px 0 0 8px;
  z-index: 99;
  text-align: center;
  /* line-height: 30px; */
  color: white;
  padding: 2px;
  box-shadow: -2px 0px 4px 2px #4646463b;
}

.box {
  box-shadow: 0 0 2px 1px #7e7c7c70;
  padding: 2px 8px;
  border-radius: 8px;
}

input[type="checkbox"] {
  cursor: pointer;
}

ul details[open]>summary::before {
  content: "-";
}


/* Tabla dinámica */

.content-table-responsive {
  /* min-width: 600px; */
  font-weight: 400;
  font-size: 1.75rem;
  border-radius: 8px;
  padding: 0 20px;
  min-height: 700px;
  position: relative;
  /* box-shadow: 0 0 19px 2px rgba(0, 0, 0, 0.25); */
}

.content-table-responsive .content-filter {
  position: absolute;
  top: 55px;
  right: -15px;
  bottom: 0;
  width: 0px;
  background-color: white;
  border-radius: 4px;
  z-index: 999;
  transition: 0.2s;
  overflow-y: auto;
  min-height: 65vh;
  max-height: 65vh;
}

.content-table-responsive .content-filter .content-btn {
  display: flex;
  gap: 8px;
  margin: 14px;
}

.content-table-responsive .content-filter .content-btn button {
  height: 30px;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border: 1px solid gray;
  transition: 0.2s;
}

.content-table-responsive .content-filter .content-btn button i {
  font-size: 20px;
}

.content-table-responsive .content-filter .content-btn .contract-extensor {
  border: 1px solid #4679cc;
}

.content-table-responsive .content-filter .content-btn .contract-extensor:hover {
  background-color: #5496ff45;
}

.content-table-responsive .content-filter .content-btn .clear-field {
  border: 1px solid #df0000;
}

.content-table-responsive .content-filter .content-btn .clear-field:hover {
  background-color: #ff000021;
}

.content-table-responsive .content-filter .container {
  height: 90%;
  overflow: auto;
  scroll-behavior: smooth;
}

.content-table-responsive .content-filter .filter-footer {
  padding: 0 14px;
  position: absolute;
  bottom: 14px;
  width: 94%;
}

.content-table-responsive .content-filter .filter-footer button {
  background-color: #4679cc;
  border: 1px solid gray;
  border-radius: 4px;
  font-size: 16px;
  color: white;
  padding: 4px 12px;
  width: 100%;
  height: 34px;
}

.content-filter .filter-added {
  /* Estilos para .filter-added cuando está dentro de .content-filter */
  margin: 0 14px;
  display: flex;
  gap: 4px;
  width: 85%;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.content-filter .filter {
  /* Estilos para .filter cuando está dentro de .content-filter */
  transition: 0.2s;
  display: flex;
  align-items: center;
  font-size: 14px;
  gap: 4px;
  padding: 4px 8px;
  background-color: #4679cc21;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
}

.content-filter .filter:hover {
  background-color: #4679cc;
  color: white;
}

.content-filter .text {
  /* Estilos para .text cuando está dentro de .content-filter */
  margin: 0;
  cursor: pointer;
}

.content-filter .delete-added {
  font-weight: 600;
  margin-bottom: 2px;
}

.content-filter .elements-filter {
  margin: 0px 14px;
}

.content-filter .content-field {
  /* Estilos para .row cuando está dentro de .content-filter */
  font-size: 16px;
  margin-bottom: 16px;
}

.content-filter .check-filter {
  /* Estilos para .check-filter cuando está dentro de .content-filter */
  display: flex;
  align-items: center;
  gap: 4px;
}

.content-filter .check-filter .input-check {
  cursor: pointer;
}

.content-filter .check-filter .label-filter {
  margin: 0;
  cursor: pointer;
}


.content-filter .filter-field {
  /* Estilos para .filter-field cuando está dentro de .content-filter */
  margin: 4px 18px;
  width: 87%;
}

.content-filter .filter-field .input-filter {
  width: 100%;
  height: 36px;
  border-radius: 4px;
  padding: 8px;
  border: 1px solid gray;
}

.append-button {
  border-radius: 4px 0 0 4px !important;
}

.content-table-responsive .filter-active {
  box-shadow: -1px 1px 4px 2px #c6c6c6;
  width: 400px;
}

.content-table-responsive .relative span {
  position: absolute;
  top: -19px;
  left: 18px;
  font-size: 16px;
  background: #e8930e;
  width: 20px;
  height: 20px;
  border-radius: 50px;
  display: flex;
  color: white;
  align-items: center;
  justify-content: center;
}

.content-table-responsive .content-filter .title {
  margin: 14px 14px;
}

.content-table-responsive .content-filter .title h4 {
  font-size: 16px;
  font-weight: 600;
}

.content-table-responsive .content-filter .burger-menu {
  left: initial;
  right: 14px;
}

.content-table-responsive .content-entry-application {
  font-size: 1rem;
}

.content-table-responsive .content-entry-application .content-image {
  padding: 10px;
  box-shadow: 0 0 2px 2px gray;
  height: 200px;
  cursor: pointer;
  transition: 0.2s;
}

.highlight-card {
  border: 4px solid #469337 !important;
}

.w-90 {
  width: 90% !important;
}

.modal-body .content-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.content-table-responsive .content-entry-application .content-image:hover {
  transform: translate(0px, -5px);
}

.content-table-responsive .content-entry-application .content-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mix-height-600 {
  min-height: calc(100vh - 110px);
  /* position: relative; */
  overflow: hidden;
}

.mix-height-490 {
  min-height: 490px;
  position: relative;
}

.content-table-responsive .table-header {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: end;
  font-size: 1rem;
  margin-bottom: 12px;
}

.content-table-responsive .table-header .content-search {
  display: flex;
  align-items: center;
  padding: 0;
  gap: 10px
}

.content-table-responsive .table-header .content-search .btn-filter {
  cursor: pointer;
  padding: 4px 12px;
  border: 1px solid gray;
  border-radius: 4px;
  background-color: #4679cc;
  color: white;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  gap: 8px;
  position: relative;
}

.btn-filter .filter-active {
  position: absolute;
  left: -15px;
  top: -15px;
  width: 28px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 28px;
  border-radius: 50%;
  box-shadow: 0 0 3px 1px red;
}

.btn-filter .filter-active p {
  color: #f40000;
  font-weight: 600;
  font-size: 22px;
}


.content-table-responsive .table-header .content-search .btn-filter label {
  margin: 0;
  cursor: pointer;
  font-size: 18px;
  font-weight: 300;
}

.content-table-responsive .table-header .content-search .input {
  max-width: 214px;
}

.content-table-responsive .table-header .content-search p {
  margin: 0;
}

.content-table-responsive .table-header .content-search input {
  font-size: 0.9rem;
  height: 24px;
  border-radius: 6px;
  border: 1px solid gray;
  padding: 14px 12px;
  width: 100%;
}




.content-table-responsive .table-header .content-search select {
  font-size: 0.9rem;
  height: 30px;
  border-radius: 6px;
  border: 1px solid gray;
  padding: 2px 12px;
  cursor: pointer;
  width: 100%;
}

.content-table-responsive table {
  font-size: 0.9rem;
  width: 100%;
}

.content-table-responsive table thead {
  box-shadow: 0px 2px rgba(128, 128, 128, 0.3294117647);
  color: #2f2f2fbe;
  background-color: #f3f3f38a;
}

.table-responsive table thead {
  box-shadow: 0px 2px rgba(128, 128, 128, 0.3294117647);
  color: #2f2f2fbe;
  background-color: #f3f3f38a;
}

.content-table-responsive table thead tr th {
  padding: 4px 20px 4px 4px;
  position: relative;
  /* cursor: pointer; */
}

.table-responsive table thead tr th {
  padding: 4px 20px 4px 4px;
  position: relative;
  /* cursor: pointer; */
}


.content-table-responsive table tfoot tr th {
  padding: 4px 20px 4px 4px;
  position: relative;
  /* cursor: pointer; */
}

.table-responsive table tfoot tr th {
  padding: 4px 20px 4px 4px;
  position: relative;
  /* cursor: pointer; */
}

.content-table-responsive table thead tr .th.order-column::after {
  content: "▲";
  color: rgba(128, 128, 128, 0.4117647059);
  position: absolute;
  right: 4px;
  transition: 0.2s;
  bottom: 4px;
}

.table-responsive table thead tr .th.order-column::after {
  content: "▲";
  color: rgba(128, 128, 128, 0.4117647059);
  position: absolute;
  right: 4px;
  transition: 0.2s;
  bottom: 4px;
}

.content-table-responsive table thead tr .th[data-order="desc"]::after {
  transform: rotate(180deg);
  right: 8;
  bottom: 10px;
}

.content-table-responsive table tbody {
  font-weight: 300;
}

.content-table-responsive table tbody tr:nth-child(even) {
  /* box-shadow: 0px 1px rgba(128, 128, 128, 0.3294117647); */
  background-color: #f5f5f58c;

}

.content-table-responsive table tbody tr:hover {
  transition: 0.2s;
  background-color: #ededed;
  border-radius: 4px;
}

.table-responsive table tbody tr:hover {
  transition: 0.2s;
  background-color: #ededed;
  border-radius: 4px;
}

.hover-table-record:hover {
  background-color: var(--primary-color) !important;
  color: white !important;
  border-radius: 4px;
}

.content-table-responsive table tbody tr td,
.content-table-responsive table tfoot tr td {
  padding: 4px 20px 4px 4px;
  vertical-align: middle;
}

.table-responsive table tbody tr td,
.table-responsive table tfoot tr td {
  padding: 4px 20px 4px 4px;
  vertical-align: middle;
}

.content-table-responsive table tbody tr td i.delete {
  color: red;
  font-size: 24px;
  cursor: pointer;
}

.custom-tbody div i.delete {
  color: red;
  font-size: 24px;
  cursor: pointer;
}

.content-table-responsive table tbody tr td img {
  width: 80px;
  height: 60px;
  object-fit: contain;
}

.content-table-responsive table tbody .tr-color {
  background-color: rgba(77, 77, 77, 0.031372549);
}

.content-table-responsive .table-footer {
  margin-top: 8px;
  display: flex;
  padding: 4px;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
}

.position-absolute {
  position: absolute;
  bottom: 0;
  width: 96%;
}

.content-table-responsive .table-footer .content-left {
  display: flex;
  gap: 4px;
  font-size: 0.9rem;
}

.content-table-responsive .table-footer .content-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

.content-table-responsive .table-footer .content-right button {
  cursor: pointer;
  border: 0;
  height: 38px;
  padding: 8px 12px;
  border-radius: 4px;
  transition: 0.2s;
  background-color: white;
}

.content-table-responsive .table-footer .content-right button:hover {
  background-color: gray;
  color: white;
}

.content-table-responsive .table-footer .content-right .content-pages {
  display: flex;
  gap: 8px;
}

.content-table-responsive .table-footer .content-right .content-pages .box {
  font-size: 1.2rem;
  padding: 8px 8px;
  height: 24px;
  text-align: center;
  transition: 0.2s;
  border-radius: 4px;
  cursor: pointer;
  height: 38px;
  box-shadow: initial;
}


.content-table-responsive .table-footer .content-right .content-pages .box:hover {
  background-color: rgba(128, 128, 128, 0.1803921569);
}

.content-table-responsive .table-footer .content-right .content-pages .page-number.active {
  background-color: rgba(128, 128, 128, 0.1803921569);
}

/* Fin de la tabla dinámica   */
.text-left {
  text-align: left;
}

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

.text-right {
  text-align: end;
}

.icon-help {
  color: #b7770d;
  font-weight: 900;
  font-size: 24px;
  margin-bottom: 4px;
  cursor: pointer;
}

.modal.show.background-shadow {
  background: #00000030 !important;
}

.secondary-img-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  justify-items: center;
  align-items: center;

}

.secondary-img-content figure {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0;
}

.secondary-img-content figure img,
.content-image figure img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.secondary-img-content figure i {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 24px;
  background: red;
  border-radius: 20px;
  color: white;
  cursor: pointer;
}

.content-image figure img {
  width: 100%;
  height: 100%;
}

.disable {
  transition: 0.4s;
  filter: grayscale(1);
  cursor: initial !important;
}

.text-link {
  color: #007bff;
  border-bottom: 1px solid #007bff;
}

.btn.disabled {
  cursor: initial !important;
}

.content-recipe {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-recipe .icon-recipes {
  position: absolute;
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.click-select-image {
  padding: 4px 8px;
  background-color: var(--text-primary-color-arb);
  color: white;
  border-radius: 8px;
  position: absolute;
  bottom: 20%;
  z-index: 20;
  font-size: 16px;
  box-shadow: 0 0 4px 3px #1a1a1a2c;
  letter-spacing: 1px;
  cursor: pointer;
  animation: subirYBajar 1s normal;
}

@keyframes subirYBajar {

  0%,
  100% {
    transform: translateY(0);
    /* Posición inicial y final (sin desplazamiento vertical) */
  }

  50% {
    transform: translateY(-8px);
    /* Subir 20px a la mitad de la animación */
  }
}

.content-image-recipe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 4px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: scroll;
  overflow-x: hidden;
}

.content-image-recipe figure {
  width: 70px;
  height: 60px;
  position: relative;
  transition: 0.4s;
}

.content-image-recipe figure img {
  width: 100%;
  height: 100%;
  transition: 0.4s;
  cursor: pointer;
  object-fit: contain;
}

.content-image-recipe figure:hover {
  transform: translateY(-4px);
}

.content-image-modal {
  min-height: 80vh;
  width: 100%;
}

.content-image-modal figure {
  width: 100%;
}

.content-image-modal figure img {
  width: 100%;
}

.icon-delete {
  position: absolute;
  top: 2px;
  right: 6px;
  font-size: 16px;
  color: white;
  background-color: red;
  padding: 2px;
  border-radius: 25px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}

.right-left {
  padding: 4px 8px;
  background-color: var(--text-primary-color-arb);
  color: white;
  border-radius: 8px;
  position: absolute;
  bottom: 20%;
  right: 20%;
  z-index: 20;
  font-size: 16px;
  box-shadow: 0 0 4px 3px #1a1a1a2c;
  letter-spacing: 1px;
  cursor: pointer;
  transition: 2s;
  animation: animationBottom 2s forwards;
}

.scroll-content-event {
  max-height: 70vh;
  overflow-y: scroll;
}

.municipality-row {
  padding: 10px !important;
}


.sectors-content {
  padding: 4px 16px;
}

.order-process-detail-content {
  display: grid;
  text-align: center;
  grid-template-columns: 100px 180px 120px minmax(190px, auto);
}

.order-content {
  display: flex;
  flex-direction: column;

}

.text-tiny {
  color: #868686;
}

.text-large {
  font-size: 18px;
  font-weight: 900;
}

.loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(farthest-side, #ffa516 94%, #0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%, #ffa516);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
  mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
  animation: l13 1s infinite linear;
}

@keyframes l13 {
  100% {
    transform: rotate(1turn)
  }
}

.text-success-custom {
  font-weight: 600;
  color: #00ad00 !important;
}

.text-danger-custom {
  font-weight: 600;
  color: red !important;
}

.bg-danger-custom {
  background: #ff000026 !important;
}

.assignation-table {
  height: 100% !important;
  max-height: 60vh !important;
  min-height: 60vh !important;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

.assignation-table.remove-mode {
  background: #ffcbcb;
}

.assignation-table.remove-mode .product-card {
  background: #ff9292 !important;
  color: black !important;
}

.product-card {
  border: solid 1px #ccc;
  border-radius: 4px;
  margin: 6px;
  padding: 10px;
  transition: 0.4s;
}

.product-card p {
  margin: 0;
}

.product-card .head-card {
  text-align: center;
  font-size: 18px;
}

.product-card .marc-product {
  font-weight: 600;
}

.product-card .product-content {
  font-size: 15px;
}

.product-card .product-content .marc-barcode {
  display: flex;
  justify-content: space-between;
}

.product-card .product-content p:nth-child(1),
.product-card .product-content p:nth-child(2) {
  margin-bottom: 6px;
}

.product-card .product-content p span {
  font-weight: 600;
}

.product-quantity-content {
  display: flex;
  justify-content: space-around;
  text-align: center;
  padding: 6px;
  box-shadow: 1px 1px 4px #00000070;
  border-radius: 4px;
}

.quantity-pack {
  font-size: 20px;
  font-weight: 600;
}



.order-card {
  box-shadow: 0px 0px 3px #00000080;
  border-radius: 4px;
  padding: 10px;
  padding-bottom: 4px;
  margin-bottom: 12px;
  cursor: pointer;
  position: relative;
}

.order-card:hover {
  background-color: #00000010;
}

.order-card.active {
  background-color: #00f7ff2c;
}

.remove-order {
  position: absolute;
  top: -8px;
  right: -6px;
}

.remove-order i {
  background: #c70000;
  border-radius: 50px;
  color: white;
  font-size: 22px;
}

.remove-order i.disabled {
  background: #c7c7c7;
  pointer-events: none;
}

.order-card .top-card {
  display: grid;
  grid-template-columns: 26px auto 26px;
  align-items: center;
  justify-items: center;
  border-bottom: solid 1px #ccc;
  padding-bottom: 6px;
}

.order-card .top-card .sub-menu {
  cursor: pointer;
  transition: 0.2s background-color;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  border-radius: 25px;
}

.order-card .top-card .sub-menu:hover {
  background-color: #00000020;
}

.order-card .top-card .sub-menu:active {
  background-color: #00000030;
}

.order-card .top-card i {
  font-size: 26px;
}

.order-card .top-card p,
.order-card .bottom-card p {
  font-size: 18px;
  margin: 0;
}

.order-card .bottom-card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 4px;
}

.packaging-card {
  display: grid;
  grid-template-columns: 30px auto 20px;
  font-size: 18px;
  align-items: center;
  padding: 10px;
  box-shadow: 0px 0px 2px #00000080;
  margin-bottom: 10px;
  border-radius: 4px;
  gap: 4px;
  cursor: pointer;
  transition: 0.1s background-color;
  position: relative;
}

.packaging-card:hover {
  background-color: #00000010;
}

.packaging-card.active {
  background-color: #00f7ff2c;
}

.packaging-card p {
  margin: 0;
}

.packaging-card i {
  font-size: 22px;
}

.article-head {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr 1fr;
  gap: 6px;
  padding: 6px;
  padding-bottom: 0;
  font-weight: 600;
  border-bottom: solid 1px #ccc;
}

.article-row {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr 1fr;
  gap: 6px;
  padding: 6px;
}


.article-row .article-td:nth-child(3),
.article-row .article-td:nth-child(4),
.article-head .article-td:nth-child(3),
.article-head .article-td:nth-child(4) {
  text-align: right;
}

.article-row label {
  font-size: 14px;
  font-weight: 600;
}

.article-row p {
  margin: 0;
}

.article-row p {
  font-size: 16px;
}

.product-card.counting {
  background-color: #eeff0736;
}

.product-card.complete {
  background-color: #4efc232e;
}

.product-card.selected {
  background-color: #2378fc2e !important;
}

.assignation-table.remove-mode .product-card.selected {
  background-color: #e90000ba !important;
  color: white !important;
}

.province-selected li details .province-summary {
  background-color: #d1d1ff !important;
}

.municipality-selected details .municipality-summary {
  background-color: #d1ffd1 !important;
}

@keyframes animationBottom {
  to {
    right: -10px;
    bottom: 0;
  }
}

.label-active {
  font-weight: 700;
  color: var(--text-primary-color-arb);
}

.input-modify {
  /* border: 2px solid #c17612; */
  background-color: #bc7f2321 !important;
}

.label-identification {
  cursor: pointer;
}

.rotate-text-area {
  transform: rotateY(170deg);
  transition: 0.4s;
}

.rotate-content-tree {
  transform: rotateY(-170deg);
  transition: 0.4s;
}

.content-entrance {
  height: 584px;
  overflow-y: scroll;
}

tr.selected,
.custom-tr.selected {
  background-color: #7000ff1c !important;
}

.danger-custom.active {
  background-color: #e73358 !important;
  color: white !important;
}

.nav-menu li a i {
  display: flex;
  justify-content: center;
  color: #98b2da !important;
  font-size: 18px !important;
}

.image-promotion {
  max-height: 300px;
  min-height: 300px;
  height: 100%;
}

.image-promotion i {
  transition: background-color 0.2s;
  cursor: pointer;
  border-radius: 50px;
}

.image-promotion i:hover {
  background-color: #00000030;
}

.selected-content {
  border: solid 3px #00c8ff92;
  transform: translateY(-6px) !important;
  background-color: #00fff71a;
}

.article-text-content {
  font-size: 1.6rem;
  padding: 20px 60px;
  box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1254901961);
  border-radius: 6px;
  border: solid 1px;
  font-size: 18px;
  height: 60vh;
  overflow-y: scroll;
}


.codex-editor__redactor {
  padding-bottom: 0 !important;
}

.ce-paragraph {
  font-size: 1.2rem;
}

.ce-header {
  font-weight: 600;
}

h1.ce-header {
  font-size: 2.2rem;
}

h2.ce-header {
  font-size: 1.8rem;
}

h3.ce-header {
  font-size: 1.4rem;
}

h4.ce-header {
  font-size: 1.2rem;
}

h5.ce-header {
  font-size: 1.0rem;
}

h6.ce-header {
  font-size: 0.8rem;
}

.cdx-quote__text {
  font-size: 1.4rem;
}

.cdx-input {
  font-size: 1.4rem;
}

.ce-block b {
  font-size: 1.4rem;
}

.ce-block i {
  font-size: 1.4rem;
}

.ce-block a {
  font-size: 1.4rem;
}

.modal-xxl {
  max-width: 1220px !important;
}

.text- .ce-block b::selection,
.ce-block i::selection,
.ce-block a::selection {
  background: #000000;
  color: #fff;
}

.ce-block__content {
  max-width: none;
}

.ce-toolbar__actions.ce-toolbar__actions--opened {
  background: #6d6d6d !important;
}

.ce-block .ce-block__content {
  padding: 0 10px !important;
}

.ce-block--selected .ce-block__content {
  background: #e8ebb2 !important;
}

.ce-inline-toolbar {
  background: #6d6d6d !important;
}

.ce-inline-toolbar__dropdown:hover {
  background: #535353 !important;
}

.ce-inline-toolbar__buttons button:hover {
  background-color: #535353 !important;
}

/* CARD CONTACT */
.content-contact {
  width: 100%;
  max-width: 600px;
  background-color: white;
  padding: 15px 42px;
  height: auto;
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 46px;
  font-family: "Inter Tight", sans-serif;
}

.content-contact p {
  margin: 0;
  font-size: 16px;
}

.content-contact b {
  font-weight: 600;
}

.content-contact .call {
  width: 120px;
  min-width: 120px;
  display: flex;
  justify-content: center;
  height: 120px;
  min-height: 120px;
  align-items: center;
  border-radius: 50%;
  box-shadow: 0 0 11px 8px #c9c4c440;
}

.content-contact .reght .title p {
  font-size: 24px;
  margin-bottom: 4px;
  font-weight: 600;
}

.content-contact .reght .gmail {
  font-weight: 300;
}

.content-contact .reght .gmail p {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all;
}

.content-contact .reght .phone {
  font-weight: 300;
}

.personal-loader {
  background-color: #000000a1;
  height: 104%;
  position: absolute;
  left: -24px;
  top: -8px;
  width: 104%;
  order: 10;
  z-index: 10410;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none;
  user-select: none;
  visibility: hidden;
  opacity: 0;
}

.personal-loader.active {
  animation: loaderBlockerActivate .3s forwards ease-in;
}

.personal-loader.active {
  animation: .3s loaderBlockerActivate forwards;
}

.personal-loader.disable {
  animation: loaderBlockerDisable .3s forwards;
}

.loader-personal-content {
  width: 200px;
  aspect-ratio: 1;
  display: grid;
  border: 10px solid #0000;
  border-radius: 50%;
  border-color: var(--primary-color) #00000000;
  animation: l16 1s infinite linear;
}

.loader-personal-content::before,
.loader-personal-content::after {
  content: "";
  grid-area: 1/1;
  margin: 2px;
  border: inherit;
  border-radius: 50%;
}

.loader-personal-content::before {
  border-color: #a1a1a1 #ffffff00;
  animation: inherit;
  animation-duration: .5s;
  animation-direction: reverse;
}

.loader-personal-content::after {
  margin: 8px;
}

.min-h200 {
  min-height: 200px !important;
}

.no-wrap {
  flex-wrap: nowrap !important;
}

.color-square {
  width: 40px;
  height: 40px;
  border-radius: 50px;
  margin-top: 8px;
}

.btn-custom-danger {
  background-color: #fd3939 !important;
  border-color: #f50000 !important;
  color: white !important;
}

.page-content {
  overflow-x: auto;
  overflow-y: auto;
  background-color: var(--background-main-color) !important;
  /* padding: 0; */
  /* margin: 1.5rem 2rem; */
}

.article-on-package {
  background: #e7ffe5;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px;
}


.counting .article-on-package {
  background-color: #f6ffe5;
}

.selected .article-on-package {
  background-color: #e5ebff;
}

.remove-mode .article-on-package {
  background-color: #ffe5e5 !important;
}

.remove-mode .selected .article-on-package {
  color: black;
}


.container-elements-profile {
  box-shadow: 3px 3px 1px 1px #9d9d9d14;
}

.container-elements-profile .input-group {
  position: sticky;
  top: -24px;
}

.container-elements-profile .select-all-permission {
  padding: 2px 12px;
  display: flex;
  gap: 8px;
  border: 2px solid var(--secondary-color);
  width: 95%;
  margin: 4px 0;
  border-radius: 4px;
}

.container-elements-profile label {
  margin: 0;
}

.container-elements-profile .element-permission {
  border-left: 2px solid var(--secondary-color) !important;
  display: flex;
  gap: 8px;
}

.container-elements-profile .element-permission label {
  margin: 0;
  pointer-events: none;
}

.container-elements-profile .element-permission input {
  pointer-events: none;
}

.container-elements-profile .element-permission:hover {
  background-color: var(--secondary-color) !important;
  font-weight: 700;
  color: black !important;
}


.content-element {
  max-height: 380px;
  overflow-y: scroll;
  padding: 0 10px 0 0;
}

.content-element .element {
  padding: 8px;
  display: flex;
  align-items: center;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  margin: 12px 0 12px 0;
  min-height: calc(0.9em + 1rem + 2px);
  border: 1px solid var(--primary-color);
  border-left: 2px solid var(--secondary-color);
}

.element-active {
  background-color: var(--primary-color) !important;
  color: white;
}

.element-permission-active {
  background-color: var(--secondary-color);
  color: black;
  font-weight: 700;
}

.content-element .element:hover {
  background-color: var(--primary-color);
  color: white;
  transition: 0.2s;
}

.content-element .element p {
  margin: 0;
  font-weight: 500;
}

.content-button-record {
  width: 98%;
  display: flex;
  justify-content: end;
  transition: 0.2s;
}

.content-button-record button {
  padding: 8px;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  cursor: pointer;
  margin: 0 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.content-button-record button span {
  font-size: 16px;
}

.content-button-record .button-save {
  background-color: var(--primary-color);
  font-weight: 700;
}

.content-button-record .button-cancel {
  border: 2px solid #a33434;
  background-color: white;
  color: #a33434;
  font-weight: 700;
  padding: 0 8px;
  transition: 0.2s;
  display: none;
}

.content-button-record .button-cancel:hover {
  background-color: #a33434;
  color: white;
}

.scroll-76 {
  max-height: 76vh;
  overflow-y: scroll;
  padding: 0 40px;
}

.scroll-76 p {
  font-size: 16px;
}

.page-wrapper {
  position: static;
}

.nav-menu li a {
  color: #97b1dc;
  font-size: 16px;
  margin-bottom: 8px;
}

.nav-menu li a i {
  font-size: 22px !important;
  height: 24px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.25rem !important;
}

.greeting-message {
  font-size: 20px;
  margin: 0 14px;
}

.greeting-message .person-name {
  font-style: italic;
}

.align-center {
  align-items: center;
}

.mx-w50 {
  max-width: 50%;
}

.disappear-element {
  transition: 0.4s;
  transform: scale(0);
}

.icon-status-table {
  font-size: 1rem;
  font-weight: 600;
}

.icon-status-table i {
  transition: 0.2s;

}

.icon-status-table-green {
  color: #15803d;
}

.has-children {
  background: #0000ff29;
}

.more-info {
  position: absolute;
  right: 63px;
  top: -4px;
  border: solid 1px #fff;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background: orange;
  cursor: default;
}

.more-info p {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}

.badge {
  font-weight: 500;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  /* Separacion vertical minima para que los badges no queden pegados al
     contenido vecino en pantallas pequenas, donde las celdas se estrechan
     y el contenido se reacomoda en varias lineas. */
  margin: 3px 0;
}

.custom-cell .badge {
  box-sizing: border-box;
}

.badge-gray {
  color: #4b5563;
  background: #f9fafb;
  border: solid 2px #ebedee;
}

.badge-red {
  color: #b91c1c;
  background: #fef2f2;
  border: solid 2px #fadddd;
}

.badge-yellow {
  color: #df8f48;
  background: #fefce8;
  border: solid 2px #f3e6bb;
  ;
}


.badge-green {
  color: #15803d;
  background: #f0fdf4;
  border: solid 2px #c4ebd2;
}

.badge-blue {
  color: #1d4ed8;
  background: #eff6ff;
  border: solid 2px #dae5fb;
}

.badge-orange {
  color: #c2620a;
  background: #fff7ed;
  border: solid 2px #fbe0c3;
}

.badge-purple {
  color: #7e22ce;
  background: #faf5ff;
  border: solid 2px #eedffa;
}

.badge-pink {
  color: #be185d;
  background: #fdf2f8;
  border: solid 2px #f6dbe8;
}

/* Contenedor de correos del suplidor: caja con scroll para no romper el layout
   cuando hay muchos correos. */
.spl-emails-box {
  max-height: 132px;
  overflow-y: auto;
  border: 1px solid #e2e6ea;
  border-radius: 6px;
  padding: 8px;
  background: #f8f9fa;
}

.spl-emails-box #spl_email_chips {
  gap: 6px;
}

.spl-emails-empty {
  font-size: 0.8rem;
  color: #9aa0a6;
  text-align: center;
  padding: 2px 0;
}

.nav-tabs a.nav-warning {
  color: #c78c13 !important;
}

.fixed-info {
  display: flex;
  gap: 40px;
  font-size: 13px;
  color: #333;
  margin-bottom: 8px;
}

.fixed-info span {
  color: #666;
  font-weight: 500;
}

.fixed-info strong {
  color: #000;
  font-weight: 600;
}

/*Dynamic table*/

.dyt-tbl {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  overflow-y: scroll;
  max-height: 60vh;
  border: solid 2px #efefef;
  border-radius: 6px;
}

.dyt-thd {
  position: sticky;
  top: 0;
  background: white;
}

.dyt-tft {
  position: sticky;
  bottom: 0;
  background: white;
}

.pgntn-cntr {
  display: flex;
  justify-content: end;
  gap: 10px;
}

.dyt-thd,
.dyt-tbd,
.dyt-tft {
  display: block;
  width: 100%;
}

.dyt-trh,
.dyt-trb {
  display: grid;
  gap: 10px;
  /* Espacio entre las columnas */
  padding: 4px 10px;
  align-items: center;
  border-bottom: 1px solid #ebebeb;
  transition: 0.2s;
}

.dyt-trb:nth-child(2n+1) {
  background-color: #f1f1f1;
}

.dyt-thh,
.dyt-tdb {
  font-weight: 400;
  color: #8a8a8a;
  font-size: 16px;
  color: black;
}

.dyt-thh {
  font-weight: 500;
  color: #8a8a8a;
  font-size: 16px;
}

.dyt-trb:hover {
  background-color: #f4f4f580;
}

.dyt-trb:active {
  background-color: #f4f4f550;
}

/* Tamaño de columnas BY-MANUEL*/

.gap-ho-10 {
  gap: 10px !important;
}

.gap-ho-20 {
  gap: 20px !important;
}

.gap-ho-30 {
  gap: 30px !important;
}

.grid {
  display: grid !important;
}

.grid-col-1 {
  grid-template-columns: repeat(1, 1fr) !important;
}

.grid-col-2 {
  grid-template-columns: repeat(2, 1fr) !important;
}

.grid-col-3 {
  grid-template-columns: repeat(3, 1fr) !important;
}

.grid-col-4 {
  grid-template-columns: repeat(4, 1fr) !important;
}

.grid-col-5 {
  grid-template-columns: repeat(5, 1fr) !important;
}

.grid-col-6 {
  grid-template-columns: repeat(6, 1fr) !important;
}

.grid-col-7 {
  grid-template-columns: repeat(7, 1fr) !important;
}

.grid-col-8 {
  grid-template-columns: repeat(8, 1fr) !important;
}

.grid-col-9 {
  grid-template-columns: repeat(9, 1fr) !important;
}

.grid-col-10 {
  grid-template-columns: repeat(10, 1fr) !important;
}

/* Tamaño de columnas */

.total-grouper:nth-child(2n+1) {
  background-color: #f3f3f3;
}

.total-grouper:nth-child(2n+1) .dyt-trh,
.dyt-trb {
  border-bottom: 1px solid #bababa;
}

.total-grouper h4 {
  text-align: center;
  border-bottom: solid #ccc;
  padding-bottom: 12px;
  font-size: 20px;
}

.total-sub-group {
  text-align: end;
  font-size: 18px;
  color: red;
  padding-right: 50px;
  margin: 6px;
}

/*Dynamic table*/

.bank-container h3 {
  font-weight: 500;
}

.bank-container .bank-detail .detail {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
}

.bank-container .bank-detail .detail p:nth-child(1) {
  font-weight: 500;
}

.content-view {
  position: relative;
  overflow-y: clip;
  overflow-x: clip;
  transition: 0.4s;
}

.position-relative {
  transition: 0.4s;
  position: relative;
}

.content-second-view {
  position: relative;
  left: 15000px;
  display: none;
  opacity: 0;
}

.change-content {
  transform: translateX(-1500px);
}

.show-form {
  transition: 0.4s;
  left: 0 !important;
}

.content-img-qr {
  width: 94%;
  object-fit: contain;
  height: 195px;
  border: 1px solid #80808052;
}

.content-img-qr img {
  width: 100%;
  object-fit: contain;
}

.content-card {
  margin: 0 3px;
  border-radius: 4px;
}

.content-card .line {
  box-shadow: 0 0 1px 1px #808080aa;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px 8px;
  margin-top: 8px;
}

.content-card .element {
  margin: 0;
}

.pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
}

.pgntn-cntr {
  display: flex;
}

.page-btn,
.page-nav {
  padding: 6px 12px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 14px;
}

.page-btn:hover,
.page-nav:hover {
  background-color: #e0e0e0;
}

.page-btn.current-page {
  background-color: #4679cc;
  color: white;
  border: 1px solid #829bc4
}

.pagination span {
  padding: 6px;
  font-weight: bold;
}

.panel-hdr h2 i {
  color: var(--secondary-color);
  font-size: 24px;
}

.profile-sub-name {
  height: 40px !important;
  width: 40px !important;
  background: #2d568f;
  border-radius: 50px;
  display: grid !important;
  place-content: center !important;
  font-size: 14px;
  gap: 10px;
  color: white;
  font-weight: 800;
  /* box-shadow: 0 2px 8px 0 rgba(70, 121, 204, 0.2); */
}

/* SWITCH CHECKBOX */
/* From Uiverse.io by gharsh11032000 */
/* The switch - the box around the slider */
.switch {
  font-size: 12px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #9fccfa;
  border-radius: 50px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.slider:before {
  position: absolute;
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2em;
  width: 2em;
  inset: 0;
  background-color: white;
  border-radius: 50px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.switch input:checked+.slider {
  background: #0974f1;
}

.switch input:focus+.slider {
  box-shadow: 0 0 1px #0974f1;
}

.switch input:checked+.slider:before {
  transform: translateX(1.6em);
}

/* SWITCH CHECKBOX */

.charts-container,
.charts-container-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}

.charts-container-head .head-chart-content {
  width: 100%;
  height: auto;
  padding: 24px;
  border-radius: 10px;
  display: flex;
  box-shadow: 6px 6px 22px #00000030;
  justify-content: space-between;
}

.head-card-title-content {
  max-width: 90px;
}

.head-icon-container {
  background: #a1a1a1;
}

.chart-content-blue {
  background: #b9efff;
  background: linear-gradient(170deg, #cbf3ff 0%, #e6faff 100%);
}

.chart-content-blue .head-icon-container {
  background: #79c3ff;
}

.chart-content-red {
  background: linear-gradient(170deg, #ffd7d7 0%, #ffecec 100%);
}

.chart-content-red .head-icon-container {
  background: #ff6464;
}

.chart-content-green {
  background: #b1f0b1;
  background: linear-gradient(170deg, #b1f0b1 0%, #cbffd2 100%);
}

.chart-content-green .head-icon-container {
  background: #41c541;
}

.chart-content-purple {
  background: #ebb9ff;
  background: linear-gradient(170deg, #f2d2ff 0%, #fae8ff 100%);
}

.chart-content-purple .head-icon-container {
  background: #b472ff;
}

.head-icon-container {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  color: white;
}

.head-icon-container span {
  font-size: 20px;
}

.head-card-title-content p {
  font-size: 14px;
  margin: 0;
  margin-top: 10px;
  font-weight: 500;
}

.chart-total p {
  font-size: 24px;
  font-weight: 500;
}

.charts-container .chart-content {
  width: 100%;
  height: auto;
  padding: 24px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  justify-content: center;
  box-shadow: 6px 6px 22px #00000030;
}

.charts-container .chart-content p {
  align-self: start;
  font-size: 18px;
  font-weight: 600;
  position: absolute;
  top: 10px;
  left: 24px;
}

.charts-container .chart-content i {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: 0.1s;
}

.charts-container .chart-content i:hover {
  color: #f89420;
  transform: scale(1.1);
}

.charts-container .chart-content i:active {
  transform: scale(1);
}

.charts-container .chart-content canvas {
  margin-top: 26px;
}

/* .chart-sm{
    grid-column: span 1;
} */
.chart-md {
  grid-column: span 1;
}

.chart-xl {
  grid-column: span 2;
}

.max-chart {
  max-height: 64vh;
  display: flex;
  justify-content: center;
}

/* .form-group, 
.form-control, 
.form-control + .input-group-append button,
.form-group .input-group .input-group-prepend {
    margin-bottom: 0.8rem !important;
} */

.form-control.wtbt {
  margin-bottom: 0 !important;
}

.highlight-input {
  animation: activeHighlight 3s forwards;
}

@keyframes activeHighlight {
  0% {
    background: #ffffff;
  }

  25% {
    background: #d8f3fe;
  }

  50% {
    background: #ebf6fe;
  }

  100% {
    background: #ffffff;
  }
}

@keyframes loaderBlockerActivate {
  0% {
    visibility: visible;
  }

  20% {
    visibility: visible;
    opacity: .2;
  }

  100% {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes loaderBlockerDisable {
  0% {
    visibility: visible;
  }

  2% {
    visibility: visible;
    opacity: .9
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.promo-grouper {
  height: 100%;
  max-height: 400px;
}

.promo-grouper .delete-promo {
  position: absolute;
  top: 8px;
  right: 12px;
  height: 20px;
  width: 20px;
  background: red;
  border-radius: 50px;
  color: white;
  display: grid;
  place-content: center;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

.promo-grouper .delete-promo:hover {
  background: rgb(204, 0, 0);
}

.promo-grouper .delete-promo:active {
  background: red;
}

.promo-grouper .promo-card-img figure {
  width: 100%;
  height: 200px;
  margin: 10px 0;
  box-shadow: 0px 0px 2px;
  border-radius: 4px;
  position: relative;
}

.promo-grouper .promo-card-img figure label {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
}

.promo-grouper .promo-card-img figure label:hover {
  background-color: #00000020;
}

.promo-grouper .promo-card-img figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.promo-grouper .promo-card-description textarea {
  width: 100%;
  height: 100px;
}

.custom-month-chart {
  justify-content: start !important;
}

.custom-month-chart .custom-month-row {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 22px;
  gap: 8px;
  align-items: center;
}

.custom-month-chart .custom-month-row button {
  height: 34px;
  width: 34px;
  display: grid;
  place-content: center;
  margin-top: 10px;
}

.custom-month-chart .quantity-transaction {
  margin: 10px 0 0 0;
  align-self: start;
}

.table-container {
  width: 100%;
  max-height: 260px;
  overflow-y: scroll;
}

.h-130 {
  height: 130px !important;
}

.btn-simulation {
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 0 4px 4px 0 !important;
}

.min-h-400 {
  min-height: 400px !important;
}

tfoot tr.foot-row {
  background: #ededed !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.scroll-menu {
  scrollbar-width: initial !important;
}

.scroll-menu::-webkit-scrollbar {
  display: initial !important;
}

.btn-show-menu {
  height: 30px;
  width: 30px;
  padding: 0;
}

label.form-label {
  font-weight: 600;
  color: #979b9e;
}


.alert-banner-content {
  position: fixed;
  bottom: 64px;
  right: 42px;
  display: flex;
  flex-direction: column;
  align-items: end;
  z-index: 9999999;
}

.alert-banner-content .custom-row {
  max-width: 350px;
  min-width: 292px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  box-shadow: 0 0 6px 2px #c4c4c469;
  padding: 12px;
  padding-right: 24px;
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #80808075;
  margin-bottom: 10px;
  position: relative;
  transform: scale(0);
  width: fit-content;
}

.alert-banner-content .custom-row .cls-bnn {
  position: absolute;
  top: 4px;
  right: 8px;
  cursor: pointer;
  font-size: 16px;
  color: #ff6363;
}

.alert-banner-content .custom-row .message-content {
  display: flex;
  flex-direction: row;
  gap: 16px;
  position: absolute;
  bottom: 8px;
  right: 8px;
}

/* El mensaje ocupa la primera línea; el botón de acción cae debajo. */
.alert-banner-content .custom-row > p {
  flex: 1 1 auto;
  min-width: 0;
}

/* Solo los banners CON botón de acción hacen wrap para que el botón caiga en
   su propia línea. Sin botón, el ícono y el texto van lado a lado (nowrap). */
.alert-banner-content .custom-row:has(.show-more-info) {
  flex-wrap: wrap;
}

.alert-banner-content .custom-row .show-more-info {
  flex: 0 0 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border: 1px solid #2f80ed;
  border-radius: 6px;
  background-color: #2f80ed;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.05s ease;
}

.alert-banner-content .custom-row .show-more-info:hover {
  background-color: #1b66d6;
}

.alert-banner-content .custom-row .show-more-info:active {
  transform: translateY(1px);
}

.alert-banner-content .custom-row.show {
  animation: showBannerContent forwards 0.4s;
}

@keyframes showBannerContent {
  0% {
    transform: scale(0);
  }

  70% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

.alert-banner-content .custom-row.dismissing {
  animation: hideBannerContent 0.4s forwards;
  pointer-events: none;
  overflow: hidden;
}

@keyframes hideBannerContent {
  0%   { transform: scale(1); opacity: 1; max-height: 200px; margin-bottom: 10px; padding: 12px 24px 12px 12px; }
  40%  { transform: scale(0.88); opacity: 0; max-height: 200px; margin-bottom: 10px; padding: 12px 24px 12px 12px; }
  100% { transform: scale(0); opacity: 0; max-height: 0; margin-bottom: 0; padding: 0; }
}

.alert-banner-content .custom-row img {
  width: 26px;
}

.alert-banner-content .custom-row i {
  font-size: 26px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.alert-banner-content .custom-row .color-error {
  color: red !important;
}

.alert-banner-content .custom-row p {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  color: gray;
}

.action-button-notifications {
  position: absolute;
  right: 14px;
  bottom: 0;
  display: flex;
  gap: 36px;
}

.action-button-notifications p {
  color: blue;
  font-weight: 400;
}

/* 

.fade-up-option{
    animation: fadeUp .7s forwards;
}

@keyframes fadeUp{
    0%{
        opacity: 0;
        transform: translateY(150px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
    }
} */

@media (max-width: 1360px) {
  .content-contact {
    gap: 20px !important;
    padding: 15px 10px !important;
  }
}

@media (max-width: 1200px) {
  .content-contact .call {
    width: 70px !important;
    min-width: 70px !important;
    height: 70px !important;
    min-height: 70px !important;
  }

  .content-contact .call svg {
    width: 40px !important;
    height: 40px !important;
  }
}

@media (max-width: 992px) {
  .content-table-responsive .table-header {
    justify-content: center;
  }

  .content-table-responsive .table-header .content-search {
    gap: 16px;
  }
}

/* Estilos del loader para los botones */
.content_loader_button {
  width: 100%;
  position: absolute;
  background-color: #ffffff9e;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

@keyframes ldio-yzaezf3dcmj {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.ldio-yzaezf3dcmj div {
  position: absolute;
  width: 9.39px;
  height: 8.39px;
  border: 2.87px solid #a0a0a0;
  border-top-color: transparent;
  border-radius: 50%;
}

.ldio-yzaezf3dcmj div {
  animation: ldio-yzaezf3dcmj 0.6493506493506493s linear infinite;
  /* top: 26.5px; */
  /* left: 27.5px; */
}

.icon-user-info {
  position: absolute;
  right: 19px;
  top: 43px;
  display: flex;
  align-items: start;
  font-size: 12px;
  gap: 4px;
  font-weight: 700;
  transition: 0.4s;
  cursor: pointer;
}

.icon-user-info i {
  font-size: 14px;
}

.icon-user-info-enable {
  color: var(--secondary-color);
}

.icon-user-info:hover {
  transform: translateY(-2px);
}

.loadingio-spinner-rolling-2by998twmg8 {
  width: 100%;
  height: 60px;
  /* display: inline-block; */
  overflow: hidden;
  background: none;
  justify-content: center;
  display: flex;
  align-items: center;
}

.ldio-yzaezf3dcmj {
  /* width: 100%; */
  /* height: 100%; */
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0;
  /* see note above */
}

.ldio-yzaezf3dcmj div {
  box-sizing: content-box;
}

.w-full {
  width: 100% !important;
}

.h-full {
  height: 100% !important;
}

.counter-table {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #4679cc;
  padding: 0 8px;
  border-radius: 4px;
}

.object-fit-contain {
  object-fit: contain !important;
}

.absolute {
  position: absolute !important;
}

.l-20 {
  left: 20px !important;
}

.mn-width-150 {
    min-width: 150px !important;
}

.index-full {
  z-index: 9999 !important;
}

.pt-74 {
  padding-top: 74px !important;
}

/* .page-content-wrapper{
    background-color: #fff;
} */

.panel .panel-content {
  overflow-y: auto !important;
  max-height: 80vh !important;
}

.p-initial {
  position: initial !important;
}

.paragraph-form {
  font-weight: 600 !important;
  font-size: 16px !important;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Tabla personalizada profesional */
.table-wrapper {
  overflow-x: auto;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  background-color: #fff;
}

.custom-table {
  display: grid;
  width: 100%;
  font-family: var(--font-family-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  font-size: 14px;
  overflow: hidden;
  background-color: white;
  border-collapse: collapse;
}

.custom-header {
  display: grid;
  position: sticky;
  top: 0;
  z-index: 10;
}

.custom-tbody {
  display: grid;
}

.custom-table-form {
  display: grid;
}

.custom-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.custom-footer {
  display: grid;
}

.custom-cell {
  padding: 4px 16px;
  border-bottom: 1px solid #e9ecef;
  background-color: white;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  align-content: flex-start;
  transition: all 0.2s ease;
  overflow: hidden;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.custom-cell .char-counter {
  display: block !important; /* override hidden attr — always takes space so grid track sizes correctly */
  flex: 0 0 100%;
  text-align: right;
  font-size: 10px;
  color: transparent; /* invisible when hidden attr present */
  line-height: 1;
  white-space: nowrap;
  margin-top: 2px;
  padding: 0 2px;
  transition: color 0.15s;
}

.custom-cell .char-counter:not([hidden]) {
  color: #9ca3af; /* visible on focus */
}

/* Alineación de texto */
.text-right {
  justify-content: flex-end;
  text-align: right;
}

.text-center {
  justify-content: center;
  text-align: center;
}

/* Estilos para celdas de encabezado */
.custom-header .custom-cell {
  background-color: #f8f9fa;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.5px;
  padding-top: 14px;
  padding-bottom: 14px;
  position: sticky;
  top: 0;
  background: #eeeeee;
  border-bottom: solid 1px #ccc;
}

/* Estilos para filas */
.custom-row:hover .custom-cell {
  background-color: rgba(63, 106, 216, 0.04);
}

.custom-row:nth-child(even) .custom-cell {
  background-color: #fafbfe;
}

.custom-row:nth-child(even):hover .custom-cell {
  background-color: rgba(63, 106, 216, 0.04);
}

/* Estilos para el pie de tabla */
.custom-footer .custom-cell {
  border-top: 2px solid #dee2e6;
  border-bottom: none;
  background-color: #f8f9fa;
  font-weight: 600;
  color: #495057;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Estilos para controles de formulario dentro de celdas */
.custom-cell .form-control {
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 8px 12px;
  transition: all 0.2s ease;
  background-color: #fff;
}

.custom-cell .form-control:focus {
  border-color: #3f6ad8;
  box-shadow: 0 0 0 0.2rem rgba(63, 106, 216, 0.25);
  outline: none;
}

.custom-cell .form-control:hover:not(:focus) {
  border-color: #b9c2d0;
}

.custom-cell .input-group {
  width: 100%;
}

/* Estilos para selects */
.custom-cell select.form-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%233f6ad8' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 8px 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Estilos para botones dentro de celdas */
.custom-cell .btn {
  transition: all 0.2s ease;
  border-radius: 4px;
}

.custom-cell .btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.custom-cell .btn-outline-primary {
  color: #3f6ad8;
  border-color: #3f6ad8;
}

.custom-cell .btn-outline-primary:hover {
  color: #fff;
  background-color: #3f6ad8;
  border-color: #3f6ad8;
}

.custom-cell .btn-outline-danger {
  color: #d92550;
  border-color: #d92550;
}

.custom-cell .btn-outline-danger:hover {
  color: #fff;
  background-color: #d92550;
  border-color: #d92550;
}

.custom-cell .btn-success {
  color: #fff;
  background-color: #3ac47d;
  border-color: #3ac47d;
  padding: 0.375rem 0.75rem;

}

.custom-cell .btn-success:hover {
  background-color: #31a66a;
  border-color: #2e9d64;
}

/* Responsive para pantallas pequeñas */
@media (max-width: 768px) {
  .custom-table {
    grid-template-columns: 60px 1fr 1fr 1fr 1fr 100px;
  }

  .custom-cell {
    padding: 10px 12px;
    font-size: 13px;
  }
}

/* Estilos para la tabla de cuentas contables (5 columnas) */
.custom-table {
  display: grid;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  font-family: sans-serif;
  font-size: 12px;
  width: 100%;
}

.table-col-2 .custom-header,
.table-col-2 .custom-tbody,
.table-col-2 .custom-footer,
.table-col-2 .custom-table-form {
  grid-template-columns: repeat(2, 1fr);
}

.table-col-3 .custom-header,
.table-col-3 .custom-tbody,
.table-col-3 .custom-footer,
.table-col-3 .custom-table-form {
  grid-template-columns: repeat(3, 1fr);
}

.table-col-4 .custom-header,
.table-col-4 .custom-tbody,
.table-col-4 .custom-footer,
.table-col-4 .custom-table-form {
  grid-template-columns: repeat(4, 1fr);
}

.table-col-5 .custom-header,
.table-col-5 .custom-tbody,
.table-col-5 .custom-footer,
.table-col-5 .custom-table-form {
  grid-template-columns: repeat(5, 1fr) !important;
}

.table-col-6 .custom-header,
.table-col-6 .custom-tbody,
.table-col-6 .custom-footer,
.table-col-6 .custom-table-form {
  grid-template-columns: repeat(6, 1fr);
}

.table-col-9 .custom-header,
.table-col-9 .custom-tbody,
.table-col-9 .custom-footer,
.table-col-9 .custom-table-form {
  grid-template-columns: repeat(9, 1fr) !important;
}

.table-col-10 .custom-header,
.table-col-10 .custom-tbody,
.table-col-10 .custom-footer,
.table-col-10 .custom-table-form {
  grid-template-columns: repeat(10, 1fr);
}

.table-col-11 .custom-header,
.table-col-11 .custom-tbody,
.table-col-11 .custom-footer,
.table-col-11 .custom-table-form {
  grid-template-columns: repeat(11, 1fr);
}

.table-col-12 .custom-header,
.table-col-12 .custom-tbody,
.table-col-12 .custom-footer,
.table-col-12 .custom-table-form {
  grid-template-columns: repeat(12, 1fr);
}

.accounting-accounts-table .custom-header,
.accounting-accounts-table .custom-tbody,
.accounting-accounts-table .custom-footer,
.accounting-accounts-table .custom-table-form {
  grid-template-columns: 1fr 2fr 1fr 1fr 1fr 1fr !important;
}


.table-col-7 .custom-header,
.table-col-7 .custom-tbody,
.table-col-7 .custom-footer,
.table-col-7 .custom-table-form {
  grid-template-columns: repeat(7, 1fr) !important;
}

.table-col-8 .custom-header,
.table-col-8 .custom-tbody,
.table-col-8 .custom-footer,
.table-col-8 .custom-table-form {
  grid-template-columns: repeat(8, 1fr) !important;
}

.month-container {
  border-radius: 6px;
  box-shadow: 2px 2px 8px #00000020;
  padding: 0 20px;
  padding-top: 28px;
  position: relative;
}

.month-container.success {
  background: #00ff000f;
}

.month-container.danger {
  background: #ff00000f;
}

.month-container.process {
  background: #0033ff1a;
}

.month-container b {
  font-size: 16px;
  position: absolute;
  top: 6px;
}

.month-detail-container {
  display: flex;
  padding: 10px 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.month-detail-container.presupuse {
  border-bottom: solid 1px #ccc;
  padding-bottom: 7px;
}

.month-detail-container i {
  font-size: 22px;
  background: #eaeaea;
  padding: 10px;
  border-radius: 50px;
  border: solid 1px #dfdfdf;
}

.detail-month-budget {
  text-align: end;
}

.detail-month-budget p {
  margin: 0;
  font-size: 14px;
}

.detail-month-budget .amount-text {
  font-size: 16px;
  color: black;
  font-weight: 500;
}

.detail-month-budget p span {
  font-size: 12px;
}

/* Responsive para la tabla de cuentas contables */
@media (max-width: 768px) {
  .panel-content .custom-table {
    grid-template-columns: 80px 1fr 80px 80px 80px;
    font-size: 13px;
  }
}

/* Estilos para la paginación personalizada */
.custom-footer-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #f8f9fa;
  border-top: 1px solid #dee2e6;
  margin-top: -1px;
  border-radius: 0 0 8px 8px;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pagination-pages {
  display: flex;
  gap: 5px;
}

.pagination-pages .btn {
  min-width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-pages .btn.active {
  background-color: #3f6ad8;
  border-color: #3f6ad8;
  color: white;
  font-weight: 600;
}

.pagination-info {
  color: #6c757d;
  font-size: 14px;
}

.custom-cell .btn {
  border-radius: 4px;
  transition: all 0.2s;
}

.custom-cell .btn-success {
  background-color: #28a745;
  border-color: #28a745;
  padding: 12px;

}

.custom-cell .btn-success:hover {
  background-color: #218838;
  border-color: #1e7e34;
}

.text-right {
  justify-content: flex-end;
}

.text-center {
  justify-content: center;
}

/* Estilos para valores monetarios */
.custom-cell span {
  font-variant-numeric: tabular-nums;
}

/* Mejoras para dispositivos móviles */
@media (max-width: 768px) {
  .custom-cell {
    padding: 10px 8px;
    font-size: 13px;
  }

  .custom-header .custom-cell {
    font-size: 11px;
  }
}

.custom-group-input-button {
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding-left: 10px;
  transition: all 0.2s ease;
  background-color: #fff;
  overflow: hidden;
}

.custom-group-input-button input {
  width: 100%;
  border: none;
  outline: none;
}

.custom-group-input-button button {
  height: 32px;
  width: 40px;
  border: none;
  background: #4679cc;
  color: white;
}

.relative {
  position: relative;
}

.gap-0 {
  gap: 0 !important;
}

.gap-1 {
  gap: 0.25rem !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.gap-3 {
  gap: 1rem !important;
}

.gap-4 {
  gap: 1.5rem !important;
}

.gap-5 {
  gap: 3rem !important;
}

.grid-span-1 {
  grid-column: span 1 !important;
}

.grid-span-2 {
  grid-column: span 2 !important;
}

.grid-span-3 {
  grid-column: span 3 !important;
}

.grid-span-4 {
  grid-column: span 4 !important;
}

.grid-span-5 {
  grid-column: span 5 !important;
}

.overflow-auto {
  overflow-y: auto !important;
}

.mx-h-100 {
  max-height: 100px !important;
  min-height: 0px !important;
}

.mx-h-150 {
  max-height: 150px !important;
  min-height: 0px !important;
}

.mx-h-200 {
  max-height: 200px !important;
  min-height: 0px !important;
}

.mx-h-250 {
  max-height: 250px !important;
  min-height: 0px !important;
}

.mx-h-300 {
  max-height: 300px !important;
  min-height: 0px !important;
}

.mx-h-350 {
  max-height: 350px !important;
  min-height: 0px !important;
}

.mx-h-400 {
  max-height: 400px !important;
  min-height: 0px !important;
}

.mx-h-450 {
  max-height: 450px !important;
  min-height: 0px !important;
}

.mx-h-500 {
  max-height: 500px !important;
  min-height: 0px !important;
}

.mx-h-550 {
  max-height: 550px !important;
  min-height: 0px !important;
}

.mx-h-600 {
  max-height: 600px !important;
  min-height: 0px !important;
}

.mx-h-650 {
  max-height: 650px !important;
  min-height: 0px !important;
}

.percent-remaining {
  height: 10px;
  border: solid 1px;
  border-radius: 50px;
  width: 100%;
  overflow: hidden;
}

.progress-bar {
  width: 70%;
  height: 100%;
}

.progress-bar-success {
  background-color: #28a745;
}

.progress-bar-warning {
  background-color: #ffc107;
}

.progress-bar-danger {
  background-color: #dc3545;
}

.progress-bar-dark {
  background-color: #8d0000;
}

.text-dark {
  color: #7c7c7c !important;
}

.font-sm {
  font-size: 1rem !important;
}

.font-md {
  font-size: 1.5rem !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}

.badged-amount-cards {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  box-shadow: 0px 2px 5px #00000030;
  border-radius: 4px;
  padding: 10px;
  font-size: 14px;
  flex-direction: column;
}

.badged-amount-cards .month-name {
  font-size: 16px !important;
  margin-bottom: 4px !important;
}

.badged-amount-cards-content {
  display: flex;
  justify-content: space-between;
  text-align: end;
  gap: 10px;
}

.badged-amount-title {
  font-weight: 600;
}

.border-1-gray {
  border: solid 1px #eee !important;
}

.size-150 {
  width: 150px;
  height: 150px;
}

.place-holder-loader {
  height: 10px;
  width: 50%;
  background: #959595;
  border-radius: 4px;
  background: linear-gradient(90deg, #eee 25%, #ddd 37%, #eee 63%);
  background-size: 400% 100%;
  animation: shimmer 1.5s infinite linear;
}

.custom-grid-fit-card {
  grid-template-columns: 90px 100px 150px 150px 150px 150px 150px 150px !important;
}



@keyframes shimmer {
  0% {
    background-position: -400px 0;
  }

  100% {
    background-position: 400px 0;
  }
}

.user-loader p,
.user-loader span {
  display: inline-block;
  position: relative;
  color: #999;
  font-style: italic;
  overflow: hidden;
  max-width: 150px;
  display: inline-block;
  position: relative;
  color: #999;
  font-style: italic;
  overflow: hidden;
  max-width: 150px;
}

/* Crea la barra brillante con un gradiente animado */
.user-loader::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  /* empieza fuera a la izquierda */
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.6),
      transparent);
  animation: shine 1.5s infinite;
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  /* empieza fuera a la izquierda */
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.6),
      transparent);
  animation: shine 1.5s infinite;
}

.auto-size {
  field-sizing: content;
  min-height: 38px;
  height: 38px;
  overflow-y: hidden;
  resize: none;
}

.custom-overflow-visible {
  overflow: visible !important;
}

.text-black {
  color: black !important;
}

@keyframes shine {
  0% {
    left: -50%;
  }

  50% {
    left: 100%;
  }

  100% {
    left: 100%;
  }


  0% {
    left: -50%;
  }

  50% {
    left: 100%;
  }

  100% {
    left: 100%;
  }
}

.modal-solicitudes-informacion {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.modal-solicitudes-informacion p:nth-child(2n) {
  text-align: end;
}

.close-account-modal {
  position: absolute;
  top: 40px;
  right: 30px;
  cursor: pointer;
}

.zone-cost-center-grouper {
  margin-bottom: 0.5rem;
}

/* Cabeceras tipo tabla: con o sin checkbox de zona */
.zone-grouper {
  display: grid;
  grid-template-columns: 40px 80px 1fr 120px;
  gap: 0 1rem;
  align-items: center;
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-size: 0.9375rem;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  border-bottom: 1px solid #dee2e6;
  transition: background 0.2s, border-color 0.2s;
}

.zone-grouper:has(.zone-grouper__zone-cb) {
  grid-template-columns: 36px 40px 80px 1fr 120px;
}

.zone-grouper__zone-cb {
  display: flex;
  align-items: center;
  cursor: pointer;
}


.zone-grouper__zone-cb .custom-control-label {
  cursor: pointer;
}

.zone-grouper:hover {
  background: #f1f3f5;
  border-color: #dee2e6;
}

.zone-grouper.show {
  border-radius: 10px 10px 0 0;
  border-bottom-color: #e9ecef;
}

.zone-grouper.show .zone-grouper__icon,
.zone-grouper.show i {
  transform: rotate(90deg);
}

.zone-grouper__icon,
.zone-grouper i {
  width: 10px;
  font-size: 1.1rem;
  color: #495057;
  transition: transform 0.3s ease-out;
}

.zone-grouper .code-zone,
.zone-grouper .title-zone,
.zone-grouper .total-cost-center {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.zone-grouper .total-cost-center {
  text-align: right;
}

.zone-grouper .total-cost-center p {
  text-align: right;
}

.zone-grouper p {
  margin: 0;
  font-weight: 500;
  font-size: 0.9375rem;
  color: #212529;
  line-height: 1.35;
}

.zone-grouper small {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #6c757d;
  line-height: 1.3;
}

.cost-center-container {
  border: 1px solid #e9ecef;
  border-top: none;
  border-radius: 0 0 10px 10px;
  margin: 0 0 0.75rem 0;
  padding: 0;
  overflow: hidden;
  height: 0;
  background: #fff;
  transition: height 0.3s ease-out;
}

.cost-center-container.show {
  padding: 0.5rem 0;
  background: #fff;
  border-color: #e9ecef;
}

.cost-center-selected {
  background: rgba(0, 103, 171, 0.08);
  border-left: 3px solid var(--text-primary-color-arb, #0067ab);
}

.cost-center-content {
  cursor: pointer;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  margin: 0 0.5rem;
  border-radius: 8px;
  transition: background 0.15s;
}

.cost-center-content:hover {
  background: #f1f3f5;
}

.cost-center-content p {
  font-size: 0.9rem;
  margin: 0;
  color: #212529;
}

/* Selección simple (sin checkbox): sin la casilla, la descripción caía en la
   primera columna de 44px y el texto se partía en dos líneas. Aquí ocupa toda
   la fila con una sangría + punto guía que la anida bajo su zona. */
.cost-center-content:not(:has(.custom-checkbox)) {
  grid-template-columns: 1fr;
  gap: 0;
  padding-left: 2.75rem;
  position: relative;
}

.cost-center-content:not(:has(.custom-checkbox))::before {
  content: "";
  position: absolute;
  left: 1.4rem;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ced4da;
  transform: translateY(-50%);
  transition: background 0.15s;
}

.cost-center-content:not(:has(.custom-checkbox)):hover::before {
  background: var(--text-primary-color-arb, #0067ab);
}

.cost-center-content:not(:has(.custom-checkbox)) p {
  white-space: normal;
  line-height: 1.35;
}

.cost-center-status .badge {
  font-size: 0.7rem;
  font-weight: 500;
}

.cost-center-status .status.active {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 500;
  background: #d4edda;
  color: #155724;
}

.h-20 {
  height: 20px !important;
}

.custom-scroll-general-modal {
  max-height: 70vh;
  overflow-x: hidden;
  overflow-y: scroll;
}

.content-bank-account {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.bank-account-card {
  display: flex;
  flex-direction: column;
  box-shadow: 2px 2px 8px #00000030;
  border-radius: 4px;
  padding: 12px;
  cursor: pointer;
  transition: 0.2s;
  justify-content: space-between;
}

.bank-account-card.disable-card {
  cursor: no-drop !important;
  opacity: 60%;
  filter: grayscale(1);
}

.bank-account-card:hover {
  box-shadow: 4px 4px 12px #00000040;
}

.bank-account-card:active {
  box-shadow: 2px 2px 8px #00000030;
}

.bank-name {
  font-size: 14px;
  color: #787878;
}

.amount-bank-card p {
  font-size: 18px;
  text-align: end;
  font-weight: 600;
}

.bank-description {
  font-size: 16px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bank-account-card p {
  margin: 0;
}

.head-bank-card {
  display: flex;
  justify-content: space-between;
  min-width: 0;
}

.titles-bank {
  min-width: 0;
  overflow: hidden;
}

.detail-error-pending-request {
  font-size: 0.7rem;
  font-weight: 300;
  margin: 0;
}

.head-bank-card figure {
  width: 60px;
  height: 60px;
}

.head-bank-card figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cost-center-content-list {
  display: grid !important;
  grid-template-columns: 2fr 1fr 40px;
  gap: 20px;
  margin-top: 10px;
}

.cnt-pnl-up-dcm {
  position: relative;
  transition: 5s;
}

.cnt-rcl-bnc-mn .head h6 {
  color: var(--text-primary-color-arb);
  font-weight: 700;

}

.cnt-rcl-bnc-mn .hgt {
  height: 60vh;
  min-height: 500px;
}

.content-document .up-document {
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-document .up-document .content-icon-up-document {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 80%;
  max-width: 250px;
}

.content-document .up-document .content-icon-up-document h6 {
  /* color: var(--text-primary-color-arb); */
  font-weight: 700;

}

.content-document .up-document .content-icon-up-document .btn-up-file {
  font-size: 18px;
  transition: 0.4s ease;
  padding: 4px;
  /* box-shadow: 0 0 3px #7c7c7cd4; */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 4px;
  top: initial;
  right: initial;
  gap: 8px;
  /* background-color: var(--primary-color); */
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  min-width: 250px;
}

.content-document .up-document .content-icon-up-document .btn-up-file p {
  font-size: 18px;
  margin: 0;
}

.btn-up-file-disable {
  transform: scale(0.8);
}

.btn-up-file-little {
  transform: scale(0.4);
}

.content-document .up-document .content-icon-up-document .btn-up-file i {
  transition: 0.4s;
}


.content-document .up-document .content-icon-up-document .btn-up-file:hover {
  /* transform: translateY(2px); */
  background: linear-gradient(#00000035, #36404c3a);
  box-shadow:
    inset 0 0px 2px rgba(0, 0, 0, 0.09),
    inset 0 0px 2px rgba(255, 255, 255, 0.25);
}

.content-icon-up-document .btn-up-file:hover i {
  transform: scale(0.9) rotate(1deg);
}

.icon-up-smart {
  transform: scale(0.2);
  position: absolute;

}

.move-icon-up-document {
  top: -11% !important;
  right: -8% !important;
  transition: 2s;
  /* transform: scale(0.2) translate(1275px, -1574px) */

}

.up-document .cnt-pgs_br {
  display: none;
  opacity: 0;
  width: 100%;
  /* height: 20px; */
  position: relative;
  transition: 0.4s;
  flex-direction: column;
  align-items: center;
}

.cnt-pgs_br h4 {
  font-style: italic;
}

.cnt-dcm-cnd {
  height: 38vh;
  overflow-y: scroll;
}

.cnt-dcm-cnd .table-without-data {
  text-align: center;
  margin-top: 20px;
  transition: 0.4s;
}

.cnt-dcm-cnd .table-without-data-hidden {
  transform: scale(0);
}

.cnt-dcm-cnd .cnt-tbl-dmt-mcd {
  display: none;
  opacity: 0;
  transition: 0.4s;
}

.cnt-rcl-bnc-mn .fst-cnt-snd-clm {
  height: 40vh;
  min-height: 330px;
}

.cnt-rcl-bnc-mn .scd-cnt-snd-clm {
  height: 30%;
}

.cnt-dcm-cnd .table-without-data h2 {
  font-size: 1rem;
  margin-top: 38px;
  font-style: italic;
}

.cnt-dcm-cnd .table-without-data img {
  width: 40%;
}

.cnt-dtl-dcm-mch {
  background-color: #ffffff;
  width: 96%;
  position: absolute;
  /* top: 0; */
  bottom: -10px;
  transition: 0.4s;
  height: 0%;
  box-shadow: 0 0 2px #4945459e;
}

.cnt-dtl-dcm-mch .head {
  display: flex;
  justify-content: space-between;
}

.cnt-dtl-dcm-mch .close {
  cursor: pointer;
  box-shadow: 0 0 3px #7c7c7cd4;
  padding: 8px;
  transition: 0.4s;
  border-radius: 4px;
}

.cnt-dtl-dcm-mch .close:hover {
  background-color: #7c7c7c33;
}

.cnt-dtl-dcm-mch .close:hover i {
  transform: scale(0.9) rotate(1deg);
}

/* Modal de sesión expirada */
/* Fondo del modal cuando está activo */
.mdl_usr_actvc_wrapper {
  background: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  z-index: 9999999;
}

/* Imagen del mensaje de sesión expirada */
.mdl_usr_actvc_img_expired {
  width: 80px;
  margin-bottom: 16px;
}

/* Contador de segundos */
.mdl_usr_actvc_counter_lbl {
  padding: 4px 10px;
  background-color: var(--text-primary-color-arb);
  border-radius: 50%;
  box-shadow: 0 0 8px 2px #c5c5c5;
  color: white;
  font-size: 18px;
}

.m-5px {
  margin: 8px !important;
  margin-top: 20px !important;
}

.search-bank-account-button {
  height: 50px;
  line-height: 17px;
  height: auto;
  transition: 0.2s;
}

.search-bank-account-button:hover span{
  color:#d0dae4 !important
}

.bank-selected-box {
  width: auto;
}

.bank-selected-container {
  border: 1px solid #e2e8f0;
  box-shadow: 4px 4px 9px rgba(15, 23, 42, 0.08);
  padding: 14px 16px;
  display: flex;
  gap: 16px;
  border-radius: 4px;
  align-items: center;
  /* min-width: 360px; */
}

.bank-selected-img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  object-fit: cover;
}

.bank-selected-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bank-selected-label {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}

.bank-selected-label p {
  margin: 0;
}

.bank-file-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 1px 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  /* text-transform: uppercase; */
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  line-height: 1.65;
  white-space: nowrap;
}

.bank-file-tag i {
  font-size: 10px;
}

.bank-selected-amount {
  font-size: 12px;
  color: #64748b;
}

.bank-amount-value {
  font-size: 18px;
  font-weight: 600;
  color: #1d4ed8;
}

input:disabled {
  background-color: #f3f3f3;
}

.w-auto {
    width: auto !important;
}

.budget-grid {
  grid-template-columns:
    60px 200px minmax(100px, 150px) minmax(100px, 150px) minmax(150px, 180px) minmax(150px, 180px) 80px
}

.budget-grid .group-title {
  min-width: 0;
  overflow: hidden;
}

.budget-grid .group-title p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gray-font {
  color: var(--font-gray) !important;
}

.grid-budget {
  grid-template-columns: 150px 250px 250px;
}

.over-flow-initial{
    overflow: initial !important;
}
/* ===== Global Options Modal (gom) ===== */
.gom-modal {
  display: flex;
  flex-direction: column;
  width: 80%;
  max-width: 1100px;
  height: 88vh;
  max-height: 88vh;
  padding: 0;
  overflow: hidden;
}

.gom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 1px solid #e9ecef;
  flex-shrink: 0;
}

.gom-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gom-title-row h4 {
  margin: 0;
  font-size: 1rem;
}

.gom-title-row i {
  font-size: 1.1rem;
  color: #4a78c2;
}

.gom-hint kbd {
  font-size: 11px;
  background: #e9ecef;
  border-radius: 3px;
  padding: 2px 5px;
  color: #495057;
}

.gom-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid #e9ecef;
  flex-shrink: 0;
}

.gom-search-icon {
  color: #4a78c2;
  font-size: 16px;
  flex-shrink: 0;
}

.gom-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.95rem;
  background: transparent;
  color: #212529;
}

.gom-clear-icon {
  cursor: pointer;
  color: #6c757d;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.gom-clear-icon.visible {
  opacity: 1;
  pointer-events: auto;
}

.gom-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 20px;
}

.gom-body::-webkit-scrollbar {
  width: 5px;
}

.gom-body::-webkit-scrollbar-thumb {
  background-color: #4679cc;
  border-radius: 10px;
}

.gom-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 56px 24px;
  text-align: center;
  color: #64748b;
}
.gom-empty-state i {
  font-size: 44px;
  color: rgba(52, 199, 89, 0.65);
}
.gom-empty-state h4 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: #334155;
}
.gom-empty-state p {
  margin: 0;
  max-width: 360px;
  font-size: 0.82rem;
  line-height: 1.5;
}

.gom-module-group {
  margin-bottom: 28px;
}

.gom-module-group[hidden] {
  display: none;
}

.gom-module-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 2px solid #dee2e6;
}

.gom-module-header i {
  font-size: 1rem;
  color: #4a78c2;
}

.gom-module-header h5 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #495057;
}

.gom-section-group {
  margin-bottom: 12px;
}

.gom-section-group[hidden] {
  display: none;
}

.gom-section-label {
  font-size: 0.78rem;
  color: #868e96;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 8px 0 6px 2px;
}

.gom-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.gom-ctx-badge {
  font-size: 10px;
  background: #e8edf8;
  color: #4a78c2;
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 6px;
  white-space: nowrap;
}

.gom-module-header i  { font-size: 1rem; color: #4a78c2; }
.gom-module-header h5 { margin: 0; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #495057; }
.gom-section-group { margin-bottom: 12px; }
.gom-section-group[hidden] { display: none; }
.gom-section-label { font-size: 0.78rem; color: #868e96; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin: 8px 0 6px 2px; }
.gom-options-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.gom-ctx-badge { font-size: 10px; background: #e8edf8; color: #4a78c2; border-radius: 4px; padding: 2px 6px; white-space: nowrap; align-self: flex-start; }
.option-card-grouper.gom-kb-focus { outline: 2px solid #4a78c2; box-shadow: 0 0 0 4px #4a78c220; transform: translateY(-4px); }
/* ===== End Global Options Modal ===== */


/* ── Bank Reconciliation — layout utilities ───────────────── */

/* Column flex container (panels that stack head + scroll area) */
.rcl-col-flex {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Items that must not shrink within a flex column */
.rcl-flex-noshrink {
    flex-shrink: 0;
}

/* Counter box — hidden by default; JS sets display:'' to show */
.rcl-counter-box {
    display: none;
}

/* Scrollable growing area inside a flex column */
.rcl-scroll-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Generic hidden — for elements whose visibility is managed by JS */
.rcl-hidden {
    display: none;
}

/* Card/table wrapper — hidden initially; JS toggles display + opacity */
.rcl-cards-hidden {
    display: none;
    opacity: 0;
    transition: opacity 0.2s;
}

/* Matches flex column (center panel, Tab 2) */
.rcl-matches-col {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Candidate candidates scrollable area (center panel) */
.rcl-candidates-scroll {
    flex: 1;
    min-height: 0;
    height: auto;
    overflow-y: auto;
}

/* Reconciled pairs panel (right, Tab 2) — hidden initially */
.rcl-reconciled-panel {
    display: none;
    opacity: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-top: 4px;
    transition: opacity 0.2s;
}

/* Empty-state icon in Tab 3 left panel */
.rcl-empty-icon {
    max-height: 80px;
    max-width: 80px;
}

/* Scrollable bottom-table wrapper in Tab 3 */
.rcl-listado-wrap {
    max-height: 260px;
    overflow-y: auto;
}

/* ── Sin Coincidencia — paneles tipo tarjeta (estética del tab Manual) ──
   Tarjeta redondeada con header etiquetado; los dos paneles superiores van de
   altura fija con scroll propio para que no se vea contenido de las vecinas. */
.rcl-um-panel {
    margin-bottom: 0;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    transition: box-shadow 0.18s ease;
    overflow: hidden;
    background: #fff;
}
.rcl-um-panel:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.rcl-um-panel > .panel-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* Paneles lado a lado: misma altura fija + scroll interno (.rcl-scroll-area) */
.rcl-um-panel--col {
    height: 42vh;
    min-height: 320px;
}

/* Header del panel: título + pill/acciones, con regla inferior sutil */
.rcl-um-panel .head {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}
.rcl-um-panel .head h6 {
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #1e293b;
}
.rcl-um-panel .head .text-muted { font-size: 0.78rem; }

/* Tabla dentro del panel (y del modal de Movimientos del Banco): sin el borde
   gris anticuado; bordes redondeados, header sobrio en mayúsculas, filas con
   aire y separadores tenues. */
.rcl-um-panel .custom-table,
.rcl-um-modal .custom-table {
    border: none;
    border-radius: 10px;
    font-size: 0.82rem;
    background: transparent;
}
.rcl-um-panel .custom-header .custom-cell,
.rcl-um-modal .custom-header .custom-cell {
    background: #f8fafc;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.rcl-um-panel .custom-tbody .custom-cell,
.rcl-um-modal .custom-tbody .custom-cell {
    padding: 11px 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    color: #334155;
}
.rcl-um-panel .custom-row:last-child .custom-cell,
.rcl-um-modal .custom-row:last-child .custom-cell {
    border-bottom: none;
}
.rcl-um-panel .custom-row:hover .custom-cell,
.rcl-um-modal .custom-row:hover .custom-cell {
    background: rgba(37, 99, 235, 0.035);
}
.rcl-um-panel .custom-row:nth-child(even) .custom-cell,
.rcl-um-modal .custom-row:nth-child(even) .custom-cell {
    background: rgba(15, 23, 42, 0.018);
}
.rcl-um-panel .custom-row:nth-child(even):hover .custom-cell,
.rcl-um-modal .custom-row:nth-child(even):hover .custom-cell {
    background: rgba(37, 99, 235, 0.05);
}

/* Badges (Débito / Crédito / Posteado…) como pill refinado */
.rcl-um-panel .custom-cell .badge,
.rcl-um-modal .custom-cell .badge {
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 0.72rem;
    font-weight: 600;
}

/* Botón de acciones (burger) discreto */
.rcl-um-panel .button-burger,
.rcl-um-modal .button-burger {
    width: 30px;
    height: 30px;
    color: #64748b;
    background: transparent;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.rcl-um-panel .button-burger:hover,
.rcl-um-modal .button-burger:hover {
    background: #f1f5f9;
    border-color: rgba(15, 23, 42, 0.1);
    color: #1e293b;
}

/* Estado vacío más limpio y centrado */
.rcl-um-panel .table-without-data,
.rcl-um-modal .table-without-data { padding: 24px 12px; }
.rcl-um-panel .table-without-data h2,
.rcl-um-modal .table-without-data h2 {
    font-size: 0.92rem;
    color: #94a3b8;
    font-weight: 500;
}

/* Scroll del cuerpo del modal de Movimientos del Banco */
.rcl-bank-mov-scroll {
    max-height: 60vh;
    overflow-y: auto;
}
.rcl-um-panel .table-without-data img { max-height: 84px; opacity: 0.9; }

/* ── Bank Reconciliation — Tab 3 (Sin Coincidencia) tables ── */

/* Fixed height for Tab 3 panels so the bottom table stays visible */
.rcl-tab3-panel {
    height: 38vh;
    min-height: 280px;
}

/* Shared table style for both Tab 3 tables */
.table-rcl-um {
    font-size: 0.8rem;
    width: 100%;
    table-layout: fixed;
}

.table-rcl-um thead th {
    font-size: 0.72rem;
    padding: 5px 8px;
    white-space: nowrap;
}

/* Clickable rows in the left table */
.table-rcl-um .card-rcl {
    cursor: pointer;
    transition: background 0.15s;
}

.table-rcl-um .card-rcl:hover {
    background: rgba(44, 133, 255, 0.07);
}

.table-rcl-um .card-rcl td {
    vertical-align: middle;
    padding: 5px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Concept / description column — single line, ellipsis on overflow */
.rcl-um-td-concepto {
    max-width: 0;
    width: 36%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Amount column */
.rcl-um-th-amount {
    text-align: right;
}

.rcl-um-td-amount {
    text-align: right;
    font-weight: 600;
    width: 16%;
}

/* Action column — just wide enough for the menu button */
.rcl-um-th-action,
.rcl-um-td-action {
    width: 36px;
    text-align: center;
    padding: 0 !important;
}

/* ── Documentos tab — sistema docs table ───────────────────────────── */
.docs-sys-table .custom-header,
.docs-sys-table .custom-tbody {
    grid-template-columns: 44px 110px 88px minmax(0, 1fr) 100px 100px 84px !important;
}

.docs-sys-table .rcl-um-td-concepto {
    max-width: none;
    width: auto;
}

/* Monto (5th col) — right-aligned */
.docs-sys-table .custom-header .custom-cell:nth-child(5),
.docs-sys-table .custom-row .custom-cell:nth-child(5) {
    justify-content: flex-end;
    font-weight: 600;
}

/* Acciones (7th col) — centered con margen del borde derecho */
.docs-sys-table .custom-header .custom-cell:nth-child(7),
.docs-sys-table .custom-row .custom-cell:nth-child(7) {
    justify-content: center;
    padding-right: 16px;
}

/* ── Documentos tab — tabla de cheques (transito / confirmados) ─────── */
.docs-chk-table .custom-header,
.docs-chk-table .custom-tbody {
    grid-template-columns: 60px 1fr 1fr 110px 120px 80px !important;
}

/* Beneficiario y Concepto (cols 2 y 3) — ellipsis sin colapsar la celda */
.docs-chk-table .rcl-um-td-concepto {
    max-width: none;
    width: auto;
}

/* Monto (5ta col) — alineado a la derecha */
.docs-chk-table .custom-header .custom-cell:nth-child(5),
.docs-chk-table .custom-row .custom-cell:nth-child(5) {
    justify-content: flex-end;
    font-weight: 600;
}

/* Acciones (6ta col) — centrada con margen del borde derecho */
.docs-chk-table .custom-header .custom-cell:nth-child(6),
.docs-chk-table .custom-row .custom-cell:nth-child(6) {
    justify-content: center;
    padding-right: 16px;
}

/* ── Sin Coincidencia — Movimientos del Banco (Fecha|Concepto|Referencia|Monto|Tipo|Acciones) ── */
.rcl-um-mov-table .custom-header,
.rcl-um-mov-table .custom-tbody {
    grid-template-columns: 74px minmax(0, 1fr) 96px 92px 78px 72px !important;
}
/* Acciones: la celda llena el track (no el ancho fijo de 36px del layout viejo)
   y centra el burger, alineándolo con el encabezado "Acciones". */
.rcl-um-mov-table .custom-row .rcl-um-td-action {
    width: auto;
    justify-content: center;
}
/* Concepto: que use el track flexible (no el ancho fijo del layout viejo) */
.rcl-um-mov-table .rcl-um-td-concepto {
    max-width: none;
    width: auto;
}
.rcl-um-mov-table .rcl-um-td-amount { width: auto; }
/* Monto (4ta col) — alineado a la derecha */
.rcl-um-mov-table .custom-header .custom-cell:nth-child(4),
.rcl-um-mov-table .custom-row .custom-cell:nth-child(4) {
    justify-content: flex-end;
    font-weight: 600;
}

/* ── Modal: documentos en tránsito por tipo ─────────────────────────── */
/* 8 columnas: checkbox | Secuencia | Tipo | Fecha | Descripción | Monto | Estatus | Acciones */
.trn-docs-md-table .custom-header,
.trn-docs-md-table .custom-tbody {
    grid-template-columns: 44px 80px 96px 100px minmax(180px, 1fr) 110px 104px 64px !important;
}

.trn-docs-md-table .rcl-um-td-concepto {
    max-width: none;
    width: auto;
}

/* Descripción: que muestre el texto completo (varias líneas si hace falta)
   en vez de cortarse. */
.trn-docs-md-table .custom-row .custom-cell:nth-child(5) {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    line-height: 1.3;
}

/* Monto (6ta col) — alineado a la derecha */
.trn-docs-md-table .custom-header .custom-cell:nth-child(6),
.trn-docs-md-table .custom-row .custom-cell:nth-child(6) {
    justify-content: flex-end;
    font-weight: 600;
}

/* ── Barra de balances en vivo dentro del modal de tránsito ──────────
   Trae la Diferencia (y Conciliado/Mayor) a donde está la atención del
   usuario: se actualiza con cada cambio de estatus, sin depender de las
   cartas héroe que el modal tapa. */
.trn-md-balancebar {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    align-items: center;
    gap: 1.5rem;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px 1.5rem 14px;
    background: #f8fafc;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.trn-md-bb-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.trn-md-bb-cell--right { align-items: flex-end; text-align: right; }
.trn-md-bb-cell--dif {
    align-items: center;
    text-align: center;
    padding: 6px 12px;
    border-radius: 12px;
    border: 1px dashed rgba(15, 23, 42, 0.16);
    background: #fff;
}
.trn-md-bb-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
}
.trn-md-bb-label i { color: #94a3b8; }
.trn-md-bb-cur { font-size: 0.85rem; font-weight: 600; color: #94a3b8; }
.trn-md-bb-value {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: #334155;
}
/* Color por signo de Conciliado/Mayor (setManualDisplay alterna las clases) */
.trn-md-bb-value .rcl-amount-positive { color: #16a34a; }
.trn-md-bb-value .rcl-amount-negative { color: #dc2626; }
.trn-md-bb-value .rcl-amount-positive::before,
.trn-md-bb-value .rcl-amount-negative::before { content: ''; }
/* Diferencia: por signo, verde al cuadrar */
.trn-md-dif__value .rcl-amount-positive { color: #16a34a; }
.trn-md-dif__value .rcl-amount-negative { color: #dc2626; }
.trn-md-dif__track {
    width: 100%;
    max-width: 220px;
    height: 5px;
    margin-top: 4px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.1);
    overflow: hidden;
}
.trn-md-dif__bar {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: #94a3b8;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease;
}
.trn-md-dif__status {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
}
/* Estado cuadrado: todo en verde */
.trn-md-balancebar.is-squared .trn-md-bb-cell--dif {
    background: rgba(22, 163, 74, 0.07);
    border-color: rgba(22, 163, 74, 0.4);
}
.trn-md-balancebar.is-squared .trn-md-dif__bar { background: #16a34a; }
.trn-md-balancebar.is-squared .trn-md-dif__value,
.trn-md-balancebar.is-squared .trn-md-dif__status { color: #16a34a; }

@media (max-width: 767.98px) {
    .trn-md-balancebar { grid-template-columns: 1fr; gap: 0.75rem; }
    .trn-md-bb-cell, .trn-md-bb-cell--right { align-items: center; text-align: center; }
}

/* ── Checks: delivery status indicator ─────────────────────────────── */
.delivery-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #adb5bd;
    vertical-align: middle;
    margin-left: 6px;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}
.delivery-dot--delivered {
    background-color: #1890ff;
    box-shadow: 0px 0px 6px #8888ff;
}

/* ── Tab 4: Resumen — tabla estructurada de montos ──────────────────── */
/* Cartas destacadas de balances — conciliación bancaria.
   Estética de "libro mayor": el número es el héroe (tabular) con regla de
   doble subrayado (total contable) y color semántico del signo. */
.rcl-top-balance {
    margin-bottom: 0;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.18s ease;
}
.rcl-top-balance:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.rcl-top-balance__inner {
    padding: 16px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-align: center;
}
.rcl-top-balance__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}
.rcl-top-balance__label i {
    font-size: 0.95rem;
    color: #94a3b8;
}
/* RD$ + número, alineados a la base como en un libro contable */
.rcl-top-balance__amount {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
}
.rcl-hero-cur {
    font-size: 1.1rem;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: -0.01em;
}
.rcl-top-balance__value {
    display: inline-block;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: #334155;                                   /* neutro (cero) */
    padding: 1px 4px 6px;
    border-bottom: 3px solid rgba(51, 65, 85, 0.22);  /* regla de total contable */
    border-radius: 0;
}
/* Color semántico del signo (setManualDisplay alterna estas clases) */
.rcl-top-balance__value.rcl-amount-positive {
    color: #16a34a;
    border-bottom-color: rgba(22, 163, 74, 0.5);
}
.rcl-top-balance__value.rcl-amount-negative {
    color: #dc2626;
    border-bottom-color: rgba(220, 38, 38, 0.5);
}
/* El signo va dentro del número (setManualDisplay), no en ::before */
.rcl-top-balance .rcl-amount-positive::before,
.rcl-top-balance .rcl-amount-negative::before {
    content: '';
}

@media (max-width: 575.98px) {
    .rcl-top-balance__value { font-size: 2rem; }
}

/* ── Carta de Diferencia (medidor "hacia el cuadre") ──────────────────
   No es un resultado, es un objetivo a cerrar: fondo frío inset + borde
   discontinuo la hacen leer como medidor, no como balance. Al cuadrar se
   tiñe de verde y muestra "¡Cuadrado!". */
.rcl-hero-diff {
    background: #f8fafc;
    border: 1px dashed rgba(15, 23, 42, 0.16);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}
.rcl-hero-diff:hover {
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}
.rcl-hero-diff__value {
    border-bottom: none;
    padding-bottom: 2px;
    color: #334155;
}
.rcl-hero-diff__track {
    width: 80%;
    max-width: 240px;
    height: 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    overflow: hidden;
}
.rcl-hero-diff__bar {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: #94a3b8;
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease;
}
.rcl-hero-diff__status {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #64748b;
}
/* Estado cuadrado: medidor lleno y verde, número y caption en verde */
.rcl-hero-diff.is-squared {
    background: rgba(22, 163, 74, 0.06);
    border-color: rgba(22, 163, 74, 0.4);
}
.rcl-hero-diff.is-squared .rcl-hero-diff__bar { background: #16a34a; }
.rcl-hero-diff.is-squared .rcl-hero-diff__value { color: #16a34a; }
.rcl-hero-diff.is-squared .rcl-hero-diff__status { color: #16a34a; }
/* El signo del número de diferencia vive dentro del texto (setManualDisplay).
   La diferencia se colorea por signo: verde si es positiva, roja si es
   negativa; al cuadrar (0) queda en verde. */
.rcl-hero-diff .rcl-hero-diff__value.rcl-amount-positive { color: #16a34a; border-bottom: none; }
.rcl-hero-diff .rcl-hero-diff__value.rcl-amount-negative { color: #dc2626; border-bottom: none; }
.rcl-hero-diff.is-squared .rcl-hero-diff__value { color: #16a34a; }
.rcl-hero-diff .rcl-amount-positive::before,
.rcl-hero-diff .rcl-amount-negative::before { content: ''; }

/* ── Pills de estado de panel (Interactivo / Solo lectura) ──────────── */
.rcl-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 3px 10px;
    border-radius: 999px;
    line-height: 1.2;
    white-space: nowrap;
}
.rcl-pill i { font-size: 0.8rem; }
.rcl-pill--live {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.1);
}
.rcl-pill--ro {
    color: #64748b;
    background: rgba(100, 116, 139, 0.12);
}
/* Etiquetas Banco / Sistema (coherentes con los badges de pares conciliados) */
.rcl-pill--bank {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.1);
}
.rcl-pill--system {
    color: #16a34a;
    background: rgba(22, 163, 74, 0.12);
}
.rcl-pill--transit {
    color: #d97706;
    background: rgba(217, 119, 6, 0.12);
}

/* Paneles del tab Manual de igual altura (fila Bootstrap los estira), con el
   total anclado al fondo: la cadena flex empuja el último total hacia abajo,
   de modo que "Balance Conciliado" y "Balance del Mayor" quedan a la misma
   altura en ambos paneles. */
.rcl-mnl-panel { height: 100%; border-radius: 16px; }
.rcl-mnl-panel > .panel-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.rcl-mnl-panel .cnt-head-otr-dts {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.rcl-mnl-panel .cnt-head-otr-dts > .col-lg-12 {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
/* La última tabla crece para ocupar el espacio sobrante */
.rcl-mnl-panel .rcl-summary-tbl:last-child { flex: 1 1 auto; }
/* En esa tabla, el separador <hr> previo al total no hace falta */
.rcl-mnl-panel .rcl-summary-tbl:last-child hr { display: none; }
/* Total final anclado al fondo, más pronunciado, con regla superior */
.rcl-mnl-panel .rcl-summary-tbl:last-child .rcl-summary-total {
    margin-top: auto;
    border-top: 2px solid rgba(15, 23, 42, 0.14);
    padding-top: 8px;
}
/* El dropdown "Nuevo Documento" debe quedar sobre las filas de la tabla
   (el tema no fija z-index al .dropdown-menu, así que los botones burger de
   las filas se colaban por encima del menú). */
#btn_mnl_new_doc + .dropdown-menu { z-index: 1055; }

/* Campo "Balance Según Banco" — el input que digita el usuario, como tarjeta
   prominente y separada de la tabla de partidas (evita el amontonamiento con
   el pill y "Nuevo Documento"). */
.rcl-bank-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    padding: 7px 12px;
    margin-bottom: 12px;
}
.rcl-bank-balance__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}
.rcl-bank-balance__label i { color: #2563eb; }
.rcl-bank-balance__field {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    padding: 5px 10px;
    flex: 0 1 190px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.rcl-bank-balance__field:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.rcl-bank-balance__cur {
    font-size: 0.82rem;
    font-weight: 600;
    color: #94a3b8;
    flex-shrink: 0;
}
.rcl-bank-balance__input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    text-align: right;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: #1e293b;
    padding: 0;
}
.rcl-bank-balance__input:focus {
    outline: none;
    box-shadow: none;
}

/* Padding de panel y separación de subtítulos más ajustados */
.rcl-mnl-panel > .panel-content.p-3 { padding: 0.85rem 1rem !important; }
.rcl-mnl-panel .document-info { margin-bottom: 0.5rem !important; }
.rcl-mnl-panel .cnt-head-otr-dts h6 { margin-top: 0.35rem; margin-bottom: 0.25rem; }

/* Chips de icono por tipo de partida — cada fila lleva su icono dentro de
   un cuadro redondeado tintado con el color semántico del movimiento. */
.rcl-summary-tbl .rcl-col-label i.mvt-icon-deposito,
.rcl-summary-tbl .rcl-col-label i.mvt-icon-cheque,
.rcl-summary-tbl .rcl-col-label i.mvt-icon-nota-debito,
.rcl-summary-tbl .rcl-col-label i.mvt-icon-nota-credito,
.rcl-summary-tbl .rcl-col-label i.mvt-icon-balance {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    margin-right: 8px;
    font-size: 0.74rem;
    flex-shrink: 0;
    vertical-align: middle;
}
.rcl-summary-tbl .rcl-col-label i.mvt-icon-deposito    { background: rgba(22, 163, 74, 0.12);  color: #16a34a; }
.rcl-summary-tbl .rcl-col-label i.mvt-icon-cheque      { background: rgba(217, 119, 6, 0.13);  color: #d97706; }
.rcl-summary-tbl .rcl-col-label i.mvt-icon-nota-debito { background: rgba(225, 29, 72, 0.11);  color: #e11d48; }
.rcl-summary-tbl .rcl-col-label i.mvt-icon-nota-credito{ background: rgba(37, 99, 235, 0.11);   color: #2563eb; }
.rcl-summary-tbl .rcl-col-label i.mvt-icon-balance     { background: rgba(100, 116, 139, 0.13); color: #475569; }

/* El texto del label toma el mismo color de su icono de tipo (icono + label
   del mismo color). Depósito verde · Cheque naranja · Nota Débito rojo ·
   Nota Crédito azul. */
.rcl-summary-tbl .rcl-col-label:has(i.mvt-icon-deposito)     { color: #16a34a; }
.rcl-summary-tbl .rcl-col-label:has(i.mvt-icon-cheque)       { color: #d97706; }
.rcl-summary-tbl .rcl-col-label:has(i.mvt-icon-nota-debito)  { color: #e11d48; }
.rcl-summary-tbl .rcl-col-label:has(i.mvt-icon-nota-credito) { color: #2563eb; }

/* Los totales no llevan chip — el icono va inline, más sobrio */
.rcl-summary-total .rcl-col-label i.mvt-icon-balance {
    background: transparent;
    width: auto;
    height: auto;
    margin-right: 7px;
    color: #475569;
}

/* Etiquetas sin recorte: el ancho fijo de 9rem + ellipsis cortaba textos
   como "Pago a Suplidores" o "Balance del Mayor". */
.rcl-mnl-panel .rcl-col-label {
    width: auto;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

/* Desglose "Menos — Notas Débito" con columna Acciones (ojo → lotes auxiliares):
   label | signo | monto | acción. Solo este modificador; la tabla de Notas
   Crédito sigue con 3 columnas. */
.rcl-summary-tbl--nocount.rcl-summary-tbl--dn-actions .rcl-summary-row,
.rcl-summary-tbl--nocount.rcl-summary-tbl--dn-actions .rcl-summary-total {
    grid-template-columns: minmax(3rem, 1fr) 1rem minmax(6.5rem, max-content) 2rem;
}

/* Modal de lotes auxiliares: tablas con scroll y pie de totales */
#md_aux_batches .modal-content { position: relative; }
/* Overlay de carga propio del modal: el loader global queda por detrás del
   modal (z-index menor), así que bloqueamos desde aquí. Cubre toda la tarjeta
   para que el spinner quede centrado sin importar el alto del contenido. */
.rcl-aux-loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
    color: var(--text-primary-color-arb, #2563eb);
    border-radius: inherit;
}
.rcl-aux-loading:not([hidden]) { display: flex; }

#md_aux_batches .rcl-aux-tbl-scroll {
    max-height: 52vh;
    overflow-y: auto;
}
/* La imagen del estado vacío solo tiene tamaño bajo .content-table-responsive;
   aquí está fuera de ese scope, así que sin restringir se desbordaba del modal. */
#md_aux_batches .table-without-data { padding: 20px 12px; }
#md_aux_batches .table-without-data img { width: 130px; max-width: 45%; height: auto; }
#md_aux_batches .table-without-data h2 { font-size: 1.05rem; color: #6c757d; margin-bottom: 12px; }
.rcl-aux-totals {
    display: flex;
    justify-content: flex-end;
    gap: 22px;
    padding: 10px 4px 2px;
    border-top: 1px solid #e9ecef;
    margin-top: 8px;
}
.rcl-aux-totals small {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c757d;
}
.rcl-aux-totals b { font-size: 0.95rem; color: #212529; }

/* ── Conciliación conciliada/posteada → solo lectura ──────────────────────────
   El contenedor del formulario (#content_sec_vw) recibe .rcl-locked. Se ocultan
   las afordancias de creación de documentos; el resto de acciones de edición se
   deshabilitan/suprimen desde el presenter. */
.rcl-locked #btn_crd_doc_tab,
.rcl-locked #btn_crd_doc_um,
.rcl-locked #btn_mnl_new_doc { display: none !important; }

/* La barra "Crear documento" del tab Sin Coincidencia establece un contexto de
   apilamiento por encima de los paneles siguientes; sin esto el dropdown se
   pintaba detrás de las tablas. */
.rcl-um-create-bar { position: relative; z-index: 30; }
.rcl-um-create-bar .dropdown-menu { z-index: 1051; }

/* Loader propio del modal "Crear documento": el loader global (#panelLoader)
   queda en un contexto de apilamiento por debajo del modal, así que mostramos
   este overlay dentro del .modal-content mientras se guarda. */
.rcl-modal-loader {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .7);
  border-radius: inherit;
  z-index: 20;
}
.rcl-modal-loader.show { display: flex; }

/* Modal "Ver documento" (overlay propio, se togglea con el atributo [hidden]).
   La clase .txt-overlay-modal se agregó sin CSS, por lo que el contenido se
   mostraba en flujo, sin estilo. Aquí se define como overlay centrado. */
.txt-overlay-modal {
    position: fixed;
    inset: 0;
    z-index: 2300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.45);
}
.txt-overlay-modal:not([hidden]) { display: flex; }

.txt-overlay-modal__dialog {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.25);
    width: 100%;
    max-width: 900px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.txt-overlay-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
}
.txt-overlay-modal__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.15s;
}
.txt-overlay-modal__close:hover { color: #dc2626; }
.txt-overlay-modal__body {
    padding: 20px;
    overflow-y: auto;
}
.txt-overlay-modal__footer {
    display: flex;
    justify-content: flex-end;
    padding: 14px 20px;
    border-top: 1px solid #e9ecef;
    flex-shrink: 0;
}

/* Filas compactas en los paneles del tab Manual para que todo entre sin scroll */
.rcl-mnl-panel .rcl-summary-row { padding-top: 4px; padding-bottom: 4px; }
.rcl-mnl-panel .rcl-summary-head { font-size: 0.7rem; padding-bottom: 4px; }
.rcl-mnl-panel .rcl-summary-total .rcl-col-label,
.rcl-mnl-panel .rcl-summary-total .rcl-col-amount { font-size: 0.92rem; }

.rcl-summary-tbl {
    display: flex;
    flex-direction: column;
    font-size: 0.82rem;
}

.rcl-summary-head,
.rcl-summary-row,
.rcl-summary-total {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 4px 2px;
    display: grid;
    /* Tipo (flexible, con ellipsis) | Cant. | signo | Monto (lo que necesite el número) */
    grid-template-columns: minmax(3rem, 1fr) 2.6rem 1rem minmax(6.5rem, max-content);
    justify-items: center;
}

.rcl-col-label{
    justify-self: start;
}

.rcl-col-amount{
  justify-self: end;
}

/* Tablas de desglose sin columna "Cant." (Datos del Mayor): label | signo | monto.
   Sin este override heredan el grid de 4 columnas y el monto cae en la columna
   de 1rem del signo, encimándose al +/- (efecto tachado en montos largos). */
.rcl-summary-tbl--nocount .rcl-summary-head,
.rcl-summary-tbl--nocount .rcl-summary-row,
.rcl-summary-tbl--nocount .rcl-summary-total {
    grid-template-columns: minmax(3rem, 1fr) 1rem minmax(6.5rem, max-content);
}

.rcl-summary-head {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    color: #999;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: 6px;
    margin-bottom: 1px;
}

.rcl-summary-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.045);
}

.rcl-summary-total {
    padding-top: 5px;
}

.rcl-col-label {
    width: 9rem;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rcl-col-count {
    width: 2.6rem;
    text-align: center;
    color: #6c757d;
    font-size: 0.78rem;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    padding: 1px 4px;
}

.rcl-col-action {
    width: 2rem;
    text-align: center;
    flex-shrink: 0;
}

.rcl-summary-tbl--actions .rcl-summary-head,
.rcl-summary-tbl--actions .rcl-summary-row,
.rcl-summary-tbl--actions .rcl-summary-total {
    grid-template-columns: 1fr 2fr 1.5rem 5.5rem 9rem;
}

.rcl-summary-tbl--actions .rcl-col-label {
    width: auto;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

/* Cant.: pill de datos y encabezado centrados sobre el mismo eje de la
   columna. El encabezado "CANT." va como texto plano (sin caja de 2.6rem ni
   fondo) para que su centro coincida con el de los pills. */
.rcl-summary-tbl--actions .rcl-col-count { justify-self: center; }
.rcl-summary-tbl--actions .rcl-summary-head .rcl-col-count {
    width: auto;
    background: transparent;
    padding: 0;
}

.rcl-col-action {
    width: auto;
    text-align: center;
}

/* Dedicated sign column — keeps +/- vertically aligned */
.rcl-col-sign {
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
    font-weight: 600;
}

.rcl-col-sign.rcl-sign-pos { color: #28a745; }
.rcl-col-sign.rcl-sign-neg { color: #dc3545; }

/* Amount column: no sign prefix — sign lives in its own column */
.rcl-summary-tbl .rcl-amount-positive::before,
.rcl-summary-tbl .rcl-amount-negative::before {
    content: '';
}

.rcl-col-amount {
    flex: 1;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* ── Distribución de Gastos — Flat List Layout ────────────────────── */
.dsg-cc-section {
    margin-bottom: 1.5rem;
    border: 1px solid var(--theme-color-border, #e0e4eb);
    border-radius: 6px;
    overflow: hidden;
}

.dsg-cc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: var(--theme-color-bg-3, #f4f6fb);
    border-bottom: 1px solid var(--theme-color-border, #e0e4eb);
    min-height: 42px;
}

.dsg-cc-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dsg-cc-title h6 {
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--theme-color-text, #333);
}

.dsg-cc-stats {
    font-size: 0.8rem;
    color: var(--theme-color-text-muted, #666);
}

.dsg-cc-stats strong {
    font-weight: 600;
    color: var(--theme-color-text, #333);
}

.dsg-cc-table-wrap {
    overflow-x: auto;
}

.dsg-accounts-table {
    table-layout: fixed;
    width: 100%;
}

.dsg-accounts-thead th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-color-text-muted, #888);
    padding: 6px 10px;
    background: var(--theme-color-bg-2, #fafbfc);
    border-bottom: 1px solid var(--theme-color-border, #e0e4eb);
}

.dsg-accounts-thead th:first-child { width: auto; }
.dsg-accounts-thead th:nth-child(2) { width: 200px; }
.dsg-accounts-thead th:nth-child(3) { width: 90px; }

/* Row base */
.dsg-row td {
    padding: 4px 8px;
    vertical-align: middle;
    border-bottom: 1px solid var(--theme-color-border, #f0f2f5);
}

.dsg-row:last-child td { border-bottom: none; }

/* New/empty row — subtle tint so user knows where to type */
.dsg-new-row td {
    background: var(--theme-color-bg-4, #f9fbff);
}

.dsg-new-row td:first-child::before {
    content: '+';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-color-primary, #1976d2);
    font-weight: 700;
    font-size: 1rem;
    pointer-events: none;
}

.st-section-header{
  display: flex;
    align-items: center;
    background: #f8f9fa;
    border-left: 3px solid #1a73e8;
    border-radius: 0 4px 4px 0;
    padding: 8px 14px;
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #343a40;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.dsg-new-row .dsg-td-acct { position: relative; padding-left: 26px; }

/* Inputs inside rows */
.dsg-td-acct .input-group { flex-wrap: nowrap; }
.dsg-td-acct .inp_acct_row[readonly] { background: transparent; cursor: default; border-color: transparent; }
.dsg-td-acct .inp_acct_row[readonly]:focus { border-color: var(--theme-color-primary, #1976d2); background: #fff; }

.dsg-td-amt .inputNumber { text-align: right; font-variant-numeric: tabular-nums; }

.dsg-td-actions { white-space: nowrap; text-align: right; }
.dsg-td-actions .btn { padding: 3px 7px; }

/* Focus highlight for keyboard navigation */
.dsg-row:focus-within td { background: rgba(25, 118, 210, 0.03); }
#dsg_modal_status { vertical-align: middle; font-size: .75rem; }

/* Posted document indicator */
.td-seq {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.icon-posted {
    color: #c38106;
    font-size: 18px;
    flex-shrink: 0;
    font-weight: bold;
}

.icon-pending {
    color: #9d9d9d;
    font-size: 18px;
    flex-shrink: 0;
    font-weight: bold;
}

/* ============================================================
   Check Print Configurator — Banco > Parámetros
   ============================================================ */

/* Layout */
.chk-wrap          { display:flex; flex-direction:column; gap:12px; height:100%; }
.chk-toolbar       { display:flex; align-items:center; flex-wrap:wrap; gap:8px;
                     background:#fff; border:1px solid #e2e8f0; border-radius:6px;
                     padding:10px 14px; }
.chk-toolbar-sep   { width:1px; height:24px; background:#e2e8f0; margin:0 4px; }
.chk-main          { display:flex; gap:12px; flex:1; min-height:0; }

/* Sidebar */
.chk-sidebar       { width:240px; flex-shrink:0; display:flex; flex-direction:column; gap:12px; }
.chk-sidebar-section { background:#fff; border:1px solid #e2e8f0; border-radius:8px;
                       padding:12px 14px; box-shadow:0 1px 3px rgba(15,23,42,.04); }
.chk-sidebar-section .st-section-header { margin-top:0; }
.chk-field-list    { display:flex; flex-direction:column; gap:2px; }
.chk-panel         { background:#fff; border:1px solid #e2e8f0; border-radius:6px; overflow:hidden; }
.chk-panel-hdr     { padding:8px 12px; background:#f8fafc; border-bottom:1px solid #e2e8f0;
                     font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px;
                     color:#64748b; display:flex; align-items:center; gap:6px; }
.chk-panel-body    { padding:8px; }

/* Field list */
.chk-field-item    { display:flex; align-items:center; gap:7px; padding:7px 8px;
                     border-radius:5px; cursor:pointer; font-size:13px; color:#374151;
                     transition:background .15s; user-select:none; }
.chk-field-item:hover   { background:#f1f5f9; }
.chk-field-item.active  { background:#eff6ff; color:#2563eb; }
.chk-field-dot     { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.chk-field-item .fal   { width:14px; text-align:center; flex-shrink:0; }
.chk-field-name    { flex:1; font-size:12.5px; }
.chk-vis-btn       { border:none; background:none; cursor:pointer; color:#94a3b8; padding:2px 4px;
                     border-radius:3px; line-height:1; }
.chk-vis-btn:hover { background:#f1f5f9; color:#475569; }
.chk-del-btn       { border:none; background:none; cursor:pointer; color:#94a3b8; padding:2px 4px;
                     border-radius:3px; line-height:1; }
.chk-del-btn:hover { background:#fee2e2; color:#ef4444; }
.chk-add-label-row { padding:8px; border-bottom:1px solid #e2e8f0; display:flex; gap:4px; }
.chk-add-label-inp { flex:1; font-size:12px; padding:4px 6px; border:1px solid #d1d5db;
                     border-radius:4px; outline:none; min-width:0; }
.chk-add-label-inp:focus { border-color:#4361ee; box-shadow:0 0 0 2px rgba(67,97,238,.12); }

/* Properties panel */
.chk-props-title   { font-size:12px; font-weight:600; color:#374151; margin-bottom:8px; }
.chk-prop-grid     { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.chk-prop-field    { display:flex; flex-direction:column; gap:2px; }
.chk-prop-field label   { font-size:10px; color:#64748b; font-weight:500; }
.chk-prop-field input   { font-size:12px; padding:4px 6px; border:1px solid #d1d5db;
                          border-radius:4px; width:100%; outline:none; }
.chk-prop-field input:focus { border-color:#4361ee; box-shadow:0 0 0 2px rgba(67,97,238,.12); }

/* Canvas area */
.chk-canvas-area   { flex:1; display:flex; flex-direction:column; gap:10px; min-width:0; }
.chk-canvas-outer  { border:1px solid #e2e8f0; border-radius:6px;
                     background:#cbd5e1; padding:16px;
                     overflow:hidden; box-sizing:border-box; }

/* The check canvas */
#chk_canvas_wrapper { display:inline-block; }
#chk_canvas        { position:relative; width:900px; height:390px;
                     background:#f8f8f8;
                     box-shadow:0 2px 16px rgba(0,0,0,.18); border-radius:3px;
                     overflow:hidden; cursor:default; }
#chk_canvas img.chk-bg { position:absolute; inset:0; width:100%; height:100%;
                          object-fit:fill; pointer-events:none; user-select:none; }

/* Versión migrada (core, IDs cfg_*): el canvas usa la clase .chk-canvas.
   Mismas dimensiones/estilo que el legacy #chk_canvas para que las etiquetas
   (posicionadas en px sobre un ancho de 900) caigan en el lugar correcto. */
.chk-canvas        { position:relative; width:900px; height:390px;
                     background:#f8f8f8;
                     box-shadow:0 2px 16px rgba(0,0,0,.18); border-radius:3px;
                     overflow:hidden; cursor:default; }
.chk-canvas img.chk-bg { position:absolute; inset:0; width:100%; height:100%;
                          object-fit:contain; pointer-events:none; user-select:none; }

/* Canvas placeholder */
.chk-canvas-placeholder {
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:8px;
    color:#94a3b8; pointer-events:none; }
.chk-canvas-placeholder i  { font-size:40px; opacity:.4; }
.chk-canvas-placeholder p  { font-size:13px; margin:0; }

/* Draggable field element */
.chk-field         { position:absolute; display:flex; align-items:stretch;
                     border:1.5px dashed var(--fc, #4361ee);
                     background:rgba(255,255,255,.55);
                     border-radius:3px; cursor:grab; user-select:none;
                     box-sizing:border-box; }
.chk-field:hover   { border-style:solid; background:rgba(255,255,255,.75);
                     z-index:10; }
.chk-field--selected { border-style:solid; border-width:2px;
                        background:rgba(255,255,255,.85);
                        box-shadow:0 0 0 3px rgba(67,97,238,.25);
                        z-index:20; }
.chk-field-inner   { display:flex; align-items:center; gap:5px; padding:0 6px;
                     flex:1; overflow:hidden; cursor:grab; }
.chk-field-inner:active { cursor:grabbing; }
.chk-field-inner .fal  { font-size:11px; color:var(--fc, #4361ee); flex-shrink:0; }
.chk-field-inner span  { font-size:inherit; white-space:nowrap; overflow:hidden;
                          text-overflow:ellipsis; color:#1e293b; font-weight:500; flex:1; }
.chk-field-coords  { font-size:9px; color:#94a3b8; flex-shrink:0; white-space:nowrap; }
.chk-field--selected .chk-field-coords { color:#4361ee; }

/* Resize handles */
.chk-resize-handle { position:absolute; background:var(--fc,#4361ee);
                     opacity:0; transition:opacity .15s; border-radius:2px; }
.chk-field:hover   .chk-resize-handle,
.chk-field--selected .chk-resize-handle { opacity:.7; }
.chk-rz-e   { right:-4px; top:50%; transform:translateY(-50%);
              width:8px; height:16px; cursor:ew-resize; }
.chk-rz-s   { bottom:-4px; left:50%; transform:translateX(-50%);
              width:16px; height:8px; cursor:ns-resize; }
.chk-rz-se  { right:-4px; bottom:-4px; width:10px; height:10px;
              cursor:nwse-resize; border-radius:50%; }

/* Coordinates panel */
.chk-coords-wrap   { background:#fff; border:1px solid #e2e8f0; border-radius:6px;
                     padding:10px 12px; }
.chk-coords-title  { font-size:11px; font-weight:600; text-transform:uppercase;
                     letter-spacing:.5px; color:#64748b; margin-bottom:8px;
                     display:flex; align-items:center; gap:6px; }
.chk-coord-row     { display:flex; align-items:center; justify-content:space-between;
                     padding:4px 0; border-bottom:1px solid #f1f5f9; font-size:12px; }
.chk-coord-row:last-child { border-bottom:none; }
.chk-coord-label   { display:flex; align-items:center; gap:6px; color:#374151;
                     min-width:130px; }
.chk-coord-label .fal { width:13px; text-align:center; }
.chk-coord-vals    { display:flex; gap:12px; color:#64748b; }
.chk-coord-vals span { white-space:nowrap; font-size:11px; }
.chk-coord-vals b  { color:#1e293b; }

/* JSON output */
.chk-output-section { background:#fff; border:1px solid #e2e8f0; border-radius:6px; padding:10px 12px; }
.chk-output-section textarea { width:100%; height:180px; font-family:monospace; font-size:12px;
                                border:1px solid #e2e8f0; border-radius:4px; padding:8px; resize:vertical;
                                outline:none; background:#f8fafc; }
.chk-output-section textarea:focus { border-color:#4361ee; }

/* Toast notification */
.chk-toast         { position:fixed; bottom:24px; right:24px; padding:10px 18px;
                     border-radius:6px; font-size:13px; font-weight:500; z-index:9999;
                     display:none; box-shadow:0 4px 12px rgba(0,0,0,.15);
                     transition:opacity .3s; }
.chk-toast--success { background:#10b981; color:#fff; }
.chk-toast--error   { background:#ef4444; color:#fff; }

/* Toolbar controls */
.chk-zoom-group    { display:flex; align-items:center; gap:4px; }
.chk-zoom-val      { min-width:42px; text-align:center; font-size:12.5px;
                     font-weight:600; color:#374151; }
.chk-grid-group    { display:flex; align-items:center; gap:6px; font-size:12.5px; color:#374151; }
.chk-grid-size-inp { width:48px; padding:3px 5px; border:1px solid #d1d5db;
                     border-radius:4px; font-size:12px; text-align:center; outline:none; }
.chk-snap-label    { display:flex; align-items:center; gap:5px; cursor:pointer;
                     font-size:12.5px; color:#374151; }
.chk-upload-label  { font-size:11.5px; color:#64748b; max-width:160px;
                     white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Check configurator — field select & binding badge */
.chk-prop-field select,
.chk-account-select    { font-size:12px; padding:4px 6px; border:1px solid #d1d5db;
                         border-radius:4px; width:100%; outline:none; background:#fff;
                         cursor:pointer; }
.chk-prop-field select:focus,
.chk-account-select:focus { border-color:#4361ee; box-shadow:0 0 0 2px rgba(67,97,238,.12); }
.chk-field-binding { font-size:9px !important; color:#64748b !important; font-weight:400 !important;
                     white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
                     background:rgba(100,116,139,.1); border-radius:3px; padding:0 4px;
                     flex-shrink:0 !important; max-width:90px; line-height:16px; }


/* ═══════════════════════════════════════════════════════════════════════════
   DS-PH — Placeholder / Skeleton System
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Shimmer keyframe ───────────────────────────────────────────────────── */

@keyframes ds-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ─── Core bar ───────────────────────────────────────────────────────────── */

.ds-ph-bar {
  display: block;
  width: 100%;
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    #e3e6ea 25%,
    #eff1f4 50%,
    #e3e6ea 75%
  );
  background-size: 400% 100%;
  animation: ds-shimmer 1.6s ease infinite;
}

/* ─── Width modifiers ────────────────────────────────────────────────────── */

.ds-ph-bar--25  { width: 25%; }
.ds-ph-bar--40  { width: 40%; }
.ds-ph-bar--60  { width: 60%; }
.ds-ph-bar--75  { width: 75%; }

/* ─── Height (size) modifiers ────────────────────────────────────────────── */

.ds-ph-bar--xs  { height: 8px;  border-radius: 4px; }
.ds-ph-bar--sm  { height: 10px; border-radius: 5px; }
                                 /* --md is the default (14px) */
.ds-ph-bar--lg  { height: 20px; }
.ds-ph-bar--xl  { height: 32px; }

/* ─── Placeholder row inside custom-table ────────────────────────────────── */
/*
 * .ds-ph-row goes on a .custom-row element.
 * Because .custom-row has display:contents, its children (.custom-cell)
 * are direct grid items — the bar inside each cell fills the column width.
 */

.ds-ph-row .custom-cell {
  padding: 12px 16px;
  align-items: center;
  /* suppress hover highlight on skeleton rows */
  background-color: #fff !important;
  pointer-events: none;
}

/* Dim every other row slightly to suggest row separation */
.ds-ph-row:nth-child(even) .custom-cell {
  background-color: #fafbfe !important;
}

/* ─── Staggered animation delay per row ─────────────────────────────────── */
/*
 * Apply a small delay offset per row so the shimmer wave cascades
 * downward row by row instead of all columns animating in lockstep.
 */

.ds-ph-row:nth-child(1) .ds-ph-bar { animation-delay: 0s;    }
.ds-ph-row:nth-child(2) .ds-ph-bar { animation-delay: 0.08s; }
.ds-ph-row:nth-child(3) .ds-ph-bar { animation-delay: 0.16s; }
.ds-ph-row:nth-child(4) .ds-ph-bar { animation-delay: 0.24s; }
.ds-ph-row:nth-child(5) .ds-ph-bar { animation-delay: 0.32s; }
.ds-ph-row:nth-child(6) .ds-ph-bar { animation-delay: 0.40s; }

/* ─── Vary bar widths per column to look like real content ───────────────── */
/*
 * Column 1  → account/code (medium)
 * Column 2  → name/cost center (wide)
 * Column 3  → description (very wide)
 * Column 4  → amount right-aligned (narrow)
 * Column 5  → amount right-aligned (narrow)
 * Column 6  → actions (icon placeholder, very narrow)
 */

.ds-ph-row .custom-cell:nth-child(1) .ds-ph-bar { width: 70%; }
.ds-ph-row .custom-cell:nth-child(2) .ds-ph-bar { width: 55%; }
.ds-ph-row .custom-cell:nth-child(3) .ds-ph-bar { width: 85%; }
.ds-ph-row .custom-cell:nth-child(4) .ds-ph-bar { width: 50%; margin-left: auto; }
.ds-ph-row .custom-cell:nth-child(5) .ds-ph-bar { width: 50%; margin-left: auto; }
.ds-ph-row .custom-cell:nth-child(6) .ds-ph-bar { width: 28px; height: 28px; border-radius: 50%; margin: 0 auto; }

/* ─── Duplicate row highlight (bank accounts table) ─────────────────────── */
@keyframes row-duplicate-fade {
    0%   { background-color: rgba(255, 193, 7, 0.35); }
    70%  { background-color: rgba(255, 193, 7, 0.35); }
    100% { background-color: transparent; }
}

.row-highlight-duplicate {
    animation: row-duplicate-fade 2s ease-out forwards;
}


/* ─── Status Tabs (Activos / Inactivos) ───────────────────────────────────── */
.ds-status-tabs {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin-bottom: .75rem;
}

.ds-status-tab {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .85rem;
    border-radius: 6px;
    border: 2px solid transparent;
    background: transparent;
    color: #6c757d;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    line-height: 1.4;
}

.ds-status-tab:hover {
    background: #f1f5f9;
    color: #334155;
}

/* Activos → azul */
.ds-status-tab.active {
    background: #1e88e5;
    color: #fff;
    border-color: #1e88e5;
}

/* Inactivos → rojo */
.ds-status-tab--danger.active {
    background: #e53935;
    color: #fff;
    border-color: #e53935;
}

.ds-status-tab--danger:not(.active):hover {
    background: #fff5f5;
    color: #c62828;
}

.ds-status-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .3rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, .25);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
}

.ds-status-tab:not(.active) .ds-status-tab-badge {
    background: rgba(0, 0, 0, .09);
    color: #6c757d;
}

/* ─── New Entry Row (fila "Nuevo" con borde azul izquierdo) ───────────────── */
.new-entry-row {
    border-left: 3px solid #1e88e5 !important;
    background: #f8fbff;
}

/* ─── DS Status Tabs (Activos / Inactivos) ───────────────────────────────── */
.ds-tabs-section {
    background: #fff;
    box-shadow: 0 0 13px 0 rgba(62,44,90,.08);
    margin-bottom: 1.5rem;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,.09);
    border-bottom: 1px solid #e0e0e0;
    padding: 12px 16px;
}
.ds-nav-tabs {
    display: flex; list-style: none; padding: 0; margin: 0;
    gap: 4px;
}
.ds-nav-item { display: flex; align-items: center; }
.ds-nav-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border: none; border-radius: 4px;
    background: transparent; color: inherit;
    font-size: 0.8125rem; font-weight: 500;
    text-decoration: none; cursor: pointer;
    transition: 0.4s;
}
.ds-nav-link:hover:not(.active) { color: inherit; background: rgba(0,0,0,.04); }
.ds-nav-link.active { background: #008fd3; color: #fff; }
.ds-nav-link.active[data-tab="inactive"] { background: #b91c1c; color: #fff; }
.ds-tab-badge {
    font-size: 0.68rem; font-weight: 700; padding: 1px 8px;
    border-radius: 10px; background: rgba(0,0,0,.06); color: inherit;
}
.ds-nav-link.active .ds-tab-badge { background: rgba(255,255,255,.25); }

/* Ellipsis — works on custom-cell (block) and span/div (flex children) */
.text-ellipsis {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Description column: always show full text wrapped */
.custom-cell.cell-description {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    align-items: flex-start;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Ellipsis for account name in codification table cells */
.custom-cell.flex-column .text-muted {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Contain the accounting account input description within its column */
.content-accounting-account {
    min-width: 0;
    overflow: hidden;
}
.content-accounting-account span.help-block {
    display: inline-block;
    max-width: 100%;
    width: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Align accounting account input with cost center input in codification forms.
   The empty <label class="form-label"> adds margin-bottom that pushes the input
   down relative to the cost center field. */
.bk-codification-account > label.form-label {
    display: none;
}
.bk-codification-account {
    margin-bottom: 0;
}

/* Docs tab — side-by-side scrollable tables */
.docs-tab-tables-row {
    gap: 1rem;
    align-items: flex-start;
}
/* Ensure "Crear documento" dropdown renders above the scroll tables */
#tab-docs .btn-group {
    position: relative;
    z-index: 20;
}
#tab-docs .dropdown-menu {
    z-index: 1060;
}
.docs-tab-table-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.docs-tab-scroll-area {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
}
.docs-tab-scroll-area .table-without-data img,
.rcl-scroll-area .table-without-data img,
.rcl-listado-wrap .table-without-data img {
    max-height: 80px;
}
.docs-tab-sticky-head th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #fff;
}
/* Docs tab — bordered section panels */
.docs-tab-section {
    border: 1px solid #e4e7ea;
    border-radius: 6px;
    overflow: hidden;
}
.docs-tab-section > .head {
    padding: 10px 14px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e4e7ea;
}
.over-flow-visibility{
    overflow: initial;
}
/* ── Posteo NDB: Error Popover ────────────────────────────────────────────── */
.ndb-error-popover {
    position: absolute;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fff;
    border: 1px solid #f5c6cb;
    border-left: 4px solid #dc3545;
    border-radius: 6px;
    padding: 10px 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    max-width: 480px;
    animation: ndb-popover-in .15s ease;
}
@keyframes ndb-popover-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ndb-error-popover__icon {
    color: #dc3545;
    font-size: 15px;
    margin-top: 2px;
    flex-shrink: 0;
}
.ndb-error-popover__msg {
    flex: 1;
    font-size: 13px;
    color: #495057;
    line-height: 1.45;
}
.ndb-error-popover__close {
    background: none;
    border: none;
    padding: 0;
    margin-left: 4px;
    cursor: pointer;
    color: #adb5bd;
    font-size: 13px;
    flex-shrink: 0;
    line-height: 1;
}
.ndb-error-popover__close:hover {
    color: #495057;
}
/* ── Posteo NDB: Error Trigger Button ────────────────────────────────────── */
.ndb-error-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0 0 0 8px;
    cursor: pointer;
    color: #ff0018;
    font-size: 18px;
    vertical-align: middle;
    opacity: 1;
    transition: opacity .15s, transform .15s;
}
.ndb-error-trigger:hover {
    opacity: 1;
    transform: scale(1.15);
}
.mw-40px{
  min-width: 40px !important;
}

.g-10{
  gap: 10px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Bank Account Modal — layout + design
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Layout: flex column con scroll interno ─────────────────────────────────── */
#cnt_bnk_mdl_glb .modal-location {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  max-width: 860px;
  width: 90%;
}

#cnt_bnk_mdl_glb .head {
  flex-shrink: 0;
  padding: 18px 24px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 12px 12px 0 0;
}

#cnt_bnk_mdl_glb .panel-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px;
}

#cnt_bnk_mdl_glb .footer-location {
  flex-shrink: 0;
  position: static;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 0 0 12px 12px;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.bnk-mdl-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bnk-mdl-header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(0, 103, 171, 0.1);
  color: #0067ab;
  border-radius: 8px;
  flex-shrink: 0;
  font-size: 14px;
}

.bnk-mdl-header__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1a2332;
  letter-spacing: -0.01em;
}

.bnk-mdl-close-btn {
  width: 32px;
  height: 32px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px !important;
  color: #64748b !important;
  border-color: #e2e8f0 !important;
}

.bnk-mdl-close-btn:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}

/* ── Search bar ─────────────────────────────────────────────────────────────── */
.bnk-mdl-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f1f5f9;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 0 12px;
  margin-bottom: 16px;
  transition: border-color 0.2s, background 0.2s;
}

.bnk-mdl-search:focus-within {
  border-color: #0067ab;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 103, 171, 0.08);
}

.bnk-mdl-search__icon {
  color: #94a3b8;
  font-size: 13px;
  flex-shrink: 0;
  transition: color 0.2s;
}

.bnk-mdl-search:focus-within .bnk-mdl-search__icon {
  color: #0067ab;
}

.bnk-mdl-search__input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 0;
  font-size: 0.875rem;
  color: #1a2332;
  outline: none;
}

.bnk-mdl-search__input::placeholder {
  color: #94a3b8;
}

/* ── Cards ──────────────────────────────────────────────────────────────────── */
#cnt_bnk_mdl_glb .bank-account-card {
  border: 1px solid #e2e8f0;
  border-left: 3px solid #0067ab;
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  background: #fff;
  transition: box-shadow 0.15s, background 0.15s, transform 0.1s;
}

#cnt_bnk_mdl_glb .bank-account-card:hover {
  background: #f0f7ff;
  box-shadow: 0 4px 12px rgba(0, 103, 171, 0.1);
  transform: translateY(-1px);
}

#cnt_bnk_mdl_glb .bank-account-card:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

#cnt_bnk_mdl_glb .bank-description {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a2332;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#cnt_bnk_mdl_glb .bank-name {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 400;
}

#cnt_bnk_mdl_glb .bank-icon figure {
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}

#cnt_bnk_mdl_glb .bank-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#cnt_bnk_mdl_glb .amount-bank-card {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}

#cnt_bnk_mdl_glb .amount-bank-card .amount {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0067ab;
  text-align: right;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.mw-200{
  max-width: 200px !important;
}

/* ── panel-hdr sticky: evitar scroll horizontal sin quitar la animación de expansión */
.page-content {
  overflow-x: clip;
}

/* Administración de Seguridad: las tarjetas de grupo (una por opción) usan
   .panel-hdr, que el tema deja sticky. Al haber muchas, cada cabezal se pegaba
   al tope del viewport y se montaba por encima de la cabecera global. Estos
   cabezales de grupo no necesitan ser sticky. */
#ag_groups_container .panel-hdr {
  position: static;
}

/* ── Cheques: detalle sin scroll interno en el panel ── */
#content_sec_vw .panel .panel-content {
  overflow-y: visible !important;
  max-height: none !important;
}

/* ── Codificación: número y nombre de cuenta contable ── */
.cod-account-number,
.cod-account-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.cod-account-number {
  color: #3d4552;
  font-size: 0.8125rem;
}
.cod-account-name {
  color: #9ba4b0;
  font-size: 0.75rem;
}
/* ── Check status tab: danger variant (Cancelado) ── */
.ds-nav-link.ds-nav-link--danger { color: #c0392b; }
.ds-nav-link.ds-nav-link--danger:hover { color: #e74c3c; }
.ds-nav-link.ds-nav-link--danger.active { color: #fff; background-color: #e74c3c; border-color: #e74c3c; }

/* ── CuentaBanco: segmented control — tipo de conciliación ── */
.reconciliation-selector {
    display: flex;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 8px;
    padding: 3px;
    gap: 3px;
}
.reconciliation-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #72777f;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
    white-space: nowrap;
}
.reconciliation-option:hover:not(.active) {
    background: rgba(0, 0, 0, 0.05);
    color: #3d4552;
}
.reconciliation-option.active {
    background: #fff;
    color: #1a7545;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.reconciliation-option i {
    font-size: 0.8125rem;
}

/* ── TXT Generation Detail Modal ─────────────────────────────────── */
.txt-detail-summary {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.txt-detail-seq-badge {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #206bc4;
    color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.txt-detail-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 3px;
    line-height: 1.35;
}
.txt-detail-date {
    font-size: 11.5px;
    color: #888;
    margin: 0 0 8px;
}
.txt-detail-status-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.txt-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px 20px;
    margin-bottom: 4px;
}
.txt-meta-full {
    grid-column: 1 / -1;
}
.txt-meta-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #000000;
    margin-bottom: 5px;
}
.txt-meta-value {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #1a1f2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.txt-meta-value.is-mono {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 12px;
    color: #3d4552;
}
.txt-meta-value.is-path {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 10.5px;
    white-space: normal;
    word-break: break-all;
    line-height: 1.55;
    color: #666;
}
.txt-section-rule {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #9a9a9a;
}
.txt-section-rule::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.07);
}
.txt-route-pill {
    display: inline-block;
    background: rgba(32, 107, 196, 0.1);
    color: #1558a8;
    border-radius: 4px;
    padding: 1px 7px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 11px;
    font-weight: 600;
}
.txt-amount-mono {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.txt-id-mono {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 11.5px;
}

/* ── Account Movement footer ───────────────────────────────────────────────── */
.fade-in-up {
    animation: fadeInUp 0.5s ease-out forwards;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.footer-fixed-design {
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    position: fixed !important;
    bottom: 45px !important;
    left: 93px !important;
    width: 89% !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(26, 74, 142, 0.1);
    border-top: 2px solid #1a4a8e !important;
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.05);
    padding: 12px 25px !important;
    z-index: 999;
    box-sizing: border-box;
    border-radius: 8px 8px 0 0;
}
.footer-content-layout {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 30px;
}
.footer-column-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    position: relative;
}
.footer-column-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -15px;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(0, 0, 0, 0.08);
}
.f-label {
    color: #6c757d !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
}
.f-value {
    color: #1a4a8e !important;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}
.f-value-2 {
    color: #1a4a8e !important;
    font-size: 15px;
    font-weight: 700;
}
.f-label-balance {
    color: #b37400 !important;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.f-value-balance {
    color: #cf8a23 !important;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(207, 138, 35, 0.1);
}

/* ── Distribution modal summary ───────────────────────────────────────────── */
.atoa-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.atoa-summary__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 14px 12px 12px;
    text-align: center;
}
.atoa-summary__card--highlight {
    background: #eaf2ff;
    border-color: #b8d4f8;
}
.atoa-summary__label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    margin-bottom: 6px;
}
.atoa-summary__value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #343a40;
}
.atoa-summary__card--highlight .atoa-summary__value {
    color: #1a73e8;
}

/* ── Month end closing form ────────────────────────────────────────────────── */
#contentForm .input-group {
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border-radius: 4px;
    overflow: hidden;
}
#contentForm .input-group-text {
    background-color: #f8f9fa;
    color: #6c757d;
    font-weight: 600;
    font-size: 0.75rem;
    border-right: none;
    text-transform: uppercase;
}
#nt_dt_fsc_yr {
    border-left: 1px solid #dee2e6 !important;
    font-weight: 500;
}
#nt_dt_fsc_yr::-webkit-inner-spin-button,
#nt_dt_fsc_yr::-webkit-outer-spin-button {
    opacity: 0;
}

/* ─── Solicitud de Cheques (bank/captures/check-request) ─────────────────────── */

/* Tarjeta del banco seleccionado en el formulario */
.chk-bank-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border: 1px solid #e4e9f0;
    border-radius: 12px;
    background: #f4f8ff;
}
.chk-bank-info .chk-bank-name {
    font-weight: 600;
    color: var(--text-primary-color-arb, #1e293b);
    line-height: 1.2;
}

/* Totales de la tabla de codificación */
.chk-cod-totals {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 28px;
    padding: 14px 18px 4px;
}
.chk-cod-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 120px;
}
.chk-cod-total__label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}
.chk-cod-total__value {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary-color-arb, #1e293b);
}
/* La diferencia se pinta en verde cuando cuadra (= 0). */
#lbl_chk_diff { color: #dc2626; }
#lbl_chk_diff.is-balanced { color: #16a34a; }

/* ── Context menu de acciones (tabla candidatos de conciliación) ─────────── */
.rcl-action-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rcl-action-trigger {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    padding: 0;
}
.rcl-action-trigger:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #334155;
}

.rcl-action-dropdown {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(15,23,42,0.11);
    min-width: 160px;
    z-index: 200;
    overflow: hidden;
    animation: rclMenuIn 0.12s ease;
}
.rcl-action-dropdown.open { display: block; }

@keyframes rclMenuIn {
    from { opacity: 0; transform: translateY(4px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.rcl-action-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #334155;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background 0.1s;
}
.rcl-action-item:not(:last-child) {
    border-bottom: 1px solid #f1f5f9;
}
.rcl-action-item:hover { background: #f8fafc; }
.rcl-action-item i {
    font-size: 0.88rem;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.rcl-action-item--success i { color: #16a34a; }
.rcl-action-item--info    i { color: #2563eb; }

/* ── Balances coloreados por signo (conciliación bancaria) ──────────────────
   Verde en positivo, rojo en negativo. Aplica tanto a los hero cards como a
   los totales al pie de las tablas Banco/Mayor, que heredan color de distintos
   contenedores — de ahí el !important para imponer el color semántico. */
.rcl-balance-pos { color: #16a34a !important; }
.rcl-balance-neg { color: #dc2626 !important; }

/* ── Franja resumen dentro del modal de documentos ─────────────────────────
   Réplica compacta de los hero cards (Conciliado / Diferencia / Mayor) para
   dar contexto del balance mientras el usuario cambia estatus en el modal. */
/* Fila del modal de documentos en tránsito mientras se procesa su cambio de
   estatus: se atenúa y bloquea el puntero. El spinner se muestra en el botón
   de acción de la propia fila (fa-spinner fa-spin), no hay overlay global. */
.rcl-row-busy {
    opacity: 0.55;
    pointer-events: none;
    cursor: progress;
}

.rcl-md-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(15, 23, 42, 0.07);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 14px;
}
.rcl-md-summary__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 12px;
    background: #fff;
}
.rcl-md-summary__item:nth-child(2) { background: #f8fafc; }
.rcl-md-summary__label {
    font-size: 0.64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}
.rcl-md-summary__value {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #1e293b;
    line-height: 1.1;
}
.rcl-md-summary__value small {
    font-size: 0.66rem;
    font-weight: 600;
    color: #94a3b8;
}

/* ── Tabs segmentados del modal de documentos (En Tránsito / Confirmados) ───
   Control tipo pill: el tab activo se rellena de azul, el inactivo queda en
   gris suave. El contador acompaña la etiqueta dentro de cada pestaña. */
.rcl-md-tabs {
    display: inline-flex;
    gap: 8px;
    margin-bottom: 12px;
}
.rcl-md-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: #fff;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rcl-md-tab:hover { background: #f1f5f9; color: #334155; }
.rcl-md-tab.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
.rcl-md-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(100, 116, 139, 0.14);
    color: #475569;
}
.rcl-md-tab.active .rcl-md-tab__count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* ── Modal "Ver documento" — detalle de documento de conciliación ───────────
   Contador verificando un cheque: metadata escaneable arriba (con elipsis para
   nombres largos de banco) y la codificación de doble partida como libro mayor
   focal, con chip de Diferencia que confirma el cuadre. */
.rcl-doc-view {
    padding: 4px 2px 2px;
}

/* Metadata: grid de columnas iguales; cada valor trunca con elipsis para no
   desbordar ni encimarse a los títulos vecinos (bug del nombre de banco). */
.rcl-doc-view__meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 18px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 12px;
    margin-bottom: 14px;
}
.rcl-doc-view__meta-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.rcl-doc-view__meta-label {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}
.rcl-doc-view__meta-value {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Descripción: bloque ancho, hasta 2 líneas con elipsis. */
.rcl-doc-view__desc {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 16px;
    padding: 0 2px;
}
.rcl-doc-view__desc-text {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.rcl-doc-view__section-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    margin-bottom: 9px;
}
.rcl-doc-view__section-title i { color: #2563eb; }

/* Tabla de codificación contable */
.rcl-cod-table-wrap {
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 10px;
    overflow: hidden;
}
.rcl-cod-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
    table-layout: fixed;
}
.rcl-cod-table thead th {
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(15, 23, 42, 0.09);
}
.rcl-cod-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    color: #334155;
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}
.rcl-cod-table tbody tr:last-child td { border-bottom: none; }
.rcl-cod-acc { font-weight: 700; color: #1e293b; }
.rcl-cod-accname {
    display: block;
    color: #94a3b8;
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rcl-cod-detail {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rcl-cod-num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.rcl-cod-table tfoot td {
    padding: 11px 12px;
    background: #f8fafc;
    border-top: 1px solid rgba(15, 23, 42, 0.09);
}
.rcl-cod-total { font-weight: 700; color: #1e293b; }
.rcl-cod-difcell { text-align: right; }

/* Chip de Diferencia: verde si cuadra (=0), rojo si hay descuadre. */
.rcl-cod-diff {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
}
.rcl-cod-diff.is-ok  { background: #f0fdf4; color: #16a34a; }
.rcl-cod-diff.is-bad { background: #fef2f2; color: #dc2626; }

/* Distribución de columnas: cuenta / centro / detalle flexibles, montos fijos. */
.rcl-cod-table th:nth-child(1), .rcl-cod-table td:nth-child(1) { width: 24%; }
.rcl-cod-table th:nth-child(2), .rcl-cod-table td:nth-child(2) { width: 16%; }
.rcl-cod-table th:nth-child(3), .rcl-cod-table td:nth-child(3) { width: auto; }
.rcl-cod-table th:nth-child(4), .rcl-cod-table td:nth-child(4),
.rcl-cod-table th:nth-child(5), .rcl-cod-table td:nth-child(5) { width: 16%; }

@media (max-width: 640px) {
    .rcl-doc-view__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Celda de Descripción en tablas de codificación (notas débito/crédito) ──
   `.custom-cell` global usa nowrap + ellipsis y corta la descripción. En estas
   tablas la descripción debe verse completa, así que envuelve en varias líneas. */
.custom-cell.cod-desc-cell {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    text-overflow: clip;
    /* overflow hidden + min-width:0: la celda crece en alto para mostrar todo
       el texto envuelto, pero nunca desborda horizontalmente hacia Débito/Crédito. */
    overflow: hidden;
    min-width: 0;
    align-items: flex-start;
    line-height: 1.35;
}

/* ── Centrado vertical del contenido en tablas de codificación ──────────────
   Captura de banco: Nota Débito, Nota Crédito, Depósito y Solicitud de Cheque.
   La base .custom-cell usa flex-wrap:wrap, lo que hace que align-content (y no
   align-items/justify-content) gobierne el eje vertical de forma impredecible.
   Forzamos flex-wrap:nowrap para que align-items (celdas en fila) y
   justify-content (celdas en columna) centren de forma fiable. El texto largo
   de la descripción sigue envolviendo porque eso lo controla white-space. */
#dbn_cod_table .custom-row .custom-cell,
.cod-table .custom-row .custom-cell,
#tbody_dpt_cod .custom-row .custom-cell,
#chk_cod_table_container .custom-row .custom-cell {
    flex-wrap: nowrap;
    align-items: center;
}
/* Celdas en dirección columna (cuenta / centro de costo apilados): el centrado
   vertical es el eje principal → justify-content. El texto se mantiene a la
   izquierda por .align-items-start (!important). */
#dbn_cod_table .custom-row .custom-cell.flex-column,
.cod-table .custom-row .custom-cell.flex-column,
#tbody_dpt_cod .custom-row .custom-cell.flex-column,
#chk_cod_table_container .custom-row .custom-cell.flex-column {
    justify-content: center;
}

/* ── Tablas principales de los 4 documentos de captura de banco ─────────────
   Listados de Nota Débito, Nota Crédito, Depósito y Solicitud de Cheque:
   contenido centrado verticalmente en cada fila (el horizontal lo dan
   .text-left/center/right de cada columna). */
#dbn_table_container .custom-row .custom-cell,
#cbn_table_container .custom-row .custom-cell,
#dpt_table_container .custom-row .custom-cell,
#chk_list_table_container .custom-row .custom-cell {
    flex-wrap: nowrap;
    align-items: center;
}

/* ── Conciliación bancaria — listado: celda "Cuenta Banco" ──────────────────
   Icono + nombre + badge "Con CSV" en una sola línea; el nombre largo trunca
   con elipsis en vez de envolver (lo que empujaba el icono arriba del texto). */
.rcl-bank-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    width: 100%;
}
.rcl-bank-cell__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 0 1 auto;
}
.rcl-bank-cell__icon { flex-shrink: 0; }
.rcl-bank-cell__logo {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.rcl-bank-cell__badge { flex-shrink: 0; }

/* Centrado vertical del contenido del listado de conciliación (mismo criterio
   que las tablas de captura: nowrap para que align-items gobierne el eje). */
#tbd_rcl_lst .custom-row .custom-cell {
    flex-wrap: nowrap;
    align-items: center;
}

/* ── Conciliación bancaria — listado: anchos de columna ─────────────────────
   Código compacto; "Cuenta Banco" acotada (máx ~440px) para que las
   descripciones largas trunquen con elipsis en vez de dominar; el espacio
   sobrante lo absorbe Período (minmax 160px → 1fr).
   Columnas: Código | Cuenta Banco | Período | Estatus | Acciones */
.rcl-list-table .custom-header,
.rcl-list-table .custom-tbody {
    grid-template-columns: 70px minmax(0, 440px) minmax(160px, 1fr) 140px 90px !important;
}