/**
 * Calculadora Lavadero Coches - Frontend Styles
 * Estilos nativos sin dependencias externas
 * Alta especificidad para compatibilidad con page builders
 *
 * @package Calculadora_Lavadero
 */

/* ============================================
   CSS Variables & Reset - ALTA ESPECIFICIDAD
   ============================================ */
.clc-calculator-wrapper,
div.clc-calculator-wrapper,
#clc-calculator-wrapper .clc-calculator-wrapper {
    --clc-primary: #2563eb;
    --clc-primary-dark: #1d4ed8;
    --clc-primary-light: #3b82f6;
    --clc-primary-50: #eff6ff;
    --clc-primary-100: #dbeafe;
    --clc-slate-50: #f8fafc;
    --clc-slate-100: #f1f5f9;
    --clc-slate-200: #e2e8f0;
    --clc-slate-300: #cbd5e1;
    --clc-slate-400: #94a3b8;
    --clc-slate-500: #64748b;
    --clc-slate-600: #475569;
    --clc-slate-700: #334155;
    --clc-slate-800: #1e293b;
    --clc-slate-900: #0f172a;
    --clc-green: #16a34a;
    --clc-green-dark: #15803d;
    --clc-red: #dc2626;
    --clc-white: #ffffff;
    --clc-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --clc-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --clc-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --clc-radius: 12px;
    --clc-radius-sm: 8px;

    all: initial;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    color: inherit;
    background-color: var(--clc-slate-100);
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.clc-calculator-wrapper *,
.clc-calculator-wrapper *::before,
.clc-calculator-wrapper *::after {
    box-sizing: border-box;
    font-family: inherit;
}

/* ============================================
   Layout - FORZAR DISPLAY
   ============================================ */
.clc-calculator-wrapper {
    display: flex !important;
    flex-direction: column;
    min-height: 100%;
    width: 100%;
    max-width: 100%;
}

/* ============================================
   Header
   ============================================ */
.clc-header {
    box-shadow: var(--clc-shadow) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    width: 100% !important;
    display: flex !important;
}

.clc-header-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 1rem;
    width: 100%;
}

.clc-brand {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem;
}

.clc-calculator-icon {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/* ============================================
   COLORES PERSONALIZADOS - ALTA ESPECIFICIDAD
   Para vencer a Elementor, DIVI y otros constructores
   ============================================ */
.clc-calculator-wrapper.clc-calculator-wrapper,
div.clc-calculator-wrapper.clc-calculator-wrapper,
#clc-calculator .clc-calculator-wrapper,
.elementor .clc-calculator-wrapper,
.elementor .clc-calculator-wrapper.clc-calculator-wrapper,
.bricks .clc-calculator-wrapper,
.divi .clc-calculator-wrapper,
.block-editor .clc-calculator-wrapper {
    /* El color de fondo se aplica vía estilo en línea - NO sobrescribir */
}

.clc-header.clc-header,
header.clc-header.clc-header,
.clc-calculator-wrapper .clc-header.clc-header,
.elementor .clc-header.clc-header,
.bricks .clc-header.clc-header,
.block-editor .clc-header.clc-header {
    /* Los colores se aplican vía estilo en línea - NO sobrescribir */
}

.clc-title.clc-title,
h1.clc-title.clc-title,
.clc-header .clc-title.clc-title,
.elementor .clc-title.clc-title,
.block-editor .clc-title.clc-title {
    /* El color se aplica vía estilo en línea - NO sobrescribir */
}

.clc-calculator-icon.clc-calculator-icon,
svg.clc-calculator-icon.clc-calculator-icon,
.elementor .clc-calculator-icon.clc-calculator-icon,
.block-editor .clc-calculator-icon.clc-calculator-icon {
    /* El color se aplica vía estilo en línea - NO sobrescribir */
}

.clc-title {
    font-size: calc(1.25rem * var(--clc-font-scale, 1)) !important;
    font-weight: 700 !important;
    margin: 0 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.2 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Override para temas/page builders que ocultan h1 globalmente */
.clc-calculator-wrapper h1.clc-title,
.clc-calculator-wrapper .clc-header h1,
.clc-calculator-wrapper .clc-header .clc-title,
.clc-calculator-wrapper .clc-title.clc-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.clc-title-accent {
    color: var(--clc-primary) !important;
}

.clc-nav {
    display: flex !important;
    gap: 1rem !important;
}

.clc-nav-btn {
    padding: 0.5rem 0.75rem !important;
    font-size: calc(0.875rem * var(--clc-font-scale, 1)) !important;
    font-weight: 500 !important;
    color: var(--clc-slate-700) !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--clc-radius-sm) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    font-family: inherit !important;
    display: inline-flex !important;
    align-items: center !important;
}

.clc-nav-btn:hover {
    color: var(--clc-primary) !important;
    background: var(--clc-slate-50) !important;
}

.clc-nav-active {
    color: var(--clc-primary) !important;
    background: var(--clc-primary-50) !important;
}

/* ============================================
   Main Content
   ============================================ */
.clc-main {
    flex: 1 !important;
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    width: 100% !important;
    display: block !important;
}

.clc-view {
    display: none !important;
    animation: clcFadeIn 0.3s ease-in-out !important;
}

.clc-view-active {
    display: block !important;
}

@keyframes clcFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.clc-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    width: 100% !important;
}

@media (min-width: 1024px) {
    .clc-grid {
        grid-template-columns: 2fr 1fr !important;
    }
}

/* ============================================
   Cards - FORZAR ESTILOS
   ============================================ */
.clc-card,
.clc-summary-card,
.clc-config-card {
    background: var(--clc-white) !important;
    border-radius: var(--clc-radius) !important;
    border: 1px solid var(--clc-slate-200) !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: var(--clc-shadow) !important;
    display: block !important;
    width: 100% !important;
}

.clc-card.clc-disabled {
    opacity: 0.5 !important;
    pointer-events: none !important;
}

.clc-card-title {
    font-size: calc(1.125rem * var(--clc-font-scale, 1)) !important;
    font-weight: 600 !important;
    color: var(--clc-slate-900) !important;
    margin: 0 0 1rem 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.clc-icon-small {
    width: calc(1.25rem * var(--clc-font-scale, 1)) !important;
    height: calc(1.25rem * var(--clc-font-scale, 1)) !important;
    color: var(--clc-primary) !important;
    flex-shrink: 0;
}

/* ============================================
   Forms
   ============================================ */
.clc-form-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    width: 100% !important;
}

@media (min-width: 640px) {
    .clc-form-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

.clc-form-group {
    margin-bottom: 0 !important;
    display: block !important;
    width: 100% !important;
}

.clc-label {
    display: block !important;
    font-size: calc(0.875rem * var(--clc-font-scale, 1)) !important;
    font-weight: 500 !important;
    color: var(--clc-slate-700) !important;
    margin-bottom: 0.25rem !important;
}

.clc-select,
.clc-input {
    width: 100% !important;
    padding: 0.625rem 0.875rem !important;
    font-size: calc(0.9375rem * var(--clc-font-scale, 1)) !important;
    border: 1px solid var(--clc-slate-300) !important;
    border-radius: var(--clc-radius-sm) !important;
    background: var(--clc-white) !important;
    color: var(--clc-slate-800) !important;
    font-family: inherit !important;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease !important;
    display: block !important;
}

.clc-select:focus,
.clc-input:focus {
    outline: none !important;
    border-color: var(--clc-primary) !important;
    box-shadow: 0 0 0 3px var(--clc-primary-100) !important;
}

.clc-select:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: var(--clc-slate-100) !important;
}

.clc-input-medium {
    max-width: 16rem !important;
}

.clc-help {
    font-size: 0.75rem !important;
    color: var(--clc-slate-500) !important;
    margin-top: 0.25rem !important;
    display: block !important;
}

/* ============================================
   Wash Types
   ============================================ */
.clc-wash-types {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    margin-bottom: 1.5rem !important;
    width: 100% !important;
}

@media (min-width: 640px) {
    .clc-wash-types {
        grid-template-columns: 1fr 1fr 1fr !important;
    }
}

.clc-wash-type {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
    background: var(--clc-slate-50) !important;
    border: 2px solid var(--clc-slate-200) !important;
    border-radius: var(--clc-radius-sm) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    min-height: 80px !important;
}

.clc-wash-type:hover {
    background: var(--clc-primary-100) !important;
    border-color: var(--clc-primary) !important;
}

.clc-wash-type:hover .clc-wash-label {
    color: var(--clc-primary) !important;
}

.clc-wash-type:hover .clc-wash-desc {
    color: var(--clc-primary) !important;
}

/* Wash type seleccionado - con clase JS */
.clc-wash-selected,
.clc-calculator-wrapper .clc-wash-selected,
.elementor .clc-wash-selected {
    background: var(--clc-wash-selected-color, var(--clc-primary)) !important;
    border-color: var(--clc-wash-selected-color, var(--clc-primary)) !important;
}

.clc-wash-selected .clc-wash-label,
.clc-wash-selected .clc-wash-desc {
    color: var(--clc-white) !important;
}

/* Wash type seleccionado con hover - mantener colores */
.clc-wash-selected:hover,
.clc-calculator-wrapper .clc-wash-selected:hover,
.elementor .clc-wash-selected:hover {
    background: var(
        --clc-wash-selected-color,
        var(--clc-primary-dark)
    ) !important;
    border-color: var(
        --clc-wash-selected-color,
        var(--clc-primary-dark)
    ) !important;
    filter: brightness(0.9);
}

.clc-wash-selected:hover .clc-wash-label,
.clc-wash-selected:hover .clc-wash-desc {
    color: var(--clc-white) !important;
}

.clc-wash-input {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.clc-wash-label {
    font-size: calc(0.875rem * var(--clc-font-scale, 1)) !important;
    font-weight: 500 !important;
    color: var(--clc-slate-600) !important;
    transition: color 0.15s ease !important;
    display: block !important;
    text-align: center !important;
}

.clc-wash-desc {
    font-size: calc(0.75rem * var(--clc-font-scale, 1)) !important;
    color: var(--clc-slate-400) !important;
    margin-top: 0.25rem !important;
    text-align: center !important;
    transition: color 0.15s ease !important;
    display: block !important;
}

/* ============================================
   Extras
   ============================================ */
.clc-extras-section {
    border-top: 1px solid var(--clc-slate-100) !important;
    padding-top: 1rem !important;
    display: block !important;
    width: 100% !important;
}

.clc-extras-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 0.75rem !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

.clc-extras-title {
    font-size: calc(0.875rem * var(--clc-font-scale, 1)) !important;
    font-weight: 500 !important;
    color: var(--clc-slate-900) !important;
    margin: 0 !important;
}

.clc-badge {
    font-size: calc(0.75rem * var(--clc-font-scale, 1)) !important;
    color: var(--clc-slate-500) !important;
    background: var(--clc-slate-100) !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 4px !important;
    display: inline-block !important;
}

.clc-extras-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    width: 100% !important;
}

@media (min-width: 640px) {
    .clc-extras-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

.clc-extra-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    background: var(--clc-slate-50) !important;
    border: 1px solid var(--clc-slate-200) !important;
    border-radius: var(--clc-radius-sm) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.clc-extra-item:hover {
    background: var(--clc-primary-50) !important;
    border-color: var(--clc-primary-light) !important;
}

.clc-extra-checkbox {
    width: 1.125rem !important;
    height: 1.125rem !important;
    cursor: pointer !important;
    accent-color: var(--clc-primary) !important;
    flex-shrink: 0;
}

.clc-extra-label {
    flex: 1 !important;
    font-size: calc(0.875rem * var(--clc-font-scale, 1)) !important;
    color: var(--clc-slate-700) !important;
    margin: 0 !important;
}

.clc-extra-price {
    font-size: calc(0.8125rem * var(--clc-font-scale, 1)) !important;
    font-weight: 600 !important;
    color: var(--clc-extra-price-color, var(--clc-primary)) !important;
    white-space: nowrap !important;
}

/* ============================================
   Summary Card
   ============================================ */
.clc-summary-card {
    background: var(--clc-white) !important;
    border-radius: var(--clc-radius) !important;
    border: 1px solid var(--clc-slate-200) !important;
    box-shadow: var(--clc-shadow-lg) !important;
    overflow: hidden !important;
    position: sticky !important;
    top: 100px !important;
    display: block !important;
    width: 100% !important;
}

.clc-summary-header {
    background: var(--clc-slate-900) !important;
    color: var(--clc-white) !important;
    padding: 1rem 1.5rem !important;
    display: block !important;
}

.clc-summary-header h3 {
    font-size: calc(1.125rem * var(--clc-font-scale, 1)) !important;
    font-weight: 700 !important;
    margin: 0 0 0.25rem 0 !important;
    color: var(--clc-white) !important;
}

.clc-summary-header p {
    font-size: calc(0.75rem * var(--clc-font-scale, 1)) !important;
    color: var(--clc-slate-400) !important;
    margin: 0 !important;
}

.clc-summary-body {
    padding: 1.5rem 0.5rem !important;
    display: block !important;
}

.clc-empty-state {
    text-align: center !important;
    padding: 2rem 1rem !important;
    color: var(--clc-slate-400) !important;
    display: block !important;
}

.clc-empty-icon {
    width: 3rem !important;
    height: 3rem !important;
    margin: 0 auto 0.75rem !important;
    opacity: 0.5 !important;
    display: block !important;
}

.clc-empty-state p {
    margin: 0 !important;
    font-size: calc(0.9375rem * var(--clc-font-scale, 1)) !important;
}

.clc-hidden {
    display: none !important;
    visibility: hidden !important;
}

/* ============================================
   Vehicle Details
   ============================================ */
.clc-vehicle-header {
    margin-bottom: 1rem !important;
    display: block !important;
}

.clc-vehicle-name {
    font-size: calc(1.125rem * var(--clc-font-scale, 1)) !important;
    font-weight: 700 !important;
    color: var(--clc-slate-900) !important;
    margin: 0 0 0.5rem 0 !important;
    display: block !important;
}

.clc-category-badge {
    display: inline-block !important;
    font-size: calc(0.75rem * var(--clc-font-scale, 1)) !important;
    font-weight: 500 !important;
    background: var(--clc-primary-100) !important;
    color: var(--clc-primary-dark) !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 4px !important;
}

.clc-dimensions {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0.5rem !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
}

.clc-dimension-item {
    background: var(--clc-slate-50) !important;
    padding: 0.5rem !important;
    border-radius: var(--clc-radius-sm) !important;
    border: 1px solid var(--clc-slate-100) !important;
    text-align: center !important;
    display: block !important;
}

.clc-dimension-label {
    display: block !important;
    font-size: calc(0.6875rem * var(--clc-font-scale, 1)) !important;
    text-transform: uppercase !important;
    color: var(--clc-slate-500) !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.25rem !important;
}

.clc-dimension-value {
    font-size: calc(0.875rem * var(--clc-font-scale, 1)) !important;
    font-weight: 600 !important;
    color: var(--clc-slate-700) !important;
    display: block !important;
}

/* ============================================
   Price Breakdown
   ============================================ */
.clc-price-breakdown {
    border-top: 1px solid var(--clc-slate-100) !important;
    padding-top: 1rem !important;
    margin-bottom: 1rem !important;
    display: block !important;
}

.clc-price-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.375rem 0 !important;
    font-size: calc(0.875rem * var(--clc-font-scale, 1)) !important;
}

.clc-price-label {
    color: var(--clc-slate-600) !important;
}

.clc-price-value {
    font-weight: 500 !important;
    color: var(--clc-slate-900) !important;
}

.clc-price-subtotal,
.clc-price-tax {
    color: var(--clc-slate-500) !important;
    font-size: calc(0.8125rem * var(--clc-font-scale, 1)) !important;
}

.clc-total-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    padding-top: 1rem !important;
    border-top: 1px solid var(--clc-slate-200) !important;
    margin-bottom: 1rem !important;
}

.clc-total-label {
    font-size: calc(0.9375rem * var(--clc-font-scale, 1)) !important;
    font-weight: 500 !important;
    color: var(--clc-slate-600) !important;
}

.clc-total-value {
    font-size: calc(2rem * var(--clc-font-scale, 1)) !important;
    font-weight: 700 !important;
    color: var(--clc-total-value-color, var(--clc-primary)) !important;
    line-height: 1 !important;
}

/* ============================================
   WhatsApp Button
   ============================================ */
.clc-whatsapp-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.875rem 1rem !important;
    background: var(--clc-green) !important;
    color: var(--clc-white) !important;
    border: none !important;
    border-radius: var(--clc-radius-sm) !important;
    font-size: calc(0.9375rem * var(--clc-font-scale, 1)) !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    font-family: inherit !important;
    box-shadow: var(--clc-shadow-md) !important;
}

.clc-whatsapp-btn:hover {
    background: var(--clc-green-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--clc-shadow-lg) !important;
}

.clc-whatsapp-btn:active {
    transform: translateY(0) !important;
}

.clc-whatsapp-icon {
    width: calc(1.25rem * var(--clc-font-scale, 1)) !important;
    height: calc(1.25rem * var(--clc-font-scale, 1)) !important;
    flex-shrink: 0;
}

/* ============================================
   Email Reservation Button
   ============================================ */
.clc-email-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.875rem 1rem !important;
    background: var(--clc-slate-800) !important;
    color: var(--clc-white) !important;
    border: none !important;
    border-radius: var(--clc-radius-sm) !important;
    font-size: calc(0.9375rem * var(--clc-font-scale, 1)) !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    font-family: inherit !important;
    box-shadow: var(--clc-shadow-md) !important;
    margin-top: 0.75rem !important;
}

.clc-email-btn:hover {
    background: var(--clc-slate-900) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--clc-shadow-lg) !important;
}

.clc-email-btn:active {
    transform: translateY(0) !important;
}

.clc-email-icon {
    width: calc(1.25rem * var(--clc-font-scale, 1)) !important;
    height: calc(1.25rem * var(--clc-font-scale, 1)) !important;
    flex-shrink: 0;
}

/* Email Form */
.clc-email-form {
    margin-top: 0.75rem !important;
    background: var(--clc-slate-50) !important;
    border: 1px solid var(--clc-slate-200) !important;
    border-radius: var(--clc-radius-sm) !important;
    overflow: hidden !important;
}

.clc-email-form-header {
    background: var(--clc-slate-800) !important;
    color: var(--clc-white) !important;
    padding: 0.75rem 1rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.clc-email-form-header h4 {
    font-size: calc(0.9375rem * var(--clc-font-scale, 1)) !important;
    font-weight: 600 !important;
    margin: 0 !important;
    color: var(--clc-white) !important;
}

.clc-email-close {
    background: none !important;
    border: none !important;
    color: var(--clc-white) !important;
    font-size: 1.25rem !important;
    cursor: pointer !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.clc-email-close:hover {
    color: var(--clc-slate-300) !important;
}

.clc-email-form-body {
    padding: 1rem !important;
}

.clc-email-form-body .clc-form-group {
    margin-bottom: 0.75rem !important;
}

.clc-email-form-body label {
    display: block !important;
    font-size: calc(0.8125rem * var(--clc-font-scale, 1)) !important;
    font-weight: 500 !important;
    color: var(--clc-slate-700) !important;
    margin-bottom: 0.25rem !important;
}

.clc-email-input {
    width: 100% !important;
    padding: 0.625rem 0.75rem !important;
    font-size: calc(0.875rem * var(--clc-font-scale, 1)) !important;
    border: 1px solid var(--clc-slate-300) !important;
    border-radius: var(--clc-radius-sm) !important;
    background: var(--clc-white) !important;
    font-family: inherit !important;
}

.clc-email-input:focus {
    outline: none !important;
    border-color: var(--clc-primary) !important;
    box-shadow: 0 0 0 3px var(--clc-primary-100) !important;
}

.clc-math-captcha {
    display: flex !important;
    flex-direction: column !important;
}

.clc-math-input {
    width: 100px !important;
    padding: 0.5rem 0.75rem !important;
    font-size: calc(0.875rem * var(--clc-font-scale, 1)) !important;
    border: 1px solid var(--clc-slate-300) !important;
    border-radius: var(--clc-radius-sm) !important;
    background: var(--clc-white) !important;
    font-family: inherit !important;
}

.clc-check-field {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    z-index: -1 !important;
}

.clc-check-input {
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

.clc-email-submit-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    background: var(--clc-primary) !important;
    color: var(--clc-white) !important;
    border: none !important;
    border-radius: var(--clc-radius-sm) !important;
    font-size: calc(0.875rem * var(--clc-font-scale, 1)) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    font-family: inherit !important;
}

.clc-email-submit-btn:hover:not(:disabled) {
    background: var(--clc-primary-dark) !important;
}

.clc-email-submit-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.clc-email-message {
    margin-top: 0.75rem !important;
    padding: 0.75rem !important;
    border-radius: var(--clc-radius-sm) !important;
    font-size: calc(0.8125rem * var(--clc-font-scale, 1)) !important;
}

.clc-email-message.clc-success {
    background: #dcfce7 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
}

.clc-email-message.clc-error {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}

/* ============================================
   Config Panel
   ============================================ */
.clc-config-container {
    max-width: 1024px !important;
    margin: 0 auto !important;
    display: block !important;
}

.clc-config-card {
    background: var(--clc-white) !important;
    border-radius: var(--clc-radius) !important;
    border: 1px solid var(--clc-slate-200) !important;
    overflow: hidden !important;
    box-shadow: var(--clc-shadow-md) !important;
    display: block !important;
}

.clc-config-header {
    background: var(--clc-slate-800) !important;
    color: var(--clc-white) !important;
    padding: 1.5rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
}

.clc-config-header h2 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin: 0 0 0.25rem 0 !important;
    color: var(--clc-white) !important;
}

.clc-config-header p {
    font-size: 0.875rem !important;
    color: var(--clc-slate-400) !important;
    margin: 0 !important;
}

.clc-config-icon {
    width: 2rem !important;
    height: 2rem !important;
    color: var(--clc-slate-500) !important;
    flex-shrink: 0;
}

/* ============================================
   Login Form
   ============================================ */
.clc-login-form {
    padding: 3rem 1.5rem !important;
    text-align: center !important;
    display: block !important;
}

.clc-login-content {
    max-width: 24rem !important;
    margin: 0 auto !important;
    display: block !important;
}

.clc-login-content .clc-label {
    text-align: left !important;
    margin-bottom: 0.5rem !important;
}

.clc-login-content .clc-input {
    margin-bottom: 1rem !important;
}

.clc-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.clc-captcha {
    margin-bottom: 1rem !important;
    text-align: left !important;
    display: block !important;
}

.clc-captcha-content {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.clc-captcha-question {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    background: var(--clc-slate-100) !important;
    padding: 0.5rem 1rem !important;
    border-radius: var(--clc-radius-sm) !important;
    font-family: monospace !important;
    display: inline-block !important;
}

.clc-captcha-input {
    width: 5rem !important;
    text-align: center !important;
}

/* ============================================
   Buttons
   ============================================ */
.clc-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.625rem 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    border: none !important;
    border-radius: var(--clc-radius-sm) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    font-family: inherit !important;
}

.clc-btn-primary {
    background: var(--clc-slate-800) !important;
    color: var(--clc-white) !important;
}

.clc-btn-primary:hover {
    background: var(--clc-slate-700) !important;
}

.clc-btn-secondary {
    background: transparent !important;
    color: var(--clc-slate-700) !important;
    border: 1px solid var(--clc-slate-300) !important;
}

.clc-btn-secondary:hover {
    background: var(--clc-slate-50) !important;
}

.clc-btn-small {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
}

.clc-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ============================================
   Config Actions
   ============================================ */
.clc-config-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem 1.5rem !important;
    border-bottom: 1px solid var(--clc-slate-200) !important;
}

.clc-config-actions-bottom {
    border-top: 1px solid var(--clc-slate-200) !important;
    border-bottom: none !important;
    justify-content: flex-end !important;
    gap: 0.75rem !important;
}

.clc-help-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--clc-primary) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: var(--clc-radius-sm) !important;
    transition: all 0.15s ease !important;
    font-family: inherit !important;
}

.clc-help-link:hover {
    background: var(--clc-primary-50) !important;
}

/* ============================================
   Config Sections
   ============================================ */
.clc-config-section {
    padding: 1.5rem !important;
    border-bottom: 1px solid var(--clc-slate-200) !important;
    display: block !important;
}

.clc-config-section:last-child {
    border-bottom: none !important;
}

.clc-section-title {
    font-size: 1.0625rem !important;
    font-weight: 600 !important;
    color: var(--clc-slate-900) !important;
    margin: 0 0 1rem 0 !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid var(--clc-slate-200) !important;
}

.clc-section-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 0.5rem !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

.clc-section-header .clc-section-title {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.clc-legend {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    font-size: 0.8125rem !important;
    color: var(--clc-slate-500) !important;
    margin-bottom: 1rem !important;
}

/* ============================================
   Table
   ============================================ */
.clc-table-wrapper {
    overflow-x: auto !important;
    display: block !important;
}

.clc-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 0.875rem !important;
    display: table !important;
}

.clc-table thead {
    background: var(--clc-slate-50) !important;
    display: table-header-group !important;
}

.clc-table th {
    padding: 0.75rem 1rem !important;
    text-align: left !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--clc-slate-500) !important;
    border-bottom: 1px solid var(--clc-slate-200) !important;
}

.clc-table td {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid var(--clc-slate-200) !important;
    color: var(--clc-slate-700) !important;
}

.clc-table tbody tr {
    display: table-row !important;
}

.clc-table tbody tr:last-child td {
    border-bottom: none !important;
}

.clc-table input {
    width: 5rem !important;
    padding: 0.375rem 0.5rem !important;
    font-size: 0.875rem !important;
    border: 1px solid var(--clc-slate-300) !important;
    border-radius: 4px !important;
    text-align: center !important;
    display: inline-block !important;
}

/* ============================================
   Extras Config Grid
   ============================================ */
.clc-extras-config-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    width: 100% !important;
}

@media (min-width: 640px) {
    .clc-extras-config-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

.clc-extra-config-item {
    background: var(--clc-slate-50) !important;
    border: 1px solid var(--clc-slate-200) !important;
    border-radius: var(--clc-radius-sm) !important;
    padding: 1rem !important;
    display: block !important;
}

.clc-extra-config-name {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--clc-slate-900) !important;
    margin-bottom: 0.75rem !important;
    display: block !important;
}

.clc-extra-config-prices {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 0.5rem !important;
}

.clc-extra-config-prices label {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.clc-extra-config-prices .cat-label {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    color: var(--clc-slate-500) !important;
    margin-bottom: 0.25rem !important;
    text-align: center !important;
    display: block !important;
}

.clc-extra-config-prices input {
    width: 100% !important;
    padding: 0.25rem !important;
    font-size: 0.75rem !important;
    border: 1px solid var(--clc-slate-300) !important;
    border-radius: 4px !important;
    text-align: center !important;
    display: block !important;
}

/* ============================================
   Multipliers Grid
   ============================================ */
.clc-multipliers-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    width: 100% !important;
}

@media (min-width: 640px) {
    .clc-multipliers-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
    }
}

/* ============================================
   Error Messages
   ============================================ */
.clc-error {
    color: var(--clc-red) !important;
    font-size: 0.875rem !important;
    margin-top: 1rem !important;
    display: block !important;
}

/* ============================================
   Modal
   ============================================ */
.clc-modal {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100 !important;
    padding: 1rem !important;
}

.clc-modal-content {
    background: var(--clc-white) !important;
    border-radius: var(--clc-radius) !important;
    max-width: 36rem !important;
    width: 100% !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    box-shadow: var(--clc-shadow-lg) !important;
    display: block !important;
}

.clc-modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem 1.5rem !important;
    border-bottom: 1px solid var(--clc-slate-200) !important;
}

.clc-modal-header h3 {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--clc-slate-900) !important;
    margin: 0 !important;
}

.clc-modal-close {
    background: transparent !important;
    border: none !important;
    font-size: 1.5rem !important;
    color: var(--clc-slate-400) !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 2rem !important;
    height: 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--clc-radius-sm) !important;
    transition: all 0.15s ease !important;
}

.clc-modal-close:hover {
    color: var(--clc-slate-600) !important;
    background: var(--clc-slate-100) !important;
}

.clc-modal-body {
    padding: 1.5rem !important;
    display: block !important;
}

.clc-modal-body h4 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--clc-slate-900) !important;
    margin: 1.5rem 0 0.75rem 0 !important;
    display: block !important;
}

.clc-modal-body h4:first-child {
    margin-top: 0 !important;
}

.clc-help-list {
    margin: 0 !important;
    padding-left: 1.5rem !important;
    display: block !important;
}

.clc-help-list li {
    margin-bottom: 0.5rem !important;
    color: var(--clc-slate-600) !important;
    font-size: 0.9375rem !important;
    display: list-item !important;
}

.clc-help-list code {
    background: var(--clc-slate-100) !important;
    padding: 0.125rem 0.375rem !important;
    border-radius: 4px !important;
    font-size: 0.875rem !important;
    color: var(--clc-slate-800) !important;
    display: inline-block !important;
}

.clc-modal-footer {
    padding: 1rem 1.5rem !important;
    border-top: 1px solid var(--clc-slate-200) !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* ============================================
   Footer
   ============================================ */
.clc-footer {
    background: var(--clc-white) !important;
    border-top: 1px solid var(--clc-slate-200) !important;
    padding: 1.5rem !important;
    margin-top: auto !important;
    display: block !important;
    width: 100% !important;
}

.clc-footer p {
    max-width: 1280px !important;
    margin: 0 auto !important;
    font-size: 0.875rem !important;
    color: var(--clc-slate-500) !important;
    text-align: center !important;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    .clc-header-content {
        flex-direction: column !important;
        text-align: center !important;
    }

    .clc-nav {
        width: 100% !important;
        justify-content: center !important;
    }

    .clc-main {
        padding: 1rem !important;
    }

    .clc-card {
        padding: 1rem !important;
    }

    .clc-total-value {
        font-size: 1.5rem !important;
    }

    .clc-config-header {
        flex-direction: column !important;
        text-align: center !important;
    }

    .clc-config-actions {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .clc-extras-config-prices {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ============================================
   Loading State
   ============================================ */
.clc-loading {
    display: inline-block !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    border: 2px solid var(--clc-slate-200) !important;
    border-top-color: var(--clc-primary) !important;
    border-radius: 50% !important;
    animation: clcSpin 0.8s linear infinite !important;
}

@keyframes clcSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .clc-header,
    .clc-footer,
    .clc-nav,
    .clc-config-container,
    .clc-whatsapp-btn {
        display: none !important;
    }

    .clc-calculator-wrapper {
        background: white !important;
    }

    .clc-summary-card {
        box-shadow: none !important;
        border: 1px solid #000 !important;
        position: static !important;
    }
}

/* ============================================
   FIX ESPECÍFICO PARA PAGE BUILDERS
   ============================================ */

/* Evitar que Elementor/Bricks sobrescriban nuestros estilos */
.elementor .clc-calculator-wrapper,
.bricks .clc-calculator-wrapper,
.et_pb_section .clc-calculator-wrapper,
.fl-builder .clc-calculator-wrapper {
    all: inherit !important;
}

.elementor .clc-calculator-wrapper *,
.bricks .clc-calculator-wrapper *,
.et_pb_section .clc-calculator-wrapper *,
.fl-builder .clc-calculator-wrapper * {
    box-sizing: border-box !important;
}

/* Forzar visibilidad en editores visuales */
.elementor-editor-active .clc-calculator-wrapper,
.bricks-editor-active .clc-calculator-wrapper,
.et-fb .clc-calculator-wrapper,
.block-editor .clc-calculator-wrapper,
.editor-styles-wrapper .clc-calculator-wrapper {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}