:root {
    --primario: rgb(37, 150, 190);
    --secundario: rgb(25, 102, 130);
    --terciario: rgb(173, 221, 240);
    
  }

body {
  background: #fff;
  font-family: "Quicksand", sans-serif;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding-top: 150px;
  color: rgb(50, 50, 50);
  width: 100%;
}



.d-none {
    display: none !important;
}

header.header_1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999; /* Asegura que esté por encima de otros elementos */
    background-color: #fff; /* Color de fondo, ajusta según tu diseño */
    font-size: 18px
}

 /* /////////// Login //////////////// */

   
.contenedor-input svg {
  position: absolute;
  color: var(--primario);
  top: 10px;
  left: 0px;
}

.icono {
  width: 35px;
  height: auto;
  padding-left: 10px;
}

#logoSection{
  display: flex;
  justify-content: center;   
  align-items: center;       
  height: 60%;            
  margin: 50px auto;
  max-height: 350px;
  width: 60%;
  max-width: 550px;
}

.registro_activo{
 display: flex;
 align-items: center;
 margin: 50px auto;
 box-shadow: 0 6px 22px rgba(25, 102, 130, 0.41);
 border-radius: 25px;
}

.row1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.login-logo {
  width: 30%;
  max-width: 500px; 
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.login-logo img {
  max-width: 100%; 
}

.formulario {
  width: 70%;
}

.input{
  font-size: 18px
}

.form-group{
  display: flex;
  padding: 0px;
  align-items: center;
  font-size: 14px;
}

.aviso-privacidad{
    display: flex;
    padding: 0px;
    align-items: center;

}
.aviso-privacidadtext{
    width: 100%;
    margin: 0px 0px 0px 24px; /* superior derecho inferior izquierdo */
    text-align: justify;
    font-size: 14px;
    color: #8e8e8e;

}

a {
    color: var(--secundario);
    cursor: pointer;
    text-decoration: none;
}




 /* ////////////////////////////////// */

 /* /////////// Home //////////////// */

.datosresidente {
    list-style-type: disc; /* Viñetas estilo disco */
    padding-left: 20px; /* Espacio desde el borde izquierdo */
    text-align: left; /* Alineado a la izquierda */
    justify-content: center; /* Centra horizontalmente */
    padding: 0px 0px 0px 0px;
    max-width: 750px;
    align-items: center;
    margin: 0% auto;   /* centra el contenedor en el eje horizontal */
}

.icon-text {    
  display: flex;
  align-items: center;
  background:rgb(37 150 190 / 23%);
  border-radius: 25px;
  padding: 0px 0px 0px 15px;
  max-width: 750px;
}

.icon-textmoroso {    
  display: flex;
  align-items: center;
  background: rgb(218 105 65 / 23%);
  border-radius: 25px;
  padding: 0px;
  color: rgb(218 105 65);
  max-width: 750px;
}

/* Visitas */

.contenedorformulariovisita {
  color: rgba(0, 0, 0, 0.428);
  padding: 0px 0px;
  max-width: 750px;
  align-items: center;
  margin: 0% auto;   /* centra el contenedor en el eje horizontal */
}


.icon-text2 {
  display: flex;
  background: rgb(37 150 190 / 23%);
  border-radius: 25px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 750px;
}

.icon-text2 svg {
  width: 50px;
  margin-right: 0px; /* Espacio entre el ícono y el texto */
  vertical-align: middle; /* Alinea el ícono con el texto */
  color: rgb(25, 102, 130);
}

.icon-text5 {
  display: flex;
  background: rgb(37 150 190 / 23%);
  border-radius: 25px;
  padding: 10px;
  justify-content: left;
  align-items: center;
  width: 100%;
  max-width: 750px;
  font-weight: bold;

}

.icon-text5 svg {
  width: 50px;
  margin-right: 0px; /* Espacio entre el ícono y el texto */
  vertical-align: middle; /* Alinea el ícono con el texto */
  color: rgb(25, 102, 130);
}

/* //////////////// */


.icon-text svg {
    margin-right: 20px; /* Espacio entre el ícono y el texto */
    vertical-align: middle; /* Alinea el ícono con el texto */
    color: rgb(25, 102, 130);
}

.icon-textmoroso svg {
  margin-right: 20px; /* Espacio entre el ícono y el texto */
  vertical-align: middle; /* Alinea el ícono con el texto */
  color: rgb(218 105 65);
}


.card {
  background: white;
  border-radius: 10px;
  margin-bottom: 50px;
  padding: 20px 0px 0px 0px;
  width: 100%;
  max-width: 1200px;
  text-align: center;
  margin: 50px auto;
}

.columna-img {
    width: 25%;
}


.columna-img img {
    max-width: 120px;
    height: auto;
}

.nav-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 50px; /* Ajusta según el tamaño de tu header */
    right: 0;
    background-color: #fff;
    width: 100%;
}

ul {
    list-style-type: none;
  }

.nav-menu li a {
    display: flex;
    color: rgb(25, 102, 130);
    font-size: 14px;
    text-decoration: none;
    font-family: "Quicksand", sans-serif;
    align-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: left;
}

.nav-menu li a svg {
    fill: var(--secundario); /* Change this to your desired color */
}

.status {
    color: rgb(25, 102, 130);
    font-weight: bold;
}


.nav-menu.show {
  width: 280px;
  display: flex;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  /* align-items: flex-end; */
  justify-content: flex-start;
  text-align: left;
  padding-left: 10px;
  flex-direction: column;
  flex-wrap: nowrap;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;

}

.mobilemenu {
    display: block;
    cursor: pointer;
}

.mobilemenu span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: black;
    margin: 5px 0;
}

.nav-menu li a:hover {
    color: rgb(37, 150, 190); /* Color al pasar el mouse */
}

.limenu {
    position: relative;
    text-align: center; /* Centra el contenido dentro del div */
    padding: 5px 0; /* Espacio arriba y abajo */
    border-radius: 8px;       /* Bordes redondeados */
}

.limenu::before,
.limenu::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    background-color: transparent; /* Asegura que el fondo sea transparente */
}

.limenu::before {
    top: 0;
}

.limenu::after {
    bottom: 0;
}

.limenu img {
    fill: rgb(109, 38, 38); /* Cambia el color del SVG a rojo */
}


* {
padding: 0px;
margin: 5px;
box-sizing: border-box;
}

.contenedor {
    width: 300px;
    max-width: 800px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    min-height: 10vh;
    display: grid;
    margin-right: 30px; /* Agregar margen */
    margin-left: 30px;
    margin-top: 0;
    margin-bottom: 0;
}

#iniciarresidente{
  border-radius: 14px;
}

.contenedorresidentes {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  min-height: 10vh;
  display: grid;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0px 15px 0px 0px;
}

  
.rowheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}
  
.columna-izquierda {
  padding: 5px;
  min-height: 10vh;
}

.row {
  display: flex;
  /*justify-content: space-between;*/
  justify-content: flex-start;
  /*align-items: flex-start;*/
  align-items: center;
  font-size: 12px;
}

  
  .row h1,
  .row p,
  .row span {
    margin: 0 auto;
  }
  
  .titulo {
    color: rgb(37, 150, 190);
  }
  .columna-izquierda2 {
    align-items: center;
  }
  
  .columna-izquierda4 {
    width: 100%; /* Ajusta el ancho según tus necesidades */
  }
  .columna-izquierda4 img {
    max-width: 110%; /* Asegura que la imagen no sobrepase su contenedor */
    height: auto;
  }
  
  .columna-izquierda2,
  .columna-derecha2 {
    width: 40%; /* Ajusta el ancho según tus necesidades */
  }
  .columna-izquierda2 img {
    max-width: 150%; /* Asegura que la imagen no sobrepase su contenedor */
    height: auto;
  }
  
  .contenedor-input {
    position: relative;
    margin-bottom: 0px;
  }
  
  .header {
    margin-bottom: 10px;
    text-align: center;
  }
  
  .header h1 {
    color: rgb(25, 102, 130)
  }
  
  .header p {
    color: #000;
  }
  
  label {
    margin-bottom: 10px;
    font-weight: 500;
    color: #000;
    font-size: 14px;
  }
  
.input {
  padding: 0px 0px 0px 60px;
  height: 50px;
  line-height: 50px;
  width: 100%;
  border: none;
  border-radius: 15px;
  margin: 0px 0px 0px 0px;
  margin-bottom: 5px;
  background: #f3f3f3eb;
  color: #013e6a;
  font-family: "Quicksand", sans-serif;
  border: 2px solid transparent;
  transition: 0.3s ease all;
}

.contenedor-input:hover svg {
  color: #ffffff;
  fill: white;
}

.inputpago {
  padding: 0px 0px 0px 0px;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  width: 88%;
  border: none;
  border-radius: 5px;
  margin: 0 0px 0 5px;
  margin-bottom: 5px;
  background: #f3f3f3eb;
  color: #013e6a;
  font-family: "Quicksand", sans-serif;
  border: 2px solid transparent;
  transition: 0.3s ease all;
}

.datos{
  color: black;
  font-weight: bold;
}

  .datosvyp {
    color: rgb(65, 113, 226);
    font-weight: bold;
  }
  
  input:focus {
    outline: none;
    border: rgba(23, 158, 221, 0.3);
  }

  
  button {
    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    border-radius: 8px;
    margin-top: 10px;
    background: #013e6a00;
    height: 50px;
    color: #013e6a;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 2px solid #8e8e8e;
    cursor: pointer;
    transition: 0.3s ease all;
    outline: none;
    width: 231px;
    border-radius: 20px;
    color: #8e8e8e;
  }
  
  button:hover {
    background: rgb(37, 150, 190);
    border: rgb(37, 150, 190);
    color: #fff;
    fill: white,
  }
  
  input:hover {
    background: rgb(37, 150, 190);
    border: rgb(37, 150, 190);
    color: #fff;
    font-size: 16px;
  }
  
  select:hover {
    background: rgb(37, 150, 190);
    border: rgb(37, 150, 190);
    color: #fff;
  }
  
  #divamenidades {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    min-height: 10vh;
    display: grid;
    padding: 0px 10px 0px 0px;
  }
  
  button svg {
    margin-left: 5px;
    width: 20px;
    height: 20px;
  }
  
  .columna-derecha img {
    max-width: 100%;
    justify-content: center;
    align-items: center;
  }
  
  .columna-derecha {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .contenedor2 {
    width: 100%;
    max-width: 800px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    min-height: 10vh;
    margin: 20px;
  }
  
  .form-select {
    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    color: #333;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 5px;
    padding: 12px 16px;
    cursor: pointer;
  }
  
  #status {
    color: rgb(25, 102, 130); /* Color del texto */
    font-weight: bold; /* Para hacer el texto más llamativo */
  }
  
  #adeudo {
    color: rgb(25, 102, 130); /* Color del texto */
    font-weight: bold; /* Para hacer el texto más llamativo */
  }
  
  #iniciodatos {
    font-size: 12px;
  }
  
  /* Estilos para el contenedor de botones */
  .button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    align-content: center;
  }
  
  /* Estilos para los botones */
  .btn {
    width: 200px; /* Maintains the desired width */
    height: 40px; /* Maintains the desired height */
    min-width: 150px; /* Maintains the minimum width */
    margin: 2px; /* Maintains the margin */
    padding: 10px 20px; /* Maintains the padding for button comfort */
    text-align: start; /* Aligns the text to the left */
    border-radius: 5px; /* Maintains the border radius */
    font-size: 13px; /* Reduces the font size to 12px */
    font-weight: 500; /* Maintains the font weight */
    transition: all 0.3s ease; /* Maintains the transition effect */
    outline: none; /* Maintains the removal of outline */
    border-radius: 15px;
  }
  
  .textbtn {
    text-align: left; /* Aligns the text to the left */
    font-size: 12px; /* Reduces the font size to 12px */
  }
  
  table {
    margin: 0;
    border-collapse: separate;
    text-align: left;
    padding: 0px 0px;
    width: 100%;
    border-radius: 25px;
  }
  
  td {
    padding: 5px;
    font-size: 12px;
  }
  
  .contenedor-divs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .contenedor-divs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: 1fr;
  }
  
  .div-vertical {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
  }
  
  .div-vertical:nth-child(1) {
    top: 0;
  }
  
  .div-vertical:nth-child(2) {
    top: 100px;
  }
  
  .div-vertical:nth-child(3) {
    top: 200px;
  }
  
  .formulario2 {
    width: 100%;
    /* display: flex
; */
    flex-direction: column;
    border: 12px;
    margin: 0px 0px 0px 0px;
}
  
  .contenedor-input,
  .contenedor-fecha {
    margin-bottom: 5px; /* Optional spacing between elements */
  }
  
  .contenedorx1-input {
    width: calc(100vw - 40px); /* Ajusta el ancho según tu diseño */
    margin: 0 auto;
    padding: 5px;
    border-radius: 5px;
    background-color: #fff;
    border: 2px solid #013e6a; /* Azul claro */
  }
  
  #tipo-visita {
    font-size: 16px; /* Ajusta el tamaño de letra */
    width: 100%;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    outline: none;
    font-family: "Quicksand", sans-serif; /* Agrega la fuente Quicksand */
  }
  
  /* Estilos para el contenedor personalizado del selector */
  .custom-select {
    position: relative;
  }
  
  .custom-select .select-selected {
    /* Estilos para el selector personalizado */
    padding: 10px 15px; /* Ajusta el espaciado interno */
    background-color: var(--primario); /* Color de fondo */
    color: var(--secundario); /* Color del texto */
    border: 2px solid var(--primario); /* Borde */
    border-radius: 5px; /* Borde redondeado */
    transition: background-color 0.3s ease; /* Transición suave */
  }
  
  .custom-select .select-selected:hover {
    /* Estilos al pasar el mouse sobre el selector personalizado */
    background-color: var(--secundario); /* Cambia el color de fondo */
    color: var(--primario); /* Cambia el color del texto */
  }
  
  .custom-select .select-items {
    /* Estilos para el contenedor de opciones */
    position: absolute;
    background-color: var(--primario); /* Color de fondo */
    color: var(--secundario); /* Color del texto */
    border: 2px solid var(--primario); /* Borde */
    border-top: none; /* Elimina el borde superior */
    border-radius: 0 0 5px 5px; /* Borde redondeado solo en la parte inferior */
    z-index: 1; /* Asegura que las opciones aparezcan sobre otros elementos */
    width: 90%; /* Ancho completo del contenedor */
    display: none; /* Inicialmente oculto */
    cursor: pointer; /* Cursor de puntero al pasar sobre las opciones */
  }
  
  .custom-select .select-items div {
    /* Estilos para las opciones */
    padding: 10px 15px; /* Ajusta el espaciado interno */
    transition: background-color 0.3s ease; /* Transición suave */
  }
  
  .custom-select .select-items div:hover {
    /* Estilos al pasar el mouse sobre las opciones */
    background-color: var(--secundario); /* Cambia el color de fondo */
    color: var(--primario); /* Cambia el color del texto */
  }
  
  /* Estilos para el elemento select */
  select {
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    width: 100%;
    border: none;
    border-radius: 5px;
    margin: 0 20px 0 45px;
    margin-bottom: 5px;
    background: #f3f3f3eb;
    color: #013e6a;
    font-family: "Quicksand", sans-serif;
    border: 2px solid transparent;
    transition: 0.3s ease all;
  }

  .select2 {
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    width: 80%;
    border: none;
    border-radius: 5px;
    margin: 0 0px 0 10px;
    margin-bottom: 5px;
    background: #f3f3f3eb;
    color: #013e6a;
    font-family: "Quicksand", sans-serif;
    border: 2px solid transparent;
    transition: 0.3s ease all;
  }

  .input2 {
    padding: 0px 0px 0px 10px;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    width: 88%;
    border: none;
    border-radius: 5px;
    margin: 0 0px 0 5px;
    margin-bottom: 5px;
    background: #f3f3f3eb;
    color: #013e6a;
    font-family: "Quicksand", sans-serif;
    border: 2px solid transparent;
    transition: 0.3s ease all;
}

  .sheetID{
    width: 100%;

  }
  
  /* Estilos al enfocar el elemento select */
  select:focus {
    /* Borde */
    /* Elimina el estilo de selección nativo */
    outline: none;
  }
  
  #qrElement {
    padding: 10px;
    width: 300px;
    margin: 0 auto;
  }
  
  #tiutlo2 {
    padding: 10px;
    width: 300px;
    margin: 0 auto;
    text-align: center;
  }
  
  #divcalendario iframe {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.5);
    font-size: 1px;
    text-align: center;
}
  
  .registro-item {
    color: var(--secundario);
    border: 1px solid var(--secundario); /* Marco de 1px de grosor y color gris claro */
    padding: 5px; /* Espaciado interior de 10px */
    font-size: 12px; /* Tamaño de fuente de 12px */
    margin-bottom: 5px; /* Margen inferior de 10px */
    border-radius: 7px; /* Esquinas ligeramente ovaladas */
  }

  .registro-item-amenidad{
    display: flex;
    font-size: 12px; /* Tamaño de fuente de 12px */
    border: 1px solid var(--secundario);
    border-radius: 8px;
  }
  
  .registro-item-mora {
    display: flex;
    border: 1px solid var(--secundario); /* Marco de 1px de grosor y color gris claro */
    background-color: rgb(37 150 190 / 23%);
    color: var(--secundario);
    padding: 5px; /* Espaciado interior de 10px */
    margin-bottom: 5px; /* Margen inferior de 10px */
    border-radius: 15px; /* Esquinas ligeramente ovaladas */
    height: 30px;
    font-size: 15px;
  }
  
  .btn2 {
    width: 200px; /* Maintains the desired width */
    height: 70px; /* Maintains the desired height */
    min-width: 150px; /* Maintains the minimum width */
    margin: 2px; /* Maintains the margin */
    padding: 10px 20px; /* Maintains the padding for button comfort */
    text-align: start; /* Aligns the text to the left */
    border-radius: 5px; /* Maintains the border radius */
    font-size: 13px; /* Reduces the font size to 12px */
    font-weight: 500; /* Maintains the font weight */
    transition: all 0.3s ease; /* Maintains the transition effect */
    outline: none; /* Maintains the removal of outline */
  }
  

  #loader {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    text-align: center;
    padding-top: 20%;
  }
  
  #loader img {
    width: 100px;
  }
  
  
  .table-custom td {
    border: 0px solid #ffffff00;
    text-align: center; /* Esto alineará el contenido horizontalmente */
    vertical-align: bottom; /* Esto alineará el contenido verticalmente hacia abajo */
  }
  
  .contenedorhome {
    width: 100%;
    max-height: 90%;
    border-radius: 10px 10px 10px 10px;
    position: center;
    overflow: hidden;
    left: 50%; /* Establece el 50% del ancho del viewport */
    background: #fff;
    min-height: 10vh;
    display: grid;
    margin: 10px; /* Agregar margen */
    /*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);*/
    overflow: hidden;
    bottom: 0;
  }
  
  #adminPanel {
    width: 30px;
    max-width: 370px;
    max-height: 90%;
    border-radius: 10px;
    background: linear-gradient(
      to bottom,
      rgb(255, 255, 255) 55%,
      #013e6a
    ); /* Degradado de arriba hacia abajo */
    border-radius: 10px 10px 10px 10px;
    position: absolute;
    bottom: 0;
    left: 50%; /* Establece el 50% del ancho del viewport */
    transform: translateX(-50%); /* Centra el panel horizontalmente */
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease-in-out, padding 0.5s ease-in-out;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
  }
  
  
  .estatus {
    width: 60px;
    height: 18px;
    line-height: 14px;
    font-size: 10px;
    border: none;
    border-radius: 5px;
    padding: 0px 0px 0 0;
    margin-bottom: 0px;
    background: #f4f8f7;
    color: #013e6a;
  }
  
  /* Estilo base para la tabla */
  #tablapropietarios {
    width: 370px;
    max-width: 370px;
    max-height: 90%;
    border-radius: 10px 10px 10px 10px;
    position: center;
    overflow: hidden;
    left: 50%; /* Establece el 50% del ancho del viewport */
    background: #fff;
    min-height: 10vh;
    display: grid;
    margin: 10px; /* Agregar margen */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    bottom: 0;
  }
  
  .formulario4 {
    width: 90%;
    display: flex; /* Activate flexbox for the form */
    flex-direction: column; /* Stack elements vertically */
    border: 35px;
    align-items: center;
    margin: 0% auto;   /* centra el contenedor en el eje horizontal */
  }
  
  .tablapropietarios th,
  .tablapropietarios td {
    padding: 8px; /* Espaciado interno */
  }
  
  /* Estilo para la fila de detalle */
  .detalle {
    display: none; /* Ocultar por defecto */
  }
  
  /* Estilo para las filas de detalle cuando están abiertas */
  .detalle.abierto {
    display: table-row; /* Mostrar como fila de tabla */
  }
  
  /* Estilos para las filas de las tablas más pequeñas */
  
  /* Estilos para las celdas */
  th,
  td {
    text-align: left;
    font-weight: normal; /* Asegúrate de que la fuente no sea negrita */
    color: black;
  }
  
  .calle-box .tablaporcada {
    cursor: pointer;
    outline: none;
    background-color: rgba(25, 102, 130, 0.25);
    border: 1px solid var(--secundario); /* Marco de 1px de grosor y color gris claro */
    color: var(--secundario);
    border-radius: 15px;
    display: flex;
    font-size: 12px;
    align-items: center;
    margin-bottom: 0px;
    font-size: 15px;
    font-weight: bold;
    height: 30px;
  }


  
  .calle-box summary::before {
    content: "\002B" !important; /* Código Unicode para el signo de más (+) */
    display: inline-block;
    margin-right: 0.5em; /* Espacio entre el icono y el texto */
    color: transparent; /* Color del icono */
  }
  
  .calle-box details[open] > summary::before {
    content: "\2212" !important; /* Código Unicode para el signo de menos (-) */
    color: transparent; /* Color del icono cuando el detalle está abierto */
  }
  
  .calle-box .fila-roja {
    width: 100%;
    color: var(--secundario);
    background-color: rgb(245 196 164);
    content: "\002B" !important;
    border-radius: 15px;
    border: 1.5px solid rgba(230, 153, 102);
    height: 30px;
    font-size: 15px;
    font-weight: bold;
  }
  
  .fila-roja2 {
    color: red;
    width: 275px;
    font-weight: bold; /* Agregar negrita */
    content: "\f06a"; /* Código Unicode del icono de alerta */
    border-radius: 5px;
  }
  
  .pago {
    height: 20px;
    font-size: 14px;
    border-radius: 0px;
    padding: 0px 0px 0px 0px;
    margin-bottom: 0px;
    background: rgba(25, 102, 130, 0.187);;
    border-radius: 8px;
    color: var(--primario);
    width: 95%;
    border: none;
    padding: 0px 0px 0px 15px;
    }

    .pagofecha {
      height: 20px;
      font-size: 14px;
      border-radius: 0px;
      padding: 0px 0px 0px 0px;
      margin-bottom: 0px;
      background: rgba(25, 102, 130, 0.187);;
      border-radius: 8px;
      color: var(--primario);
      width: 95%;
      border: none;
      padding: 0px 0px 0px 15px;
  }

  
  .datostext {
    height: 25px;
    line-height: 0px;
    font-size: 15px;
    border-radius: 0px;
    padding: 0px 0px 0px 0px;
    margin-bottom: 0px;
    background: rgba(25, 102, 130, 0.187);
    border-radius: 10px;
    color: var(--secundario);
    width: 95%;
    border: none;
    padding: 0px 0px 0px 15px;
  }

  .perfil-select{
    height: 25px;
    line-height: 0px;
    font-size: 15px;
    border-radius: 0px;
    padding: 0px 0px 0px 0px;
    margin-bottom: 0px;
    background: rgba(25, 102, 130, 0.187);;
    border-radius: 10px;
    color: var(--secundario);
    width: 95%;
    border: none;
    padding: 0px 0px 0px 15px;
    margin: 0 0 0 5px;
  }
  
  .identificadormora {
    height: 20px;
    line-height: 0px;
    font-size: 15px;
    border-radius: 0px;
    padding: 0px 0px 0px 0px;
    margin-bottom: 0px;
    background: #013e6a22;
    color: #000000;
    width: 100%;
    border: none;
  }
  
  .calle-registros {
    /*padding: 15px 25px 0px 0px;*/
    width: 100%;
    position: center;
    overflow: hidden;
    left: 50%;
    background: #fff;
    display: grid;
    margin: 0px;
    overflow: hidden;
    bottom: 0;
    border: none;
  }

  
  .calle-registros tr:nth-child(even) {
    background-color: rgba(53, 98, 130, 0);
  }
  
  .calle-registros tr:nth-child(odd) {
    background-color: rgba(53, 98, 130, 0);
  }
  
  .tablacompleta {
    width: 100%;
    position: center;
    overflow: hidden;
    left: 10%; /* Establece el 50% del ancho del viewport */
    background: #fff;
    min-height: 10vh;
    display: grid;
    padding: 0px 10px 0px 2px;
    margin: 25px 0px 0px 0px;

    overflow: hidden;
    bottom: 0;
  }

  
  /* Estilo para el icono de abrir */
  summary::before {
    content: "\002B" !important; /* Código Unicode para el signo de más (+) */
    display: inline-block;
    margin-right: 0.9em; /* Espacio entre el icono y el texto */
    color: white;
  }
  
  /* Estilo para el icono de cerrar */
  details[open] > summary::before {
    content: "\2212" !important; /* Código Unicode para el signo de menos (-) */
    color: transparent;
  }
  
  summary {
    list-style: none;
  }
  
  /* Restablece el margen izquierdo para el contenido del resumen */
  summary::before {
    margin-left: 0;
  }
  
  #adminPanel2 {
    width: 370px;
    max-width: 370px;
    height: 700px;
    max-height: 100%;
    background: linear-gradient(
      to bottom,
      rgb(255, 255, 255) 85%,
      #013e6a
    ); /* Degradado de arriba hacia abajo */
    border-radius: 10px 10px 10px 10px;
    position: absolute;
    bottom: 0;
    left: 50%; /* Establece el 50% del ancho del viewport */
    transform: translateX(-50%); /* Centra el panel horizontalmente */
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease-in-out, padding 0.5s ease-in-out;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
  
    color: #fff;
  }
  
  #adminPanel3 {
    width: 370px;
    max-width: 370px;
    height: 700px;
    max-height: 100%;
    background: linear-gradient(
      to bottom,
      rgb(255, 255, 255) 85%,
      #013e6a
    ); /* Degradado de arriba hacia abajo */
    border-radius: 10px 10px 10px 10px;
    position: absolute;
    bottom: 0;
    left: 50%; /* Establece el 50% del ancho del viewport */
    transform: translateX(-50%); /* Centra el panel horizontalmente */
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease-in-out, padding 0.5s ease-in-out;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
  }
  
  #encabezadoadmin {
    display: flex;
    flex-direction: row;
    margin: 15px;
    flex-wrap: wrap;
  }
  


.boton-eliminar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px; /* Ajusta según tu diseño */
  height: 80px; /* Ajusta según tu diseño */
  background: rgb(218, 105, 65);
  color: white;
  border: none;
  border-radius: 8px; /* Bordes redondeados */
  cursor: pointer;
  transition: 0.3s;
}

.boton-eliminar svg {
  width: 70px; /* Ajusta el tamaño del ícono */
  height: 70px;
}
  
  
  .boton-eliminar:hover {
    text-decoration: none;
  }
  
  .avisodeprivacidad {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    background-color: #fff;
    font-family: "Quicksand", sans-serif;
  }
  
  .tituloavdp {
    margin-top: 0;
    text-align: center;
    color: #0271cd;
  }
  
  .contenedoradmin {
    width: 320px;
    max-width: 95%;
    max-height: 90%;
    border-radius: 20px 20px 20px 20px;
    position: center;
    overflow: hidden;
    left: 50%; /* Establece el 50% del ancho del viewport */
    background: #fff;
    min-height: 10vh;
    display: grid;
    margin: 10px; /* Agregar margen */
    overflow: hidden;
    bottom: 0;
    margin: 1;
  
    /* Añadido para ocupar más espacio en la pantalla */
    width: 95%; /* O ajusta a la anchura deseada */
    height: 95%; /* O ajusta a la altura deseada */
    max-width: 95%; /* Para asegurarse de que no sobrepase el contenedor */
    max-height: 95%; /* Para asegurarse de que no sobrepase el contenedor */
    box-sizing: border-box; /* Para incluir padding y border en el tamaño total */
  }
  
.tituloavisos {
  color: #0271cd;
}

.encabezado {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  justify-content: space-evenly;
  align-items: center;
}

.encabezado img {
  max-width: 40%; /* Asegura que la imagen no sobrepase su contenedor */
  height: auto;
}

/* Estilo base para el summary dentro de un .calle-boxss */
.calle-boxss summary {
  cursor: pointer;
  outline: none; /* Elimina el contorno predeterminado en algunos navegadores */
  background-color: #013e6a;
  width: 95%;
  color: white;
  border-radius: 8px;
  display: flex;
  font-size: 16px;
  align-items: center;
}

.calle-box summary {
  cursor: pointer;
  outline: none;
  background-color: rgb(25 102 130);
  border: 1px solid var(--secundario);
  color: white;
  border-radius: 15px;
  display: flex;
  font-size: 12px;
  align-items: center;
  margin-bottom: 0px;
  font-size: 11;
  font-size: 15px;
  height: 35px;
}


.tablaporcada2 {
  width: 100%;
  color: white;
  background-color: var(--secundario);
}


.infodelresidenteconmora{
  width: 100%;
  background-color:  rgba(202, 208, 210, 0.297);
  border-collapse: collapse;
  border-radius: 15px;
  margin: 5px;
  text-align: center;

}

.infodelresidente{
  width: 100%;
  background-color:  rgba(202, 208, 210, 0.205);
  border-collapse: collapse;
  border-radius: 15px;
  margin: 5px;
  text-align: center;

}

.infodelresidente th, td {
  font-size: 15px;
  font-weight: normal;
  color: var(--secundario)
}

.infodelresidente tbody tr:nth-child(odd) {
  background-color: rgba(81, 112, 124, 0.093); /* Color de fondo para filas impares */
}

.infodelresidenteconmora tbody tr:nth-child(odd) {
  background-color: rgb(245 206 181); /* Color de fondo para filas impares */
}



.infodelresidenteconmora .tabla-pagos tbody tr:nth-child(even) {
  background-color:  rgba(230, 230, 230); /* o el color que desees */
}

.infodelresidenteconmora .tabla-pagos {
  border-radius: 15px;    
  border: none;
  margin-top: 15px;
}






  td[colspan="2"] {
    text-align: left;
  }

  
  .registro-itemss {
    color: black;
    border: 1px solid #013e6a; /* Marco de 1px de grosor y color gris claro */
    padding: 5px; /* Espaciado interior de 10px */
    font-size: 12px; /* Tamaño de fuente de 12px */
    margin-bottom: 10px; /* Margen inferior de 10px */
    border-radius: 8px; /* Esquinas ligeramente ovaladas */
    width: 350px;
  }
  
  .calle-registrosss {
    position: center;
    overflow: hidden;
    left: 40%; /* Establece el 50% del ancho del viewport */
    background: #fff;
    overflow: hidden;
    bottom: 0;
    border: none;
    padding: 10px;
    font-size: 12px;
  }
  
  .header2 {
    margin-bottom: 40px;
    text-align: center; /* Centra el texto horizontalmente */
    font-size: 15px;
  }
  
  #busqueda-domicilio {
    padding: 5px;
    border: 2px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    width: 300px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease-in-out;
    font-size: 12px;
  }
  
  #busqueda-domicilio:focus {
    outline: none;
    border-color: #007bff; /* Cambia el color del borde al enfocar el campo */
  }
  
  .seguridad {
    width: 280px;
    max-width: 95%;
    max-height: 90%;
    border-radius: 10px 10px 10px 10px;
    position: center;
    overflow: hidden;
    left: 50%; /* Establece el 50% del ancho del viewport */
    background: #fff;
    min-height: 10vh;
    display: grid;
    margin: 10px; /* Agregar margen */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    bottom: 0;
  }
  
  .row2 {
    width: 380px;
    display: flex;
    justify-content: space-between;
    justify-content: flex-start;
    /* align-items: flex-start; */
    align-items: center;
    align-content: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
  }
  
  .columna-izquierda3 {
    text-align: center; /* Centra horizontalmente el contenido */
  }
  
  .columna-izquierda3 img {
    max-width: 36%; /* Tamaño máximo para la imagen */
    margin-left: auto; /* Auto-margen a la izquierda */
    margin-right: auto; /* Auto-margen a la derecha */
  }
  
  .header3 {
    text-align: center; /* Centra el texto horizontalmente */
  }
  
  #divpagos {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    min-height: 10vh;
    display: grid;
    margin-right: 0px;
    margin-left: 0px;
    margin-top: 0;
    margin-bottom: 0;
    margin-bottom: 10px; /* Agrega un margen inferior entre contenedores */
  }
  
  .columna-logoseguridad,
  .columna-derecha2 {
    width: 40%; /* Ajusta el ancho según tus necesidades */
  }
  .columna-logoseguridad img {
    max-width: 80%; /* Asegura que la imagen no sobrepase su contenedor */
    height: auto;
  }
  #seguridad {
    width: 300px;
  }
  
  .tituloseguridad {
    font-size: 14px;
    color: var(--secundario);
  }

  .calle-boxmorosos{
    padding: 0px;
    margin: 0px;

  }

.calle-boxmorosos summary {
  cursor: pointer;
  outline: none;
  background-color:  rgb(37 150 190 / 53%);
  border: 1px solid var(--secundario); /* Marco de 1px de grosor y color gris claro */
  color: var(--secundario);
  border-radius: 15px;
  display: flex;
  font-size: 12px;
  align-items: center;
  margin-bottom: 0px;
  font-size: 15px;
  margin-top: 10px;
  font-weight: bold;
  height: 30px;
  width: 98.5%;
  max-width: 349;
  margin: 0px 0px 0px 5px;
}

.calle-boxmorosos2 summary {
  cursor: pointer;
  outline: none;
  background-color:  rgb(37 150 190 / 53%);
  border: 1px solid var(--secundario); /* Marco de 1px de grosor y color gris claro */
  color: var(--secundario);
  border-radius: 15px;
  display: flex;
  font-size: 12px;
  align-items: center;
  margin-bottom: 0px;
  font-size: 15px;
  margin-top: 10px;
  font-weight: bold;
  height: 30px;
  width: 100%;
  margin: 0px 0px 0px 10px;
}

  .btnadmin {
    width: 160px; /* Maintains the desired width */
    height: 40px; /* Maintains the desired height */
    min-width: 150px; /* Maintains the minimum width */
    margin: 2px; /* Maintains the margin */
    padding: 10px 20px; /* Maintains the padding for button comfort */
    text-align: start; /* Aligns the text to the left */
    border-radius: 5px; /* Maintains the border radius */
    font-size: 12px; /* Reduces the font size to 12px */
    font-weight: 500; /* Maintains the font weight */
    transition: all 0.3s ease; /* Maintains the transition effect */
    outline: none; /* Maintains the removal of outline */
    border-radius: 20px;
  }
  
  .conetnedordetails {
    color: var(--secundario);
    align-items: left; /* Centra los elementos horizontalmente */
  }

.contenedorpagos {
    width: 100%;
    padding: 0px 10px 0px 0px;
    border-radius: 8px;
}
.dropdown {
    margin-bottom: 20px;
    border: 2px solid var(--primario); /* Borde del color primario */
    border-radius: 25px;
    background: rgb(25 102 130 / 5%);
}

.dropdown2 {
  margin-bottom: 20px;
  border: 2px solid var(--secundario); /* Borde del color primario */
  border-radius: 25px;
}

.dropdown3 {
  margin-bottom: 20px;
  border: 2px solid var(--primario); /* Borde del color primario */
  border-radius: 25px;
}

.dropdown-title {
    padding: 0px 0px 0px 15px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 45px;
    font-size: 14px;
    border: none;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius:20px;
    border-bottom-right-radius: 20px;
    background: rgb(37 150 190 / 23%);
    color: var(--secundario);
    font-family: "Quicksand", sans-serif;
    border: 2px solid var(--secundario);
    transition: 0.3s ease all;

}

.dropdown-title2 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 35px;
  font-size: 12px;
  width: 97%;
  border: none;
  border-radius: 20px;
  background: var(--secundario);
  color: white;
  font-family: "Quicksand", sans-serif;
  border: 2px solid var(--secundario);
  transition: 0.3s ease all;

}

.dropdown-title3 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 35px;
  font-size: 12px;
  width: 97%;
  border: none;
  border-radius: 20px;
  background: rgb(37 150 190 / 62%);
  color: var(--secundario);
  font-family: "Quicksand", sans-serif;
  border: 1px solid var(--primario);
  transition: 0.3s ease all;
}

  
  .contenedorformularioreserva {
    align-items: center;
    padding: 0px;
    margin-bottom: 0px;
    width: 98%;
  }
  

  .table-custom {
    width: 100%;
    color: var(--secundario);
    border-collapse: collapse;
    margin: 0px 0;
    font-size: 1px;
    text-align: center;
    border-radius: 10px;
    overflow: hidden; /* Para asegurar que el border-radius funcione */
    border: 1px solid var(--secundario);
}

.table-custom th,
.table-custom td {
    border: 1px solid #ddd;
    vertical-align: middle; /* Centra verticalmente */
    color: var(--secundario);
}


.table-custom tbody tr:nth-child(even) {
    background-color: rgba(173, 221, 240, 0.023);
}

.table-custom tbody tr:nth-child(odd) {
    background-color: rgba(26, 175, 230, 0.223); /* Color de fondo para filas impares */
}

/* Efecto hover para .table-custom-highlight */
.table-custom-highlight tbody tr:hover {
    background: var(--secundario);
    color: white !important; /* Cambia el texto de toda la fila */
}

/* Asegura que todos los elementos dentro de la fila también sean blancos */
.table-custom-highlight tbody tr:hover * {
    color: white !important;
    fill: white !important; /* Cambia el color de relleno de los SVG */
}

/* Asegurar que también los encabezados sean consistentes al hacer hover */
.table-custom-highlight thead th:hover {
    background: var(--secundario);
    color: white !important;
}

.table-custom thead td {
  padding: 10px; /* Espaciado interno */
  font-weight: bold; /* Opcional: texto más destacado */
}

  
  
  .divreservar {
    padding: 0px 0px;
  }
  
  .btnreservar {
    padding: 10px 10px;
  }
  
  #btnenviaringreso {
    padding: 0px 35px;
  }
  

  .table-table-borderless {
    margin: 0;
    border-collapse: collapse; /* Usar 'collapse' en lugar de 'separate' para reducir el espacio entre celdas */
    text-align: left;
    padding: 0; /* Eliminar el padding */
    border-spacing: 0; /* Asegurarse de que no haya espacio entre celdas */
  }
  
  .table-table-borderless td,
  .table-table-borderless th {
    padding: 0; /* Eliminar el padding de las celdas */
    margin: 0; /* Eliminar el margen de las celdas */
  }
  .svgreservacion{
    padding: -5px;
  }

  .inputfechareserva{
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    width: 90%;
    border: none;
    border-radius: 5px;
    padding: 0 20px 0 5px;
    margin-bottom: 0px;
    background: #f3f3f3eb;
    color: #013e6a;
    font-family: "Quicksand", sans-serif;
    border: 2px solid transparent;
    transition: 0.3s ease all;
    margin: 0 20px 0 45px;
  }
  
  .inputfecha {
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    width: 310px;
    border: none;
    border-radius: 5px;
    padding: 0 20px 0 5px;
    margin-bottom: 0px;
    background: #f3f3f3eb;
    color: #013e6a;
    font-family: "Quicksand", sans-serif;
    border: 2px solid transparent;
    transition: 0.3s ease all;
    margin: 0 20px 0 45px;
  }


  
  
  .botonescamara {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-items: center;
    font-size: 12px;
    flex-wrap: wrap;
    align-content: space-around;
    flex-direction: column;
  }
  
  .contenedorcamaraybotones {
    justify-content: space-between;
    justify-content: flex-start;
    align-items: flex-start;
    align-items: center;
    font-size: 12px;
    flex-direction: row;
    margin: 0px;
  }
  
  .img-fluid {
    width: 350px;
  }
  
  
  .contenedorhomeverde {
    width: 100%;
    height: 100%;
    border-radius: 10px 10px 10px 10px;
    position: center;
    overflow: hidden;
    margin: 10px;
    left: 50%; /* Establece el 50% del ancho del viewport */
    background: rgba(0, 200, 0, 0.445);
    min-height: 10vh;
    display: grid;
    margin: 10px; /* Agregar margen */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    bottom: 10px;
    justify-content: center;
  }
  
  .datosverde{
    padding: 20px 20px 20px 20px;
    justify-content: center;
    margin: 10px; 
    min-height: 10vh;
    font-size: 28px;
    text-align: center;

  }
  
  
  .contenedorhomerojo {
    width: 100%;
    height: 100%;
    border-radius: 10px 10px 10px 10px;
    position: center;
    overflow: hidden;
    margin: 10px;
    left: 50%; /* Establece el 50% del ancho del viewport */
    background:red;
    min-height: 10vh;
    display: grid;
    margin: 10px; /* Agregar margen */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    bottom: 10px;
    justify-content: center;
  }

  .datosrojo{
    padding: 20px 20px 20px 20px;
    justify-content: center;
    margin: 10px;
    min-height: 10vh;
    font-size: 30px;
    text-align: center;
  }
  
  #btn-reload{
    background-color: rgba(255, 255, 255, 0.22);
  }
  

  
  .camaraqr {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-items: center;
    font-size: 12px;
    flex-wrap: wrap;
    align-content: space-around;
    flex-direction: column;
  }
  
  
  .contenedorhomeazul {
    width: 370px;
    max-width: 370px;
    max-height: 90%;
    border-radius: 10px 10px 10px 10px;
    position: center;
    overflow: hidden;
    margin: 10px;
    left: 50%; /* Establece el 50% del ancho del viewport */
    background:green;
    min-height: 10vh;
    display: grid;
    margin: 10px; /* Agregar margen */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    bottom: 10px;
    justify-content: center;
    padding: 20px 20px 20px 20px;
  
  }
  
  .columna-izquierda5 {
    width: 100%; /* Ajusta el ancho según tus necesidades */
  }
  .columna-izquierda5 img {
    max-width: 100%; /* Asegura que la imagen no sobrepase su contenedor */
  }
  
  .row5 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
  }



  .header5 {
    margin-bottom: 10px;
    text-align: center;
  }
  
  .columna-izquierda6 {
    width: 20%; /* Ajusta el ancho según tus necesidades */
  }
  .columna-izquierda6 img {
    max-width: 100%; /* Asegura que la imagen no sobrepase su contenedor */
  }


  
  
  .contenedorescalle{
    margin: 10px;
    width: 100%;
  }
  
  #divvotaciones{
    font-size: 10px;
    text-align: justify;
    padding: 0px 20px 0px 0px;
  
  }

.votacion-table {
  width: 100%;
  margin-bottom: 10px;
  border-radius: 25px;
  border: 1px solid var(--secundario);
  border-collapse: separate; /* 👈 clave */
  border-spacing: 0;         /* elimina espacios feos */
  overflow: hidden;          /* corta lo que sobresalga */
}

.votacion-table tr {
    background-color: #fff;
    border-bottom: 1px solid var(--primario);
}

/* Estilo para las celdas de la tabla */
.votacion-table td {
    padding: 10px;
    text-align: justify; /* Justifica el texto */
    color: #333; /* Color de texto para mejorar la legibilidad sobre el fondo blanco */

}

/* Estilo para las celdas de la última columna */
.votacion-table td:last-child {
    border-right: none;
}

/* Estilo para el encabezado de la tabla */
.votacion-table th {
    background-color: var(--primario);
    color: #fff;
    padding: 10px;
}

  /* Estilos para inputs de radio personalizados */
  .votacion-table input[type="radio"] {
    /* Ocultamos el input radio original */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    width: 40px;
    height: 20px;
    background-color: #ccc; /* Color del fondo apagado */
    border-radius: 20px;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s ease;
}

.votacion-table input[type="radio"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: white; /* Color del botón de la palanca */
    transform: translateY(-50%);
    transition: left 0.3s ease;
}

.votacion-table input[type="radio"]:checked {
    background-color: var(--primario); /* Color del fondo activado */
}

.votacion-table input[type="radio"]:checked::before {
    left: 22px; /* Mueve el botón hacia la derecha cuando está seleccionado */
}

  
  /* Estilo para labels */
  .votacion-table label {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
    cursor: pointer;
  }
  
  /* Estilo para labels cuando el input está deshabilitado */
  .votacion-table input[type="radio"]:disabled + label {
    color: #aaa;
    cursor: not-allowed;
  }
  
  .logoadmin {
    width: 150px; /* Establece el ancho a 200 píxeles */
    height: auto; /* Mantiene la proporción de la imagen */
  }
  
  
  .columna-izquierda5 {
    align-items: center;
  }
  
  .columna-izquierda5,
  .columna-derecha2 {
    width: 150px; /* Ajusta el ancho según tus necesidades */
    align-items: center;
  
  }
  .columna-izquierda5 img {
    max-width: 100%; /* Asegura que la imagen no sobrepase su contenedor */
    align-items: center;
  }
  
  .agregarpregunta{
    align-items: center;
  }
  
  
  .fila-par {
    background-color: #f2f2f2; /* Color de fondo para filas pares */
  }
  
  .fila-impar {
    background-color: rgba(37, 149, 190, 0.447);
  }
  
  .mercadopago-button {
    width: 90%; /* Maintains the desired width */
    height: 40px; /* Maintains the desired height */
    min-width: 150px; /* Maintains the minimum width */
    margin: 2px; /* Maintains the margin */
    padding: 10px 20px; /* Maintains the padding for button comfort */
    text-align: start; /* Aligns the text to the left */
    border-radius: 5px; /* Maintains the border radius */
    font-size: 13px; /* Reduces the font size to 12px */
    font-weight: 500; /* Maintains the font weight */
    transition: all 0.3s ease; /* Maintains the transition effect */
    outline: none; /* Maintains the removal of outline */
    border-radius: 20px;
  }
  
  .terminar-registro{
    height: 70px;
    width: 100%; /* Mantiene el ancho deseado */
    border-radius: 7px; /* Mantiene el border radius correcto */
    background: rgba(37, 149, 190, 0.447);
    border: 1px solid var(--secundario); /* Asegura que el borde sea visible */
    text-align: center;
    font-size: 14px; /* Tamaño de fuente ajustado */
    display: flex; /* Activa flexbox */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
  }

  .terminar-registro svg{
    margin-left: 5px;
    width: 40px;
    height: 40px;
  }
  
  
  .header2 {
    margin-bottom: 10px;
    text-align: left;
    width: 60%; /* Ajusta el ancho según tus necesidades */
  
  
  }
  
  .columna-izquierda9 {
    width: 40%; /* Ajusta el ancho según tus necesidades */
  }
  
  
  /* Estilo del contenedor del switch */
  .switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
  }
  
  /* Ocultar el checkbox original */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* Estilo del slider */
  .slider {
    width: 50px;
    height: 25px;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
  }
  
  /* Estilo del slider cuando está redondeado */
  .slider.round {
    border-radius: 25px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }
  
  /* Estilo del punto móvil dentro del switch */
  .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 2.5px;
    background-color: rgb(255, 255, 255);
    transition: .4s;
  }
  
  /* Cambia el color del switch cuando está seleccionado */
  input:checked + .slider {
    background-color: rgb(37, 150, 190);
  }
  
  /* Mueve el punto móvil cuando está seleccionado */
input:checked + .slider:before {
    transform: translateX(24px);
}


.contenedor-input2 {
  color: var(--secundario);
  display: flex;
  align-items: center;
  gap: 10px; /* Espacio entre el texto, el ícono y el select */
}

.contenedor-input2 svg {
  width: 20px; /* Ajusta el tamaño según tu diseño */
  height: 20px; /* Ajusta el tamaño según tu diseño */
  color: var(--primario); /* Puedes cambiar el color aquí */
}

.contenedor-input2 p {
  margin: 0;
  font-size: 14px; /* Ajusta el tamaño del texto según tu preferencia */
}

.contenedor-input2 select {
  padding: 5px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.busqueda {
  color: var(--secundario);
  font-size: 12px;
  width: 50%;
  height: 25px;
  margin: 5px 0px 0px 20px;
  padding: 0 0 0 10px;

}

.busqueda:hover  {
  color: white;
  font-size: 12px;
  width: 50%;
  height: 25px;
  margin: 5px 0px 0px 20px;
  padding: 0 0 0 10px;
}

#tablapreguntasadmin {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0; /* Añade un margen para separar la tabla */
  border-radius: 8px;
  padding: 0px 0px 10px 0px;
}

#tablapreguntasadmin th, 
#tablapreguntasadmin td {
  border: 0px solid var(--secundario); /* Bordes con el color secundario */
  padding: 5px;
  text-align: justify; /* Justifica el texto */
  color: var(--secundario); /* Color de texto */
  border-radius: 0px;
}

.add-residente-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--primario);
  border: none; /* Elimina el borde */
  border-radius: 50%;
  width: 75px; /* Ajusta el ancho */
  height: 75px; /* Ajusta la altura */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.492);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.add-residente-btn svg {
  width: 60px; /* Ajusta el tamaño del ícono */
  height: 60px;
  fill: #fff; /* Cambia el color del icono */
}

#compartirQrButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--primario); /* Color de fondo */
  border: none; /* Elimina el borde */
  border-radius: 50%; /* Hace que el botón sea circular */
  width: 65px;
  height: 65px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.492);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  padding: 0; /* Asegúrate de que no haya padding */
  min-width: 5px;

}

#compartirQrButton svg {
  width: 30px; /* Ajusta el tamaño del ícono */
  height: 30px;
  fill: #fff; /* Color del ícono */
}


#compartirQrButton:hover {
  background-color: var(--secundario); /* Cambio de color al pasar el cursor */
}

#downloadinforme {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--primario); /* Color de fondo */
  border: none; /* Elimina el borde */
  border-radius: 50%; /* Hace que el botón sea circular */
  width: 65px;
  height: 65px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.492);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  padding: 0; /* Asegúrate de que no haya padding */
  min-width: 5px;
}

#downloadinforme svg {
  width: 30px; /* Ajusta el tamaño del ícono */
  height: 30px;
  fill: #fff; /* Color del ícono */
}


#downloadinforme:hover {
  background-color: var(--secundario); /* Cambio de color al pasar el cursor */
}

#btnenviaringreso {
  display: unset;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--primario);
  border: none;
  border-radius: 50%;
  width: 65px;
  height: 65px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.492);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  padding: 0;
  min-width: 5px;
  color: white;
  flex-direction: column;
}

#btnenviaringreso svg {
  width: 30px; /* Ajusta el tamaño del ícono */
  height: 30px;
  fill: #fff; /* Color del ícono */
}


#btnenviaringreso:hover {
  background-color: var(--secundario); /* Cambio de color al pasar el cursor */
}

#generarvisitayqr{
  display: unset;
  position: fixed;
  bottom: 100px;
  right: 100px;
  background-color: var(--primario);
  border: none;
  border-radius: 50%;
  width: 65px;
  height: 65px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.492);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  padding: 0;
  min-width: 5px;
  color: white;
  flex-direction: column;
}

#generarvisitayqr svg {
  width: 30px; /* Ajusta el tamaño del ícono */
  height: 30px;
  fill: #fff; /* Color del ícono */
}


#generarvisitayqr:hover {
  background-color: var(--secundario); /* Cambio de color al pasar el cursor */
}

#borrardatos {
  display: unset;
  position: fixed;
  bottom: 100px;
  left: 100px; /* Cambiar de right a left */
  background-color: var(--primario);
  border: none;
  border-radius: 50%;
  width: 65px;
  height: 65px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.492);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  padding: 0;
  min-width: 5px;
  color: white;
  flex-direction: column;
}

#borrardatos svg {
  width: 30px; /* Ajusta el tamaño del ícono */
  height: 30px;
  fill: #fff; /* Color del ícono */
}


#borrardatos:hover {
  background-color: var(--secundario); /* Cambio de color al pasar el cursor */
}

#nuevoregistrovisita{
  display: unset;
  position: fixed;
  bottom: 20px;
  left: 20px; /* Cambiar de right a left */
  background-color: var(--primario);
  border: none;
  border-radius: 50%;
  width: 65px;
  height: 65px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.492);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  padding: 0;
  min-width: 5px;
  color: white;
  flex-direction: column;
}

#nuevoregistrovisita svg {
  width: 30px; /* Ajusta el tamaño del ícono */
  height: 30px;
  fill: #fff; /* Color del ícono */
}


#nuevoregistrovisita:hover {
  background-color: var(--secundario); /* Cambio de color al pasar el cursor */
}

.upload-icon{
  display: unset;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--primario);
  border: none;
  border-radius: 50%;
  width: 65px;
  height: 65px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.492);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  padding: 0;
  min-width: 5px;
  color: white;
  flex-direction: column;
}

.upload-icon svg {
  width: 30px; /* Ajusta el tamaño del ícono */
  height: 30px;
  fill: #fff; /* Color del ícono */
}


.upload-icon:hover {
  background-color: var(--secundario); /* Cambio de color al pasar el cursor */
}

#btnAgregarPregunta{
  display: unset;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--primario);
  border: none;
  border-radius: 50%;
  width: 65px;
  height: 65px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.492);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  padding: 0;
  min-width: 5px;
  color: white;
  flex-direction: column;
}

#btnAgregarPregunta svg {
  width: 30px; /* Ajusta el tamaño del ícono */
  height: 30px;
  fill: #fff; /* Color del ícono */
}


#btnAgregarPregunta:hover {
  background-color: var(--secundario); /* Cambio de color al pasar el cursor */
}

#grabarnweregistro{
  display: unset;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--primario);
  border: none;
  border-radius: 50%;
  width: 65px;
  height: 65px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.492);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  padding: 0;
  min-width: 5px;
  color: white;
  flex-direction: column;
}

#grabarnweregistro svg {
  width: 30px; /* Ajusta el tamaño del ícono */
  height: 30px;
  fill: #fff; /* Color del ícono */
}


#grabarnweregistro:hover {
  background-color: var(--secundario); /* Cambio de color al pasar el cursor */
}

#divagregarunresidente{
  width: 100%;
}

#grabarnewpagodelresidente{
  display: unset;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--primario);
  border: none;
  border-radius: 50%;
  width: 65px;
  height: 65px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.492);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  padding: 0;
  min-width: 5px;
  color: white;
  flex-direction: column;
}

#grabarnewpagodelresidente svg {
  width: 30px; /* Ajusta el tamaño del ícono */
  height: 30px;
  fill: #fff; /* Color del ícono */
}


#grabarnewpagodelresidente:hover {
  background-color: var(--secundario); /* Cambio de color al pasar el cursor */
}

#grabarnewmultadelresidente{
  display: unset;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--primario);
  border: none;
  border-radius: 50%;
  width: 65px;
  height: 65px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.492);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  padding: 0;
  min-width: 5px;
  color: white;
  flex-direction: column;
}

#grabarnewmultadelresidente svg {
  width: 30px; /* Ajusta el tamaño del ícono */
  height: 30px;
  fill: #fff; /* Color del ícono */
}



#grabarnewmultadelresidente:hover {
  background-color: var(--secundario); /* Cambio de color al pasar el cursor */
}

.regresarlistaresidentes{
  display: unset;
  position: fixed;
  bottom: 20px;
  left: 20px;
  background-color: var(--primario);
  border: none;
  border-radius: 50%;
  width: 65px;
  height: 65px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.492);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  padding: 0;
  min-width: 5px;
  color: white;
  flex-direction: column;
}

.regresarlistaresidentes svg {
  width: 30px; /* Ajusta el tamaño del ícono */
  height: 30px;
  fill: #fff; /* Color del ícono */
}


.regresarlistaresidentes:hover {
  background-color: var(--secundario); /* Cambio de color al pasar el cursor */
}


#encenderCamara {
  display: unset;
  position: fixed;
  top: 100px;
  left: 20px;
  background-color: var(--primario);
  border: none;
  border-radius: 50%;
  width: 65px;
  height: 65px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.492);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  padding: 0;
  min-width: 5px;
  color: white;
  flex-direction: column;
}

#encenderCamara svg {
  width: 30px; /* Ajusta el tamaño del ícono */
  height: 30px;
  fill: #fff; /* Color del ícono */
}

#encenderCamara:hover {
  background-color: var(--secundario); /* Cambio de color al pasar el cursor */
}

#cerrarCamara {
  display: unset;
  position: fixed;
  top: 100px;
  right: 20px;
  background-color: var(--primario);
  border: none;
  border-radius: 50%;
  width: 65px;
  height: 65px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.492);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  padding: 0;
  min-width: 5px;
  color: white;
  flex-direction: column;
}

#cerrarCamara svg {
  width: 30px; /* Ajusta el tamaño del ícono */
  height: 30px;
  fill: #fff; /* Color del ícono */
}


#cerrarCamara:hover {
  background-color: var(--secundario); /* Cambio de color al pasar el cursor */
}

#btnbtndecerrarsesioncdsp{
  display: unset;
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--primario);
  border: none;
  border-radius: 50%;
  width: 65px;
  height: 65px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.492);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  padding: 0;
  min-width: 5px;
  color: white;
  flex-direction: column;
}

#btnbtndecerrarsesioncdsp svg {
  width: 30px; /* Ajusta el tamaño del ícono */
  height: 30px;
  fill: #fff; /* Color del ícono */
}


#btnbtndecerrarsesioncdsp:hover {
  background-color: var(--secundario); /* Cambio de color al pasar el cursor */
}

#avisarBasura{
  display: unset;
  position: fixed;
  top: 180px;
  right: 20px;
  background-color: var(--primario);
  border: none;
  border-radius: 50%;
  width: 65px;
  height: 65px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.492);
  cursor: pointer;
  display: flex
;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  padding: 0;
  min-width: 5px;
  color: white;
  flex-direction: column;
}

#avisarBasura svg {
  width: 30px; /* Ajusta el tamaño del ícono */
  height: 30px;
  fill: #fff; /* Color del ícono */
}


#avisarBasura:hover {
  background-color: var(--secundario); /* Cambio de color al pasar el cursor */
}



#calle-morosos-2{
  width: 100%;
}


.botondelescanerdelqr{
  display: unset;
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--primario);
  border: none;
  border-radius: 50%;
  width: 65px;
  height: 65px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.492);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  padding: 0;
  min-width: 5px;
  color: white;
  flex-direction: column;
}

.botondelescanerdelqr svg {
  width: 30px; /* Ajusta el tamaño del ícono */
  height: 30px;
  fill: #fff; /* Color del ícono */
}


.botondelescanerdelqr:hover  {
  background-color: var(--secundario); /* Cambio de color al pasar el cursor */
}


.botondelescanerdelqr2{

  display: unset;
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--primario);
  border: none;
  border-radius: 50%;
  width: 65px;
  height: 65px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.492);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  padding: 0;
  min-width: 5px;
  color: white;
  flex-direction: column;
}

.botondelescanerdelqr2 svg {
  width: 30px; /* Ajusta el tamaño del ícono */
  height: 30px;
  fill: #fff; /* Color del ícono */
}


.botondelescanerdelqr2:hover  {
  background-color: var(--secundario); /* Cambio de color al pasar el cursor */
}


#encenderCamaraPrivada {
  display: unset;
  position: fixed;
  top: 100px;
  left: 20px;
  background-color: var(--primario);
  border: none;
  border-radius: 50%;
  width: 65px;
  height: 65px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.492);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  padding: 0;
  min-width: 5px;
  color: white;
  flex-direction: column;
}

#encenderCamaraPrivada svg {
  width: 30px; /* Ajusta el tamaño del ícono */
  height: 30px;
  fill: #fff; /* Color del ícono */
}

#encenderCamaraPrivada:hover {
  background-color: var(--secundario); /* Cambio de color al pasar el cursor */
}

#cerrarCamaraPrivada {
  display: unset;
  position: fixed;
  top: 100px;
  right: 20px;
  background-color: var(--primario);
  border: none;
  border-radius: 50%;
  width: 65px;
  height: 65px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.492);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  padding: 0;
  min-width: 5px;
  color: white;
  flex-direction: column;
}

#cerrarCamaraPrivada svg {
  width: 30px; /* Ajusta el tamaño del ícono */
  height: 30px;
  fill: #fff; /* Color del ícono */
}


#cerrarCamaraPrivada:hover {
  background-color: var(--secundario); /* Cambio de color al pasar el cursor */
}


#btnbtndecerrarsesioncdsp2{
  display: unset;
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--primario);
  border: none;
  border-radius: 50%;
  width: 65px;
  height: 65px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.492);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  padding: 0;
  min-width: 5px;
  color: white;
  flex-direction: column;
}

#btnbtndecerrarsesioncdsp2 svg {
  width: 30px; /* Ajusta el tamaño del ícono */
  height: 30px;
  fill: #fff; /* Color del ícono */
}


#btnbtndecerrarsesioncdsp2:hover {
  background-color: var(--secundario); /* Cambio de color al pasar el cursor */
}

/* Estilo para las tablas de gastos */
.table-gastos {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 11px;
}

.table-gastos th, .table-gastos td {
  padding: 0px 15px;
  border: 1px solid #ddd;
  text-align: left;
  font-size: 11px;

}

/* Estilo para las filas impares */
.table-gastos tbody tr:nth-child(odd) {
  background-color: #1AAFE6;
  font-size: 11px;

}

/* Estilo para las filas pares */
.table-gastos tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.9);
  font-size: 11px;

}

/* Estilo para el encabezado */
.table-gastos th {
  font-size: 10px;
  color: var(--secundario);
  text-transform: uppercase;
  text-align: center; /* Alinear el texto en el centro */
}

/* Estilo para la columna de retiros */
.table-gastos .retiros-column {
  text-align: right; /* Alinear a la derecha */
  padding: 0 2.5% 0 0;
  font-size: 11px;

}



.boton-gasto {
  color: var(--secundario);
  padding: 5px 5px 5px 5px;
  font-size: 12px;
  width: 120px;
  height: 45px;
  justify-content: center;    /* Centrar horizontalmente */
  align-items: center;        /* Centrar verticalmente */
  text-align: center;         /* Asegura que el texto esté centrado */
  border: none;               /* Opcional: elimina el borde del botón */
  background-color: #f3f3f3;  /* Opcional: establece un color de fondo */
  cursor: pointer;            /* Cambia el cursor al pasar sobre el botón */
  border-radius: 5px;        /* Opcional: redondear bordes del botón */
  transition: background-color 0.3s; /* Efecto de transición */
  border-radius: 8px;
}

.divgastosadmin {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: wrap;
  width: 105%;
  padding: 20px;
  border-radius: 8px;
  margin: auto;
  margin-bottom: 70px;
  justify-content: flex-start;
  align-content: space-between;
}

.boton-gasto:hover {
  background-color: var(--primario);
  color: white; /* Color de fondo al pasar el mouse */
}


.tablaporcada thead tr th {
  background-color: rgba(37, 149, 190, 0.447);
  color: white; /* Cambia el color del texto si es necesario */
  padding: 10px; /* Agrega un poco de espacio alrededor del texto */
  text-align: left; /* Alinea el texto a la izquierda */
}


#conceptoGasto{
  margin: 0px 0px 0px 4px
}

#nuevoConcepto{
  padding: 0px 0px 0px 10px;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  width: 88%;
  border: none;
  border-radius: 5px;
  margin: 0 0px 0 5px;
  margin-bottom: 5px;
  background: #f3f3f3eb;
  color: #013e6a;
  font-family: "Quicksand", sans-serif;
  border: 2px solid transparent;
  transition: 0.3s ease all;
}

#razonsocial{
  padding: 0px 0px 0px 10px;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  width: 88%;
  border: none;
  border-radius: 5px;
  margin: 0 0px 0 5px;
  margin-bottom: 5px;
  background: #f3f3f3eb;
  color: #013e6a;
  font-family: "Quicksand", sans-serif;
  border: 2px solid transparent;
  transition: 0.3s ease all;
}

.mi-clase-boton {
  /* position: fixed; */
  /* bottom: 20px; */
  /* right: 20px; */
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 0px;
  cursor: pointer;
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
  /* transition: background-color 0.3s ease; */
  padding: 0;
  min-width: 5px;
  color: white;
  /* flex-direction: column; */
}

.mi-clase-boton svg {
  width: 30px; /* Ajusta el tamaño del ícono */
  height: 30px;
  fill: var(--primario); /* Color del ícono */
}

.mi-clase-boton:hover svg {
  fill: var(--secundario); /* Cambia al color secundario al pasar el cursor */
}

.titulo-tabla {
  /* font-size: 18px; */
  font-weight: bold;
  text-align: center;
  /* padding: 10px; */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* gap: 10px; */
  align-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
}
.titulo-tabla svg {
  width: 24px; /* Tamaño del ícono */
  height: 24px;
}

.statusyadeudo {
  padding: 0px 15px;
  font-size: 15px;
  font-weight: bold;
  text-align: left;
}


.buttonrecibos {
  display: flex; /* Usar Flexbox para centrar contenido */
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  width: 30px; /* Ajusta al tamaño deseado */
  height: 0px; /* Ajusta al tamaño deseado */
  border: none; /* Sin borde */
  background: none; /* Sin fondo, ajusta según diseño */
  cursor: pointer; /* Indica que es un botón */
  padding: 0; /* Quita el relleno interno */
  margin: 0 auto; /* Opcional: Centra el botón dentro de la celda */
}

.buttonrecibos svg {
  width: 16px; /* Tamaño del ícono */
  height: 16px; /* Ajusta según sea necesario */
  fill: var(--secundario); /* Aplica el color */
}

.buttonrecibos:hover svg {
  fill: white; /* Cambia al color secundario al pasar el cursor */
}

.inputvisita {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  width: 100%;
  border: none;
  border-radius: 15px;
  padding: 10px 10px 10px 10px;
  margin-bottom: 0px;
  background: #f3f3f3eb;
  color: #013e6a;
  font-family: "Quicksand", sans-serif;
  border: 2px solid transparent;
  transition: 0.3s ease all;
  margin: 0 auto;
}


.selecttypevisita {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  width: 100%;
  border: none;
  border-radius: 15px;
  padding: 10px 10px 10px 10px;
  margin-bottom: 0px;
  background: #f3f3f3eb;
  color: #013e6a;
  font-family: "Quicksand", sans-serif;
  border: 2px solid transparent;
  transition: 0.3s ease all;
  margin: 0px 0px 0px 0px;
}

.selecttypevisita svg {
  width: 50px;
  margin-right: 0px; /* Espacio entre el ícono y el texto */
  vertical-align: middle; /* Alinea el ícono con el texto */
  color: rgb(25, 102, 130);
}

.selecttypevisita:hover, .inputvisita:hover {
  background: var(--secundario);
  border: var(--secundario);
  color: #fff;
}

.icon-textpago {
  display: flex;
  align-items: flex-start;
  background: rgb(37 150 190 / 23%);
  border-radius: 15px;
  padding: 5px;
  font-size: 14px;
  flex-direction: row;
  margin: 10px;
}

.pagostexto {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.status2 {
  color: rgb(25, 102, 130);
  font-size: 14;
}

.status3 {
  color: rgb(25, 102, 130);
  font-size: 16;
  font-weight: bold;
}



.icon-textpago svg {
  margin-bottom: 10px; /* Espacio entre el icono y el texto */
  align-self: center; /* Centra el icono horizontalmente */
}


.mespago {
    /* height: 25px; */
    /* line-height: 50px; */
    font-size: 14px;
    /* width: 100%; */
    border: none;
    border-radius: 8px;
    padding: 0px 0px 0px 10px;
    margin-bottom: 0px;
    background: #f3f3f3eb;
    color: #013e6a;
    font-family: "Quicksand", sans-serif;
    border: 2px solid transparent;
    transition: 0.3s ease all;
    margin: 0px 0px 0px 0px;
}

.mespago svg {
  width: 50px;
  margin-right: 0px; /* Espacio entre el ícono y el texto */
  vertical-align: middle; /* Alinea el ícono con el texto */
  color: rgb(25, 102, 130);
}

.icon-textpago svg {
  width: 50px;
  margin-right: 0px;
  vertical-align: middle;
  color: rgb(25, 102, 130);
}

.nip{
  font-size: 20px;
}

.inputhora {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 10px 10px 10px 10px;
  margin-bottom: 0px;
  background: #f3f3f3eb;
  color: #013e6a;
  font-family: "Quicksand", sans-serif;
  border: 2px solid transparent;
  transition: 0.3s ease all;
  margin: 0px 0px 0px 10px;
}

.icon-text3 {
  display: flex;
  background: rgb(37 150 190 / 23%);
  border-radius: 18px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  font-size: 12px;

}

.icon-text3 svg {
  width: 50px;
  margin-right: 0px; /* Espacio entre el ícono y el texto */
  vertical-align: middle; /* Alinea el ícono con el texto */
  color: rgb(25, 102, 130);
}

.table-pagos-pendientes {
  color: var(--secundario);
  border-collapse: collapse;
  overflow: hidden;
}

.table-pagos-pendientes th, .table-pagos-pendientes td {
  border: 1px solid #ddd;
  vertical-align: middle;
  color: var(--secundario);
}

.table-pagos-pendientes thead td {
  padding: 10px;
  font-weight: bold;
  font-size: 11px;

}

.table-pagos-pendientes thead th {
  padding: 10px;
  font-weight: bold;
  font-size: 11px;
}

.datosdelacuenta{
  padding: 30px 0px 0px 0px;
  margin-bottom: 10px; /* Espacio entre los divs */
}


#logoImg {
  width: 100%; /* Ajusta el tamaño del logo */
  opacity: 0; /* Inicia invisible */
}

.hero2 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

#contenedorAmenidades {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.boton-amenidad {
  height: 100%;
  border: 2px solid var(--primario);
  border-radius: 18px;
  background: white;
  padding: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2sease-in-out;
}

.boton-amenidad:hover {
  transform: scale(1.05);
}

.boton-amenidad img {
  max-width: 95%;
  /* max-height: 80px; */
  /* object-fit: contain; */
  border-radius: 10px;
  /* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); */
}

.boton-amenidad span {
  margin-top: 5px;
  font-size: 14px;
  color: var(--secundario)

}

.boton-amenidad.seleccionado {
  background-color: rgb(37 150 190 / 23%); /* Cambia el color de fondo */
  color: white; /* Cambia el color del texto */
  border-color: rgb(37 150 190 / 23%); /* Cambia el color del borde */
  height: 100%;
}

.boton-amenidad.seleccionado span {
  color:var(--secundario);
}

.horarios-container {
  margin-top: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
}

.boton-horario {
  border: 1px solid var(--primario);
  background: white;
  padding: 5px;
  border-radius: 8px;
  cursor: pointer;
  height: 20%;
  /* width: 100%; */
  text-align: center;
  justify-content: center; /* Centra el texto horizontalmente */
  align-items: center; /* Centra el texto verticalmente */
  transition: background 0.2sease-in-out;
  margin: 10px 0px 0px 0px;
}

.boton-horario:hover {
  background:var(--secundario);
  color: white;
}

.boton-horario.seleccionado-horario {
  background: var(--secundario);
  color: white;
}

.titulo-horario {
  font-size: 14px;
  text-align: center;
  margin-bottom: 5px;
  color:var(--secundario);
}
.titulo-amenidad {
    font-size: 16px;
    font-weight: bold;
    text-align: center; /* Centrar el texto */
    display: block; /* Asegura que ocupe todo el ancho */
    width: 100%; /* Para que respete el espacio del contenedor */
    margin-top: 5px; /* Espacio superior */
    color: var(--secundario);
}


.registro-contenido {
  display: flex;
  align-items: center;
}

.img-amenidad {
  height: 80px;
  object-fit: cover; /* Ajustar imagen sin deformarla */
}

.registro-info {
  display: flex;
  flex-direction: column;
}


.datoste{
  width: 10%;
}

.encabezadosfinanzas{
  text-align: center; /* Alinear los montos a la derecha */
  justify-content: center;
  color: var(--secundario);
  font-weight: bold; /* Opcional: Hace que el símbolo sea más visible */
}

.datosmonto {
  width: 20%; /* Reducir el ancho del monto */
  text-align: center; /* Alinear los montos a la derecha */
}

.datosmontoadeudo {
  width: 20%; /* Reducir el ancho del monto */
  text-align: center; /* Alinear los montos a la derecha */
}

.datosmontoadeudo::before {
  content: "$"; /* Agrega el símbolo de dólar antes del contenido */
  font-weight: bold; /* Opcional: Hace que el símbolo sea más visible */
  margin-right: 2px; /* Espacio entre el símbolo y el número */
}

.datosacciones {
  width: 20%; /* Reducir el ancho del monto */
  text-align: center; /* Alinear los montos a la derecha */
}

.datosacciones::before {
  font-weight: bold; /* Opcional: Hace que el símbolo sea más visible */
  margin-right: 2px; /* Espacio entre el símbolo y el número */
}


.adeudop{
  display: flex;
  align-items: center; /* Alinea los elementos verticalmente */
  gap: 5px; /* Espacio entre el texto y el ícono */
}

.datosfecha{
  width: 35%; /* Reducir el ancho del monto */
  text-align: center; /* Alinear los montos a la derecha */
}

.datosmonto::before {
  content: "$"; /* Agrega el símbolo de dólar antes del contenido */
  font-weight: bold; /* Opcional: Hace que el símbolo sea más visible */
  margin-right: 2px; /* Espacio entre el símbolo y el número */
}

.calle-box .summarypagosresidente {
  cursor: pointer;
  outline: none;
  border: 1.5px solid var(--secundario);
  color: var(--secundario);
  border-radius: 15px;
  display: flex;
  font-size: 15px;
  align-items: center;
  padding: 5px;
  margin-bottom: 0px;
  font-size: 15px; /* Corregí el valor de font-size */
  background-color: rgba(202, 208, 210, 0.297); /* Fondo transparente */
  font-weight: bold;
  height: 30px;
}

.tabla-pagos{
  width: 100%;
}

.btn-agregar-pago {
  height: 30px;
  border: 1px solid var(--secundario);
  font-size: 12px; /* Corregí el valor de font-size */
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: left;
  width: 300px;
  height: 30px;
  background: var(--secundario);
  color: white;
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 18px;
  padding-top: 18px;
}

.btn-agregar-pago svg{
  fill: white;
}

.btn-agregar-pago:hover svg {
  fill: #fff; /* blanco */
}

.btn-agregar-multa {
  height: 30px;
  border: 1px solid var(--secundario);
  font-size: 12px; /* Corregí el valor de font-size */
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: left;
  width: 300px;
  height: 30px;
  background: var(--secundario);
  color: white;
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 18px;
  padding-top: 18px;
}

.btn-agregar-multa svg{
  fill: white;
}

.btn-agregar-multa:hover svg {
  fill: #fff; /* blanco */
}

.icon-textpago .domiciliodelpagodelresidente{
    color: var(--secundario);
    font-size: 18px;
    font-weight: bold;
}


.inputnweresid {
  padding: 0px 0px 0px 10px;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  width: 80%;
  border: none;
  border-radius: 20px;
  margin: 0px 0px 0px 0px;
  background: #f3f3f3eb;
  color: #013e6a;
  font-family: "Quicksand", sans-serif;
  /* border: 2px solid transparent; */
}


.calle-box{
  width: 100%;
}

.tablaporcada{
  width: 100%;
}

/* Password */
.datospassword {
  display: block;
  width: 100%;
  text-align: center;
  align-items: center;
}

.passwordtexto{
  width: 100%;
  display: flex;
  align-items: stretch;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.icon-text-password{
  vertical-align: middle; /* Alinea el ícono con el texto */
  color: rgb(25, 102, 130);
  display: flex;
  align-items: center;
  background:rgb(37 150 190 / 23%);
  border-radius: 25px;
  padding: 50px;
  max-width: 750px;
  width: 100%;
  height: 85px;
  margin: 0 auto;
  margin-top: 5px;
}



/* 🔹 Estilos para el modal */
.modal-container {
  display: none; /* Se oculta inicialmente */
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  text-align: center;
  width: 70%;
  height: 350px;
}



.modal-buttons {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

#inputPregunta {
  width: 100%;
  height: 60%; /* Ajusta la altura según lo necesario */
  border: 1.5px solid var(--secundario);
  padding: 10px;
  font-size: 14px;
  resize: none; /* Evita que el usuario cambie el tamaño */
  overflow-y: auto; /* Permite scroll si el texto es demasiado largo */
  word-wrap: break-word; /* Permite que las palabras se ajusten */
  line-height: 1.5; /* Espaciado de línea para mejor legibilidad */
  text-align: justify; /* Justifica el texto dentro del campo */
  white-space: pre-wrap; /* Permite saltos de línea con Enter */
  font-family: Arial, sans-serif; /* Fuente más legible */
}

#inputPregunta:hover {
  background: rgba(217, 230, 239);
  color: var(--secundario);
}

.registro-item-mora2 {
  display: flex;
  border: 1px solid var(--secundario);
  background-color: rgb(37 150 190 / 23%);
  color: var(--secundario);
  padding: 5px;
  font-size: 15px;
  margin-bottom: 5px;
  border-radius: 8px;
  height: 40px;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  height: auto;
  flex-direction: column;
} 


.btn-pagar-multa {
  justify-content: center;
  align-items: center;
  width: 40%;
  height: auto;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  margin: 0 auto;
  color: var(--secundario);
}

.pagado {
  justify-content: center;
  align-items: center;
  width: 10%;
  height: auto;
  margin: 0 auto;
}

.fechamulta{
  justify-content: center;
  align-items: center;
  width: 20%;
  height: auto;
  margin: 0 auto;
}

.montmulta{
  justify-content: center;
  align-items: center;
  width: 20%;
  height: auto;
  margin: 0 auto;
}


.inputmotivo{
  height: auto;
  line-height: 50px;
  font-size: 14px;
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 10px 10px 10px 10px;
  margin-bottom: 0px;
  background: #f3f3f3eb;
  color: #013e6a;
  font-family: "Quicksand", sans-serif;
  border: 2px solid transparent;
  transition: 0.3s ease all;
  margin: 0px 0px 0px 0px;
}


.swal2-confirm{
  background-color: var(--secundario);
  color: white;
  border-radius: 8px;
}

.swal2-cancel{
  background-color: var(--primario);
  color: white;
  border-radius: 8px;
}

#btnChangePassword{
  margin: 0 auto;
  width: 100%;
  margin-top: 10px;
  text-align: center;
  align-items: center;
  justify-content: center;
  max-width: 750px;
}


@media (min-width: 0px) and (max-width: 1357px){

  .boton-amenidad {
    height: 100%;
    border: 2px solid var(--primario);
    border-radius: 10px;
    background: white;
    padding: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2sease -in-out;
  }

  .boton-amenidad img {
    max-width: 95%;
    max-height: 80px;
  }

  .registro-item-mora {
    display: flex;
    border: 1px solid var(--secundario);
    background-color: rgb(37 150 190 / 13%);
    color: var(--secundario);
    padding: 0px;
    margin-bottom: 0px;
    height: 40px;
    flex-wrap: wrap;
    align-content: flex-end;
    align-items: center;
    height: auto;
  }   
}



@media (min-width: 0px) and (max-width: 485px){

  .img-amenidad {
    display: none;
  }

  .fechamulta {
    justify-content: center;
    align-items: center;
    width: 5%;
    height: auto;
    margin: 0 auto;
  }

  .btn-agregar-pago {
    height: 15px;
    border: 1px solid var(--secundario);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn-agregar-pago svg {
    display: none;
  }

  .btn-agregar-multa {
    height: 15px;
    border: 1px solid var(--secundario);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn-agregar-multa svg {
    display: none;
  }

  .registro-item-mora {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;
  }

  #tablapreguntasadmin th, #tablapreguntasadmin td {
    border: 0px solid var(--secundario);
    padding: 10px;
    text-align: justify;
    color: var(--secundario);
    border-radius: 0px;
  }



  .tablaporcada tbody tr td:first-child {
    width: 70%;
    word-wrap: break-word;
  }

  .tablacompleta{
    padding: 0px;
    margin: 0px;
  }

  .infodelresidenteconmora{
    margin: 0px;
  }

  .calle-box2{
    margin: 0px;
  }

  tr{
    margin: 0px;
  }

  td{
    margin: 0px;
  }

  tbody {
    margin: 0px;
  }

  .summary-toggle{
    margin: 0px;
  }

  #divlistaresidentes{
    margin: 0px;
    padding: 0px;
    width: 100%;
    font-size: 12px;
  }

  #divseguridadcasetaprincial{
    margin: 0px;
  }

  .calle-box2 {
    width: 100%;
    font-size: 12px;
  }

  .calle-box{
    width: 100%;
    font-size: 12px;
  }

  .contenedorcamaraybotones2{
    margin: 0px;
  }


  .contenedorresidentes {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    min-height: 10vh;
    display: grid;
    margin-right: 0px;
    margin-left: 0px;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 10px;
    padding: 0px 10px 0px 0px;
  }

  .inputnweresid {
    padding: 0px 0px 0px 10px;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    width: 100%;
    border: none;
    border-radius: 20px;
    margin: 0px 0px 0px 0px;
    background: #f3f3f3eb;
    color: #013e6a;
    font-family: "Quicksand", sans-serif;
    /* border: 2px solid transparent; */
  }

  .datoste{
    width: 3%;
    min-width: 15px;
    font-size: 10px;
  }

  .calle-box{
    width: 95%;
    margin-left: 0px;
    margin-right: 0px;
  }
  
  .tablaporcada{
    width: 100%;
  }

  .infodelresidente th, td {
    font-weight: normal;
    width: 10%;
    color: var(--secundario);
    font-size: 10px;
  }

  .titulo-tabla{
    width: 70%;
  }

  .statusyadeudo{
    font-size: 10px;
  }

  .datostext{
    font-size: 10px;
  }

  .perfil-select{
    font-size: 10px;
  }


  label {
    margin-bottom: 10px;
    font-weight: 500;
    color: #000;
    font-size: 10px;
  }

  .registro-item-mora2 {
    display: flex;
    border: 1px solid var(--secundario);
    background-color: rgb(37 150 190 / 23%);
    color: var(--secundario);
    padding: 5px;
    font-size: 12px;
    margin-bottom: 5px;
    border-radius: 15px;
    height: 40px;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    height: auto;
    flex-direction: column;
  }  

  .contenedorhome{
    width: 100%;
  }

  .divseguridadcasetaprincial{
    width: 100%;
  }

  .contenedorcamaraybotones{
    width: 100%;
  }

  .infodelresidente .infodelresidenteconmora{
    width: 90%;
    margin: 0px;
    padding: 0px;
  }

  .calle-box .fila-roja {
    width: 100%;
  }
  .calle-box .tablaporcada{
    margin-top: 0px;
  }

  .datosfecha {
    width: 15px;
  }

  .datosmontoadeudo {
    width: 15px;
  }

  .datosmonto{
    width: 15px;
  }

  .calle-box .summarypagosresidente {
    width: 100%;
  }

  #calle-morosos-2{
    margin-left: 0px;
    margin-right: 0px;
    width: 95%;
  }

  .camaraqr{
    margin: 0px;
  }

  .contenedorhomeverde{
    margin: 0 auto;
    align-items: center;
    width: 95%;
  }

  .contenedorhomerojo{
    margin: 0 auto;
    align-items: center;
    width: 95%;
  }



}

@media (min-width: 580px) and (max-width: 9100px){
  .img-amenidad{
    height: 150px;
  }
  
  .registro-info{
    font-size: 14px;
  }

   /* /////////// Login //////////////// */
  .registro_activo {
    display: flex;
    box-shadow: 0 6px 22px rgba(25, 102, 130, 0.41);
    border-radius: 25px;
    flex-direction: column;
    align-items: center;
    margin: 5% auto;   /* centra el contenedor en el eje horizontal */
  }

  .row1 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .login-logo {
    width: 50%;
    max-width: 500px; 
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }

  .login-logo img {
    max-width: 100%; 
  }

  .formulario {
    width: 90%;
    align-items: center;
    margin: 0px auto;   /* centra el contenedor en el eje horizontal */
    justify-content: center;
  }

  .input{
    font-size: 15px
  }

  .form-group{
    display: flex;
    padding: 0px;
    align-items: center;
    font-size: 12px;
  }

  .aviso-privacidad{
      display: flex;
      padding: 0px;
      align-items: center;

  }
  .aviso-privacidadtext{
      width: 100%;
      margin: 0px 0px 0px 24px; /* superior derecho inferior izquierdo */
      text-align: justify;
      font-size: 12px;
      color: #8e8e8e;
  }

  #iniciarresidente{
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    font-size: 16px;
  }

  .titulo {
    display: block;
    margin: 0 auto;
    width: fit-content; /* hace que solo mida lo que ocupa el texto */
    font-size: 16px;
  }

  /* ////////////////////////////////// */

}


@media (max-width: 580px) {
  body {
    font-size: 12px;
  }

  .img-amenidad{
    height: 150px;
  }
  
  .registro-info{
    font-size: 14px;
  }

   /* /////////// Login //////////////// */
  .registro_activo {
    display: flex;
    box-shadow: 0 0px 0px rgba(25, 102, 130, 0.41);
    border-radius: 0px;
    flex-direction: column;
    align-items: center;
    margin: 0% auto;   /* centra el contenedor en el eje horizontal */
  }

  .row1 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .login-logo {
    width: 45%;
    max-width: 500px; 
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }

  .login-logo img {
    max-width: 100%; 
  }

  .formulario {
    width: 95%;
    align-items: center;
    margin: 0px auto;   /* centra el contenedor en el eje horizontal */
    justify-content: center;
  }

  .input{
    font-size: 12px
  }

  .form-group{
    display: flex;
    padding: 0px;
    align-items: center;
    font-size: 12px;
  }

  .aviso-privacidad{
      display: flex;
      padding: 0px;
      align-items: center;

  }
  .aviso-privacidadtext{
      width: 100%;
      margin: 0px 0px 0px 24px; /* superior derecho inferior izquierdo */
      text-align: justify;
      font-size: 12px;
      color: #8e8e8e;
  }

  #iniciarresidente{
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    font-size: 12px;
  }

  .titulo {
    display: block;
    margin: 0 auto;
    width: fit-content; /* hace que solo mida lo que ocupa el texto */
    font-size: 14px;
  }



  .contenedorhome{
    margin: 0px;
  }

  .icono {
    width: 35px;
    height: auto;
    padding-left: 10px;
  }

  .input{
    margin-left: 0px;    
    padding-left: 60px;

  }

  .icon-text-password{
    padding: 5px;
  }


}