/* MyRod-IA — Frontend Wizard
 * Tokens en variables CSS para que el White Label solo tenga que
 * sobreescribir estos valores (inline, por tenant) sin tocar el resto.
 */
.projectia-wizard-root {
	--pia-primary: #255123;
	--pia-primary-dark: #16330f;
	--pia-bg: #FBFAF6;
	--pia-surface: #FFFFFF;
	--pia-accent: #C9A227;
	--pia-ink: #1C2019;
	--pia-ink-soft: #5B6158;
	--pia-border: #E4E0D5;
	--pia-radius: 4px;
	--pia-verde: #227722;
	--pia-amarillo: #a86b00;
	--pia-rojo: #a83232;

	font-family: 'Inter', system-ui, sans-serif;
	color: var(--pia-ink);
	max-width: 640px;
	margin: 0 auto;
}

.projectia-wizard-root * { box-sizing: border-box; }

.pia-wizard {
	background: var(--pia-surface);
	border: 1px solid var(--pia-border);
	border-radius: var(--pia-radius);
	box-shadow: 0 1px 2px rgba(28,32,25,0.04), 0 12px 32px -12px rgba(28,32,25,0.12);
	overflow: hidden;
}

.pia-header { padding: 28px 32px 20px; border-bottom: 1px solid var(--pia-border); }

.pia-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.pia-brand-mark {
	width: 30px; height: 30px; border: 1.5px solid var(--pia-primary); border-radius: 2px;
	display: flex; align-items: center; justify-content: center;
	font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 15px; color: var(--pia-primary);
}
.pia-brand-name { font-family: 'Fraunces', Georgia, serif; font-size: 15px; color: var(--pia-ink); }
.pia-brand-name b { color: var(--pia-primary); font-weight: 600; }

.pia-progress-track { display: flex; gap: 6px; }
.pia-progress-seg { flex: 1; height: 3px; background: var(--pia-border); border-radius: 2px; overflow: hidden; position: relative; }
.pia-progress-seg.done { background: var(--pia-primary); }
.pia-progress-seg.active::after { content: ''; position: absolute; inset: 0; background: var(--pia-primary); width: 45%; }

.pia-progress-label { margin-top: 10px; font-size: 12px; color: var(--pia-ink-soft); display: flex; justify-content: space-between; }
.pia-progress-label .pia-step-tag { font-variant-numeric: tabular-nums; color: var(--pia-primary); font-weight: 600; }

.pia-body { padding: 36px 32px 28px; min-height: 220px; }

.pia-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--pia-accent); font-weight: 600; margin-bottom: 8px; }
.pia-title { font-family: 'Fraunces', Georgia, serif; font-size: 24px; font-weight: 500; line-height: 1.25; margin: 0 0 8px; }
.pia-subtitle { font-size: 14px; color: var(--pia-ink-soft); margin: 0 0 26px; line-height: 1.5; }

.pia-field { margin-bottom: 18px; }
.pia-field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.pia-field input, .pia-field select {
	width: 100%; padding: 11px 13px; border: 1px solid var(--pia-border); border-radius: var(--pia-radius);
	font-family: 'Inter', sans-serif; font-size: 14px; background: var(--pia-surface); color: var(--pia-ink);
	transition: border-color .15s ease;
}
.pia-field input:focus, .pia-field select:focus {
	outline: none; border-color: var(--pia-primary); box-shadow: 0 0 0 3px rgba(37,81,35,0.12);
}
.pia-field .pia-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.pia-field .pia-check input { width: auto; }

.pia-row { display: flex; gap: 14px; flex-wrap: wrap; }
.pia-row .pia-field { flex: 1; min-width: 140px; }

.pia-footer {
	padding: 20px 32px; display: flex; justify-content: space-between; align-items: center;
	border-top: 1px solid var(--pia-border); background: #FCFBF8;
}
.pia-btn {
	font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; padding: 11px 22px;
	border-radius: var(--pia-radius); border: none; cursor: pointer; transition: transform .1s ease, opacity .15s ease;
}
.pia-btn:active { transform: scale(0.98); }
.pia-btn-primary { background: var(--pia-primary); color: #fff; }
.pia-btn-primary:hover { background: var(--pia-primary-dark); }
.pia-btn-primary:disabled { opacity: 0.5; cursor: default; }
.pia-btn-ghost { background: transparent; color: var(--pia-ink-soft); }
.pia-btn-ghost:hover { color: var(--pia-ink); }
.pia-btn-ghost:disabled { opacity: 0.35; cursor: default; }

.pia-disclaimer { font-size: 11px; color: var(--pia-ink-soft); text-align: center; padding: 14px 32px 22px; line-height: 1.5; }

.pia-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pia-type-card {
	border: 1px solid var(--pia-border); border-radius: var(--pia-radius); padding: 14px 10px;
	text-align: center; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.pia-type-card:hover { border-color: var(--pia-primary); }
.pia-type-card.selected { border-color: var(--pia-primary); background: rgba(37,81,35,0.06); color: var(--pia-primary-dark); }

.pia-municipio-status { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 6px; }
.pia-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.pia-dot.ok { background: var(--pia-verde); }
.pia-dot.warn { background: var(--pia-amarillo); }

.pia-semaforo-list { display: flex; flex-direction: column; gap: 12px; }
.pia-semaforo-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--pia-border); border-radius: var(--pia-radius); }
.pia-semaforo-item .pia-semaforo-nombre { font-size: 13.5px; font-weight: 500; }
.pia-semaforo-badge { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: .04em; }
.pia-semaforo-badge.verde { background: rgba(34,119,34,0.12); color: var(--pia-verde); }
.pia-semaforo-badge.amarillo { background: rgba(168,107,0,0.12); color: var(--pia-amarillo); }
.pia-semaforo-badge.rojo { background: rgba(168,50,50,0.12); color: var(--pia-rojo); }

.pia-indice-circulo {
	width: 140px; height: 140px; border-radius: 50%; margin: 0 auto 20px;
	display: flex; align-items: center; justify-content: center; flex-direction: column;
	border: 6px solid var(--pia-border);
}
.pia-indice-numero { font-family: 'Fraunces', Georgia, serif; font-size: 40px; font-weight: 600; line-height: 1; }
.pia-indice-max { font-size: 12px; color: var(--pia-ink-soft); }

.pia-spinner {
	width: 22px; height: 22px; border: 2.5px solid var(--pia-border); border-top-color: var(--pia-primary);
	border-radius: 50%; animation: pia-spin .7s linear infinite; margin: 0 auto;
}
@keyframes pia-spin { to { transform: rotate(360deg); } }

.pia-cta-row { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.pia-cta-row .pia-btn { flex: 1; text-align: center; text-decoration: none; display: inline-block; }
.pia-btn-outline { background: transparent; border: 1.5px solid var(--pia-primary); color: var(--pia-primary); }

@media (max-width: 480px) {
	.pia-header, .pia-body, .pia-footer { padding-left: 20px; padding-right: 20px; }
	.pia-type-grid { grid-template-columns: repeat(2, 1fr); }
}