/* CSS Document */

/* BODY*/
body { 
	margin: 0; /* Asegura que el fondo cubra todo */
    padding: 0;
    position: relative; /* Necesario para posicionar el pseudoelemento */
    min-height: 100vh; /* Asegura que el body ocupe al menos el alto de la pantalla */
    background-attachment: scroll;
    background-image: url(imagenes/SVG/qboxCubo.svg);
    background-size: 46vw;

}

body::before{
	position: fixed; /* Mantiene el fondo fijo al hacer scroll */
	filter: grayscale(100%); 
    -webkit-filter: grayscale(100%); /* Compatibilidad para Safari */
    opacity: 0.5;
	
}
/*FIN BODY*/



/* SECCION STAFF */

#Staff { 
	animation:  5s  1 animacionStaff;
}

#ZonaSeguimiento{
	display: none;
}
@keyframes animacionStaff {
  from {transform: rotate(-26.6deg) scale(14.8) translateX(30%);  }
  to {}
}/* ANIMACION en ourTeam.php #staff*/



/* WRAPSTAFF*/

	#Staff .wrapStaff li > span:first-of-type {
    font-size: 1.4em;
    margin-bottom: 0.5em;}


	#Staff h2{
		text-align: center;
		text-transform: uppercase;
		font-family: sans-serif;	}
	#Staff h2 span:first-of-type{ color: rgba(255,102,0,1.00);}
	#Staff h2 span:last-of-type{color: rgba(0,102,156,1.00);}



.wrapStaff {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    padding: 20px;
    list-style: none;
    justify-content: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

	.wrapStaff li {
		background: #ffffff;
		border-radius: 15px;
		font-family: Helvetica, "sans-serif";
		list-style-type: none;
		margin-top: 5vh;
		padding: 2vw;
		width: 80vw;
		box-shadow: 0 10px 25px rgb(0 0 0 / 8%);
		border: 1px solid #eee;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	
	}
		.wrapStaff li span:first-of-type a{ 
			background-color: darkorange; 
			color: white; 
			padding: 0.5rem;
			border-radius:10px; 
			border: 0;
			box-shadow: 0 0 0 0 ; 
			margin-bottom: 0.5rem;}
		.wrapStaff li span:first-of-type a:hover{background-color: rgba(0,102,156,1.00);}

	.wrapStaff li:hover {
		transform: translateY(-5px);
		box-shadow: 0 15px 35px rgba(0,0,0,0.12);
	}
		/*afecta a todos*/
		.wrapStaff li span {
			display: flex;
			justify-content: space-between;
			align-items: center;
			/*font-size: 0.9rem;*/
			color: #555;
			margin-bottom: 8px;
			padding: 4px 0;
		}
		/* Los puntajes (8/10, etc.) */
		.wrapStaff li .puntajeHabilidad {
			background: #f8f9fa;
			padding: 2px 8px;
			border-radius: 12px;
			font-weight: bold;
			color: #2c3e50;
			font-size: 0.8rem;
			border: 1px solid #ddd;
			margin-bottom: 0; /* Reseteo para el span anidado */
		}

		.wrapStaff li > span {  display: block;}
		.wrapStaff li > span:first-of-type{ font-weight: bold;}


		.wrapStaff li .contenedorServicio{
			display: block;
			padding: 10px;
			border-radius: 8px;
			text-align: left;
			margin: 10px 0;
			transition: background 0.3s;	
			
		}
			.wrapStaff li .contenedorServicio:hover {
				background: #34495e;
				cursor: pointer;
				margin: 10px 0;		
				color: azure;
			}

		.wrapStaff li.freelanceSeleccionado{
			background-color: yellowgreen;
			border: 2px solid rgba(158,22,24,1.00);	
		}

/* FIN WRAPSTAFF*/


/* SECCION BRIEFING*/
	/* Para ocultar el staff con elegancia */
	#ZonaBriefing .oculto-suave {
		opacity: 0;
		pointer-events: none;
		transform: scale(0.95);
		transition: all 0.5s ease;
	}

	#ZonaBriefing {
		padding: 50px 45px;
		max-width: 800px;
		margin: 0 0 10vh 5vw;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 20px;
		box-shadow: 0 10px 30px rgb(0 0 0 / 10%);
		position: relative;
		display: none;
	}

	#ZonaBriefing .preguntaBase {
		margin-bottom: 25px;
	}

	#ZonaBriefing .preguntaBase label {
		display: block;
		font-weight: bold;
		margin-bottom: 10px;
	}
 	#ZonaBriefing .btnAccion {
		display: block;
		width: auto;
		padding: 0.9vw;
		margin-top: 0.9vw;
		border: none;
		border-radius: 0.4vw;
		cursor: pointer;
		font-weight: bold;
	}
	#ZonaBriefing .preguntaDinamica {
		border: none;
		padding: 0;
		margin: 0 0 20px 0; /* Un poco de aire entre preguntas */
		display: flex;
		flex-direction: column;
	}


/* --- SECCIÓN IDENTIFICACIÓN CLIENTE --- */


#IdentificacionCliente {
    max-width: 37.5rem; /* Equivale a 600px en base 16px */
    width: 95%;        /* Asegura margen en pantallas muy pequeñas */
    margin: 2.5rem auto;
    padding: 1.25rem;
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.05);
	display: none;
}

.grupoContacto {
    border: 0.0625rem solid #e1e8ed;
    border-radius: 0.5rem;
    padding: 1.56rem;
    margin: 0;
}

.grupoContacto legend {
    font-weight: 700;
    font-size: 1.1rem;
    color: #2c3e50;
    padding: 0 0.93rem;
    text-transform: uppercase;
    letter-spacing: 0.06rem;
}

.instruccion {
    font-size: 0.9rem;
    color: #7f8c8d;
    margin-bottom: 1.56rem;
    line-height: 1.5;
}

/* --- CONTENEDORES DE INPUT (LABELS) --- */

.inputIdentificacion {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem;
}

.inputIdentificacion span {
    font-size: 0.85rem;
    font-weight: 600;
    color: #34495e;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

/* --- ESTILOS DE LOS INPUTS --- */

.inputIdentificacion input {
    width: 100%; /* Ocupa el contenedor padre relativo */
    box-sizing: border-box; /* Evita que el padding desborde el ancho */
    padding: 0.75rem 0.93rem;
    border: 0.125rem solid #f0f3f5;
    border-radius: 0.375rem;
    font-size: 1rem;
    color: #2c3e50;
    background-color: #f9fbfd;
    transition: all 0.3s ease;
    outline: none;
}

.inputIdentificacion input::placeholder {
    color: #bdc3c7;
    font-size: 0.9rem;
}

/* --- ESTADOS INTERACTIVOS --- */

.inputIdentificacion input:focus {
    border-color: #3498db;
    background-color: #fff;
    box-shadow: 0 0.25rem 0.75rem rgba(52, 152, 219, 0.1);
}

.inputIdentificacion:focus-within span {
    color: #3498db;
}

.inputIdentificacion input:hover {
    border-color: #d6dbdf;
}

/* --- RESPONSIVO PARA MÓVILES (CARACAS/SMARTPHONES) --- */

@media (max-width: 30rem) { /* 480px / 16 */
    #IdentificacionCliente {
        margin: 1.25rem auto;
        padding: 0.625rem;
        width: 92%;
    }
    
    .grupoContacto {
        padding: 0.93rem;
    }
    
    .inputIdentificacion input {
        /* Mantenemos 1rem (16px) mínimo para evitar zoom en móviles */
        font-size: 1rem; 
    }
}
/* ---- FIN  SECCION IDENTIFICACION CLIENTE ---*/

/* FIN SECCION BRIEFING*/





/* ASIDE Central Hub .sidebarResumen*/
.sidebarResumen {
	box-sizing: border-box;
	font-family: sans-serif;
	font-size: 0.7rem;
    position: fixed;
    background: #fff;
    border-radius: 15px;
    box-shadow: -5px 0 20px rgba(0,0,0,0.2);
    z-index: 1000;
    display: none; /* Se activa con jQuery */
}
	.sidebarResumen .headerResumen{ text-align: center;}


	.sidebarResumen .btnAccion {
		
		display: block;
		width: 100%;
		padding: 0.9vw;
		margin-top: 0.9vw;
		border: none;
		border-radius: 0.4vw;
		cursor: pointer;
		font-weight: bold;
	}
	.sidebarResumen .btnConfigurarProyecto { 
		background: #2186e4; /* Un tono oscuro y serio de agencia */
		color: #fff; 
		border: 0.3vw solid #f1d83a; /* El toque amarillo de qbox */
		font-size: 1rem;
	}
	.sidebarResumen .presupuesto { background: #f1d83a; color: #333; display: none;}/* COMO NOMBRAR al .btnAccion.presupuesto en vez de solo .presupuesto*/
	.sidebarResumen .btnWhatsapp { background: #25d366; color: #fff; }
	.sidebarResumen .btnLimpiarTodoServicios { background: #ED9A30; color: #fff;  }
/* Fin Aside Central hub .sidebarResumen*/









	/* CSS mensajePOP  QUITARLO DE ASIDE Y PONERLO EN BODY NORMAL*/

aside.wrapMsjPop{
	position: absolute;
	border: 1px solid rgba(0, 0, 0, 0.2);
	display:none;
	max-width: 50vw;
	right: 6vw;
}
	.msj {	
		display: block;
		max-width: 100%;
		margin: 20px auto;
		padding: 30px 20px;
		text-align: center;
		font-family: 'Arial', sans-serif;
		font-size: 1.1rem;
		border-radius: 8px;
		border: 1px solid rgba(0, 0, 0, 0.2);
		line-height: 1.6;
		box-shadow: 20px 20px 14px 5px rgb(0 0 0 / 10%);
		position: relative;
		
		/*MEJORAR ESTA PARTE DE LA OPACIDAD con .msj:hover */
		opacity: 1;
		transition: opacity 0.2s ease;
	}
		/* .msj:hover { CORREGIR O ELIMINAR
			opacity: 0; /* Se vuelve invisible */
	/*	} */

		/* Color especifico para la variante 'critico' (Rojo) */
		.msj.critico {
			background-color: #E92020; /* El amarillo de tu imagen */
			color: #FFFFFF; /* Texto oscuro para buen contraste */
			display: none;
		}

			/* Opcional: Agregar un icono antes del texto como en la imagen */
			.msj.critico::before {
				content: "💀";
				display: block;
				font-size: 2.5rem;
				margin-bottom: 10px;
			}

		/* Color específico para la variante 'importante' (Amarillo) */
		.msj.importante {
			background-color: #f1d83a; /* El amarillo de tu imagen */
			color: #4a4a4a; /* Texto oscuro para buen contraste */
		}

			/* Opcional: Agregar un icono antes del texto como en la imagen */
			.msj.importante::before {
				content: "⚠�";
				display: block;
				font-size: 2.5rem;
				margin-bottom: 10px;
			}



		.msj.tomaDesicion {
			display: none; /* Para que respete márgenes y rellenos */
			background-color: #0382BF;
			border: 2px solid #2c3e50; /* Un azul oscuro profesional */
			color: #2c3e50;
			padding: 20px;
			margin: 15px auto;
			max-width: 40%;
			border-radius: 10px;
			box-shadow: 0 5px 15px rgba(0,0,0,0.1);
			font-family: sans-serif;
			position: relative;
		}

			.msj.tomaDesicion strong {
				color: #e67e22; /* Resalta el nombre en naranja */
			}

			.msj.tomaDesicion ul {
				margin-top: 10px;
				font-size: 1rem;
				color: white;
			}



/* ASIDE MENSAJE POP CRITICO IMPORTANTE  Y OTRO*/



@media (orientation:landscape){
	#Staff h2{  font-size: 4em;}
	
	.wrapStaff { padding: 0px;  margin: 3em auto 0; width: 80%; }
	.wrapStaff li{ 
		width: 46%;
		display: inline-block; 
		vertical-align: top; 
		padding: 0 0 0 2em;}
		
	/* ASIDE Central Hub .sidebarResumen*/
	.sidebarResumen {	
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
		width: 20vw;
		padding: 2vw;
		display: none; /* Se activa con jQuery */
	}
		.sidebarResumen .listaSeleccion{
			max-height: 35vh;
			overflow: auto;
		}
		.sidebarResumen .btnConfigurarProyecto { 
			font-size: 1rem;
			padding: 0.9vw;
		}

}



@media (orientation:portrait){
	body{ font-size: 0.6em; }
		#Staff h2{ display: none;}
		#Staff h2.aparece{    
			position: fixed;
			display: block;
			transform: rotate(-26.6deg);
			left: 0em;
			top: 0.5em;
			z-index: 1;
			width: 10em;
			text-align: left;
			font-size: 1.3em;}
		
			#Staff h2 span:first-of-type{color: white;display: block;}
		.wrapStaff{padding: 10em 2.5em 5em;}
			.wrapStaff li:last-of-type{ margin-bottom: 4em; }
	
	
		#ZonaBriefing textarea{     /*MEJORAR*/
			width: 80vw;
    		min-width: 80vw;
		}
	
	.sidebarResumen{
		
		top: auto;
		bottom: 0;
		right: 0;
		left: 0;
		width: 100vw;
		transform: none;
		z-index: 2000; /* NOTA: ya veremos si con solo el principal de la linea 203 es suficiente */
		overflow-y: auto;
        /*max-height: 15vh;*/
        display: none;		
	}
		.sidebarResumen h3 {
			font-size: 1em;
			margin-bottom: 1.5vh;
			display: inline;
		}
		.sidebarResumen .listaSeleccion{ display: none;}
		.sidebarResumen .opcionesResumen .btnPresupuesto,.sidebarResumen .opcionesResumen .btnInfo,.sidebarResumen .opcionesResumen .btnWhatsapp{
			display: none;
		}
		
		
		
	
}















@media screen and (max-width: 768px) {
    
    /* El Sidebar: Lo movemos abajo para que no estorbe */
    .sidebarResumen {
        position: fixed;
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100vw; /* Ocupa todo el ancho abajo */
        transform: none; /* Quitamos el centrado vertical */
        border-radius: 20px 20px 0 0; /* Redondeamos solo arriba */
        box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
        max-height: 40vh; /* Para que no tape toda la pantalla */
		z-index: 2000;
        background: #ffffff;
        overflow-y: auto;
    }

	/*  El Contenedor de Staff: Una sola columna limpia */
    .wrapStaff {
        flex-direction: column;
        align-items: center;
		gap:2vh;
        padding: 5vw;
        margin-bottom: 10vh; /* Espacio para que el panel inferior no tape el último freelance */
    }
    .wrapStaff li {

    }



    /*  Lista de selección interna: La hacemos horizontal o más compacta */
    .sidebarResumen .listaSeleccion {

    }
	
	
    /* El Briefing: Quitamos los márgenes laterales forzados */
    #ZonaBriefing {
		margin: 29vh auto 5vh auto; /* Centrado y con espacio abajo por el sidebar */
		padding: 5vh 10vw 20vh 10vw;
		width: 95vw;
		box-sizing: border-box;
    }	
}