.mensaje-grande {
  line-height: 1;
  color: #767777;
  font-weight: 500;
  font-size: 30px;
  padding: 20px 0;
}

.mensaje-grande-bienvenida{
  line-height: 1;
  color: #767777;
  font-weight: 500;
  font-size: 17px;
  padding: 18px 0;
}

#tituloLogo {
  font-family: "Righteous", serif;
  font-weight: 400;
  font-style: normal;

  color: #000000; /* Blanco */
  text-align: center; /* Centrar el texto */
  margin: 0; /* Elimina márgenes extra */
  padding: 10px 0; /* Añade algo de espacio alrededor */
  text-transform: uppercase; /* Convierte el texto a mayúsculas */
}


.botonGradienteXL {
  background: -moz-linear-gradient(316deg, rgba(0,59,119,1) 0%, rgba(0,59,119,1) 56%, rgba(78,194,239,1) 100%); /* ff3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(0,59,119,1)), color-stop(56%, rgba(0,59,119,1)), color-stop(100%, rgba(78,194,239,1))); /* safari4+,chrome */
  background: -webkit-linear-gradient(316deg, rgba(0,59,119,1) 0%, rgba(0,59,119,1) 56%, rgba(78,194,239,1) 100%); /* safari5.1+,chrome10+ */
  background: -o-linear-gradient(316deg, rgba(0,59,119,1) 0%, rgba(0,59,119,1) 56%, rgba(78,194,239,1) 100%); /* opera 11.10+ */
  background: -ms-linear-gradient(316deg, rgba(0,59,119,1) 0%, rgba(0,59,119,1) 56%, rgba(78,194,239,1) 100%); /* ie10+ */
  background: linear-gradient(134deg, rgba(0,59,119,1) 0%, rgba(0,59,119,1) 56%, rgba(78,194,239,1) 100%); /* w3c */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003b77', endColorstr='#4ec2ef',GradientType=1 ); /* ie6-9 */
  color: #fff;
  font-weight: bold;
  width: 300px;
  max-width: 350px;
  height: 100px;
  font-size: 50px;
  padding-top: 50px;
  line-height: 90%;
  margin-top: 20px;
}



.botonPrincipalNegro:hover, .botonPrincipalNegroXL:hover {
  background: #575757;
}

.tarjetaReserva.mdl-card {
  width: 200px;
  height: 40px;
  min-height: 0;
  color: #003b77;
}
.tarjetaReserva > .mdl-card__actions {
  border-color: #003b77;
}
.tarjetaReserva > .mdl-card__title {
  align-items: flex-start;
  color: #003b77;
  height: 60px;
}
.tarjetaReserva > .mdl-card__title > h4 {
  margin-top: 0;
}
.tarjetaReserva > .mdl-card__actions {
  display: flex;
  box-sizing:border-box;
  align-items: center;
}
.tarjetaReserva > .mdl-card__actions > .material-icons {
  padding-right: 10px;
  margin-top: 2px;
}
.tarjetaReserva > .mdl-card__title,
.tarjetaReserva > .mdl-card__actions,
.tarjetaReserva > .mdl-card__actions > .mdl-button {
  color: #003b77;
}

.tarjetaReserva:hover {
  background-color: #D3D3D3;
}

.flota {
  float: left;
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.Cargando {
  position: fixed;
  display: block;
  right: 50%;
  bottom: 50%;
  left: 50%;
  top: 50%;
  z-index: 900;
}

.CargandoSpinner {
  left: 50%;
  right: 50%;
  margin-top: 20px;
}

.addDialog{
  width: 80%;
  height: 60%;
  max-width: 600px;
}

.tbBartolo {
  margin-left: 30px;
  width: 260px;
 }

 .tbBartoloDoble {
  margin-left: 30px;
  width: 550px;
 }

 .tbBartoloTriple {
  margin-left: 30px;
  width: 840px;
 }

 .graficaHori {
   height: 24px; 
   min-width: 235px;
 }

 .botonPrincipalNegro {
  font-family: "Kanit", serif;
  font-weight: 300;
  font-style: normal;

  background:#070707;
  color: white;
  border: none;
  border-radius: 25px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  max-width: 320px;
  font-weight: bold;
  margin-bottom: 10px;
}

.botonPrincipalNegroXL {
  font-family: "Kanit", serif;
  font-weight: 300;
  font-style: normal;

  background: rgba(0,0,0,1) 0%;
  color: #fff;
  font-weight: bold;
  width: 100%;
  max-width: 320px;
  height: 100px;
  font-size: 40px;
  padding-top: 50px;
  line-height: 90%;
  margin-top: 20px;
}
.botonNegroMarcaje {
  font-family: "Kanit", serif;
  font-weight: 300;
  font-style: normal;

  background:#070707;
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  max-width: 170px;
  font-weight: bold;
  margin-bottom: 10px;
  width: 100%;
  height: 80px;
  font-size: 18px;
  padding-top: 35px;
}



.botonPrincipalNegro:hover, .botonNegroMarcaje:hover, .botonNegroXL:hover {
  background: #575757;
}

.botonGradiente {
  background: -moz-linear-gradient(316deg, rgba(0,59,119,1) 0%, rgba(0,59,119,1) 56%, rgba(78,194,239,1) 100%); /* ff3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(0,59,119,1)), color-stop(56%, rgba(0,59,119,1)), color-stop(100%, rgba(78,194,239,1))); /* safari4+,chrome */
  background: -webkit-linear-gradient(316deg, rgba(0,59,119,1) 0%, rgba(0,59,119,1) 56%, rgba(78,194,239,1) 100%); /* safari5.1+,chrome10+ */
  background: -o-linear-gradient(316deg, rgba(0,59,119,1) 0%, rgba(0,59,119,1) 56%, rgba(78,194,239,1) 100%); /* opera 11.10+ */
  background: -ms-linear-gradient(316deg, rgba(0,59,119,1) 0%, rgba(0,59,119,1) 56%, rgba(78,194,239,1) 100%); /* ie10+ */
  background: linear-gradient(134deg, rgba(0,59,119,1) 0%, rgba(0,59,119,1) 56%, rgba(78,194,239,1) 100%); /* w3c */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003b77', endColorstr='#4ec2ef',GradientType=1 ); /* ie6-9 */
  color: #fff;
  font-weight: bold;
  margin-bottom: 10px;
}

.botonGradienteMarcaje {
  background: -moz-linear-gradient(316deg, rgba(0,59,119,1) 0%, rgba(0,59,119,1) 56%, rgba(78,194,239,1) 100%); /* ff3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(0,59,119,1)), color-stop(56%, rgba(0,59,119,1)), color-stop(100%, rgba(78,194,239,1))); /* safari4+,chrome */
  background: -webkit-linear-gradient(316deg, rgba(0,59,119,1) 0%, rgba(0,59,119,1) 56%, rgba(78,194,239,1) 100%); /* safari5.1+,chrome10+ */
  background: -o-linear-gradient(316deg, rgba(0,59,119,1) 0%, rgba(0,59,119,1) 56%, rgba(78,194,239,1) 100%); /* opera 11.10+ */
  background: -ms-linear-gradient(316deg, rgba(0,59,119,1) 0%, rgba(0,59,119,1) 56%, rgba(78,194,239,1) 100%); /* ie10+ */
  background: linear-gradient(134deg, rgba(0,59,119,1) 0%, rgba(0,59,119,1) 56%, rgba(78,194,239,1) 100%); /* w3c */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003b77', endColorstr='#4ec2ef',GradientType=1 ); /* ie6-9 */
  color: #fff;
  font-weight: bold;
  margin-bottom: 10px;
  width: 130px;
  height: 80px;
  font-size: 16px;
  padding-top: 10px;
}

img, canvas, iframe, video, svg, select, textarea {
    max-width: 100%; }
body{
width:100%;
height:100%;
margin:0;
font-family: "Open Sans";
}

.flotaIzquierda {
  float: left;
}
.flotaDerecha {
  float: right;
}

.BotonPrincipal{
  background: #003b77 !important;
  position: fixed;
  display: block;
  right: 0;
  bottom: 0;
  margin-right: 25px;
  margin-bottom: 15px;
  z-index: 900;
}

.BotonSecundario {
  color: #070707 !important;
  position: fixed;
  display: block;
  left: 0;
  top: 0;
  margin-left: 10px;
  margin-top: 15px;
  padding: 0;
  z-index: 900; 
  width: 40px; 
  height: 40px; 
  min-width: 40px;
}

.BotonTerciario {
  color: white !important;
  position: fixed;
  display: block;
  right: 0;
  bottom: 0;
  margin-right: 35px;
  margin-bottom: 130px;
  z-index: 900; 
  width: 40px; 
  height: 40px; 
  min-width: 40px;
}

.tbBartoloDoble {
  margin-left: 30px;
  width: 550px;
 }

 .tbBartoloTriple {
  margin-left: 30px;
  width: 840px;
 }

 .graficaHori {
   height: 24px; 
   min-width: 235px;
 }

.tablaResponsiva {
  width: 40%; 
  min-width:235px;
}

.supertabla {
  width: 100%; 
  border-collapse: collapse;
}

.supertabla th {
  border-bottom: 4px solid rgba(22,60,119,0.4);
  border-right: 5px solid #f2f2f2;
  font-size: 14px;
  font-style: bold;
  font-weight: bold;
  background-color: #003b77;
  color: white;
}

.supertabla td {
  border-bottom: 1px solid #003b77;
  border-right: 5px solid #f2f2f2;
}

.tdhora {
  vertical-align: top;
  font-size: 11px;
  font-weight: bold;
  padding: 0 2px;
  text-align: right;
}

.tarjetaflota {
  float: left;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 3px;
  margin-bottom: 3px;
}

.autocomplete-suggestions { 
  border: 1px solid #999; 
  background: #FFF; 
  overflow: auto; 
}

.autocomplete-suggestion { 
  padding: 2px 5px; 
  white-space: nowrap; 
  overflow: hidden; 
}

.autocomplete-selected { 
  background: #F0F0F0; 
}

.autocomplete-suggestions strong { 
  font-weight: normal; 
  color: #003b77; 
}

.autocomplete-group { 
  padding: 2px 5px; 
}

.autocomplete-group strong { 
  display: block; 
  border-bottom: 1px solid #000; 
}

.inicialCliente {
  height: 40px;
  width: 40px;
  box-sizing: border-box;
  border-radius: 50%;
  color: white;
  float:left;
  text-align: center;
  font-size: 20px;
  padding-top: 10px;
  font-family: "Open Sans";
}

li:hover{
  background-color: #D3D3D3;
}

/* .separadorCabecera {
  background: -moz-linear-gradient(316deg, rgba(0,59,119,1) 0%, rgba(0,59,119,1) 56%, rgba(78,194,239,1) 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(0,59,119,1)), color-stop(56%, rgba(0,59,119,1)), color-stop(100%, rgba(78,194,239,1)));
  background: -webkit-linear-gradient(316deg, rgba(0,59,119,1) 0%, rgba(0,59,119,1) 56%, rgba(78,194,239,1) 100%); 
  background: -o-linear-gradient(316deg, rgba(0,59,119,1) 0%, rgba(0,59,119,1) 56%, rgba(78,194,239,1) 100%); 
  background: -ms-linear-gradient(316deg, rgba(0,59,119,1) 0%, rgba(0,59,119,1) 56%, rgba(78,194,239,1) 100%); 
  background: linear-gradient(134deg, rgba(0,59,119,1) 0%, rgba(0,59,119,1) 56%, rgba(78,194,239,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003b77', endColorstr='#4ec2ef',GradientType=1 );
  width: 100%;
  height: 4px;
} */


.separadorCabecera {
  background: -moz-linear-gradient(316deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 56%, rgba(255,255,255,1) 100%); /* ff3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(56%, rgba(0,0,0,1)), color-stop(100%, rgba(255,255,255,1))); /* safari4+,chrome */
  background: -webkit-linear-gradient(316deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 56%, rgba(255,255,255,1) 100%); /* safari5.1+,chrome10+ */
  background: -o-linear-gradient(316deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 56%, rgba(255,255,255,1) 100%); /* opera 11.10+ */
  background: -ms-linear-gradient(316deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 56%, rgba(255,255,255,1) 100%); /* ie10+ */
  background: linear-gradient(134deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 56%, rgba(255,255,255,1) 100%); /* w3c */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=1 ); /* ie6-9 */
  width: 100%;
  height: 4px;
}


.mensaje.pastilla { /* título del cliente*/
  text-align: center;
  font-size: 22px;
  padding: 5px 0;
  margin-bottom: 20px;
  background: -moz-linear-gradient(316deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 56%, rgba(255,255,255,1) 100%); /* ff3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(56%, rgba(0,0,0,1)), color-stop(100%, rgba(255,255,255,1))); /* safari4+,chrome */
  background: -webkit-linear-gradient(316deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 56%, rgba(255,255,255,1) 100%); /* safari5.1+,chrome10+ */
  background: -o-linear-gradient(316deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 56%, rgba(255,255,255,1) 100%); /* opera 11.10+ */
  background: -ms-linear-gradient(316deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 56%, rgba(255,255,255,1) 100%); /* ie10+ */
  background: linear-gradient(134deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 56%, rgba(255,255,255,1) 100%); /* w3c */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=1 ); /* ie6-9 */
  font-weight: bolder;
  color: white;

}
.cajasoporte {/*maquetamos información sobre tipo de soporte general*/
    text-align: center;
    font-size: 20px;
    border-bottom: 1px solid #636363;
    padding-bottom: 18px;
}
.cajadatos{
    max-width: 960px;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding-bottom:20px;
}
.flotacajas {
  float: left;
  max-width: 300px;
  padding: 0 9px;
  width: 100%;
  height: 100%;
  font-size: 14px;
}
.propiedad{
  color:rgb(123 123 123);
  font-weight: bolder;
}

.botonTerminado {
  width: 98%;
  margin-top: 10px;
}

.valor{
text-align:left;
padding-right:10px;
}
/* .propiedad{
color:rgb(36,116,174);
} */
h4.titulopropiedad { /*título de datos*/
    margin-bottom: 0;
    border-bottom: 1px dotted black;
    font-size: 18px;
    margin-bottom:10px;
    font-weight: bold;
}
.observacliente { /*observaciones del cliente*/
    font-size: 14px;
    white-space: pre-wrap;
}
.telefonomovil{
color:black;
font-weight: normal;
text-decoration: none;
}

.estrella {
  font-size: 40px;
  color: #DAA520;
}

.oculto {
display: none;
}

.visible {
display: block;
margin: 5px;
}

.tarjeton.mdl-card {
  max-width: 1000px;
  margin: 0 5px 20px;
  min-height: 0;
  padding-bottom: 20px;
}

.detalles-btnDes {
padding:0px;
margin: 0 10px;
color: rgb(123 123 123);
}
.detalles-btnAct {
padding:0px;
margin: 0 10px;
color: white;
background-color: #000000;
}
#btnotas_8 .mdl-button:hover {
  background-color: rgb(32 29 29 / 29%);
}


  .radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 auto;
    justify-content: center;
    max-width: 600px;
  }

  .mdl-radio {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .mdl-radio__label {
    font-weight: bold;
    color: #333;
    padding-left: 8px;
  }

  .mdl-radio__button {
    height: 24px;
    width: 24px;
    margin-right: 8px;
    border-radius: 50%;
  }

  .mdl-radio:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .mdl-radio input[type="radio"]:checked + .mdl-radio__label {
    color: #636363;  /* Color al estar seleccionado */
  }

  .mdl-radio input[type="radio"]:focus {
    outline: none;
  }
  
  /* Efecto de enfoque al hacer clic en el radio button */
  .mdl-radio input[type="radio"]:checked {
    background-color: #929292ce !important;
  }


.observaciones {
    padding: 0 18px 50px 18px;
    text-align: left;
    /*white-space: pre-wrap;*/
}
.listaLlamadas {
  padding: 0;
}

.llamada {
  height: 65vh;
  overflow: auto;
  border-bottom: solid 1px #003b77;
}

.next {
  background: transparent;
  border: none;
  border-radius: 20px;
  position: relative;
  height: 36px;
  margin: 0 5px 0 0;
  width: 36px;
  padding: 0;
  display: inline-block;
  font-family: "Open Sans";
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  overflow: hidden;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 36px;
  vertical-align: middle;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

.prev {
  background: transparent;
  border: none;
  border-radius: 20px;
  position: relative;
  height: 36px;
  margin: 0 5px 0 0;
  width: 36px;
  padding: 0;
  display: inline-block;
  font-family: "Open Sans";
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  overflow: hidden;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 36px;
  vertical-align: middle;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

.page {
  background: transparent;
  border: none;
  border-radius: 20px;
  position: relative;
  height: 36px;
  margin: 0 5px 0 0;
  width: 36px;
  padding: 0;
  display: inline-block;
  font-family: "Open Sans";
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  overflow: hidden;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 36px;
  vertical-align: middle;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

.active {
  background: #003b77 !important;
}

.pagination {
  padding: 8px;
  margin: 0;
}

.disabled > a {
  color: rgba(0,0,0,.26);
  font-weight: bolder;
  text-decoration: none;
}

.active > a {
  color: white;
  font-weight: bolder;
  text-decoration: none;
}

a {
  color: #003b77;
  font-weight: bolder;
  text-decoration: none;
}
a.disabled {
  color: rgba(0,0,0,.26);
  font-weight: bolder;
  text-decoration: none;
}

.arribaDerecha {
  position:absolute; 
  top: 10px; 
  right: 10px; 
  z-index: 999;
  padding: 0;
  color: #080808 !important;
}

/**** tamaño móvil ****/
@media only screen and ( max-width: 479px ) {

.top img{
max-width:100%;
}
.top{
max-width:1080px;
margin-top:25px;
}
.mensaje.pastilla {
    font-size: 20px;
}

.cajasoporte span { /* esto es para meter salto de linea*/
    display: block;
}
.cajadatos{
padding: 0 12px 20px 12px;
}
.telefonomovil{
color:black;
font-size:16px;
}
.flotacajas {
  float: none;
  max-width: 90%;
}

}