/**
 * Gloripan Calculadora - Corporate Styles
 * Colors: #C80000, #E31B23, #F8C128, #EAE1D2, #F5F5F5, #333333
 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */
.gloripan-calc {
	--gp-red-primary: #C80000;
	--gp-red-secondary: #E31B23;
	--gp-yellow: #F8C128;
	--gp-beige: #EAE1D2;
	--gp-bg: #F5F5F5;
	--gp-text: #333333;
	--gp-white: #FFFFFF;
	--gp-radius: 8px;
	--gp-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	--gp-transition: 0.25s ease;
}

/* ==========================================================================
   Calculator Container
   ========================================================================== */
.gloripan-calc {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background: var(--gp-bg);
	color: var(--gp-text);
	max-width: 1100px;
	margin: 0 auto;
	padding: 0;
	border-radius: var(--gp-radius);
	overflow: hidden;
	box-shadow: var(--gp-shadow);
	line-height: 1.5;
}

.gloripan-calc *,
.gloripan-calc *::before,
.gloripan-calc *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   Header
   ========================================================================== */
.gloripan-calc__header {
	background: linear-gradient(135deg, var(--gp-red-primary) 0%, var(--gp-red-secondary) 100%);
	color: var(--gp-white);
	padding: 28px 32px;
	text-align: center;
}

.gloripan-calc__logo {
	margin-bottom: 12px;
}

.gloripan-calc .gloripan-calc__logo-img,
.elementor .gloripan-calc .gloripan-calc__logo-img {
	display: block;
	margin: 0 auto;
	max-width: 280px !important;
	width: 280px;
	height: auto;
}

.gloripan-calc__title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--gp-white);
}

.gloripan-calc__subtitle {
	font-size: 0.95rem;
	margin: 0;
	opacity: 0.9;
}

/* ==========================================================================
   Form Panel & Blocks
   ========================================================================== */
.gloripan-calc__form-panel {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 24px 32px;
}

.gloripan-calc__blocks-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.gloripan-calc__block {
	background: var(--gp-white);
	border-radius: var(--gp-radius);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	padding: 20px;
}

.gloripan-calc__block-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--gp-red-primary);
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--gp-yellow);
}

/* ==========================================================================
   Process Instructions
   ========================================================================== */
.gloripan-calc__block--guide {
	padding: 24px;
}

.gloripan-calc__guide-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--gp-red-primary);
	margin: 0 0 24px;
	padding-bottom: 12px;
	border-bottom: 3px solid var(--gp-yellow);
	text-align: center;
	text-transform: uppercase;
}

.gloripan-calc__guide-sections {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.gloripan-calc__guide-subsection--process + .gloripan-calc__guide-subsection--process {
	padding-top: 4px;
	border-top: 1px solid rgba(200, 0, 0, 0.08);
}

.gloripan-calc__guide-subsection--benefits {
	padding-top: 4px;
	border-top: 1px solid rgba(200, 0, 0, 0.08);
}

.gloripan-calc__block--process,
.gloripan-calc__guide-subsection--process {
	padding-bottom: 0;
}

.gloripan-calc__process-carousel {
	position: relative;
	--process-visible-count: 3;
}

.gloripan-calc__process-viewport {
	overflow: hidden;
}

.gloripan-calc__process-track {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	transition: transform var(--gp-transition);
	will-change: transform;
}

.gloripan-calc__process-step {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 0 0 calc(100% / var(--process-visible-count));
	min-width: 0;
	background: var(--gp-bg);
	border: 1px solid rgba(200, 0, 0, 0.08);
	border-radius: var(--gp-radius);
	padding: 14px;
	min-height: 100%;
	box-sizing: border-box;
}

.gloripan-calc__process-step-media {
	width: 50%;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
	border-radius: calc(var(--gp-radius) - 2px);
	overflow: hidden;
	background: var(--gp-beige);
	flex-shrink: 0;
}

.gloripan-calc__process-step-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gloripan-calc__process-step-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(145deg, var(--gp-beige) 0%, #f7efe4 100%);
	color: var(--gp-red-primary);
	font-size: 1rem;
	font-weight: 700;
}

.gloripan-calc__process-step-body {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.gloripan-calc__process-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #C80000;
	color: #F8C128;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
}

.gloripan-calc__process-step-text {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.45;
	color: var(--gp-text);
}

.gloripan-calc__process-carousel-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 18px;
}

.gloripan-calc__process-carousel-controls[hidden] {
	display: none !important;
}

.gloripan-calc__process-carousel-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: #C80000;
	color: #F8C128;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background var(--gp-transition), transform var(--gp-transition);
}

.gloripan-calc__process-carousel-btn:hover,
.gloripan-calc__process-carousel-btn:focus-visible {
	background: var(--gp-red-secondary);
	outline: none;
	transform: scale(1.05);
}

.gloripan-calc__process-carousel-dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.gloripan-calc__process-carousel-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(200, 0, 0, 0.25);
	cursor: pointer;
	transition: background var(--gp-transition), transform var(--gp-transition);
}

.gloripan-calc__process-carousel-dot.is-active {
	background: #C80000;
	transform: scale(1.15);
}

.gloripan-calc__process-benefit {
	background: var(--gp-beige);
	border-left: 4px solid var(--gp-yellow);
	border-radius: var(--gp-radius);
	padding: 16px 18px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.gloripan-calc__process-benefit-text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--gp-text);
}

.gloripan-calc__process-benefit-text strong {
	color: var(--gp-red-primary);
}

.gloripan-calc__fields--contact {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

/* ==========================================================================
   Grid Layout (legacy)
   ========================================================================== */
.gloripan-calc__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	padding: 24px 32px;
}

/* ==========================================================================
   Sections
   ========================================================================== */
.gloripan-calc__section {
	padding: 24px 32px;
}

.gloripan-calc__section--cliente,
.gloripan-calc__section--gloripan {
	background: var(--gp-white);
	border-radius: var(--gp-radius);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	padding: 20px;
}

.gloripan-calc__section-title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--gp-red-primary);
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 3px solid var(--gp-yellow);
}

.gloripan-calc__section-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--gp-red-primary);
	color: var(--gp-white);
	border-radius: 50%;
	font-size: 0.9rem;
	font-weight: 700;
	flex-shrink: 0;
}

.gloripan-calc__section-note {
	font-size: 0.85rem;
	color: #666;
	margin: -12px 0 16px;
	font-style: italic;
}

/* ==========================================================================
   Form Fields
   ========================================================================== */
.gloripan-calc__fields {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.gloripan-calc__field label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--gp-text);
}

.gloripan-calc__field-hint {
	display: block;
	margin: -2px 0 6px;
	font-size: 0.76rem;
	font-weight: 400;
	font-style: italic;
	color: #777;
	line-height: 1.35;
}

.gloripan-calc__input,
.gloripan-calc__select {
	width: 100%;
	padding: 10px 14px;
	border: 2px solid var(--gp-beige);
	border-radius: 6px;
	font-size: 1rem;
	color: var(--gp-text);
	background: var(--gp-white);
	transition: border-color var(--gp-transition), box-shadow var(--gp-transition);
}

.gloripan-calc__input:focus,
.gloripan-calc__select:focus {
	outline: none;
	border-color: var(--gp-red-secondary);
	box-shadow: 0 0 0 3px rgba(200, 0, 0, 0.12);
}

.gloripan-calc__input--readonly {
	background: var(--gp-beige);
	cursor: not-allowed;
	font-weight: 700;
	color: var(--gp-red-primary);
}

.gloripan-calc__input--invalid {
	border-color: #c62828;
	box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12);
}

.gloripan-calc__field-error {
	display: block;
	margin-top: 4px;
	color: #c62828;
	font-size: 0.82rem;
}

.gloripan-calc__input-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.gloripan-calc__input-group .gloripan-calc__input {
	flex: 1;
}

.gloripan-calc__prefix {
	font-weight: 700;
	color: var(--gp-red-primary);
	font-size: 1.1rem;
}

.gloripan-calc__unit {
	font-size: 0.8rem;
	color: #666;
	white-space: nowrap;
	flex-shrink: 0;
}

/* ==========================================================================
   Gloripan Parameters (Read-only)
   ========================================================================== */
.gloripan-calc__params {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.gloripan-calc__param {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 16px;
	background: var(--gp-beige);
	border-radius: 6px;
	border-left: 4px solid var(--gp-red-primary);
}

.gloripan-calc__param-label {
	font-size: 0.875rem;
	font-weight: 600;
}

.gloripan-calc__param-value {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--gp-red-primary);
}

/* ==========================================================================
   Results Table
   ========================================================================== */
.gloripan-calc__section--results {
	background: var(--gp-white);
}

.gloripan-calc__table-wrapper {
	overflow-x: auto;
	border-radius: var(--gp-radius);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.gloripan-calc__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.gloripan-calc__table thead {
	background: var(--gp-red-primary);
	color: var(--gp-white);
}

.gloripan-calc__table th {
	padding: 14px 16px;
	text-align: center;
	font-weight: 700;
	white-space: nowrap;
}

.gloripan-calc__table th:first-child {
	text-align: left;
}

.gloripan-calc__table td {
	padding: 12px 16px;
	text-align: right;
	border-bottom: 1px solid var(--gp-beige);
}

.gloripan-calc__table td:first-child {
	text-align: left;
	font-weight: 600;
}

.gloripan-calc__table tbody tr:nth-child(even) {
	background: rgba(234, 225, 210, 0.35);
}

.gloripan-calc__table tbody tr:hover {
	background: rgba(248, 193, 40, 0.15);
}

.gloripan-calc__table .col-gloripan {
	color: var(--gp-red-primary);
	font-weight: 700;
}

.gloripan-calc__table .col-diferencia {
	font-weight: 600;
}

.gloripan-calc__table .col-diferencia.positive {
	color: #2e7d32;
}

.gloripan-calc__table .col-diferencia.negative {
	color: var(--gp-red-secondary);
}

/* ==========================================================================
   Summary Cards
   ========================================================================== */
.gloripan-calc__section--summary {
	background: var(--gp-beige);
}

.gloripan-calc__summary-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.gloripan-calc__summary-card {
	background: var(--gp-white);
	border-radius: var(--gp-radius);
	padding: 20px;
	text-align: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	border-top: 4px solid var(--gp-red-primary);
	transition: transform var(--gp-transition);
}

.gloripan-calc__summary-card:hover {
	transform: translateY(-2px);
}

.gloripan-calc__summary-card--highlight {
	background: var(--gp-red-primary);
	border-top-color: var(--gp-yellow);
}

.gloripan-calc__summary-card--highlight .gloripan-calc__summary-label,
.gloripan-calc__summary-card--highlight .gloripan-calc__summary-value {
	color: var(--gp-white);
}

.gloripan-calc__summary-label {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #666;
	margin-bottom: 8px;
}

.gloripan-calc__summary-value {
	display: block;
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--gp-red-primary);
}

.gloripan-calc__summary-card--highlight .gloripan-calc__summary-value {
	color: var(--gp-yellow);
	font-size: 2rem;
}

/* ==========================================================================
   Chart
   ========================================================================== */
.gloripan-calc__section--chart {
	background: var(--gp-red-primary);
	padding: 24px 32px 32px;
}

.gloripan-calc__section--chart .gloripan-calc__section-title {
	color: var(--gp-white);
	border-bottom-color: var(--gp-yellow);
}

.gloripan-calc__chart-container {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--gp-red-primary);
	border-radius: var(--gp-radius);
	padding: 16px;
	max-width: 720px;
	margin: 0 auto;
	max-height: 350px;
	position: relative;
}

.gloripan-calc__chart-container canvas {
	display: block;
	width: 100% !important;
	max-width: 640px;
	max-height: 320px;
	margin: 0 auto;
}

/* ==========================================================================
   Download Section
   ========================================================================== */
.gloripan-calc__section--download {
	text-align: center;
	background: var(--gp-white);
	border-top: 1px solid var(--gp-beige);
	padding-bottom: 32px;
}

.gloripan-calc__download-note {
	margin: 0 auto 12px;
	max-width: 520px;
	font-size: 0.95rem;
	color: #666;
}

.gloripan-calc__consent-note {
	margin: 0 auto 20px;
	max-width: 560px;
	font-size: 0.85rem;
	color: #777;
	font-style: italic;
	line-height: 1.45;
}

.gloripan-calc__download-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.gloripan-calc__download-hint {
	margin: 14px 0 0;
	font-size: 0.85rem;
	color: #888;
}

.gloripan-calc__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	font-size: 1rem;
	font-weight: 700;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: background var(--gp-transition), transform var(--gp-transition);
}

.gloripan-calc__btn--pdf {
	background: var(--gp-red-primary);
	color: var(--gp-white);
}

.gloripan-calc__btn--pdf:hover {
	background: var(--gp-red-secondary);
	transform: translateY(-1px);
}

.gloripan-calc__btn--pdf:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.gloripan-calc__loading {
	display: none;
	width: 24px;
	height: 24px;
	border: 3px solid var(--gp-beige);
	border-top-color: var(--gp-red-primary);
	border-radius: 50%;
	animation: gloripan-spin 0.8s linear infinite;
}

.gloripan-calc__loading.is-active {
	display: inline-block;
}

@keyframes gloripan-spin {
	to { transform: rotate(360deg); }
}

/* ==========================================================================
   Admin Styles
   ========================================================================== */
.gloripan-admin-wrap .gloripan-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-end;
	margin: 20px 0;
	padding: 16px;
	background: #fff;
	border: 1px solid #ccd0d4;
	border-radius: 4px;
}

.gloripan-admin-wrap .gloripan-filters label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-weight: 600;
}

.gloripan-admin-wrap .gloripan-history-table {
	margin-top: 16px;
}

/* ==========================================================================
   Responsive - Tablet
   ========================================================================== */
@media (max-width: 900px) {
	.gloripan-calc__form-panel {
		padding: 16px;
	}

	.gloripan-calc__blocks-row,
	.gloripan-calc__fields--contact {
		grid-template-columns: 1fr;
	}

	.gloripan-calc__grid {
		grid-template-columns: 1fr;
		padding: 16px;
	}

	.gloripan-calc__summary-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.gloripan-calc__section {
		padding: 16px;
	}

	.gloripan-calc__header {
		padding: 20px 16px;
	}

	.gloripan-calc__guide-title {
		font-size: 1.1rem;
	}

	.gloripan-calc__process-step {
		padding: 12px;
	}
}

/* ==========================================================================
   Responsive - Mobile
   ========================================================================== */
@media (max-width: 600px) {
	.gloripan-calc__summary-grid {
		grid-template-columns: 1fr;
	}

	.gloripan-calc__title {
		font-size: 1.2rem;
	}

	.gloripan-calc__block--guide {
		padding: 16px;
	}

	.gloripan-calc__guide-title {
		font-size: 1rem;
		line-height: 1.35;
	}

	.gloripan-calc__guide-subsection .gloripan-calc__block-title {
		text-align: center;
		font-size: 0.92rem;
		line-height: 1.4;
	}

	.gloripan-calc__process-step {
		align-items: center;
		padding: 16px 12px;
	}

	.gloripan-calc__process-step-media {
		width: min(65vw, 220px);
	}

	.gloripan-calc__process-step-body {
		flex-direction: column;
		align-items: center;
		text-align: center;
		width: 100%;
	}

	.gloripan-calc__process-step-text {
		font-size: 0.88rem;
		line-height: 1.5;
		text-align: center;
	}

	.gloripan-calc__process-benefit-text {
		text-align: center;
		font-size: 0.88rem;
		line-height: 1.5;
	}

	.gloripan-calc .gloripan-calc__logo-img,
	.elementor .gloripan-calc .gloripan-calc__logo-img {
		width: 220px;
		max-width: 220px !important;
	}

	.gloripan-calc__summary-value {
		font-size: 1.3rem;
	}

	.gloripan-calc__summary-card--highlight .gloripan-calc__summary-value {
		font-size: 1.6rem;
	}

	.gloripan-calc__table {
		font-size: 0.8rem;
	}

	.gloripan-calc__table th,
	.gloripan-calc__table td {
		padding: 8px 10px;
	}

	.gloripan-calc__input-group {
		flex-wrap: wrap;
	}

	.gloripan-calc__btn {
		width: 100%;
		justify-content: center;
	}

	.gloripan-calc__download-actions {
		padding: 16px;
	}
}