@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body{
    font-family: 'Montserrat', sans-serif;
}

.btn-flotante {
	font-size: 30px; /* Cambiar el tamaño de la tipografia */
	text-transform: uppercase; /* Texto en mayusculas */
	font-weight: bold; /* Fuente en negrita o bold */
	color: #04a0fa; /* Color del texto */
	border-radius: 5px; /* Borde del boton */
	padding: 18px 30px; /* Relleno del boton */
	position: fixed;
	top: 125px;
	right: 40px;
	z-index: 100000;
	text-decoration: dashed;
}
.btn-flotante:hover{
	color: green;
}
.btn-flotante-save {
	font-size: 30px; /* Cambiar el tamaño de la tipografia */
	text-transform: uppercase; /* Texto en mayusculas */
	font-weight: bold; /* Fuente en negrita o bold */
	color: #1c5c4e; /* Color del texto */
	border-radius: 5px; /* Borde del boton */
	padding: 18px 30px; /* Relleno del boton */
	position: fixed;
	top: 70px;
	right: 40px;
	z-index: 100000;
	cursor: pointer;
}
.btn-flotante-save:hover{
    color: green;
}
@media only screen and (max-width: 600px) {
 	.btn-flotante {
		font-size: 14px;
		padding: 12px 20px;
		top: 120px;
		right: 20px;
	}
	.btn-flotante-save {
		font-size: 14px;
		padding: 12px 20px;
		top: 80px;
		right: 20px;
	}
} 

.subp{
	padding-left: 53px;
 }

.oculto{
  display: none;
}

.container-fluid .container{
    /* border: 2px solid black; */
    padding-top: 50px;
	height: 100%;
    background: whitesmoke;
}

.cpe{
    /* border: 2px solid black; */
    padding-top: 20px;
    background: whitesmoke;
	height: 100%;
}
.cpe fieldset,
legend {
    padding: 0;
    border: 0
}

.cpe fieldset {
    margin: 0;
    min-width: 0;
    /* display: none; */
}

.cpe legend {
    display: block;
    width: 100%;
    margin-bottom: 25px;
    font-size: 27px;
    line-height: inherit;
    border-bottom: 1px solid #e5e5e5
}


.form-group>label {
    font-weight: 500 !important;
}

/* Contenedor de las barras para dar espacio al logo */
.barras {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre logo y barras */
}

.logo-bar {
    height: 45px; /* Ajusta según tu logo */
    width: auto;
}

/* Fondo de las barras */
.progress {
    background-color: #E3F2FD !important;
    border: none;
    height: 22px !important;
    border-radius: 20px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    margin-bottom: 8px !important;
}

/* Barra General - Azul CENEVA */
#pbini {
    background-color: #0D47A1 !important;
    background-image: linear-gradient(
        45deg, 
        rgba(255,255,255,.15) 25%, 
        transparent 25%, 
        transparent 50%, 
        rgba(255,255,255,.15) 50%, 
        rgba(255,255,255,.15) 75%, 
        transparent 75%, 
        transparent
    ) !important;
    background-size: 40px 40px !important; 
    animation: progress-bar-stripes-smooth 1s linear infinite;
    transition: width 1s ease-in-out; /* Esta es para cuando cambia el % */
    min-width: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}


/* Barra de Sección - Naranja CENEVA Animado */
#sb {
    background-color: #FF8C00 !important;
    background-image: linear-gradient(
        45deg, 
        rgba(255,255,255,.2) 25%, 
        transparent 25%, 
        transparent 50%, 
        rgba(255,255,255,.2) 50%, 
        rgba(255,255,255,.2) 75%, 
        transparent 75%, 
        transparent
    ) !important;
    background-size: 40px 40px !important;
    animation: progress-bar-stripes-smooth 1s linear infinite;
    transition: width 1s ease-in-out;
	min-width: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

@keyframes progress-bar-stripes-smooth {
    from { background-position: 0 0; }
    to { background-position: 40px 0; } /* Debe coincidir con el width de background-size */
}

.navbarx {
    position: fixed; /* Esto hace que se quede pegado */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Asegura que esté por encima de las preguntas */
    background-color: white; /* Fondo sólido para que no se trasluzcan las letras */
    padding: 10px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Una sombra sutil para dar profundidad */
}

/* IMPORTANTE: Ajuste para el cuerpo de la encuesta */
.cpe {
    /* Como la barra ahora flota, necesitamos empujar el contenido hacia abajo 
       para que la barra no tape la primera pregunta */
    margin-top: 90px !important; 
}