#datamodalgrilla {
  border-collapse: collapse;
  width: 100%;
}

#datamodalgrilla td, #datamodalgrilla th {
  border: 1px solid #ddd;
  padding: 8px;
  color: black;
}

/* #datamodalgrilla tr:nth-child(even){background-color: #D8D8D8;} */
#datagridcaja tr:hover {background-color: #2f5ec5;color:white}
#datagridmovxcontrato tr:hover {background-color: #2f5ec5;color:white}
#datagrillatable tr:hover {background-color: #2f5ec5;color:white}
#datagrillatable tr:hover i {color: white; /* Cambia el color del icono al pasar el mouse */}
#datamodalgrilla tr {background-color: #FFFFFF;}
#datamodalgrilla tr:hover {background-color: #E6E6E6;}

#datagridmovxcontrato thead {
    background-color: #6b6b6b; /* Color plomo claro */
    color: #ffffff; /* Color de texto para buen contraste */
    font-weight: bold; /* Opcional, para resaltar el texto */
}

.datagridgeneral thead {
    background-color: #6b6b6b; /* Color plomo claro */
    color: #ffffff; /* Color de texto para buen contraste */
    font-weight: bold; /* Opcional, para resaltar el texto */
}

.datagridgeneral tbody tr:hover {
    background-color: #2f5ec5;
    color:white !important;
}

/* Estado normal: que los íconos respeten su color por defecto */
.datagridgeneral tbody i.fa {
    color: inherit;
    transition: color 0.2s ease; /* opcional, suaviza el cambio */
}

/* Cuando la fila está en hover: íconos en blanco */
.datagridgeneral tbody tr:hover i.fa {
    color: #ffffff !important;
}

#datagridcaja .st-colsolicitante-personalizado {
    background-color: #e8e8e8;
    font-weight: bold;
}

#datagridcaja tr:hover {
    background-color: #2f5ec5 !important;
    color: white !important;
}

#datagridcaja tr:hover i {
    color: #ffffff !important; /* Blanco fuerte */
}

#datamodalgrilla th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #D8D8D8;
  color: black;
}
#datagrillatable thead {
    background-color: #6b6b6b; /* Color plomo claro */
    color: #ffffff; /* Color de texto para buen contraste */
    font-weight: bold; /* Opcional, para resaltar el texto */
}
#datagridcaja thead {
    background-color: #6b6b6b; /* Color plomo claro */
    color: #ffffff; /* Color de texto para buen contraste */
    font-weight: bold; /* Opcional, para resaltar el texto */
}
#tabbandejacobros thead {
    background-color: #6b6b6b; /* Color plomo claro */
    color: #ffffff; /* Color de texto para buen contraste */
    font-weight: bold; /* Opcional, para resaltar el texto */
}
/** estilos para registro de correos de envio **/
span.email-ids {
    float: left;
    /* padding: 4px; */
    border: 1px solid #ccc;
	background: #f5f5f5;
	margin-top: 1px;
    margin-right: 5px;
	margin-bottom: 0px;
    padding-left: 10px;
    padding-right: 10px;   
    padding-top: 0px;
    padding-bottom: 0px;
    border-radius: 5px;
	background-color: #3c8dbc;
    border: 1px solid #367fa9;
	color: white;
	line-height: 26px;
}
span.cancel-email {
    width: 15px;
    display: block;
    float: left;
    text-align: center;
    margin-left: -10px;
    border-radius: 49%;
    height: 18px;
    line-height: 20px;
    margin-top: 1px;
	cursor: pointer;
	color: #999;
}
span.cancel-email:hover { 
    color: white;
}
.col-sm-12.email-id-row {
    border: 1px solid #ccc;
}
.col-sm-12.email-id-row input {
    border: 0px; outline:0px;
}
.col-sm-12.email-id-row {
    padding-top: 0px;
    padding-bottom: 0px;
	padding-left: 2px;
    margin-top: 0px;
	margin-bottom: 0px;
	border: 1px solid #aaa;
    border-radius: 4px;
}
/* leyenda de estados de contratos */
/* Contrato activo  - blanco */
.estcntratoactivo {
    width: 20px;
    height: 20px;
    background: #ffffff;       /* Blanco */
    border: 1px solid #000;
}
/* Contrato activo y firmado - azul más definido */
.estcntratofirmad {
    width: 20px;
    height: 20px;
    background: #99c2ff;       /* Azul medio-claro */
    border: 1px solid #000;
}
/* Contrato traspasado - naranja más vivo */
.estcntratotraspa {
    width: 20px;
    height: 20px;
    background: #ffd099;       /* Naranja claro subido */
    border: 1px solid #000;
}
/* Contrato discontinuado - verde más notorio */
.estcntratodisctr {
    width: 20px;
    height: 20px;
    background: #a9e6bb;       /* Verde suave con más cuerpo */
    border: 1px solid #000;
}
/* Contrato con pago parcial - lila más marcado */
.estcntratopagpar {
    width: 20px;
    height: 20px;
    background: #d5b6f0;       /* Lila medio */
    border: 1px solid #000;
}
/* Contrato con pago total - beige más dorado */
.estcntratopagtot {
    width: 20px;
    height: 20px;
    background: #f2d8b3;       /* Beige dorado suave */
    border: 1px solid #000;
}
/** para pintatr las filas */
#datagridsetpage .estcntratoactivo td {
    background-color: #ffffff !important;
}
#datagridsetpage .estcntratofirmad td {
    background-color: #99c2ff !important;
}
#datagridsetpage .estcntratotraspa td {
    background-color: #ffd099 !important;
}
#datagridsetpage .estcntratodisctr td {
    background-color: #a9e6bb !important;
}
#datagridsetpage .estcntratopagpar td {
    background-color: #d5b6f0 !important;
}
#datagridsetpage .estcntratopagtot td {
    background-color: #f2d8b3 !important;
}
/* Efecto hover sobre filas */
#datagridsetpage tbody tr:hover td {
    background-color: #1d4ed8 !important; /* Azul fuerte */
    color: white !important;
}

#datagridsetpage tbody tr:hover i {
    color: white !important;
}
/* leyenda de estados movimiento de contratos */
.estingsol {
    width: 20px;           /* Ancho de 150 píxeles */
    height: 20px;          /* Alto de 150 píxeles */
    background: #77aaff;        /* Fondo de color rojo */
    border: 1px solid #000; /* Borde color negro y de 1 píxel de grosor */
}
.estgassol {
    width: 20px;           /* Ancho de 150 píxeles */
    height: 20px;          /* Alto de 150 píxeles */
    background: #ff852b;        /* Fondo de color rojo */
    border: 1px solid #000; /* Borde color negro y de 1 píxel de grosor */
}
.estingdol {
    width: 20px;           /* Ancho de 150 píxeles */
    height: 20px;          /* Alto de 150 píxeles */
    background: #50c878;        /* Fondo de color rojo */
    border: 1px solid #000; /* Borde color negro y de 1 píxel de grosor */
}
.estgasdol {
    width: 20px;           /* Ancho de 150 píxeles */
    height: 20px;          /* Alto de 150 píxeles */
    background: #D3A3EB;        /* Fondo de color rojo */
    border: 1px solid #000; /* Borde color negro y de 1 píxel de grosor */
}
.tableleyenda th, td {
padding: 5px;
}
.spacearriba {
    padding-bottom: 10px;
    margin: 0;
}
.spaceabajo {
    padding-bottom: 30px;
    margin: 0;
}
.controles {
    overflow: hidden;
    padding: 5px;
    background: #636368;
    color:#ddd;
}
.controles .table-controles {
    font-size: larger;
    padding: 100px;
    border: 1px;
    background: #f1f1c1;
    color : black;
}
.modal-cabeccera {
    background-color: #367fa9;
    color : rgb(255, 255, 255);
    font-weight: bold;
}
.modal-pie {
    background-color: #367fa9;
    color : rgb(255, 255, 255);
}
.modal-pie-colorplomo {
    background-color: #afafaf;
    color : rgb(255, 255, 255);
}
.modal-pie-center {
    background-color: #367fa9;
    color : rgb(255, 255, 255);
    text-align: center;
}
.modal-dolar .modal-cabeccera {
    background-color: #008d4c;
    color : rgb(255, 255, 255);
}
.modal-dolar .modal-pie {
    background-color: #008d4c;
    color : rgb(255, 255, 255);
}
.modal-soles .modal-cabeccera {
    background-color: #367fa9;
    color : rgb(255, 255, 255);
}
.modal-soles .modal-pie {
    background-color: #367fa9;
    color : rgb(255, 255, 255);
}
.modal-extra-large {
    width: 80%;
}
.modal-extra-medium {
    width: 50%;
    height: 200%;
}
/* leyenda de caja */
.sicerrado {
    width: 20px;           /* Ancho de 150 píxeles */
    height: 20px;          /* Alto de 150 píxeles */
    background: #d1d1d1;        /* Fondo de color rojo */
    border: 1px solid #000; /* Borde color negro y de 1 píxel de grosor */
}
.nocerrado {
    width: 20px;           /* Ancho de 150 píxeles */
    height: 20px;          /* Alto de 150 píxeles */
    background: #ffffff;        /* Fondo de color rojo */
    border: 1px solid #000; /* Borde color negro y de 1 píxel de grosor */
}
#datagridsetpage .rowsicerrado {
    background: #d1d1d1;        /* Fondo de color rojo */
}
#datagridsetpage .rownocerrado {
    background: #ffffff;        /* Fondo de color rojo */
}
#datagridsetpage thead {
    background-color: #6b6b6b; /* Color plomo claro */
    color: #ffffff; /* Color de texto para buen contraste */
    font-weight: bold; /* Opcional, para resaltar el texto */
}
#datagridsetpage tr:hover {
    background-color: #2f5ec5 !important;
    color: white !important;
}
#datagrilla thead {
    background-color: #6b6b6b; /* Color plomo claro */
    color: #ffffff; /* Color de texto para buen contraste */
    font-weight: bold; /* Opcional, para resaltar el texto */
}
#datagrilla tr:hover {
    background-color: #2f5ec5 !important;
    color: white !important;
}
#datagrilla tr:hover a,
#datagrilla tr:hover a i {
    color: white !important;
}
/* Nueva regla para inputs dentro de filas hover */
#datagrilla tr:hover input,
#datagrilla tr:hover select,
#datagrilla tr:hover textarea {
    color: black !important;
    background-color: white !important;
}
#datatablesinfilter thead {
    background-color: #6b6b6b; /* Color plomo claro */
    color: #ffffff; /* Color de texto para buen contraste */
    font-weight: bold; /* Opcional, para resaltar el texto */
}
#datatablesinfilter tr:hover {
    background-color: #2f5ec5 !important;
    color: white !important;
}
.datatablesgeneral thead {
    background-color: #6b6b6b; /* Color plomo claro */
    color: #ffffff; /* Color de texto para buen contraste */
    font-weight: bold; /* Opcional, para resaltar el texto */
}
.datatablesgeneral tr:hover {
    background-color: #2f5ec5 !important;
    color: white !important;
}
#datatablesinfilter tr:hover a,
#datatablesinfilter tr:hover a i {
    color: white !important;
}
#datagrillaescritorio thead {
    background-color: #6b6b6b; /* Color plomo claro */
    color: #ffffff; /* Color de texto para buen contraste */
    font-weight: bold; /* Opcional, para resaltar el texto */
}
#datagrillaescritorio tr:hover {
    background-color: #2f5ec5 !important;
    color: white !important;
}
.tab-pane .vistapreviarecibo {
    width: 90%; /* Ancho relativo */
    max-width: 1600px; /* Ancho máximo para evitar que se vuelva muy ancho en pantallas grandes */
    height: 80%;
    margin: 0 auto; /* Centrar horizontalmente */
    background-color: #ffffff;
    border: 1px solid #080808;
    padding: 20px;
    box-sizing: border-box;
}
#dataregsoles {
    font-size:12px;
}
#dataregdolares {
    font-size:12px;
}
#bloqueAperturaSaldos .small-box .inner h3,
#bloqueAperturaSaldos .small-box .inner p {
    font-size: 18px !important;
}
#bloqueAperturaSaldos .small-box .icon {
    font-size: 80px !important;
}

.custom-modal-lg {
    width: 1180px;
}
.tablalistadoconborde {
    border: 1px solid #000000;
    width: 100%;
}
.tablalistadoconborde>thead>tr>th {
    border: 1px solid #000000;
    background: #D5D8DC;
}
.tablalistadoconborde>tbody>tr>td {
    border: 1px solid #000000;
}
.tablalistadoconborde>tfoot>tr>td {
    border: 1px solid #000000;
    background: #D5D8DC;
    font-weight: bold;
}
.tablaesquemasis {
    border: 1px solid #000000;
    width: 100%;
}
.tablaesquemasis>thead>tr>th {
    border: 1px solid #000000;
    background: #2c6180;
    font-weight: bold;
    color:#ffffff;
}
.tablaesquemasis>tbody>tr>td {
    border: 1px solid #000000;
}
.tablaesquemasis>tfoot>tr>td {
    border: 1px solid #000000;
    background: #2c6180;
    font-weight: bold;
    color:#ffffff;
}
.modal-head-general {
    background: #367fa9;
    color:#fff;
}
.margenventanamodal {
    margin: 20px;
}
.radiobutton {
     width: 20px; /* Ajusta el diámetro del círculo exterior */
    height: 20px; /* Ajusta el diámetro del círculo exterior */
}
.customizarradiobutton p label {
    padding-right: 10px;
    display: inline-flex;
    align-items: center;
}
.customizarradiobutton p label input {
    margin-right: 10px;
}

.customizarradiobutton p label {
    padding-right: 10px;
    display: inline-flex;
    align-items: center;
}

/* Cambiar el color de fondo de las pestañas */
.nav-tabs-custom .nav-tabs li {
    background-color: #8b8383; /* Color de fondo */
}

/* Cambiar el color del texto de las pestañas */
.nav-tabs-custom .nav-tabs li a {
    color: #ffffff; /* Color del texto */
}

/* Cambiar el color del texto de las pestañas al pasar el mouse sobre ellas */
.nav-tabs-custom .nav-tabs li a:hover {
    color: #fce40f; /* Color del texto al pasar el mouse */
}
.margenbotones {
    margin-right: 5px;
}
/* color estado en bandeja movimiento por contrato*/
.estrecabono {
    width: 20px;           /* Ancho de 150 píxeles */
    height: 20px;          /* Alto de 150 píxeles */
    background: #ffffff;        /* Fondo de color rojo */
    border: 1px solid #000; /* Borde color negro y de 1 píxel de grosor */
}
.estcobrado {
    width: 20px;           /* Ancho de 150 píxeles */
    height: 20px;          /* Alto de 150 píxeles */
    background: #ff852b;        /* Fondo de color rojo */
    border: 1px solid #000; /* Borde color negro y de 1 píxel de grosor */
}
.estrespondido {
    width: 20px;           /* Ancho de 150 píxeles */
    height: 20px;          /* Alto de 150 píxeles */
    background: #50c878;        /* Fondo de color rojo */
    border: 1px solid #000; /* Borde color negro y de 1 píxel de grosor */
}
.tipoingreso {
    width: 20px;           /* Ancho de 150 píxeles */
    height: 20px;          /* Alto de 150 píxeles */
    background: #e6f4ea;        /* Fondo de color rojo */
    border: 1px solid #000; /* Borde color negro y de 1 píxel de grosor */
}
.tiposalida {
    width: 20px;           /* Ancho de 150 píxeles */
    height: 20px;          /* Alto de 150 píxeles */
    background: #faa4a4;        /* Fondo de color rojo */
    border: 1px solid #000; /* Borde color negro y de 1 píxel de grosor */
}
/* HTML: <div class="loader"></div> */
.loader {
    display: inline-grid;
    width: 70px;
    aspect-ratio: 1;
    animation: l5-0 8s steps(10) infinite;
  }
  .loader:before,
  .loader:after {
    content:"";
    grid-area: 1/1;
  }
  .loader:before {
    clip-path: polygon(100% 50%,90.45% 79.39%,65.45% 97.55%,34.55% 97.55%,9.55% 79.39%,0% 50%,9.55% 20.61%,34.55% 2.45%,65.45% 2.45%,90.45% 20.61%,100% 50%,85.6% 24.14%,63.6% 8.15%,36.4% 8.15%,14.4% 24.14%,6% 50%,14.4% 75.86%,36.4% 91.85%,63.6% 91.85%,85.6% 75.86%,94% 50%,85.6% 24.14%);
    background: #574951;
  }
  .loader:after {
    background: #83988E;
    clip-path: polygon(100% 50%,65.45% 97.55%,9.55% 79.39%,9.55% 20.61%,65.45% 2.45%);
    margin: 23%;
    translate: -143% 0;
    transform-origin: right;
    animation: l5-1 .8s linear infinite;
  }
  @keyframes l5-0 {to{rotate: 1turn}}
  @keyframes l5-1 {
    0%{rotate: -54deg}
    to{rotate:  54deg}
  }  
.app-version {
    border: 2px solid white;       /* Borde blanco */
    background-color: black;       /* Fondo negro */
    padding: 10px;                 /* Espaciado interno */
    text-align: center;            /* Centrar el contenido */
  }

/* HTML: <div class="loader"></div> */
/* Fondo oscuro semitransparente */
/*#cargarpage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo negro semitransparente */
    /*z-index: 9998; /* Fondo detrás del contenido animado */
/*}

/* Loading animado */
/*#cargarpage::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    --c: no-repeat linear-gradient(orange 0 0);
    background: var(--c), var(--c), var(--c), var(--c);
    background-size: 41px 41px;
    animation: l5 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
    z-index: 9999; /* Loading por encima del fondo */
    /*transform: translate(-50%, -50%); /* Centrado */
/*}

@keyframes l5 {
    0% {
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    }
    33% {
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        width: 60px;
        height: 60px;
    }
    66% {
        background-position: 100% 0, 100% 100%, 0 100%, 0 0;
        width: 60px;
        height: 60px;
    }
    100% {
        background-position: 100% 0, 100% 100%, 0 100%, 0 0;
    }
}*/
#cargarpage {
    position: fixed;
    inset: 0; /* Más moderno que top/left/width/height */
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99999; /* Más alto para estar sobre modales de Bootstrap (que usan 1050) */
    display: none; /* Oculto por defecto */
    overflow: hidden; /* Evita scrolls extraños */
}

/* Loading animado */
#cargarpage::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px; /* Centrado alternativo más compatible */
    --c: no-repeat linear-gradient(orange 0 0);
    background: var(--c), var(--c), var(--c), var(--c);
    background-size: 41px 41px;
    animation: l5 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
    will-change: transform, width, height, background-position; /* Optimización de performance */
}

@keyframes l5 {
    0% {
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        width: 150px;
        height: 150px;
        margin: -75px 0 0 -75px;
    }
    33% {
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        width: 60px;
        height: 60px;
        margin: -30px 0 0 -30px; /* Ajustar centrado al cambiar tamaño */
    }
    66% {
        background-position: 100% 0, 100% 100%, 0 100%, 0 0;
        width: 60px;
        height: 60px;
        margin: -30px 0 0 -30px;
    }
    100% {
        background-position: 100% 0, 100% 100%, 0 100%, 0 0;
        width: 150px;
        height: 150px;
        margin: -75px 0 0 -75px;
    }
}

/* Asegurar que cubra TODA la pantalla incluso con scroll */
body.loading-active {
    overflow: hidden;
}
/* configuracion de estilos de datatable */
table tbody tr.hover-row,
table tbody tr.hover-row a,
table tbody tr.hover-row a i {
    background-color: #2f5ec5 !important;
    color: white !important;
    font-weight: bold;
}

.nav-tabs > li.disabled > a {
    pointer-events: none;
    cursor: not-allowed;
    background-color: #eee;
    color: #999;
}
.required-asterisk {
    color: red;
    font-weight: bold;
}
#tabbandejacobros td:last-child i,
#tabbandejacobros td:last-child a {
	color: #333;
	font-weight: normal;
}
.card-body-leyenda ul {
    width: 100%; /* El contenedor toma todo el ancho disponible */
}
.card-body-leyenda li {
    display: flex;
    width: 100%; /* Forzamos que cada li ocupe todo el ancho */
    margin-bottom: 20px; /* Espacio entre filas */
}
.card-body-leyenda li span:first-child {
    /* Número alineado totalmente a la izquierda (ya lo está por defecto) */
}
.card-body-leyenda li span:last-child {
    margin-left: auto; /* 🔥 Esto lo empuja COMPLETAMENTE a la derecha 🔥 */
}
.cuadro-leyenda {
    width: 30px;
    height: 30px;
    border: 1px solid #000; /* Borde visible */
}
/* checkbox disabled */
.icheckbox_flat-blue.checked.disabled {
    background-position: -22px 0;
}
/* Aplica solo a los botones del wizard */
.btn-group[aria-label="Wizard de pasos"] .btn {
  min-width: 180px;
  height: 100px;
  font-weight: bold;
  white-space: normal;
  line-height: 1.3;
  text-align: center;
}
/* pasos wizard */
/* Ícono más grande y separado */
.btn-group[aria-label="Wizard de pasos"] .btn i {
  display: block;
  font-size: 26px;
  margin-bottom: 6px;
}

/* El texto “PASO X” más visible y separado */
.btn-group[aria-label="Wizard de pasos"] .btn {
  color: #fff;
}

.btn-group[aria-label="Wizard de pasos"] .btn span.paso-label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #ffeb3b; /* Amarillo brillante */
  margin-bottom: 3px;
  letter-spacing: 0.5px;
}

/* Cuando el botón está deshabilitado */
.btn-group[aria-label="Wizard de pasos"] .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* ========================================
   ESTILOS PARA GESTIONAR CRONOGRAMA
   ======================================== */

/* Modal body */
.cronograma-modal-body {
    padding: 10px;
}

/* Paneles generales */
.cronograma-panel {
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.cronograma-panel-heading {
    padding: 5px 10px;
    cursor: pointer;
    font-size: 15px;
}

/* ========================================
   INFO DEL CONTRATO - TIRA DE COLORES (MÁS GRANDE)
   ======================================== */

/* Container flex de las tarjetas */
.crono-info-cards-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

/* Cada tarjeta individual */
.crono-info-card {
    flex: 1;
    min-width: 250px;
    display: flex;
    align-items: center;
    padding: 18px 15px;
    color: white;
}

/* Área del icono */
.crono-info-icon {
    width: 80px;
    text-align: center;
    background-color: rgba(0,0,0,0.1);
    padding: 12px;
    margin-right: 15px;
}

.crono-info-icon i {
    font-size: 48px;
}

/* Label y valor - MÁS GRANDES */
.crono-info-label {
    font-size: 15px;
    color:rgb(248, 255, 30);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.crono-info-value {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.3;
}

/* Colores específicos por tarjeta */
.crono-card-empresa {
    background-color: #00c0ef;
}

.crono-card-contrato {
    background-color: #00a65a;
}

.crono-card-vehiculo {
    background-color: #ff851b;
}

.crono-card-arrendador {
    background-color: #dd4b39;
}

/* ========================================
   WIZARD DE PASOS - MÁS GRANDE Y VISIBLE
   ======================================== */
.crono-wizard-wrapper {
    margin-bottom: 10px;
}

.crono-wizard-btn {
    padding: 15px 8px;
    font-size: 15px;
    line-height: 1.4;
}

.crono-wizard-btn i {
    font-size: 20px;
    display: block;
    margin-bottom: 5px;
}

.crono-wizard-btn strong {
    font-size: 18px;
    display: block;
    margin: 3px 0;
}

.crono-wizard-btn small {
    font-size: 18px;
    color:#000000;
    font-weight: bold;
    padding: 5px;
    background-color: #d1d1d1;
}

/* ========================================
   DATOS DEL CRONOGRAMA
   ======================================== */
.crono-datos-panel {
    margin-bottom: 10px;
}

.crono-datos-heading {
    padding: 5px 10px;
    cursor: pointer;
    font-size: 15px;
}

.crono-datos-body {
    padding: 10px;
}

/* ========================================
   CUOTAS
   ======================================== */
.crono-cuotas-panel {
    margin-bottom: 5px;
}

.crono-cuotas-margen {
    margin-top: 30px;
}

.crono-cuotas-heading {
    padding: 5px 10px;
    font-size: 15px;
}

.crono-cuotas-body {
    padding: 5px;
}

/* ========================================
   FOOTER
   ======================================== */
.crono-modal-footer {
    padding: 10px;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 767px) {
    .crono-info-cards-wrapper {
        flex-direction: column;
    }
    
    .crono-info-card {
        min-width: 100%;
    }
}

/* Personalización del modal de confirmación */
#modalConfirmacion .modal-body {
    padding: 20px;
    font-size: 16px;
    line-height: 1.6;
}

#modalConfirmacion .modal-body strong {
    color: #333;
}

#modalConfirmacion .text-muted small {
    display: block;
    margin-top: 16px;
}

#modalConfirmacion .modal-header {
    border-bottom: 2px solid #ddd;
}

#modalConfirmacion .modal-title {
    font-weight: 600;
}

#modalConfirmacion .modal-title  i {
    color:#fce40f;
}