/* ----------- Archivo ruminahui css --------------------*/
.lineaenblanco {   margin-bottom: 90px; /* Espacio debajo del elemento */ }

.carrusel-contenedor {
  position : relative ;
}

.carrusel {
  position: relative;
  justify-content: center;
  overflow       : hidden;
  justify-content: center; 
  display        : flex ;
  flex-wrap      : nowrap ;
}

.imagen {
  transform  : translateX(100%);
  transition : transform 3s;
}

.imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.imagen.activo {  transform: translateX(0);  }

.tabla-amortizacion-prestamos {
  background-color: #ffffff;
  padding         : 10px;
  border-radius   : 10px;
  box-shadow      : 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.columns-wrapper {
  display        : flex;
  flex-wrap      : wrap;
  justify-content: space-between;
}

.column {
  flex-basis      : 40%;  
  padding         : 10px;
  box-sizing      : border-box;
  background-color: #f7f7f7;
  border-radius   : 10px;
  box-sizing      : border-box; /* Importante para incluir padding y border en el cálculo del ancho */    
}

@media (max-width: 768px) {  .column {flex-basis: 100%; } }/* En pantallas pequeñas, las columnas ocupan el 100% del ancho */

table {   width       : 100%;     border-collapse: collapse;         }
td    {   padding     : 2px;      border         : 1px solid #ddd; }
label {   font-weight : bold; }

.linea-horizontal {
  margin-top     : 20px;  
  border-bottom  : 1px solid #ccc;
  padding-bottom : 20px;
  margin-bottom  : 20px;
}

input[type="text"], input[type="date"], select {
  width         : 100%;
  padding       : 2px;
  margin-bottom : 4px;
  border        : 1px solid #ccc;
}

input[type="range"] {   width: 100%; }

.button {
  background-color: #4CAF50;
  color           : #fff;
  padding         : 10px 20px;
  border          : none;
  border-radius   : 5px;
  cursor          : pointer;
}

.button:hover     {   background-color: #3e8e41; }
.contenedorTabla  {   overflow-x: 1 }

.background-chat {
  background-color: rgb(52, 250, 60);
  border-radius   : 50%;
  box-shadow      : 0 2.1px 1.3px rgba(0, 0, 0, 0.044), 0 5.9px 4.2px rgba(0, 0, 0, 0.054), 0 12.6px 9.5px rgba(0, 0, 0, 0.061),  0 25px 20px rgba(0, 0, 0, 0.1);
  height          : 50px;
  left            : 5px;
  position        : relative;
  top             : 5px;
  width           : 50px;
}

.chat-bubble {     cursor: pointer;     position: relative; }
.bubble {
  transform-origin: 50%;
  transition      : transform 500ms cubic-bezier(0.17, 0.61, 0.54, 0.9);
}

.chat-texts{
  background    :white;
  padding       :2rem;
  scroll-behavior:smooth;
  overflow-x    : hidden;
  overfloy-y    : scroll;
}

.text{
  display       :flex;
  padding       :0.7rem;
  align-items   :start;
  opacity       :1;
}

@keyframes fade-in{
  from{      opacity:0;       }   
  to  {      opacity:1;       }
}

.text.sent{   flex-direction:row-reverse; }
.text.sent .profile-pic{
  margin-right :0;
  margin-left  :0.7rem;
}

.text.sent .text-content{
  border-radius :20px 0px 20px 20px;
  background    :#04b4a9;
  color         :white;
}

.profile-pic{
  flex-shrink   :0;
  width         :50px;
  aspect-ratio  :1;
  background    :gray;
  border-radius :100%;
  margin-right  :0.7rem;
  overflow      :hidden;
}

.profile-pic img{
  width         :100%;
  height        :100%;
  object-fit    :cover;
}

.text-content{
  flex-grow     :1;
  background    :hsl(220, 20%, 94%);
  padding       :1.5rem;
  border-radius :0px 20px 20px 20px;
  font-size     :0.8rem;
  line-height   :130%;
  letter-spacing:0.5px;
}

.timestamp{
  display   :block;
  font-size :0.7rem;
  color     :hsl(0, 0%, 50%);  
  margin-top:0.2rem;
}

.text.sent .timestamp{  color:white;}
.chat{
  width     :80%;
  max-width :500px;
  min-width :450px;
  max-height:600px;
  border-radius:7px;
  background:white;
  box-shadow:0 0 10px hsla(0, 0%, 0%, 0.2);
  overflow  :hidden;
  display   :flex;
  grid-template-rows:80% 20%;
}

.text-content h5{
  letter-spacing    : 0;
  font-size         : 0.9rem;
  margin-bottom     : 0.1rem;
  margin-left       : 0.1rem;
}

.send-message{
  width         :100%;
  padding       :1rem;
  display       :flex;
  align-items   :center;
  justify-content:space-between;
}

.message-text{
  width         :95%;
  background    :white;
  padding       :0.5rem 1.2rem;
  border-radius :100vw;
  display       :flex;
  align-items   :center;
  justify-content:space-between;
  flex-basis    :80%;
  background    :hsl(220, 20%, 94%);
}


.message-text input{
  padding   :0.5rem;
  border    :none;
  width     :600px;
  background:transparent;
  box-shadow: none !important;   
}

.chat-button{
  border    :none;
  background:transparent;
  width     :60px;
  height    :60px;
  font-size :2rem;
  border-radius:50%;
  background:#04b4a9;
  color     :white;
  display   :grid;
  place-items:center;
  transition:300ms ease;
}
.chat-button:hover{
  background : black;
  cursor     : pointer;
}

video {
  border-radius : 10px;
  box-shadow    : 0 0 10px rgba(0, 0, 0, 0.5);
  background-color: transparent;
  object-fit    : contain;  
  align-items   : center;
}

.video-container {   position: relative;   max-width: 100%;   margin: 0 auto; align-items   : center;  display: flex; justify-content: center;}

.overlay {
  position    : absolute;
  top         : 0;
  left        : 20;
  width       : 100%;
  height      : 100%;
  display     : flex;
  justify-content: center;
  align-items : center;
  padding     : 20px;
  border-radius: 10px;
  box-shadow  : 0 0 10px rgba(0, 0, 0, 0.1);  
}
/* ----------- Fin del archivo --------------------*/