/* ===== ESTILOS FORZADOS PARA EVITAR CONFLICTOS CON EL TEMA ===== */

/* Reset específico para el plugin */
.teva-kitadol-plugin *,
.teva-kitadol-plugin *::before,
.teva-kitadol-plugin *::after {
	box-sizing: border-box !important;
}

/* Estilos generales para el formulario de encuesta */
.survey-container {
	max-width: 800px !important;
	margin: 0 auto !important;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
	background: #fff !important;
	border-radius: 15px !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
	overflow: hidden !important;
	position: relative !important;
	z-index: 1 !important;
}

.survey-content {
	padding: 30px !important;
	background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
}

/* Estilos para el mensaje de bienvenida personalizado */
.welcome-user {
	background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
	border: 2px solid #007cba !important;
	border-radius: 15px !important;
	padding: 20px !important;
	margin-bottom: 25px !important;
	text-align: center !important;
	box-shadow: 0 8px 25px rgba(0, 124, 186, 0.2) !important;
	animation: slideIn 0.5s ease-out !important;
}

.welcome-user h3 {
	color: #015079 !important;
	margin: 0 0 10px 0 !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}

.welcome-user p {
	color: #015079 !important;
	margin: 0 !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	opacity: 0.9 !important;
	line-height: 1.4 !important;
}

/* NUEVO: Estilo para el header con imagen - COMPLETAMENTE RESPONSIVE */
.survey-header-image {
	position: relative !important;
	width: 100% !important;
	/* Altura calculada para proporción real 1081 × 517 */
	height: 0 !important;
	padding-bottom: 47.8% !important;
	/* (517 / 1081) * 100 = 47.8% */
	overflow: hidden !important;
	display: block !important;
	background-color: #f8f9fa !important;
}

.survey-header-image img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	/* Cambiado de 'cover' a 'contain' para mostrar toda la imagen */
	object-position: center center !important;
	display: block !important;
	transition: transform 0.3s ease !important;
}

/* Responsive específico para el header */
@media (max-width: 768px) {
	.survey-header-image {
		padding-bottom: 50% !important;
		/* Altura ligeramente mayor en móviles */
	}
}

@media (max-width: 480px) {
	.survey-header-image {
		padding-bottom: 55% !important;
		/* Aún mayor en pantallas muy pequeñas */
	}
}

/* Header optimizations para mejor responsive */
@media (max-width: 768px) {
	.header-overlay {
		padding: 30px 20px 20px;
	}

	.header-content h1 {
		font-size: 28px;
	}

	.welcome-text {
		font-size: 16px;
	}
}

@media (max-width: 480px) {
	.header-overlay {
		padding: 20px 15px 15px;
	}

	.header-content h1 {
		font-size: 24px;
	}

	.welcome-text {
		font-size: 14px;
	}
}

@media (max-width: 320px) {
	.header-overlay {
		padding: 15px 10px 10px;
	}

	.header-content h1 {
		font-size: 20px;
	}

	.welcome-text {
		font-size: 12px;
	}
}

.survey-header-image:hover img {
	transform: scale(1.02);
}

.header-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
	padding: 40px 30px 30px;
}

.header-content h1 {
	color: white;
	margin: 0;
	font-size: 36px;
	font-weight: 700;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
	letter-spacing: -0.5px;
}

.welcome-text {
	color: #f8f9fa;
	margin: 8px 0 0 0;
	font-size: 18px;
	font-weight: 300;
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

/* NUEVO: Estilos para el footer con imagen */
.survey-footer-image {
	position: relative;
	width: 100%;
	height: auto;
	/*antes era 120px */
	overflow: hidden;
	margin-top: 0;
}

.survey-footer-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.footer-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.footer-content {
	text-align: center;
}

.footer-text {
	color: white;
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.results-content {
	padding: 30px;
}

.results-content h2 {
	color: #015079;
	/* Cambiar de #2c3e50 a #015079 */
	margin-bottom: 20px;
	font-size: 28px;
	font-weight: 600;
	text-align: center;
}

.question {
	color: #015079;
	/* Cambiar de #2c3e50 a #015079 */
	margin-bottom: 25px;
	font-size: 20px;
	font-weight: 600;
	/* ANTES: con negrita */
}

.result-message {
	padding: 30px;
	border-radius: 15px;
	margin: 30px 0;
	animation: slideIn 0.3s ease-out;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.result-message.correct {
	background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
	border: 3px solid #28a745;
	color: #155724;
}

.result-message.incorrect {
	background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
	border: 3px solid #dc3545;
	color: #721c24;
}

.result-message h3 {
	margin: 0 0 15px 0;
	font-size: 28px;
	font-weight: 700;
}

.result-message p {
	margin: 10px 0;
	font-size: 16px;
	line-height: 1.5;
}

.result-message em {
	font-style: italic;
	font-weight: 600;
	font-size: 15px;
}

.retry-section {
	margin-top: 25px;
	text-align: center;
}

.retry-btn {
	display: inline-block;
	background: linear-gradient(135deg, #007cba 0%, #005a87 100%);
	color: white;
	padding: 18px 35px;
	text-decoration: none;
	border-radius: 30px;
	font-weight: 600;
	font-size: 18px;
	margin-top: 15px;
	transition: all 0.3s ease;
	box-shadow: 0 6px 20px rgba(0, 124, 186, 0.3);
}

.retry-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(0, 124, 186, 0.4);
	color: white;
	text-decoration: none;
}

/* Estilos para estadísticas compactas */
.compact-stats {
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	padding: 25px 30px;
	border-bottom: 1px solid #dee2e6;
}

.compact-stats h3 {
	color: #015079;
	/* Cambiar de #2c3e50 a #015079 */
	margin: 0 0 20px 0;
	font-size: 20px;
	text-align: center;
	font-weight: 600;
}

.horizontal-chart {
	width: 100%;
}

.chart-bar {
	width: 100%;
	height: 30px;
	background: #e9ecef;
	border-radius: 15px;
	display: flex;
	overflow: hidden;
	margin-bottom: 20px;
	box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.1);
}

.bar-segment {
	height: 100%;
	transition: all 0.8s ease;
	position: relative;
}

.bar-segment.option1 {
	background: linear-gradient(90deg, #074574, #053350);
}

.bar-segment.option2 {
	background: linear-gradient(90deg, #ff7900, #cc6100);
}

.bar-segment.option3 {
	background: linear-gradient(90deg, #a2c551, #8ba544);
}

.bar-segment.option4 {
	background: linear-gradient(90deg, #e67e22, #d35400);
}

.chart-labels {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 15px;
}

.label-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px;
	background: white;
	border-radius: 10px;
	font-size: 13px;
	border: 1px solid #dee2e6;
	min-height: 45px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.label-color {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	flex-shrink: 0;
}

.label-color.option1-color {
	background: #074574;
}

.label-color.option2-color {
	background: #ff7900;
}

.label-color.option3-color {
	background: #a2c551;
}

.label-color.option4-color {
	background: #e67e22;
}

.label-text {
	flex: 1;
	font-weight: 500;
	color: #495057;
	line-height: 1.3;
}

.label-percent {
	font-weight: bold;
	color: #015079;
	/* Cambiar de #2c3e50 a #015079 */
	font-size: 12px;
}

.attempt-info {
	background: #fff3cd;
	border: 1px solid #ffeaa7;
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 20px;
}

.survey-options {
	margin: 30px 0;
}

.survey-option {
	display: flex;
	align-items: center;
	padding: 20px;
	margin: 20px 0;
	border: 3px solid #e9ecef;
	border-radius: 15px;
	cursor: pointer;
	transition: all 0.3s ease;
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	position: relative;
	overflow: hidden;
}

.survey-option:hover {
	border-color: #007cba;
	box-shadow: 0 8px 25px rgba(0, 124, 186, 0.15);
	transform: translateY(-2px);
}

.survey-option.selected {
	border-color: #007cba;
	background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
	box-shadow: 0 8px 25px rgba(0, 124, 186, 0.2);
}

.survey-option input[type="radio"] {
	margin-right: 15px;
	width: 20px;
	height: 20px;
	accent-color: #007cba;
}

.option-text {
	flex: 1;
	font-size: 18px;
	color: #015079;
	/* Cambiar de #2c3e50 a #015079 */
	font-weight: 500;
}

.option-number {
	background: #007cba;
	color: white;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 16px;
}

.submit-section {
	text-align: center;
	margin: 40px 0;
}

.survey-submit-btn {
	background: linear-gradient(135deg, #007cba 0%, #005a87 100%);
	color: white;
	border: none;
	padding: 20px 50px;
	font-size: 20px;
	font-weight: 600;
	border-radius: 50px;
	cursor: pointer;
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 8px 25px rgba(0, 124, 186, 0.3);
}

.survey-submit-btn:hover:not(:disabled) {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(0, 124, 186, 0.4);
}

.survey-submit-btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

.submit-icon {
	transition: transform 0.3s ease;
}

.survey-submit-btn:hover .submit-icon {
	transform: rotate(15deg);
}

.session-info {
	background: #e8f5e8;
	padding: 15px;
	border-radius: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
	margin-bottom: 30px;
	font-size: 14px;
	border-left: 4px solid #28a745;
}

.session-status {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #015079;
	font-weight: 500;
}

/* También en la sección de resultados */
.results-content h2 {
	color: #015079;
	margin-bottom: 20px;
	font-size: 28px;
	font-weight: 600;
	text-align: center;
}

.question {
	color: #015079;
	margin-bottom: 25px;
	font-size: 20px;
	font-weight: 600;
	/* ANTES: con negrita */
}

.question-section h2 {
	color: #015079 !important;
	margin-bottom: 25px !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	padding: 20px 0 0 0;
}

/* Nuevo: Estilos para el estado de envío */
.vote-status {
	text-align: center;
	margin: 30px 0;
	padding: 20px;
	border-radius: 15px;
	background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
	border: 2px solid #007cba;
	animation: slideIn 0.3s ease-out;
	box-shadow: 0 8px 25px rgba(0, 124, 186, 0.2);
}

.status-content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-size: 18px;
	font-weight: 600;
	color: #015079;
}

.status-icon {
	animation: spin 1s linear infinite;
	color: #007cba;
}

/* Estado de éxito */
.vote-status.success {
	background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
	border-color: #28a745;
	box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
}

.vote-status.success .status-content {
	color: #155724;
}

.vote-status.success .status-icon {
	animation: checkPulse 0.6s ease-out;
	color: #28a745;
}

/* Estado de error */
.vote-status.error {
	background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
	border-color: #dc3545;
	box-shadow: 0 8px 25px rgba(220, 53, 69, 0.3);
}

.vote-status.error .status-content {
	color: #721c24;
}

.vote-status.error .status-icon {
	animation: shake 0.5s ease-in-out;
	color: #dc3545;
}

/* Animaciones */
@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes checkPulse {
	0% {
		transform: scale(0.8);
	}

	50% {
		transform: scale(1.2);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes shake {

	0%,
	100% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-5px);
	}

	75% {
		transform: translateX(5px);
	}
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Deshabilitar opciones durante el envío */
.survey-options.disabled .survey-option {
	opacity: 0.6;
	pointer-events: none;
	cursor: not-allowed;
	filter: grayscale(20%);
}

.survey-options.disabled .survey-option.selected {
	opacity: 0.8;
	border-color: #007cba;
	background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
	filter: none;
}

/* Efectos especiales para la respuesta enviada */
.vote-status.success .status-text {
	background: linear-gradient(45deg, #155724, #28a745);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-weight: 700;
}

/* ===== MOBILE RESPONSIVE STYLES ===== */

/* Solo media queries esenciales para el header */
@media (max-width: 768px) {
	.survey-header-image {
		padding-bottom: 50% !important;
	}
}

@media (max-width: 480px) {
	.survey-header-image {
		padding-bottom: 55% !important;
	}
}

/* Estilos para el mensaje de agradecimiento */
.thankyou-message {
	text-align: center;
	padding: 40px 20px;
	background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
	border-radius: 15px;
	margin: 20px 0;
	box-shadow: 0 8px 25px rgba(40, 167, 69, 0.2);
	animation: slideIn 0.5s ease-out;
}

.thankyou-message h2 {
	color: #155724;
	margin-bottom: 15px;
	font-size: 28px;
}

.thankyou-message p {
	color: #155724;
	margin: 10px 0;
}

/* Footer para el formulario de encuesta */
.survey-footer-image {
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
	margin-top: 0;
}

.survey-footer-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.survey-footer-image a {
	display: block;
	width: 100%;
	height: 100%;
}

/* Footer para resultados (consistencia) */
.results-footer-image {
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
	margin-top: 0;
}

.results-footer-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	transition: transform 0.3s ease;
}

.results-footer-image:hover img {
	transform: scale(1.02);
}

.results-footer-image a {
	display: block;
	text-decoration: none;
}

/* Mensaje de agradecimiento después de votar */
.thankyou-message {
	background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%) !important;
	border: 3px solid #28a745 !important;
	border-radius: 15px !important;
	margin: 20px 0 !important;
	animation: slideIn 0.5s ease-out !important;
	box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3) !important;
}

.thankyou-message h2 {
	color: #28a745 !important;
	font-size: 2em !important;
	margin: 0 0 10px 0 !important;
	font-weight: 700 !important;
}

.thankyou-message p {
	font-size: 1.2em !important;
	color: #155724 !important;
	margin: 5px 0 !important;
	line-height: 1.4 !important;
}

/* Estilos forzados para el header - mayor especificidad */
.survey-container .survey-header-image {
	position: relative !important;
	width: 100% !important;
	height: 0 !important;
	padding-bottom: 47.9% !important;
	/* Proporción exacta de la imagen 2251 × 1078 */
	overflow: hidden !important;
	display: block !important;
	background-color: #f8f9fa !important;
	margin: 0 !important;
}

.survey-container .survey-header-image img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	/* Muestra toda la imagen sin recortar */
	object-position: center center !important;
	display: block !important;
	transition: transform 0.3s ease !important;
	max-width: none !important;
	border: none !important;
	box-shadow: none !important;
	filter: none !important;
}

/* Responsive para chart-labels - UNIFICADO para página de encuesta */
@media (max-width: 768px) {
	.chart-labels {
		grid-template-columns: 1fr !important;
		gap: 10px !important;
	}

	.label-item {
		font-size: 12px !important;
		padding: 10px !important;
		min-height: 40px !important;
	}
}

@media (max-width: 480px) {
	.chart-labels {
		grid-template-columns: 1fr !important;
		gap: 8px !important;
	}

	.label-item {
		font-size: 11px !important;
		padding: 8px !important;
		min-height: 35px !important;
	}

	.chart-bar {
		height: 25px !important;
	}
}

@media (max-width: 400px) {
	.chart-labels {
		grid-template-columns: 1fr !important;
		gap: 6px !important;
	}

	.label-item {
		font-size: 10px !important;
		padding: 6px !important;
		min-height: 30px !important;
	}

	.chart-bar {
		height: 22px !important;
	}
}

@media (max-width: 320px) {
	.chart-labels {
		grid-template-columns: 1fr !important;
		gap: 4px !important;
	}

	.label-item {
		font-size: 9px !important;
		padding: 5px !important;
		min-height: 28px !important;
	}

	.chart-bar {
		height: 20px !important;
	}
}