/* ==========================================================
   Cotizador ClimaCaribe — estilos estilo MEDVi
   Usa la paleta real de diseño de ClimaCaribe (design tokens)
   ========================================================== */

:root {
	--colors-primary-100: #fef0ec;
	--colors-primary-200: #ffdcd1;
	--colors-primary-500: #ff784f;
	--colors-primary-600: #fa5320;
	--colors-primary-700: #d44519;
	--colors-secondary-100: #f2f9ff;
	--colors-secondary-200: #e6f4ff;
	--colors-secondary-600: #0f8df4;
	--colors-secondary-700: #0578d6;
	--colors-neutral-050: #fcfcfd;
	--colors-neutral-100: #f7f9fa;
	--colors-neutral-200: #eef0f3;
	--colors-neutral-300: #dfe3e8;
	--colors-neutral-500: #a1a7ad;
	--colors-neutral-600: #707880;
	--colors-neutral-900: #28323b;
	--colors-success-600: #24a522;
	--colors-danger-600: #ee413f;
	--colors-warning-100: #fffceb;
	--colors-warning-300: #ffefa1;
	--colors-warning-500: #f6d028;
	--colors-warning-600: #e0b115;
	--colors-warning-800: #8e6506;
	--colors-emerald-100: #d0fae5;
	--colors-emerald-600: #009966;
	--colors-cardinal-100: #ffe4e6;
	--colors-cardinal-200: #ffb8c0;
	--colors-cardinal-500: #ff2056;
	--colors-cardinal-700: #c70036;
	--colors-violette-100: #ede9fe;
	--colors-violette-500: #7f22fe;
	--colors-cyan-100: #cefafe;
	--colors-cyan-700: #007595;
	--radius-sm: 0.4rem;
	--radius-md: 0.8rem;
	--radius-lg: 1.6rem;
	--radius-full: 99.9rem;
}

/* Prefijo #ccb-cotizador-root en todo para ganarle en especificidad al CSS del tema */
#ccb-cotizador-root {
	--ccb-primario: var(--colors-primary-600);
	--ccb-primario-claro: var(--colors-primary-100);
	--ccb-secundario: var(--colors-secondary-600);
	--ccb-secundario-claro: var(--colors-secondary-100);
	--ccb-texto: var(--colors-neutral-900);
	--ccb-texto-secundario: var(--colors-neutral-600);
	--ccb-borde: var(--colors-neutral-300);
	--ccb-verde-ok: var(--colors-success-600);

	max-width: 520px !important;
	margin: 0 auto !important;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	color: var(--ccb-texto) !important;
	padding: 16px !important;
	box-sizing: border-box !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
}
#ccb-cotizador-root * { box-sizing: border-box; font-family: inherit; }
#ccb-cotizador-root img { max-width: 100%; }

/* Header con logo real */
#ccb-cotizador-root .ccb-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
#ccb-cotizador-root .ccb-logo-img { height: 34px !important; width: auto !important; }
#ccb-cotizador-root .ccb-reseñas { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ccb-texto-secundario); font-weight: 500; }
#ccb-cotizador-root .ccb-google-logo { height: 20px !important; width: auto !important; }
#ccb-cotizador-root .ccb-estrellas { color: var(--colors-warning-500); }

/* Barra de progreso segmentada */
#ccb-cotizador-root .ccb-progreso { display: flex; gap: 6px; margin-bottom: 12px; }
#ccb-cotizador-root .ccb-progreso-segmento { flex: 1; height: 5px; border-radius: var(--radius-full); background: var(--ccb-borde); overflow: hidden; }
#ccb-cotizador-root .ccb-progreso-segmento.completo { background: var(--ccb-primario); }
#ccb-cotizador-root .ccb-progreso-segmento.activo { background: linear-gradient(90deg, var(--ccb-primario) 50%, var(--ccb-borde) 50%); }

#ccb-cotizador-root .ccb-volver { background: none; border: none; font-size: 20px; cursor: pointer; padding: 4px 8px; margin-bottom: 8px; color: var(--ccb-texto); }

#ccb-cotizador-root .ccb-paso { animation: ccb-fade .25s ease; }
@keyframes ccb-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

#ccb-cotizador-root .ccb-titulo { font-size: 26px !important; font-weight: 800 !important; line-height: 1.25 !important; margin: 14px 0 10px !important; letter-spacing: -0.01em; color: var(--ccb-texto); }
#ccb-cotizador-root .ccb-titulo-acento { color: var(--ccb-primario); }
#ccb-cotizador-root .ccb-titulo-sub { font-size: 15px; font-weight: 600; margin: 4px 0 2px; }
#ccb-cotizador-root .ccb-subtitulo { font-size: 15px !important; color: var(--ccb-texto-secundario) !important; margin-bottom: 16px !important; }

/* Imagen hero (portada) */
#ccb-cotizador-root .ccb-hero { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 4px; aspect-ratio: 16/9; }
#ccb-cotizador-root .ccb-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Pastilla informativa (como "MEDVi QUAD. Arousal & performance. In minutes") */
#ccb-cotizador-root .ccb-pastilla {
	display: inline-block; background: var(--ccb-secundario-claro); color: var(--colors-secondary-700);
	font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: var(--radius-full); margin: 6px 0 12px;
}

/* Pantalla de valor estilo MEDVi (etiqueta de marca + pastilla + estadísticas grandes) */
#ccb-cotizador-root .ccb-marca-label { font-size: 13px; color: var(--ccb-texto-secundario); font-weight: 600; margin: 8px 0 10px; }
#ccb-cotizador-root .ccb-pastilla-centrada {
	display: inline-block; background: linear-gradient(135deg, var(--colors-secondary-600), var(--colors-secondary-700));
	color: #fff; font-size: 14px; font-weight: 700; padding: 8px 20px; border-radius: var(--radius-full); margin-bottom: 28px;
}
#ccb-cotizador-root .ccb-stat-grande { font-size: 40px; font-weight: 800; color: var(--colors-neutral-900); line-height: 1.1; }
#ccb-cotizador-root .ccb-stat-label-grande { font-size: 14px; color: var(--ccb-texto); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin-top: 4px; }
#ccb-cotizador-root .ccb-stat-desc { font-size: 14px; color: var(--ccb-texto-secundario); font-style: italic; margin: 8px 0 0; }
#ccb-cotizador-root .ccb-divisor { border: none; border-top: 1px solid var(--ccb-borde); margin: 26px auto; width: 60%; }
#ccb-cotizador-root .ccb-sello-confianza { font-size: 13px; color: var(--ccb-texto-secundario); margin: 24px 0 20px; display: flex; align-items: center; justify-content: center; gap: 6px; }
#ccb-cotizador-root .ccb-sello-confianza i { color: var(--ccb-verde-ok); }