/* Quitar los espacios entre los objetos */
.sin-espacio {
    padding: 0px;
    margin: 0px;
}
 /* Fin de quitar espacion entre objetos */


#historico {
   font-size:100%;
}

.titulo-form .web {
   font-size:100%;
}

.caption-lic {
   text-align: center;
   font-family:Arial, Helvetica, sans-serif;
   font-size: 100%;
   border: 0.5px solid #175778;
   background-color: #175778;
   color: white;
   border-radius: 50px;
}

.categoria {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 3px;
}

.categoria-vigencia {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 3px;
}

.categoria-vigencia-aseo {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 3px;
}

.categoria-ubicacion {
   display: grid;
   grid-template-columns: 1fr;
   gap: 3px;
}

.domicilio {
   grid-column-start: 1;
   grid-column-end: 4;
}

.representante-legal {
   grid-column-start: 1;
   grid-column-end: 3;
}

.titulo-lic, 
.info-lic {
   text-align: center;
}

.titulo-lic {
   font-weight: bold;
   border-bottom: black;
}

.rubro {
   font-size: 100%;
   margin-top: 2px;
}

.deudas {
   font-size: 100%;
   margin-top: 5px;
}

.deuda {
   margin-top:3px;
}

.info-rubro {
   padding-top: 10px;
}


/* Certificado Catastral */
.categoria-aspecto-juridico {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: auto;
   gap: 3px;
}

.categoria-aspecto-fisico {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   grid-template-rows: auto;
   gap: 3px;
}

.categoria-catastro {
   display: grid;
   grid-template-columns: repeat(10, 1fr);
   grid-template-rows: auto;
   gap: 3px;
}

.categoria-aspecto-valorativo {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: auto;
   gap: 3px;
}

.categoria-observacion-certificado {
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   grid-template-rows: auto;
   gap: 3px;
}

.observacion-certificado .info-lic {
  text-align: justify;
}

.lindero {
   grid-column-start: 1;
   grid-column-end: 5;
}

.lindero .info-lic,
.lindero .titulo-lic {
   text-align: justify;
}

/* Fin Certificado Catastral */



@media screen and (max-width: 460px) {
   #historico { 
      font-size: x-small;
   }

   .titulo-form {
      font-size: 70%;
   }

   .caption-lic {
      font-size: 70%;
   }

   .rubro, .deudas {
      font-size: 70%;
   }

   .categoria, 
   .categoria-vigencia,
   .categoria-vigencia-aseo,
   .categoria-ubicacion,
   .categoria-aspecto-juridico, 
   .categoria-aspecto-fisico,  
   .categoria-aspecto-valorativo, 
   .categoria-observacion-certificado {
      font-size: 65%;
   }

   /* Certificado Catastral */
   .categoria-catastro {
      font-size: 50%;
   }

   .categoria-aspecto-fisico, 
   .categoria-aspecto-valorativo, 
   .categoria-aspecto-juridico {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto;
      gap: 3px;
   }

   /* Fin de Certificado Catastral */

}

/* Estilos para el modulo de pago en linea 100% Banco */
.titulo-bg-azul-12 {
   padding: 0;
   margin: 0;
   display: flex; 
   justify-content: left;
   text-align: center;
   align-items: center;
   font-weight: bold;
   font-size: 1.2em;

   background-color: #253536;
   color: white;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.titulo-bg-azul-real-12 {
   padding: 0;
   margin: 0;
   display: flex; 
   justify-content: left;
   text-align: center;
   align-items: center;
   font-weight: bold;
   font-size: 1.2em;

   background-color: #0546a2;
   color: white;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.titulo-bg-naranja-12 {
   padding: 0;
   margin: 0;
   display: flex; 
   justify-content: left;
   text-align: center;
   align-items: center;
   font-weight: bold;
   font-size: 1.2em;

   background-color: #e0521e;
   color: white;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.titulo-bg-verde-a-12 { 
   padding: 0;
   margin: 0;
   display: flex; 
   justify-content: left;
   text-align: center;
   align-items: center;
   font-weight: bold;
   font-size: 1.2em;

   background-color: #049aad;
   color: white;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.titulo-bg-verde-o-12 { 
   padding: 0;
   margin: 0;
   display: flex; 
   justify-content: left;
   text-align: center;
   align-items: center;
   font-weight: bold;
   font-size: 1.2em;

   background-color: #2C8028;
   color: white;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
}


.titulo-bg-marron-12 { 
   padding: 0;
   margin: 0;
   display: flex; 
   justify-content: left;
   text-align: center;
   align-items: center;
   font-weight: bold;
   font-size: 1.2em;

   background-color: #9a563c;
   color: white;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
}


.titulo-bg-vino-tinto-12 { 
   padding: 0;
   margin: 0;
   display: flex; 
   justify-content: left;
   text-align: center;
   align-items: center;
   font-weight: bold;
   font-size: 1.2em;

   background-color: #9D0707;
   color: white;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
}


.titulo-bg-gris-8 { 
   padding: 0;
   margin: 0;
   display: flex; 
   justify-content: left;
   text-align: center;
   align-items: center;
   /* font-weight: bold; */
   font-size: 1.2em;

   background-color: #F1F1F1;
   color: black;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* Fin de estilos de tiytulo y subtitulo */


.timer {
   padding: 10px;
   font-size: 1.0em;
   font-weight: bold;
   border-color: blue transparent;
}

.nota {
   padding: 10px;
   font-size: 1.2em;
   color: #e0521e;
}

/* Nuevo colores del frontend */
.azul-ima {
   color: #021976;
}

.grid-primary-ima {
   background-color: #021976;
   color: white;
}

.naranja-ima {
   color: #FF3902;
}

.btn-primary {
   background-color: #FF3902;
   color: white;
}

.btn-primary:hover {
   background-color: #FF3902;
   color: white;
   border: #FF3902;
}

.btn-info {
   background-color: #021976;
   color: white;
}

.btn-info:hover {
   background-color: #021976;
   color: white;
   border: #021976;
}

/* .menu-sidenav-frontend {
   background-color: #021976;
   color: white;
} */

.navbar-header1 {
   background-color: #021976;
   color: white;
   border: #021976;
}

/* Funciona */
#w08 {
   background-color: #021976;
   color: white;
   border: #021976;
}

.navbar-default .navbar-nav > li > a:hover {
	color: #777;
   /* color: white; */
}

.navbar-default .navbar-nav > li > a {
	color: #777;
   /* color: white; */
}

.id-nav-frontend1 {
   background-color: #021976;
   color: white;
   border: #021976;
}


.panel-primary > div:nth-child(1) {
   background-color: #021976;
}


.panel-default > .panel-heading {
   background-color: #021976;
   color: white;
}

.screen-frontend {
   padding-top: 45px;
}


#logo-intro-menu {
   padding: 0px;
   margin: 0px;
   width:13%;
   max-width: 100%;
   height: auto;
   /* padding: 3px; */
   padding-bottom: 10px;
   border-radius: 15px;
}
/* fin de funciona */

/* IMagen intro de 100% banco frontend */

#img-100banco-intro {
   width: 100%;
}



/* Estilo para el mensaje que sale en la validacion de las transacciones  */

.mensaje-importante {
   /* Estilo de caja */
   padding: 20px;
   margin: 20px 0;
   border-radius: 8px;
   border-left: 5px solid #d32f2f; /* Borde lateral rojo */
   
   /* Colores */
   background-color: #ffebee; /* Fondo rojo claro */
   color: #b71c1c; /* Texto rojo oscuro */
   
   /* Tipografía */
   font-family: 'Arial', sans-serif;
   font-size: 16px;
   line-height: 1.6;
   font-weight: 500;
   
   /* Efectos visuales */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   position: relative;
   overflow: hidden;
}

.mensaje-importante::before {
   /* Icono de advertencia (usando contenido Unicode o Font Awesome) */
   content: "⚠️";
   font-size: 24px;
   margin-right: 10px;
   vertical-align: middle;
}

/* Opcional: Animación de destello suave */
@keyframes flash {
   0% { background-color: #ffebee; }
   50% { background-color: #ffcdd2; }
   100% { background-color: #ffebee; }
}

.mensaje-importante {
   animation: flash 3s ease-in-out 2; /* Destella 2 veces */
}

/* Estilo para el título (si lo agregas) */
.mensaje-importante strong {
   display: block;
   font-size: 18px;
   margin-bottom: 10px;
   color: #d32f2f;
}


/* Fin de estos estilos */



/* Estilos para las imagenes del frontend. Avisos de descuentos*/
#info-bancaria {
   display: grid;
   grid-template-columns: 1fr;

   max-width: 100%;
}

.container-img-descuento {
   display: grid;
   grid-template-columns: repeat(2, 1fr);

   row-gap: 5px;
   column-gap: 5px;
}

.item-img-descuento {
   max-width: 100%;
}

.img-descuento {
   max-width: 100%;
}


.aviso-descuento {
  background-color: #e3f2fd;  /* Azul claro suave */
  color: #000000;             /* Texto negro */
  padding: 15px 20px;         /* Espaciado interno */
  border-left: 5px solid #2196F3; /* Borde lateral azul (opcional) */
  border-radius: 4px;        /* Esquinas redondeadas */
  font-family: 'Montserrat', sans-serif; /* Fuente elegante */
  font-weight: 500;          /* Grosor medio */
  font-size: 1.7rem;           /* Tamaño estándar */
  line-height: 1.5;          /* Espaciado entre líneas */
  margin: 10px 0;            /* Margen exterior */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sutil sombra (opcional) */
}
/* Fin de estilos para las imagenes de descuento del frontend */


/* Fondo celeste claro con borde izquierdo color celeste oscuro */
.mensaje-indicacion-1 {
   padding: 0px;
   margin: 0px;
   padding: 10px 30px;
   display: block;
   font-size: 14px;
   margin-bottom: 10px;
   background-color: #c5eff5;
   border-left: 5px solid #049aad;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* Fondo gris claro con borde izquierdo gris oscuro. */
.mensaje-indicacion-2 {
   padding: 0px;
   margin: 0px;
   padding: 10px 30px;
   display: block;
   font-size: 14px;
   margin-bottom: 10px;
   background-color: #f5f5f5;
   border-left: 5px solid #a4a7a688;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
}


.mensaje-indicacion-3 {
   padding: 0px;
   margin: 0px;
   padding: 10px 30px;
   display: block;
   font-size: 14px;
   margin-bottom: 10px;
   background-color: #f5d3d3;
   border-left: 5px solid #ef1212;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
}


.mensaje-indicacion-4 {
   padding: 0px;
   margin: 0px;
   padding: 10px 30px;
   display: block;
   font-size: 14px;
   margin-bottom: 10px;
   background-color: #c4f4be;
   border-left: 5px solid #043c05;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* Desplegar los arcodeones de manera automatica */
.collapse.in {
    display: block;
}
.force-show {
    display: block !important;
}

.lista-customizado {
   list-style-type: none;
   padding: 0;
}

.lista-customizado li.activo::before {
   content: "✔️";
   color: #2C8028;
}

.lista-customizado li.inactivo::before {
   content: "❌";
   color: red;
}


/* Estilos para el nuevo diseño de la consulta y del recibo de pago */
.listado-principal-sim {
   padding: 0;
   margin: 0;

   width: 100% !important;
   max-width: 100% !important;
   padding-left: 30px;
}


.listado-sim {
   max-width: 100%;
   word-wrap: break-word;
   overflow-wrap: break-word;
}


.deuda-total-objeto-sim {
   font-weight: bold;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   color: #0546a2;
   float: right;
}

.deuda-item-recibo-sim {
   font-weight: bold;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   float: right;
}

.contenedor-btn-recibo-sim {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   padding: 0;
   margin-top: 15px;
   margin-bottom: 25px;
}
/* Fin de los estilos para la consulta y nuevo recibo de pago */


/* Estilo para el formulario de recibo-consultado, opciones de formas de pago */
.forma-pago-sim {
   display: flex;
   flex-direction: column;
   align-items: center;
   row-gap: 20px;
}

.opcion-transferencia {
   width: 100%;
}

.opcion-banco {
   width: 100%;
   text-align: center;
   border: 1px solid #d3d3d3;     /* gris claro */
   border-radius: 8px;            /* bordes redondeados */
   border-top: none;              /* sin borde superior */
   border-left: none;             /* sin borde izquierdo */
   
   /* padding: 15px; */
   /* background-color: #fff; */

  /* sombra tenue en los lados sin borde */
  box-shadow: 3px 3px 6px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s ease-in-out;
}

.opcion-banco:hover {
  /* sombra un poco más marcada al pasar el cursor */
  box-shadow: 4px 4px 10px rgba(0,0,0,0.15);
}