/* CSS Document */
html,body,h1,h2,h3,h4,div,p,span,button,a,input,select {
	/* text-transform: uppercase; */
  }    
html,body{
	font-size:14px;
}    
body > header:first-of-type {
	padding-bottom: env(safe-area-inset-top, 20px);
  }
#Login:-webkit-autofill,
#Contra:-webkit-autofill {
    background-color: #E4FFAE  !important; 
    -webkit-box-shadow: 0 0 0 30px #E4FFAE inset !important;
    -webkit-text-fill-color: #103147 !important; 
}
/* Estilo para Firefox */
#Login:-moz-autofill,
#Contra:-moz-autofill {
    background-color: #E4FFAE !important; 
    -moz-box-shadow: 0 0 0 30px #E4FFAE inset !important;
    -moz-text-fill-color: #103147 !important; 
}

/* Estilo para Microsoft Edge */
#Login:-ms-autofill,
#Contra:-moz-autofill {
    background-color: #E4FFAE !important; 
    -ms-box-shadow: 0 0 0 30px #E4FFAE inset !important;
    -ms-text-fill-color: #103147 !important; 
}
.w3-NoEnlace{
	text-decoration:none;	
	}
.w3-Negrita{
	font-weight:bold;	
	}
.w3-subrayado{
	text-decoration: none; /* Elimina el subrayado predeterminado */
	position: relative; /* Permite posicionar el subrayado en relación con el texto */           
}
.w3-subrayado::before {
	content: ""; /* Agrega un contenido vacío para crear la línea */
	position: absolute; /* Permite colocar la línea en relación con el texto */
	width: 125px; /* Ancho del subrayado igual al ancho del texto */
	height: 2px; /* Grosor del subrayado */
	background-color: #3498db; /* Color del subrayado */
	bottom: -3px; /* Espacio entre el subrayado y el texto */
	left: 0; /* Alinea el subrayado con el inicio del texto */
}
.w3-Mayusculas{
	text-transform:uppercase;
	}
.w3-DisplayNone {display:none}
.w3-PunteroMouse{cursor:pointer}
.w3-PrimeraMayuscula{
	text-transform:capitalize;
	}
.w3-OcultarTextoSobrante{	
	overflow:hidden;
    text-overflow:ellipsis;
	}
html{
	background:url(/Imagenes/Fondos/FondoPeq.jpg) no-repeat center center fixed;
	/*background: url(images/bg.jpg) no-repeat center center fixed; */
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
	}
.ContratosCliente,.MostrarServicios{
	cursor:crosshair;
}
#TListadoMovimientosBiocidas tbody tr td{
	padding:3px;
	}
input#Login:-webkit-autofill,
input#Login:-webkit-autofill:hover, 
input#Login:-webkit-autofill:focus,textarea#Login:-webkit-autofill,
textarea#Login:-webkit-autofill:hover
textarea#Login:-webkit-autofill:focus,
select#Login:-webkit-autofill,
select#Login:-webkit-autofill:hover,
select#Login:-webkit-autofill:focus,input#Contra:-webkit-autofill,
input#Contra:-webkit-autofill:hover, 
input#Contra:-webkit-autofill:focus,textarea#Contra:-webkit-autofill,
textarea#Contra:-webkit-autofill:hover
textarea#Contra:-webkit-autofill:focus,
select#Contra:-webkit-autofill,
select#Contra:-webkit-autofill:hover,
select#Contra:-webkit-autofill:focus{
  border: 1px solid white;
  -webkit-text-fill-color: white;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}
.TApp,.SApp {
  color: transparent;
  -webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: white;
  font-family:My Puma Regular;
}
input[type=date].w3-QuitarEstiloInput::-webkit-inner-spin-button { display: none; }
input[type=date].w3-QuitarEstiloInput::-webkit-calendar-picker-indicator{ display: none; }
input[type=date].w3-QuitarEstiloInput::-webkit-clear-button{ display: none; }
@font-face {
font-family: 'My Puma Regular';
font-style: normal;
font-weight: normal;
src: local('My Puma Regular'), url('MYPUMA.woff') format('woff');
}

/* Style the links inside the sidenav */
#IncidenciasClientes a,#IncidenciasClientes button {
  position: absolute; /* Position them relative to the browser window */
  left: -135px; /* Position them outside of the screen */
  transition: 0.3s; /* Add transition on hover */
  width: 240px; /* Set a specific width */
  text-decoration: none; /* Remove underline */
  border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
}

#IncidenciasClientes a:hover,#IncidenciasClientes button:hover {
  left: 0; /* On mouse-over, make the elements appear as they should */
}
#InfoPermiso{
	display:flex;
	flex-flow:row wrap;
	gap: 12px;	
	align-items:center;
}
.Flexo{
	display: flex;
	flex-flow: row wrap;	
	align-items:center;
}
.FlexoColumna{
	display: flex;
	flex-flow: column wrap;		
}
.LogotipoEmpresa{
	min-height:100px;
	height:20vw;
	max-height:140px;
}
#DListadoFactuarasEmitidas{
	max-height: 845px;
    overflow-y: auto;
    position: relative;
}
.w3-sidebar {
	width:250px;
}

#ResultadoBuscarVisita {
	position: absolute;
	background: white;
	z-index: 1000;
	border: 1px solid #ccc;
	width: 100%;
	max-height: 250px;
	overflow-y: auto;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
/* El contenedor que envuelve la tabla */
#CabeceraFija {
  max-height: 79vh;      /* haces scroll ahí dentro */
  overflow-y: auto;
  position: relative;
}

/* Importante: separar bordes para que sticky no se rompa */
#TListadoPagosDomiciliados {
  border-collapse: separate !important;
  border-spacing: 0;
}

/* Cabecera fija */
#TListadoPagosDomiciliados thead th {
  position: sticky;
  top: 0;        /* si tienes un header fijo arriba, cámbialo p.ej. top:60px */
  z-index: 2;
  background: #fff; /* o el color de tu cabecera .w3-theme */
}
/* Contenedor que envuelve la tabla de pagos pendientes */
#CabeceraFijaPendientes {
  max-height: 79vh;   /* ajusta a tu gusto */
  overflow-y: auto;
  position: relative;
}

/* Importante: separar bordes */
#TListadoPagosPendientes {
  border-collapse: separate !important;
  border-spacing: 0;
}

/* Cabecera fija */
#TListadoPagosPendientes thead th {
  position: sticky;
  top: 0;        /* si tienes header fijo arriba, cámbialo p.ej. top:60px */
  z-index: 2;
  background: #fff; /* o .w3-theme si prefieres */
}
/* Contenedor que envuelve la tabla de facturas emitidas */
#DListadoFactuarasEmitidas {
  max-height: 82vh;   /* ajusta según necesites */
  overflow-y: auto;
  position: relative;
}

/* Evita que collapse rompa sticky */
#TListadoFacturasEmitidas {
  border-collapse: separate !important;
  border-spacing: 0;
}

/* Cabecera fija */
#TListadoFacturasEmitidas thead th {
  position: sticky;
  top: 0;        /* si tienes un header fijo arriba, pon su altura p.ej. 60px */
  z-index: 2;
  background: #fff; /* o usa .w3-theme si prefieres */
}
/* Contenedor de facturas generadas con scroll vertical */
#CabeceraFijaFacturasGeneradas {
  max-height: 79vh;   /* ajusta según necesites */
  overflow-y: auto;
  position: relative;
}

/* Evita que collapse rompa sticky */
#TListadoFacturasGeneradas {
  border-collapse: separate !important;
  border-spacing: 0;
}

/* Cabecera fija */
#TListadoFacturasGeneradas thead th {
  position: sticky;
  top: 0;        /* si tienes header fijo arriba, cámbialo, p.ej. top:60px */
  z-index: 2;
  background: #fff; /* o aplica tu .w3-theme si prefieres */
}
/* Contenedor que envuelve el listado de pagos */
#CabeceraFijaListadoPagos {
  max-height: 75vh;   /* ajusta según lo que quieras mostrar */
  overflow-y: auto;
  position: relative;
}

/* Evita que collapse rompa el sticky */
#TListadoPagosDomiciliados {
  border-collapse: separate !important;
  border-spacing: 0;
}

/* Cabecera fija */
#TListadoPagosDomiciliados thead th {
  position: sticky;
  top: 0;       /* si tienes un header fijo arriba, pon su altura, ej. 60px */
  z-index: 2;
  background: #fff; /* o .w3-theme si quieres mantener colores */
}

@media screen and (min-width: 2400px) {
	#DListadoFactuarasEmitidas{
		max-height: 1000px;
		overflow-y: auto;
		position: relative;
	}
}
@media only screen and (max-width: 1024px) {
	.LogotipoEmpresa{
		min-height:100px;
		height:20vw;
		max-height:130px;
	}		
}
@media only screen and (max-width: 768px) {
	.LogotipoEmpresa{
		min-height:50px;
		height:20vw;
		max-height:115px;
	}	
}
@media screen and (max-width: 600px) {
  body, .w3-small, .w3-padding-small, .w3-table td, .w3-table th {
    font-size: 13px !important;
  }
.SoloEscritorio {
    display: none !important;
  }
  .w3-btn {
    padding: 4px 8px !important;
    font-size: 13px !important;
  }

  .w3-margin, .w3-margin-bottom, .w3-margin-top {
    margin: 4px !important;
  }

  .w3-padding, .w3-padding-small {
    padding: 4px 6px !important;
  }
}
@media only screen and (max-width: 576px) {
	.LogotipoEmpresa{		
		height:60px;
		width:auto;
	}
	.Logotipo{
		height:60px;
		width:auto;
	}
	#TituloApp{
		display: none;
	}
}
@media only screen and (min-width: 350px) and (max-width: 600px) and (min-height: 700px) and (orientation: portrait) {
	.Logotipo{				
		height:50px;
		width:auto;
	}
    .LogotipoEmpresa{				
		height:50px;
		width: auto;
	}
	#TituloApp{
		display: none;
	}
}
@media only screen and (max-width: 350px) {
	.LogotipoEmpresa{				
		height:95px;
	}
}

/* The about link: 20px from the top with a green background */
@media (max-width: 768px) {
  /* === Barra inferior === */
  header.w3-bar.w3-theme-d3.w3-bottom {	
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex !important;
    align-items: center !important;    
    flex-wrap: nowrap !important;    
    background-color: #15587b !important;
    border: none !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  /* === Botones más pequeños pero cómodos === */
  header.w3-bar.w3-theme-d3.w3-bottom .w3-bar-item.w3-button {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  /* === Buscador centrado === */
  header.w3-bar.w3-theme-d3.w3-bottom input[type="search"]#BuscarCliente {
    flex: 1 1 auto;
    max-width: 120px !important;
    height: 30px !important;
    /* margin: 0 4px !important; */
    border-radius: 6px !important;
  }

  /* === Oculta textos largos (CONTRATOS, CONSULTAS...) === */
  header.w3-bar.w3-theme-d3.w3-bottom h3,
  header.w3-bar.w3-theme-d3.w3-bottom span,
  header.w3-bar.w3-theme-d3.w3-bottom a.w3-bar-item:not(.w3-button):not(#BuscarCliente) {
    display: none !important;
  }

  /* === Logotipo Linneo === */
  header.w3-bar.w3-theme-d3.w3-bottom img {
    height: 22px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  /* === Espacio para que no tape contenido === */
  body {
    padding-bottom: 52px !important;
    margin: 0 !important;
  }
}
@media only screen and (max-width: 900px) and (orientation: landscape) {
  /* === Alinear .w3-right al extremo derecho === */
  header.w3-bar.w3-theme-d3.w3-bottom {
    display: flex !important;
    align-items: center !important;
  }

  /* Agrupar los dos elementos .w3-right juntos al final */
  header.w3-bar.w3-theme-d3.w3-bottom .w3-right {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;          /* 🔹 mínimo espacio entre logo y puerta */
  }

  /* Centrar verticalmente el logo e icono puerta */
  header.w3-bar.w3-theme-d3.w3-bottom img,
  header.w3-bar.w3-theme-d3.w3-bottom a.w3-right {
    display: flex !important;
    align-items: center !important;
    height: 22px !important;      /* 🔹 ajusta tamaño si queda muy alto */
  }

  /* Evita saltos o separación innecesaria */
  header.w3-bar.w3-theme-d3.w3-bottom .w3-bar-item {
    margin: 0 !important;
  }
}