/* ═══════════════════════════════════════════════════════════════
   ECOCHARGE — Calculadora · wizard de configuración
   Carga sobre ecocharge.css (usa sus variables: --ec-green, etc.)
   ═══════════════════════════════════════════════════════════════ */

/* ── Modal grande para el wizard (override del genérico) ── */
.ec-modal-overlay#ec-modal-calc .ec-modal {
    max-width: 940px;
}

/* Header con título + progreso */
.eccalc-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.eccalc-progress-step {
    font-size: 11px;
    font-weight: 600;
    color: var(--ec-muted-light);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.eccalc-progress-step.is-active { color: var(--ec-green); }
.eccalc-progress-step.is-done { color: var(--ec-green-deep); }
.eccalc-progress-sep {
    color: var(--ec-line);
    font-size: 11px;
}

/* ── Paneles del wizard (solo uno activo a la vez) ── */
.eccalc-panel { display: none; }
.eccalc-panel.is-active { display: block; }

/* ── PASO 0: CP / localidad ── */
.eccalc-intro-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ec-muted);
    margin: 0 0 24px;
}
.eccalc-cp-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 14px;
    max-width: 520px;
}
.eccalc-cp-grid label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ec-ink);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}
.eccalc-cp-grid input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--ec-line);
    border-radius: var(--ec-r-sm);
    font-family: inherit;
    font-size: 15px;
    color: var(--ec-ink);
    background: #fff;
    transition: border-color .15s;
}
.eccalc-cp-grid input:focus {
    border-color: var(--ec-green);
    outline: none;
}
.eccalc-cp-grid input[readonly] {
    background: var(--ec-line-soft);
    color: var(--ec-muted);
}
.eccalc-cp-error {
    grid-column: 1 / -1;
    margin-top: 4px;
    font-size: 13px;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    padding: 10px 12px;
    border-radius: 8px;
    display: none;
}
.eccalc-cp-error.is-visible { display: block; }
.eccalc-cp-success {
    grid-column: 1 / -1;
    margin-top: 6px;
    font-size: 13px;
    color: var(--ec-green-deep);
    background: var(--ec-green-soft);
    padding: 8px 12px;
    border-radius: 6px;
    display: none;
}
.eccalc-cp-success.is-visible { display: block; }

/* ── ACORDEONES (paso 1, 2, 3) ── */
.eccalc-accordion-card {
    border: 1.5px solid var(--ec-line);
    border-radius: var(--ec-r);
    margin-bottom: 14px;
    background: #fff;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.eccalc-accordion-card.is-active {
    border-color: var(--ec-green);
    box-shadow: 0 4px 16px rgba(76, 123, 24, 0.10);
}
.eccalc-accordion-card.is-completed {
    border-color: var(--ec-green-light);
    background: var(--ec-green-soft);
}
.eccalc-accordion-card.is-locked {
    opacity: 0.55;
    background: var(--ec-line-soft);
}

.eccalc-accordion-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
}
.eccalc-accordion-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ec-line);
    color: var(--ec-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    transition: all .2s;
}
.eccalc-accordion-card.is-active .eccalc-accordion-num {
    background: var(--ec-green);
    color: #fff;
}
.eccalc-accordion-card.is-completed .eccalc-accordion-num {
    background: var(--ec-green-deep);
    color: #fff;
}
.eccalc-accordion-card.is-completed .eccalc-accordion-num::before {
    content: "✓";
}
.eccalc-accordion-card.is-completed .eccalc-accordion-num-text { display: none; }

.eccalc-accordion-title {
    flex: 1;
    font-weight: 700;
    font-size: 16px;
    color: var(--ec-ink);
    letter-spacing: -0.01em;
}
.eccalc-accordion-summary {
    flex: 1;
    font-size: 14px;
    color: var(--ec-ink-soft);
    font-weight: 500;
}
.eccalc-accordion-edit {
    border: 0;
    background: transparent;
    color: var(--ec-green);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
}
.eccalc-accordion-edit:hover { background: rgba(76, 123, 24, 0.10); }

.eccalc-accordion-body {
    padding: 0 20px 20px;
    display: none;
}
.eccalc-accordion-card.is-active .eccalc-accordion-body { display: block; }

/* ── Galería de cargadores ── */
.eccalc-cargadores-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.eccalc-cargador {
    border: 2px solid var(--ec-line);
    border-radius: var(--ec-r);
    padding: 14px 12px 16px;
    background: #fff;
    cursor: pointer;
    transition: all .2s;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
}
.eccalc-cargador:hover {
    border-color: var(--ec-green);
    transform: translateY(-3px);
    box-shadow: var(--ec-shadow-green-sm);
}
.eccalc-cargador.is-selected {
    border-color: var(--ec-green);
    background: var(--ec-green-soft);
    box-shadow: var(--ec-shadow-green-sm);
}
.eccalc-cargador-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ec-orange);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 8px rgba(245, 130, 32, 0.4);
}
.eccalc-cargador-foto {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: var(--ec-line-soft);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 12px;
}
.eccalc-cargador-foto img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}
.eccalc-cargador-marca {
    font-size: 12px;
    color: var(--ec-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 2px;
}
.eccalc-cargador-modelo {
    font-family: var(--ec-font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-ink);
    margin-bottom: 8px;
    line-height: 1.1;
}
.eccalc-cargador-features {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    text-align: left;
    font-size: 12px;
    color: var(--ec-muted);
    flex: 1;
}
.eccalc-cargador-features li {
    padding-left: 18px;
    position: relative;
    margin-bottom: 4px;
    line-height: 1.4;
}
.eccalc-cargador-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--ec-green);
    font-weight: 700;
}
.eccalc-cargador-precio {
    font-family: var(--ec-font-display);
    font-size: 22px;
    font-weight: 800;
    color: var(--ec-green-deep);
    margin-top: auto;
}

/* ── Detalles instalación (paso 2) ── */
.eccalc-tipo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 22px;
}
.eccalc-tipo-card {
    border: 2px solid var(--ec-line);
    border-radius: var(--ec-r);
    padding: 18px 16px;
    text-align: left;
    cursor: pointer;
    background: #fff;
    transition: all .2s;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}
.eccalc-tipo-card:hover {
    border-color: var(--ec-green);
    transform: translateY(-2px);
}
.eccalc-tipo-card.is-selected {
    border-color: var(--ec-green);
    background: var(--ec-green-soft);
}
.eccalc-tipo-icon {
    font-size: 28px;
    margin-bottom: 8px;
}
.eccalc-tipo-titulo {
    font-weight: 700;
    color: var(--ec-ink);
    margin-bottom: 4px;
    font-size: 15px;
}
.eccalc-tipo-sub {
    font-size: 12px;
    color: var(--ec-muted);
    line-height: 1.4;
}

.eccalc-detalles-form {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}
.eccalc-field { display: flex; flex-direction: column; }
.eccalc-field-12 { grid-column: span 12; }
.eccalc-field-6 { grid-column: span 6; }
.eccalc-field-4 { grid-column: span 4; }
.eccalc-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ec-ink);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}
.eccalc-field input,
.eccalc-field select,
.eccalc-field textarea {
    padding: 10px 12px;
    border: 1.5px solid var(--ec-line);
    border-radius: var(--ec-r-sm);
    font-family: inherit;
    font-size: 14px;
    color: var(--ec-ink);
    background: #fff;
    transition: border-color .15s;
}
.eccalc-field input:focus,
.eccalc-field select:focus,
.eccalc-field textarea:focus {
    border-color: var(--ec-green);
    outline: none;
}
.eccalc-field-help {
    font-size: 11px;
    color: var(--ec-muted-light);
    margin-top: 4px;
}

/* ── Opcionales (paso 3) ── */
.eccalc-opcionales-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}
.eccalc-opcional {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border: 1.5px solid var(--ec-line);
    border-radius: var(--ec-r-sm);
    cursor: pointer;
    transition: all .2s;
    background: #fff;
}
.eccalc-opcional:hover { border-color: var(--ec-green-light); }
.eccalc-opcional.is-selected {
    border-color: var(--ec-green);
    background: var(--ec-green-soft);
}
.eccalc-opcional input {
    margin: 2px 0 0;
    accent-color: var(--ec-green);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.eccalc-opcional-text { flex: 1; }
.eccalc-opcional-titulo {
    font-weight: 700;
    color: var(--ec-ink);
    margin-bottom: 2px;
    font-size: 14px;
}
.eccalc-opcional-desc {
    font-size: 12px;
    color: var(--ec-muted);
    line-height: 1.4;
}
.eccalc-opcional-precio {
    font-family: var(--ec-font-display);
    font-weight: 700;
    color: var(--ec-green-deep);
    font-size: 14px;
    margin-left: 8px;
    flex-shrink: 0;
}

/* ── Resumen (paso 4) ── */
.eccalc-resumen {
    background: var(--ec-bg-cream);
    border: 1.5px solid var(--ec-line);
    border-radius: var(--ec-r);
    padding: 22px 24px;
    margin-bottom: 18px;
}
.eccalc-resumen-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--ec-line);
    gap: 14px;
}
.eccalc-resumen-row:last-of-type { border-bottom: 0; }
.eccalc-resumen-label {
    color: var(--ec-muted);
    font-size: 13px;
    flex: 1;
}
.eccalc-resumen-label strong {
    color: var(--ec-ink);
    font-weight: 700;
}
.eccalc-resumen-value {
    font-weight: 700;
    color: var(--ec-ink);
    font-family: var(--ec-font-display);
    text-align: right;
    font-size: 14px;
}

.eccalc-precio-total {
    margin-top: 18px;
    padding: 18px 22px;
    background: linear-gradient(135deg, var(--ec-green) 0%, var(--ec-green-deep) 100%);
    border-radius: var(--ec-r);
    color: #fff;
    text-align: center;
}
.eccalc-precio-total-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
    margin-bottom: 6px;
}
.eccalc-precio-total-amount {
    font-family: var(--ec-font-display);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 800;
    line-height: 1.1;
}
.eccalc-precio-total-nota {
    font-size: 11px;
    opacity: 0.85;
    margin-top: 6px;
}

.eccalc-resumen-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}
.eccalc-action-btn {
    padding: 14px 12px;
    border-radius: var(--ec-r-sm);
    border: 1.5px solid var(--ec-line);
    background: #fff;
    color: var(--ec-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    text-align: center;
    line-height: 1.3;
}
.eccalc-action-btn:hover {
    border-color: var(--ec-green);
    transform: translateY(-2px);
}
.eccalc-action-btn-icon {
    font-size: 20px;
    display: block;
    margin-bottom: 4px;
}
.eccalc-action-btn--primary {
    background: var(--ec-orange);
    border-color: var(--ec-orange);
    color: #fff;
}
.eccalc-action-btn--primary:hover {
    background: var(--ec-orange-dark);
    border-color: var(--ec-orange-dark);
}

/* ── Form contratar (paso 5) ── */
.eccalc-form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
}
.eccalc-form-grid .eccalc-field-12 { grid-column: span 12; }
.eccalc-form-grid .eccalc-field-8 { grid-column: span 8; }
.eccalc-form-grid .eccalc-field-6 { grid-column: span 6; }
.eccalc-form-grid .eccalc-field-4 { grid-column: span 4; }
.eccalc-form-grid .eccalc-field-2 { grid-column: span 2; }

/* ── Pantalla éxito (paso 6) ── */
.eccalc-success {
    text-align: center;
    padding: 12px 0 18px;
}
.eccalc-success-icon {
    width: 80px;
    height: 80px;
    background: var(--ec-green-soft);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: var(--ec-green-deep);
    margin-bottom: 16px;
}
.eccalc-success-title {
    font-family: var(--ec-font-display);
    font-size: 28px;
    font-weight: 800;
    color: var(--ec-ink);
    margin: 0 0 10px;
    letter-spacing: -0.02em;
}
.eccalc-success-sub {
    color: var(--ec-muted);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 auto 24px;
    max-width: 520px;
}
.eccalc-codigo-cupon {
    display: inline-block;
    border: 2px dashed var(--ec-orange);
    background: var(--ec-orange-soft);
    padding: 18px 32px;
    border-radius: var(--ec-r);
    margin-bottom: 24px;
}
.eccalc-codigo-cupon-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ec-orange-dark);
    font-weight: 700;
    margin-bottom: 4px;
}
.eccalc-codigo-cupon-value {
    font-family: var(--ec-font-display);
    font-size: 32px;
    font-weight: 900;
    color: var(--ec-ink);
    letter-spacing: 0.05em;
}

/* ── Modal "enviar por email" ── */
.eccalc-mail-modal {
    background: #fff;
    border: 1.5px solid var(--ec-line);
    border-radius: var(--ec-r);
    padding: 22px;
    margin-top: 16px;
    display: none;
}
.eccalc-mail-modal.is-visible { display: block; }
.eccalc-mail-modal h4 {
    margin: 0 0 8px;
    font-size: 16px;
    color: var(--ec-ink);
}
.eccalc-mail-modal p {
    color: var(--ec-muted);
    font-size: 13px;
    margin: 0 0 14px;
}
.eccalc-mail-modal .eccalc-field { margin-bottom: 12px; }
.eccalc-mail-msg {
    font-size: 13px;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    display: none;
}
.eccalc-mail-msg.is-visible { display: block; }
.eccalc-mail-msg.is-success {
    background: var(--ec-green-soft);
    color: var(--ec-green-deep);
}
.eccalc-mail-msg.is-error {
    background: #fef2f2;
    color: #b91c1c;
}

/* ── Footer común del modal ── */
.ec-modal-footer .eccalc-btn-back {
    background: transparent;
    border: 1.5px solid var(--ec-line);
    color: var(--ec-muted);
    padding: 12px 20px;
    border-radius: var(--ec-r-sm);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}
.ec-modal-footer .eccalc-btn-back:hover {
    background: var(--ec-line-soft);
    color: var(--ec-ink);
}
.ec-modal-footer .eccalc-btn-primary {
    background: var(--ec-green);
    border: 0;
    color: #fff;
    padding: 14px 26px;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    font-size: 14px;
    box-shadow: var(--ec-shadow-green-sm);
}
.ec-modal-footer .eccalc-btn-primary:hover {
    background: var(--ec-green-dark);
    box-shadow: var(--ec-shadow-green);
}
.ec-modal-footer .eccalc-btn-primary:disabled {
    background: var(--ec-line);
    color: var(--ec-muted-light);
    cursor: not-allowed;
    box-shadow: none;
}

/* ── Responsive ── */
@media (max-width: 760px) {
    .eccalc-cargadores-grid { grid-template-columns: 1fr; }
    .eccalc-tipo-grid { grid-template-columns: 1fr; }
    .eccalc-opcionales-list { grid-template-columns: 1fr; }
    .eccalc-resumen-actions { grid-template-columns: 1fr; }
    .eccalc-cp-grid { grid-template-columns: 1fr; }
    .eccalc-form-grid .eccalc-field-8,
    .eccalc-form-grid .eccalc-field-6,
    .eccalc-form-grid .eccalc-field-4,
    .eccalc-form-grid .eccalc-field-2 { grid-column: span 12; }
    .eccalc-detalles-form { grid-template-columns: 1fr; }
    .eccalc-detalles-form .eccalc-field-12,
    .eccalc-detalles-form .eccalc-field-6,
    .eccalc-detalles-form .eccalc-field-4 { grid-column: span 1; }
}