@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

html{
	height:auto;
}

body{
    width:auto;
	background-color:#fbfbfb;
	margin:0px;
	height:auto;
	font-family:Roboto,Arial;
}

/* DIV */
div{
	display: flex;
    box-sizing:border-box;
}

div.header{
	width:100%;
	flex-direction: column;
	background-color:#ffffff;
	overflow:hidden;
	background-image: url('../images/sicted_payment.jpg');
	background-position:left;
	background-repeat:no-repeat;
	border-bottom:1px solid #b3d8ea;
	position:fixed;
	z-index:2;
	top:0;
	left:0;
}

div.headercontent{
	flex-direction: row;
	width: 100%;
	max-width:1200px;
	min-width:1002px;
	padding-top:2em;
	padding-bottom:2em;
	margin:auto;
}

div.topmenu{
	margin-left:auto;
}

/** Standby section **/
.sectionstandby {
	/* Ocupa el 100% de la altura y anchura de la ventana */
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #fff;
}

.sectionstandbygallery {
	/* Limita el ancho al 50% de la ventana */
	width: 40vw;
	padding:3em;
	margin-bottom:1em;
	/* También usa Flexbox para alinear las tres imágenes */
	display: flex;
	justify-content: space-between; /* Distribuye las imágenes uniformemente */
	align-items: center;
	gap: 2em; /* Espacio entre las imágenes */
	/* (Opcional) Borde para ver el límite del 50% */
	border: 1px solid rgba(0,0,0,0.15);	
}

.sectionstandbygallery img {
	/* La imagen ocupará un tercio del 50% disponible, menos el espacio (gap) */
	width: calc(25% - 10px); 
	height: auto; /* Mantiene la proporción */
	object-fit: cover; /* Asegura que la imagen cubra su área sin distorsionarse (opcional) */
	border-radius: 5px;
}
/** Fin de standby section **/

div.sectiontxt {
	flex-direction:column;
	width:100%;
	padding-top:1em;
}

div[id="datainvoice"]{
	width:100%;
}

/*div[id="datacard"]{
	width:48%;
	margin-left:4%;
}*/

div[id="iframecard"]{
	background-color: rgba(0,0,0,0.05);
	padding:1.5em;
	border-radius:0.5em;
}

div[id="topay"]{
	padding-top:0 !important;
	margin-top:0;
	justify-content: flex-end;
}

div.topaydata{
	width: auto !important;
	justify-content: flex-end;
	flex:0 0 auto;
	padding-top:0 !important;
}

div[id="topay"] div.topaydata:nth-of-type(1) {
	margin-right:1em;
}


div.sectiontxtframed{
	flex-direction:column;
	position: relative;
	background-color: #3b90cc;
	border: 1px solid #3b90cc;
	max-width:1200px;
	min-width:1002px;
	border-radius: 0.25em;
	padding:2em;	
	margin:auto;
	z-index:1;
}

/*Clase CSS especifica título página*/
#webservicetitle{
   background-color: transparent;
   border:0;
   margin-top:9em;
   padding:0;
}

div[id="intro"]{
    background-color: transparent;
    border:0;
    padding:0;
    margin-top:1.5em;
    margin-bottom:1.5em;
}

div[id="contact"]{
	font-size: 1em;
	font-weight: 300;
	color: #333333;
	background-color: #fff;
	border: 1px solid #b3d8ea;
	border-radius: 0.5em;
	padding:2em;
}

div.sectiontxtrow {
	flex-direction:row;
	width:100%;
	padding-top:1em;
}

div.sectiontxtrow > i{
	font-size: 1.5em;
	margin-right: 0.25em;
}

/*Clase CSS especifica control establecimientos*/
div[id="searchcontrol"]{
    margin-left:auto;
    padding-top:0;
    width:auto;
    flex-grow:1;
}


/*Clase CSS especifica buscador texto*/
div[id="searchtxtsection"]{
	padding-top:0;
	justify-content: flex-end;
	margin-right:1.5em;
}

/*Clase CSS especifica social media links*/
div[id="socialmedia"]{
	width: auto;
	margin-left:2em;
}

div.rowfield{
	display: flex;
	margin-right: 0.5em;
	justify-content: flex-start;
	align-items: center;
	margin-bottom:0.25em;
}

div.rowfield > i{
	margin-right: 0.25em;
}

div.rowfield > input[type="text"]{
	display: flex;
	width: 100% !important;
	margin-bottom:0.5em;
}

div.rowfield > input[type="text"]:disabled{
	background-color: #434343;
	color:#cdcdcd;
}

div.sectiontxt > div.optionfield{
	display: flex;
	flex: 1;
	border-radius:0.25em;
	margin-left:auto;
}

div.sectiontxtfooter{
	flex-direction:column;
	position: relative;
	max-width:1200px;
	min-width:1002px;
	padding:2em;	
	margin:auto;
	z-index:1;
}

div[id=footermaindata]{
  width: auto; 
  margin-left:2em; 
}



/* DIV Caso específico miembros **/
#headermemberlist, #footermemberlist{
	padding: 1em;
	background-color: rgba(0,0,0,0.3);
	width: 100%;
	border-radius: 0.25em 0.25em 0 0;
}

#membersList{
	flex-direction: column;
	align-items: flex-start;
	width:100%;
	overflow: hidden;
	overflow-y: scroll;
	height: 300px;
	padding: 0.5em;
	background-color: rgba(0,0,0,0.1);
}

#footermemberlist{
	justify-content: flex-end;
	border-radius: 0 0 0.25em 0.25em;
}

div.sectionlistItem{
	cursor: pointer;
	width: 100%;
	padding:0.5em;
	background-color: rgba(255,255,255,0.1);
	margin-bottom:0.25em;
	transition: 0.2s;
}

div.sectionlistItem:hover{
   background-color: rgba(255,255,255,0.6);
}

div.sectionlistItem:hover h3.item{
   color:#3b90cc;
}

div.listitemSelected{ background-color: rgba(255,255,255,0.95)}
div.listitemSelected h3{ color:#3b90cc !important; }
div.listitemSelected h3 i{ color:#3b90cc !important; }

/* DIVs RESULTADOS */
div.redsysanalysis, div.redsysresult{    
    /* Opción 1: Altura fija */
    height: 100vh; /* Ocupa toda la altura de la ventana */
    /* Opción 2: Altura mínima para que se expanda si es necesario */
    /* min-height: 100vh; */
    flex-direction: column; /* O column, según tu diseño */
	justify-content: center;
	align-items: center;
}

/** DIV Componente modal **/
#modalBackground{
	display: flex;
	opacity: 0;
	position:fixed;
	z-index: 0;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.65);
}

.modalZUp{z-index: 10 !important;}
.modalZDown{z-index: 0 !important;}

@keyframes showModalBackground {
	0% { opacity:0; }
	100% { opacity: 100; }
}

@keyframes hideModalBackground {
	0% { opacity:100; }
	100% { opacity: 0; }
}

div.showModal{ animation: showModalBackground 0.2s forwards;}
div.hideModal{ animation: hideModalBackground 0.2s forwards;}

#messageBox{
	display:flex;
	flex-direction: column;
	position:fixed;
	width:25%;
	padding:2em;
	background-color: #fff;
	top: 50%;
	left:100%;
	transform: translate(100%, -50%);
	z-index:12;
	border-radius: 0.5em;
	overflow: hidden;	
	box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 10px 3px;
	margin:auto;
	max-height: 90%;
	overflow-y:scroll;
}

.messageBoxLegal{
	width:80% !important;
}

@keyframes showMessageBox {
	0% { transform: translate(100%, -50%); left:100%; }
	100% { transform: translate(-50%, -50%); left:50%; }
}

@keyframes hideMessageBox {
	0% { transform: translate(-50%, -50%); left:50%;}
	100% { transform: translate(100%, -50%); left:100%;}
}

div.showMessage{ animation: showMessageBox 1s forwards;}
div.hideMessage{ animation: hideMessageBox 1s forwards;}

#messageHeader{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

#messageBody, #messageBodyRedsysI, #messageBodyRedsysTemp, #messageBodyRedsysError, #messageBodyRedsysSuccess{
	margin-top:2em;
	padding-bottom:2em;
}

#messageBodyRedsysI{
	margin-top:0;
	display: none;
	align-items: center;
	justify-content:center;
	flex-direction: column;
}

#messageBodyRedsysTemp{
	margin-top:0;
	padding-bottom:0;
	margin-left: 2em;
	padding-left:2em;
	border-left:1px solid rgba(0,0,0,0.2);
	display: none;
	flex-direction: row;
	justify-content: center;
}

#messageBodyRedsysError, #messageBodyRedsysSuccess{
	margin-top:0;
	display: none;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

#iframeRedsysA{	
	display: none;
	height: 500px;
	width:100%;
}

a.closeMessage, a.goHome, a.rsysForm{
	position: absolute;
	right: 1em;
    padding-left: 1em;
	padding-right: 1em;
	margin-left: 3em;
	margin-left: auto;
	border-radius: 0.25em;
	text-decoration: none;
	font-family:Roboto,Arial;
	font-size: 1em;
	font-weight: 500;
    color: #fd644e;
	opacity:0.75;
    cursor: pointer;
	transition:all 250ms ease-out;
}

a.closeMessage:hover, a.goHome:hover{
	color:#fff;
	opacity:1;
}

a.closeMessage > i, a.goHome > i{
	font-size: 1.5em;
	margin:0 !important
}

a.rsysForm{
	display: none;
}


/** TEXT TAGS **/

h1, h2, h3, span, p, li{
	display: flex;
	box-sizing: border-box;
	align-items: center;
	font-family: 'Roboto',Arial, Helvetica, sans-serif;
	margin:0;	
}

h1 {
	font-size: 1.75em;
	font-weight: 700;
	color: #3b90cc;
	background-color: #fff;
	border: 1px solid #b3d8ea;
	padding-left: 0.5em;
	padding-right: 0.5em;	
}

h1.featured{
	border-radius: 0.25em;
	padding: 1em;
	background-image: url('../images/aetibsicted.png');
	background-repeat: no-repeat;
	background-size:auto;
	background-position: right center;
}

h2{
	font-size: 1.5em;
	font-weight: 200;
	margin:0;
	color:#ffffff;
}

h2.blue{ color:#3b90cc;}

h2 > i, h3 > i{ margin-right: 0.25em; }

h3{
	font-size: 0.9em;
	font-weight: 400;
	color:#ffffff;
}

h3.header{
	font-size: 1.1em;
	font-weight: 200;
	color:#ffffff;
}

h3.item{
	font-weight: bold;
}

h3.featured{
	font-size: 1em;
	font-weight: bold;
	color: #ffffff;
	background-color: rgba(0, 0, 0, 0.2);
	padding: 0.5em;
	border-radius: 0.25em;
	padding-left: 1em;
	padding-right: 1em;
}

#feecost{
    margin-left: 0.5em;
}

h3.small{
	font-size:0.75em;
	color:#333;
}

h2 > i, h3 > i{ margin-right: 0.25em; }

span.featureddata{
	font-weight: 200;
	font-size: 1.4em;
	margin-left:0.5em;
}

p{ 	width:100%; justify-content: center; }


p.intro {
	font-size: 1em;
	font-weight: 300;
	color: #333333;
	background-color: #fff;
	border: 1px solid #b3d8ea;
	border-radius: 0.5em;
	padding:2em;
}

#messageP, #messagePRedsysI, #messagePRedsysError, #messageRedsysSuccess{
	text-align: center;
	font-weight: bold;
}

li{
	list-style-type: circle;
}

/** BUTTONS / LINKS **/
a{
    display: flex;
	box-sizing: border-box;
	align-items: center;
	font-family: 'Roboto', Arial;
	font-size: 0.9em;
	font-weight: 700;
	cursor: pointer;
	padding:0.5em;
	margin-left: 0.25em;
	background-color: #ffffff;
    border: 1px solid #3b90cc;    
    color: #3b90cc;
    border-radius: 0.25em;
	text-decoration:none;
	box-shadow: 0px 1px 2px 0px rgb(0 0 0 / 25%);
	transition:ease-in 0.2s;
}

a:hover{
    background-color: #3b90cc;
	border: 1px solid #3b90cc;
	color:#fff;
}
a > i {
	margin-right: 0.5em;
	padding-top:0.1em;
}

a.languageselected{
	background-color: #3b90cc;
	color:#fff;
}

a.action {
	font-size:1em;
	font-weight: bold;
	padding:1em;
	background-color: #ffffff;
	color:#3b90cc;
}

a.actionlittle{
	flex-basis: 275px;
	font-size:0.8em;
	font-weight: bold;
	padding:0;
	background-color: #ffffff;
	color:#3b90cc;
}

a.actionbig{
	font-size:1.5em;
	font-weight: bold;
	justify-content: center;
	padding: 1em;
	width: 100%;
	background-color: #ffffff;
	color:#3b90cc;
}

a.action:hover, a.actionlittle:hover, a.actionbig:hover { background-color: #3b90cc; color:#fff;}

a.actionlittle{
	font-size:0.8em;
	font-weight: bold;
	padding:1em;
	background-color: #ffffff;
	color:#3b90cc;
}

a.footer{
	flex-grow: 1;
	font-size: 0.8em;
	color:#333;
	background-color: transparent;
	border:0;
	box-shadow: none;
	width: auto;
}

a.footer > img{
	max-width: 32px;
}

a.simple{
	display: inline;
	background-color: transparent;
    border: none;    
    color: #000000;
    border-radius:0;
	box-shadow:none;
	padding:0;
	padding-top:1em;
	padding-bottom:1em;
	margin-left:0;
	font-size: 1em;
}

a.simple:hover{
	color:#3b90cc;
}


/* INPUTS */

input[type=text], input[type=email]{
	display: flex;
	box-sizing: border-box;
	font-family: 'Roboto', Arial;
	font-size:0.9em;
	font-weight: bold;
	color:#333333;
	border:0.25em solid #ffffff;
	padding:1em;
	width: 100%;	
	border-radius:0.5em;
}    

label {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	font-family: 'Roboto', Arial;
	font-size:0.9em;
	font-weight: bold;
	color:#FFFFFF;
}

label i[class*="fa-"] {
	margin-right:0.25em;
}

::placeholder { /* Estándar W3C para navegadores modernos */
    color: rgba(0,0,0,0.25);
    font-style: italic;
    font-size: 0.9em;
}

.search-input {
    flex-grow: 1; /* Permite que el input ocupe el espacio disponible */
    max-width:250px;
	padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 0.25em 0 0 0.25em !important; /* Bordes redondeados solo a la izquierda */
    font-size: 16px;
    outline: none; /* Elimina el contorno al hacer clic */
    transition: border-color 0.3s ease;
	font-size: 0.8em;
}

.search-input:focus {
    border-color: #007bff; /* Cambia el color del borde al enfocar */
}

.search-button {
    background-color: #95bfeb; /* Color azul para el botón */
    color: white;
	font-size: 0.8em;
    border: none;
    padding: 10px 15px;
    border-radius: 0 0.25em 0.25em 0 !important;  /* Bordes redondeados solo a la derecha */	
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

.search-button:hover {
    background-color: #0056b3; /* Color más oscuro al pasar el ratón */
}


/** Checkbox personalizado **/
/* Ocultar el checkbox nativo */
.hidden-checkbox {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  border: none;
  white-space: nowrap;
}

/* 2. Estilizar el label/contenedor del checkbox */
.custom-checkbox-label-fa {
  width:100%;
  display: inline-flex;
  align-items: center; /* Centra verticalmente el cuadrado/icono y el texto */
  cursor: pointer;
  font-size: 16px;
  user-select: none;
  padding: 8px 12px; /* **Padding deseado para todo el componente** */
  border-radius: 4px;
  /*margin-bottom: 10px;*/
  position: relative; /* Importante para posicionar el icono FA */
}

/* 3. Estilizar el "cuadrado" del checkbox */
.checkbox-box {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 0;
  background-color: #fff;
  border-radius: 4px;
  margin-right: 8px; /* Espacio entre el cuadrado y el texto */
  transition: background-color 0.2s, border-color 0.2s;
  flex-shrink: 0; /* Evita que el cuadrado se encoja */
}

/* 4. Estilizar el icono de Font Awesome (oculto por defecto) */
.checkbox-icon {
  position: absolute; /* Posicionar el icono sobre el cuadrado */
  color: #fff; /* Color del icono (el tick) */
  font-size: 14px; /* Tamaño del icono */
  left: 17px; /* Ajustar posición X del icono (padding-left del label + la mitad del ancho del cuadrado - mitad del ancho del icono) */
  top: 11px; /* Ajustar posición Y del icono (padding-top del label + la mitad del alto del cuadrado - mitad del alto del icono) */
  opacity: 0; /* Oculto por defecto */
  transform: scale(0.5); /* Empezar más pequeño para una animación de entrada */
  transition: opacity 0.2s, transform 0.2s;
}

/* 5. Estilos cuando el checkbox nativo está marcado */
.hidden-checkbox:checked + .custom-checkbox-label-fa .checkbox-box {
  background-color: #fd644e; /* Color de fondo cuando está marcado */
  border-color: transparent; /* Color del borde cuando está marcado */
}

/* 6. Mostrar el icono de Font Awesome cuando está marcado */
.hidden-checkbox:checked + .custom-checkbox-label-fa .checkbox-icon {
  opacity: 1; /* Mostrar el icono */
  margin-top:0.4em;
  margin-left:0.2em;
  transform: scale(1); /* Escalar a su tamaño normal */
}

/* 7. Estilos de foco para accesibilidad */
.hidden-checkbox:focus + .custom-checkbox-label-fa {
  outline: 2px solid white;
  outline-offset: 2px;
}

/* CUSTOM SCROLL */
/* width */
::-webkit-scrollbar {
  width: 10px;
  margin-left:0.5em;
  height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #4494e6;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #5fa7f1;
}

/*RECAPTCHA*/
.grecaptcha-badge { /* O el ID o clase específico que tenga el badge */
  z-index: 9999; /* Un valor muy alto para asegurar que esté por encima */
}