/* =============================================
   Calculadora Impuesto Matriculación v5
   Gestoría Garcés - PALETA CORPORATIVA OFICIAL
   ============================================= */

:root {
    /* 🎨 COLORES CORPORATIVOS OFICIALES */
    --verde-corporativo: #003E3B;      /* Verde institucional - Pantone 3308 C */
    --verde-hover: #005550;            /* Verde hover (ligeramente más claro) */
    --dorado-corporativo: #C99852;     /* Dorado corporativo - Pantone 7572 C */
    --dorado-hover: #B88743;           /* Dorado hover (ligeramente más oscuro) */
    
    /* Compatibilidad con código existente */
    --teal: #003E3B;
    --teal-light: #005550;
    --teal-dark: #002E2B;
    --gold: #C99852;
    --gold-light: #D4A663;
    --gold-dark: #B88743;
    
    /* Neutros corporativos */
    --bg-main: #F4F6F5;
    --bg-card: #FFFFFF;
    --bg-section: #F4F6F5;
    
    --text-primary: #212121;
    --text-secondary: #4A4A4A;
    --text-muted: #9e9e9e;
    --text-light: #FFFFFF;
    
    --border-color: #e0e0e0;
    --border-light: #eeeeee;
    --border-input: #bdbdbd;
    
    --help-bg: #fff8e1;
    --help-border: #ffca28;
    --help-text: #8d6e00;
    
    --exempt-bg: #e8f5e9;
    --exempt-border: #4caf50;
    --exempt-text: #2e7d32;
    
    --zero-bg: #e3f2fd;
    --zero-border: #2196f3;
    --zero-text: #1565c0;
    
    --whatsapp: #25D366;
    --whatsapp-dark: #128C7E;
    
    /* Sombras Profesionales */
    --shadow-sm: 0 2px 4px rgba(0, 62, 59, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 62, 59, 0.10);
    --shadow-lg: 0 8px 24px rgba(0, 62, 59, 0.12);
    
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================
   TIPOGRAFÍAS PROFESIONALES
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Lato:wght@300;400;600;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-main);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Evitar scroll horizontal con full width */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

h1 { font-size: 2.8rem; font-weight: 800; }
h2 { font-size: 2.2rem; font-weight: 700; }
h3 { font-size: 1.8rem; font-weight: 600; }
h4 { font-size: 1.4rem; font-weight: 600; }
h5 { font-size: 1.2rem; font-weight: 600; }
h6 { font-size: 1rem; font-weight: 600; }

.app-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Header */
.header {
    background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 100%);
    color: var(--text-light);
    padding: 20px 24px;
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    box-shadow: var(--shadow-lg);
}

.logo-container {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.logo { height: 50px; width: auto; }

.header-title h2 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.header-title p {
    font-size: 0.85rem;
    opacity: 0.85;
    color: var(--gold-light);
}

/* Tabs Navigation */
/* ===============================================
   NAVEGACIÓN PRINCIPAL (2 NIVELES)
   =============================================== */

.main-navigation {
    background: var(--bg-section);
    border-bottom: 1px solid var(--border-light);
}

.nav-level-1 {
    display: flex;
    justify-content: center;
    gap: 0;
    background: var(--teal);
    padding: 0;
}

.nav-primary {
    flex: 1;
    max-width: 200px;
    padding: 14px 24px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    background: transparent;
}

.nav-primary:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
}

.nav-primary.active {
    color: #fff;
    background: rgba(201, 162, 39, 0.2);
    border-bottom-color: var(--gold);
}

.nav-level-2 {
    display: flex;
    justify-content: center;
    gap: 0;
    background: var(--bg-section);
    padding: 0;
}

.nav-secondary {
    flex: 1;
    max-width: 200px;
    padding: 12px 20px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.nav-secondary:hover {
    background: rgba(27, 94, 94, 0.05);
    color: var(--teal);
}

.nav-secondary.active {
    color: var(--teal);
    background: rgba(27, 94, 94, 0.1);
    border-bottom-color: var(--teal);
    font-weight: 600;
}

/* Mantener tabs-navigation para compatibilidad (deprecated) */
.tabs-navigation {
    display: flex;
    gap: 0;
    background: var(--teal-dark);
    border-bottom: 3px solid var(--gold);
    margin-bottom: 24px;
}

.tab-link {
    flex: 1;
    padding: 14px 20px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    background: transparent;
}

.tab-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
}

.tab-link.active {
    color: #fff;
    background: rgba(201, 162, 39, 0.2);
    border-bottom-color: var(--gold);
}

/* Form */
.calculator-form {
    background: var(--bg-card);
    padding: 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
}

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--teal);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold);
}

.section-number {
    width: 26px;
    height: 26px;
    background: var(--teal);
    color: var(--text-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
}

.subsection {
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg-section);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.subsection-label {
    display: block;
    font-weight: 600;
    color: var(--teal);
    margin-bottom: 14px;
    font-size: 0.9rem;
}

.form-group { margin-bottom: 16px; }
.form-group:last-child { margin-bottom: 0; }

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

/* Select & Input */
.select-wrapper { position: relative; }

.select-wrapper select,
.form-group select,
.form-group input[type="text"],
.form-group input[type="number"] {
    width: 100%;
    padding: 12px 14px;
    font-size: 0.9rem;
    font-family: inherit;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text-primary);
    transition: var(--transition);
}

.select-wrapper select {
    padding-right: 36px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231B5E5E' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
}

.form-group select:focus,
.form-group input:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(27, 94, 94, 0.15);
}

.form-group select:disabled,
.form-group input:disabled {
    background: #f0f2f4;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Date Row */
.date-row {
    display: grid;
    grid-template-columns: 80px 1fr 100px;
    gap: 10px;
}

/* Filters */
.filters-section {
    margin: 20px 0;
    padding: 16px;
    background: linear-gradient(135deg, rgba(27, 94, 94, 0.03) 0%, rgba(27, 94, 94, 0.08) 100%);
    border-radius: var(--radius-md);
    border: 1px dashed var(--teal);
}

.filters-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--teal);
    margin-bottom: 12px;
}

.filters-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.filter-group select {
    font-size: 0.85rem;
    padding: 10px 12px;
}

.filter-notice {
    display: none;
    margin-top: 10px;
    padding: 10px 12px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: #856404;
}

.filter-notice.active { display: block; }

/* Spinner */
.select-spinner {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--teal);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: none;
}

.select-spinner.active { display: block; }

@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }

/* Version Search Section */
.version-search-section {
    margin-top: 24px;
    padding: 24px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}

.version-search-section:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-section-title {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.version-search-box {
    position: relative;
}

.version-search-box::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
}

.version-search-box input {
    width: 100%;
    height: 52px;
    padding: 0 16px 0 48px;
    font-size: 0.95rem;
    font-family: inherit;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    color: #1f2937;
    transition: all 0.2s ease;
}

.version-search-box input::placeholder {
    color: #9ca3af;
}

.version-search-box input:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(27, 94, 94, 0.1);
    background: #fafafa;
}

.version-search-box input:disabled {
    background: #f9fafb;
    cursor: not-allowed;
    color: #9ca3af;
    opacity: 1;
}

.search-hint {
    margin-top: 12px;
    font-size: 0.85rem;
    color: #6b7280;
    padding-left: 4px;
    font-style: normal;
}

.search-hint.error {
    color: #dc2626;
}

/* Version Results */
.version-results {
    margin-top: 16px;
    max-height: 400px;
    overflow-y: auto;
    border-radius: 12px;
}

.version-result-item {
    padding: 14px 16px;
    cursor: pointer;
    border-radius: 10px;
    margin-bottom: 8px;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    transition: all 0.15s ease;
}

.version-result-item:last-child {
    margin-bottom: 0;
}

.version-result-item:hover {
    background: #f0fafa;
    border-color: var(--teal);
    transform: translateX(2px);
    box-shadow: 0 2px 4px rgba(27, 94, 94, 0.1);
}

.version-result-item strong {
    color: #1f2937;
    font-weight: 600;
}

.version-display {
    font-size: 0.9rem;
    color: var(--text-primary);
    display: block;
    line-height: 1.6;
}

.no-results, .too-many-results {
    padding: 20px;
    text-align: center;
    color: #6b7280;
    font-size: 0.9rem;
    font-style: normal;
    background: #f9fafb;
    border-radius: 10px;
    border: 1.5px dashed #d1d5db;
}

.too-many-results {
    color: #d97706;
    font-weight: 500;
    border-color: #fbbf24;
    background: #fffbeb;
}

/* Version Results Scrollbar */
.version-results::-webkit-scrollbar { width: 8px; }
.version-results::-webkit-scrollbar-track { background: transparent; }
.version-results::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
.version-results::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Selected Version Info */
.selected-version-info {
    display: none;
    margin-top: 12px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(27, 94, 94, 0.05) 0%, rgba(27, 94, 94, 0.1) 100%);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--teal);
}

.selected-version-info.active { display: block; }

.version-info-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.version-info-name {
    font-weight: 600;
    color: var(--teal);
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.version-info-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.spec-item {
    display: flex;
    flex-direction: column;
}

.spec-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.spec-value {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

.spec-value.spec-price {
    color: var(--teal);
    font-weight: 600;
}

/* CO2 Input */
.co2-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.co2-input-wrapper input {
    flex: 1;
    max-width: 150px;
}

.co2-input-wrapper .unit {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Help Box */
.help-box {
    margin-top: 12px;
    padding: 14px;
    background: var(--help-bg);
    border: 1px solid var(--help-border);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--help-text);
    line-height: 1.6;
}

/* Exemption Section */
.exemption-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px solid var(--border-light);
}

.exemption-title {
    display: block;
    font-weight: 600;
    color: var(--teal);
    margin-bottom: 16px;
    font-size: 0.9rem;
}

.exemption-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}

.exemption-group:last-child { border-bottom: none; }
.exemption-group label { flex: 1; margin-bottom: 0; }
.exemption-group select { width: 100px; flex-shrink: 0; }

/* Calculate Button */
.calculate-btn {
    width: 100%;
    padding: 16px 24px;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: var(--text-light);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-md);
    margin-top: 24px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.calculate-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.calculate-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.btn-hint {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 8px;
}

/* Results Panel */
.results-panel {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
    margin-top: 24px;
    display: none;
    overflow: hidden;
}

.results-panel.active {
    display: block;
    animation: slideIn 0.3s ease;
}

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

/* Exempt Result */
.exempt-result {
    text-align: center;
    padding: 30px;
    background: var(--exempt-bg);
    display: none;
}

.exempt-badge {
    display: inline-block;
    padding: 10px 30px;
    background: var(--exempt-border);
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
    border-radius: 25px;
    margin-bottom: 14px;
}

.exempt-result h3 {
    color: var(--exempt-text);
    font-size: 1.1rem;
    margin-bottom: 12px;
}

.exempt-reason {
    color: var(--exempt-text);
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 20px;
}

.exempt-result .whatsapp-btn {
    margin-top: 20px;
}

/* Zero Result */
.zero-result {
    display: none;
    padding: 24px;
}

.zero-notice {
    padding: 16px;
    background: var(--zero-bg);
    border: 1px solid var(--zero-border);
    border-radius: var(--radius-md);
    color: var(--zero-text);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.zero-icon { margin-right: 8px; }

.zero-total {
    background: var(--teal);
    color: white;
    padding: 20px;
    border-radius: var(--radius-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.zero-result .whatsapp-btn {
    margin-top: 0;
}

.zero-label {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
}

.zero-value {
    font-size: 1.8rem;
    font-weight: 700;
}

/* Normal Result */
.normal-result {
    display: none;
    padding: 24px;
}

.results-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--teal);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold);
}

/* Results Table */
.results-table {
    background: var(--bg-section);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 20px;
}

.result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
}

.result-row:last-child { border-bottom: none; }

.result-row.highlight-row {
    background: rgba(27, 94, 94, 0.08);
}

.result-row.separator {
    padding: 0;
    height: 2px;
    background: var(--teal);
}

.result-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.result-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
}

.result-value.discount { color: #e53935; }

/* Total */
.total-pagar {
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
    color: white;
    padding: 24px;
    border-radius: var(--radius-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.total-label {
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.total-value {
    font-size: 2.2rem;
    font-weight: 700;
}

/* Legal Text */
.legal-text {
    padding: 14px;
    background: #f5f5f5;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.6;
    border-left: 4px solid var(--gold);
    margin-bottom: 20px;
}

.legal-text a { color: var(--teal); }

/* PDF Download Button */
.pdf-download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
    color: white;
    border: none;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-md);
    margin-bottom: 12px;
}

.pdf-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.pdf-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* FEB 2026 — CTA "Tramitar matriculación" (puente calculadora → wizard) */
.tramitar-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 18px;
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-light) 100%);
    color: var(--teal-dark);
    border: 2px solid var(--gold-dark);
    font-size: 0.98rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.01em;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 16px rgba(201, 152, 82, 0.32);
    margin-bottom: 12px;
}

.tramitar-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(201, 152, 82, 0.45);
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
}

.tramitar-cta-btn:active {
    transform: translateY(0);
}

.tramitar-cta-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* WhatsApp Button */
.whatsapp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--whatsapp) 0%, var(--whatsapp-dark) 100%);
    color: white;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: var(--transition);
    box-shadow: var(--shadow-md);
}

.whatsapp-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.whatsapp-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Footer */
.footer {
    text-align: center;
    padding: 24px;
    margin-top: 24px;
}

.footer-logo { height: 40px; margin-bottom: 12px; }

.footer p {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.footer .copyright {
    margin-top: 4px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Loading */
.loading-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(27, 94, 94, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    color: var(--text-light);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.loading-overlay.active { opacity: 1; visibility: visible; }

.loading-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(255,255,255,0.2);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 14px;
}

/* Responsive */
@media (max-width: 600px) {
    .app-container { padding: 10px; }
    .header { padding: 16px; }
    .logo { height: 40px; }
    .calculator-form { padding: 16px; }
    
    .date-row { grid-template-columns: 1fr; gap: 10px; }
    .filters-row { grid-template-columns: 1fr; }
    .version-info-specs { grid-template-columns: 1fr; }
    
    .exemption-group {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .exemption-group select { width: 100%; }
    
    .total-value, .zero-value { font-size: 1.6rem; }
    
    .result-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .whatsapp-btn {
        font-size: 0.85rem;
        padding: 14px 16px;
    }
}

/* Scrollbar */
.version-dropdown::-webkit-scrollbar { width: 6px; }
.version-dropdown::-webkit-scrollbar-track { background: var(--bg-section); }
.version-dropdown::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }

/* ============================================
   ESTILOS ESPECÍFICOS ITP (TRANSFERENCIAS)
   ============================================ */

/* Toggle Switch */
.toggle-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.toggle-label input[type="checkbox"] {
    display: none;
}

.toggle-switch {
    position: relative;
    width: 60px;
    height: 30px;
    background: #ccc;
    border-radius: 30px;
    transition: background 0.3s;
}

.toggle-label input:checked + .toggle-switch {
    background: var(--teal);
}

.toggle-switch::before {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: white;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
}

.toggle-label input:checked + .toggle-switch::before {
    transform: translateX(30px);
}

.toggle-text {
    display: flex;
    gap: 70px;
    font-size: 0.95rem;
    font-weight: 600;
}

.toggle-no { color: var(--teal); }
.toggle-yes { color: #999; }
.toggle-label input:checked ~ .toggle-text .toggle-no { color: #999; }
.toggle-label input:checked ~ .toggle-text .toggle-yes { color: var(--teal); }

/* Info/Warning Notices */
.info-notice, .warning-notice {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    margin-top: 16px;
    line-height: 1.5;
}

.info-notice {
    background: #e3f2fd;
    border-left: 4px solid #2196f3;
    color: #1565c0;
}

.warning-notice {
    background: #fff3e0;
    border-left: 4px solid #ff9800;
    color: #e65100;
}

/* Vehicle Type Grid */
.vehicle-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.vehicle-type-card {
    background: var(--bg-card);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.vehicle-type-card:hover {
    border-color: var(--teal);
    background: rgba(27, 94, 94, 0.05);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.vehicle-type-card.selected {
    border-color: var(--teal);
    background: rgba(27, 94, 94, 0.1);
    box-shadow: 0 0 0 3px rgba(27, 94, 94, 0.2);
}

.vehicle-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}

.vehicle-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Help Links */
.help-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.8rem;
    color: #e53935;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.help-link:hover {
    color: #c62828;
    text-decoration: underline;
}

/* Field Help Text */
.field-help-text {
    font-size: 0.8rem;
    color: #666;
    margin: 6px 0 12px 0;
    line-height: 1.4;
    font-style: italic;
}

/* Blocked CCAA Message */
.blocked-ccaa-message {
    background: #fff3e0;
    border: 2px solid #ff9800;
    border-radius: var(--radius-lg);
    padding: 40px 30px;
    text-align: center;
    margin-top: 30px;
}

.blocked-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.blocked-ccaa-message h3 {
    color: #e65100;
    font-size: 1.3rem;
    margin-bottom: 12px;
}

.blocked-ccaa-message p {
    color: #5d4037;
    font-size: 1rem;
    margin-bottom: 24px;
}

/* Result Cards (estilo Transferencia24) */
.result-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
}

.result-card-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--teal);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold);
}

.result-table {
    width: 100%;
    border-collapse: collapse;
}

.result-table tr {
    border-bottom: 1px solid var(--border-light);
}

.result-table tr:last-child {
    border-bottom: none;
}

.result-table td {
    padding: 12px 8px;
    font-size: 0.9rem;
}

.result-table td:first-child {
    color: var(--text-muted);
}

.result-table td.result-value {
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
}

.result-table .highlight-row {
    background: rgba(27, 94, 94, 0.05);
}

/* ITP / IEDMT — Fila TOTAL (verde corporativo) con contraste premium */
.result-table .total-row {
    background: linear-gradient(135deg, var(--teal-dark, #003E3B) 0%, var(--teal) 100%);
    color: #ffffff;
}

.result-table .total-row td {
    padding: 18px 14px;
    font-size: 1.05rem;
    color: #ffffff !important;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.result-table .total-row td:first-child {
    color: rgba(255, 255, 255, 0.92) !important;
}

.result-table .total-row td.result-value,
.result-table .total-row td.result-value strong,
.result-table .total-row strong {
    color: #ffffff !important;
    font-weight: 800;
    font-size: 1.15rem;
}

/* ITP — Bloque TOTAL (IVA incluido) — versión premium dorada/naranja */
.result-table .orange-total {
    background: linear-gradient(135deg, #C99852 0%, #B0822F 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}

.result-table .orange-total td {
    padding: 20px 14px;
    font-size: 1.05rem;
    color: #ffffff !important;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.result-table .orange-total td:first-child {
    color: rgba(255, 255, 255, 0.95) !important;
}

.result-table .orange-total td.result-value,
.result-table .orange-total td.result-value strong,
.result-table .orange-total strong {
    color: #ffffff !important;
    font-weight: 800;
    font-size: 1.25rem;
    text-shadow: 0 1px 1px rgba(0,0,0,0.08);
}

/* ITP / IEDMT — Filas normales del result-table: más peso y separación */
.result-table td {
    font-size: 0.95rem;
}
.result-table td:first-child {
    font-weight: 500;
    color: #4b5563;
}
.result-table td.result-value {
    font-weight: 700;
    color: #111827;
}

/* Forzar ocultación de la card de versión seleccionada hasta que tenga .active */
.selected-card:not(.active) {
    display: none !important;
}

.legal-note {
    margin-top: 16px;
    padding: 12px;
    background: #f5f5f5;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--gold);
}

.legal-note small {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* WhatsApp Button Large */
.whatsapp-btn-large {
    width: 100%;
}

/* ===============================================
   SELECTED VERSION PANEL - SUB-CARD MODERNA (OLD - CAN BE DELETED)
   =============================================== */

.selected-version-panel {
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    padding: 20px;
    margin-top: 20px;
    display: none;
    transition: all 0.3s ease;
}

.selected-version-panel.active {
    display: block;
    animation: slideInPanel 0.3s ease;
}

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

.selected-version-panel h4 {
    font-size: 0.75rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 16px 0;
}

.selected-version-panel p {
    margin: 12px 0;
    font-size: 0.95rem;
    color: #374151;
    line-height: 1.6;
}

.selected-version-panel p strong {
    color: #6b7280;
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-block;
    min-width: 140px;
}

.selected-version-panel p span {
    color: #1f2937;
    font-weight: 600;
}

.change-version-btn {
    margin-top: 16px;
    padding: 10px 20px;
    background: transparent;
    color: var(--teal);
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.change-version-btn:hover {
    border-color: var(--teal);
    background: #f0fafa;
    transform: translateY(-1px);
}

.change-version-btn:active {
    transform: translateY(0);
}

/* ===============================================
   BOTÓN CALCULAR - PREMIUM SAAS
   =============================================== */

button[type="submit"],
.calculate-button,
#itp-calculate-btn,
#btn-calculate {
    width: 100%;
    height: 52px;
    margin-top: 24px;
    padding: 0 32px;
    background: linear-gradient(135deg, var(--teal) 0%, #145050 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(27, 94, 94, 0.25), 0 2px 4px rgba(27, 94, 94, 0.15);
    transition: all 0.2s ease;
    font-family: inherit;
}

button[type="submit"]:hover:not(:disabled),
.calculate-button:hover:not(:disabled),
#itp-calculate-btn:hover:not(:disabled),
#btn-calculate:hover:not(:disabled) {
    background: linear-gradient(135deg, #145050 0%, #0f3d3d 100%);
    box-shadow: 0 6px 16px rgba(27, 94, 94, 0.3), 0 4px 8px rgba(27, 94, 94, 0.2);
    transform: translateY(-2px);
}

button[type="submit"]:active:not(:disabled),
.calculate-button:active:not(:disabled),
#itp-calculate-btn:active:not(:disabled),
#btn-calculate:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(27, 94, 94, 0.2);
}

button[type="submit"]:disabled,
.calculate-button:disabled,
#itp-calculate-btn:disabled,
#btn-calculate:disabled {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* HELP LINK MODERNO */

.help-link {
    display: inline-block;
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--teal);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.help-link:hover {
    color: #145050;
    text-decoration: underline;
}

/* ===============================================
   RESPONSIVE MODERNO
   =============================================== */

@media (max-width: 768px) {
    .version-search-section {
        padding: 20px;
        border-radius: 16px;
    }
    
    .version-search-box input {
        height: 48px;
        font-size: 0.9rem;
    }
    
    button[type="submit"],
    .calculate-button,
    #itp-calculate-btn,
    #btn-calculate {
        height: 48px;
        font-size: 0.95rem;
    }
}

/* ===============================================
   SELECTED CARD - DISEÑO MODERNO SAAS 2026
   =============================================== */

.selected-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    margin-top: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03);
    display: none;
    overflow: hidden;
}

.selected-card.active {
    display: block;
    animation: fadeInCard 0.25s ease;
}

@keyframes fadeInCard {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* META: Cabecera con jerarquía clara */

.selected-card__meta {
    padding: 24px;
    border-bottom: 1px solid #f3f4f6;
}

.selected-card__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.selected-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.selected-card__title .title-text {
    display: block;
    font-weight: 700;
}

/* CHIPS para kW/pot/CV */

.selected-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 16px;
}

.chip {
    display: inline-block;
    padding: 6px 12px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4b5563;
    white-space: nowrap;
}

/* VALORACIÓN HACIENDA - Fila limpia */

.selected-card__value-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 10px;
    margin-bottom: 16px;
}

.value-row__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
}

.value-row__amount {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--teal);
    letter-spacing: -0.02em;
}

/* BOTÓN CAMBIAR VERSIÓN - Secondary outline */

.btn-secondary-modern {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: transparent;
    color: #6b7280;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.btn-secondary-modern svg {
    width: 15px;
    height: 15px;
}

.btn-secondary-modern:hover {
    border-color: #9ca3af;
    background: #f9fafb;
    color: #374151;
}

/* ACTIONS: CCAA + Calcular */

.selected-card__actions {
    padding: 20px 24px 24px 24px;
    background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
}

.action-label-modern {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
}

.action-label-modern .required {
    color: #dc2626;
    margin-left: 2px;
}

/* SELECT MODERNO */

.select-modern {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    padding-right: 40px;
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 500;
    color: #111827;
    background: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    border: 1.5px solid #d1d5db;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    margin-bottom: 16px;
}

.select-modern:hover {
    border-color: #9ca3af;
    background-color: #fafafa;
}

.select-modern:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(27, 94, 94, 0.08);
    background-color: #ffffff;
}

.select-modern option {
    padding: 10px;
}

/* BOTÓN PRIMARY - CTA moderno */

.btn-primary-modern {
    width: 100%;
    height: 52px;
    padding: 0 24px;
    background: linear-gradient(135deg, var(--teal) 0%, #14504f 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(27, 94, 94, 0.22), 0 2px 6px rgba(27, 94, 94, 0.12);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    position: relative;
    overflow: hidden;
}

.btn-primary-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.btn-primary-modern:hover:not(:disabled) {
    background: linear-gradient(135deg, #14504f 0%, #0f3d3d 100%);
    box-shadow: 0 6px 18px rgba(27, 94, 94, 0.28), 0 4px 10px rgba(27, 94, 94, 0.16);
    transform: translateY(-1px);
}

.btn-primary-modern:hover:not(:disabled)::before {
    opacity: 1;
}

.btn-primary-modern:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(27, 94, 94, 0.2);
}

.btn-primary-modern:disabled {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* RESPONSIVE */

@media (max-width: 768px) {
    .selected-card__meta {
        padding: 20px;
    }
    
    .selected-card__title {
        font-size: 1.1rem;
    }
    
    .selected-card__chips {
        gap: 6px;
    }
    
    .chip {
        font-size: 0.75rem;
        padding: 5px 10px;
    }
    
    .value-row__amount {
        font-size: 1.05rem;
    }
    
    .selected-card__actions {
        padding: 16px 20px 20px 20px;
    }
    
    .select-modern {
        height: 44px;
        font-size: 0.875rem;
    }
    
    .btn-primary-modern {
        height: 48px;
        font-size: 0.95rem;
    }
}

/* Date Selector */
.date-selector {
    display: flex;
    gap: 12px;
}

.date-selector select {
    flex: 1;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-family: inherit;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
}

.date-selector select:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(27, 94, 94, 0.15);
}

/* Responsive ITP */
@media (max-width: 768px) {
    .vehicle-type-grid {
        grid-template-columns: 1fr;
    }
    
    .toggle-text {
        gap: 50px;
    }
    
    .date-selector {
        flex-direction: column;
    }
}


/* ===============================================
   BOTÓN "INICIAR TRANSFERENCIA ONLINE" (NUEVO)
   =============================================== */

.btn-primary-online {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 18px 32px;
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%);
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(27, 94, 94, 0.2);
    margin-bottom: 16px;
}

.btn-primary-online:hover {
    background: linear-gradient(135deg, var(--teal-light) 0%, var(--teal) 100%);
    box-shadow: 0 8px 20px rgba(27, 94, 94, 0.3);
    transform: translateY(-2px);
}

.btn-primary-online:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(27, 94, 94, 0.2);
}

.btn-primary-online svg {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .btn-primary-online {
        font-size: 1rem;
        padding: 16px 24px;
    }
}


/* ============================================
   WIZARD - CALCULADORA ITP INTEGRADA
   ============================================ */

/* Estilos para la lista de versiones (resultados de búsqueda) */
.version-name {
    font-size: 1rem;
    color: var(--text);
    margin-bottom: 8px;
}

.version-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.spec-chip {
    display: inline-block;
    padding: 4px 10px;
    background: #f3f4f6;
    border-radius: 12px;
    font-size: 0.8rem;
    color: #666;
    font-weight: 500;
}

.fuel-chip {
    background: #e0f2f1;
    color: var(--teal);
    font-weight: 600;
}

.version-value {
    font-size: 0.9rem;
    color: #666;
    margin-top: 6px;
}

.version-value strong {
    color: var(--teal);
    font-weight: 600;
}

/* Resumen del coste (Paso 2) */
.result-summary-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.result-header {
    background: linear-gradient(135deg, var(--teal) 0%, #1b7e7e 100%);
    color: white;
    padding: 20px 24px;
}

.result-header h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.result-body {
    padding: 24px;
}

.result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
}

.result-row:last-child {
    border-bottom: none;
}

.result-label {
    font-size: 0.95rem;
    color: #666;
}

.result-value {
    font-size: 1rem;
    color: var(--text);
    font-weight: 600;
}

.result-highlight {
    background: #f8f9fa;
    margin: 0 -24px;
    padding: 14px 24px;
    border-top: 2px solid var(--teal);
    border-bottom: 2px solid var(--teal);
}

.result-highlight .result-value {
    color: var(--teal);
    font-size: 1.2rem;
}

.result-total {
    background: var(--teal);
    color: white;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-label {
    font-size: 1.1rem;
    font-weight: 600;
}

.total-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.result-info {
    padding: 16px 24px;
    background: #f8f9fa;
}

.result-info p {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
}

/* Card de referencia del vehículo */
.vehicle-reference-card {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
}

.vehicle-reference-card h4 {
    margin: 0 0 16px 0;
    font-size: 1.1rem;
    color: var(--teal);
}

.vehicle-data {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.data-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e0e0e0;
}

.data-item:last-child {
    border-bottom: none;
}

.data-item .data-label {
    font-size: 0.9rem;
    color: #666;
}

.data-item .data-value {
    font-size: 0.95rem;
    color: var(--text);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .result-header h3 {
        font-size: 1.1rem;
    }
    
    .result-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 12px 0;
    }
    
    .result-label,
    .result-value {
        font-size: 0.9rem;
    }
    
    .result-highlight .result-value {
        font-size: 1.1rem;
    }
    
    .total-label {
        font-size: 1rem;
    }
    
    .total-value {
        font-size: 1.3rem;
    }
}

/* ============================================
   VERSIÓN SELECCIONADA CON ETIQUETAS
   ============================================ */

.version-selected-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e0e0e0;
}

.version-selected-specs .spec-item {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #374151;
}

.version-selected-specs .spec-item strong {
    color: var(--teal);
    margin-right: 4px;
}

.version-selected-specs .spec-item.fuel {
    background: #e0f2f1;
    color: var(--teal);
    font-weight: 600;
}

.version-selected-specs .spec-item.fuel strong {
    color: #0d9488;
}

@media (max-width: 768px) {
    .version-selected-specs {
        gap: 8px;
    }
    
    .version-selected-specs .spec-item {
        padding: 5px 10px;
        font-size: 0.85rem;
    }
}

/* ============================================
   RESUMEN DE COSTES INLINE (PASO 1)
   ============================================ */

.cost-summary-inline {
    margin-top: 24px;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    border: 2px solid var(--teal);
    box-shadow: 0 4px 12px rgba(27, 94, 94, 0.1);
    animation: slideDown 0.3s ease-out;
}

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

.summary-title {
    margin: 0 0 16px 0;
    font-size: 1.3rem;
    color: var(--teal);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cost-breakdown {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cost-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;
}

.cost-row:last-child {
    border-bottom: none;
}

.cost-row.cost-total {
    background: linear-gradient(135deg, #ff9800 0%, #ff6f00 100%);
    color: white;
    padding: 16px;
    border-radius: 8px;
    margin-top: 8px;
    border: none;
}

.cost-label {
    font-size: 0.95rem;
    color: #666;
}

.cost-total .cost-label {
    color: white;
    font-size: 1.1rem;
}

.cost-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--teal);
}

.cost-total .cost-value {
    color: white;
    font-size: 1.3rem;
}

/* Botón Cambiar versión modernizado */
#itp-change-version-btn {
    background: transparent;
    border: 2px solid var(--teal);
    color: var(--teal);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

#itp-change-version-btn:hover {
    background: var(--teal);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(27, 94, 94, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .summary-title {
        font-size: 1.1rem;
    }
    
    .cost-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .cost-label,
    .cost-value {
        font-size: 0.9rem;
    }
    
    .cost-total .cost-label,
    .cost-total .cost-value {
        font-size: 1rem;
    }
}

/* =============================================
   REGLA GLOBAL: TÍTULOS BLANCOS SOBRE FONDOS VERDES
   Aplicado automáticamente a todos los elementos con fondo verde corporativo
   ============================================= */

/* Selectores para elementos con fondo verde */
.contact-hero h1,
.contact-hero h2,
.contact-hero h3,
.about-hero h1,
.about-hero h2,
.about-hero h3,
.service-hero h1,
.service-hero h2,
.service-hero h3,
.home-hero-t24 h1,
.home-hero-t24 h2,
.home-hero-t24 h3,
.final-cta h1,
.final-cta h2,
.final-cta h3,
.cta-transferencia h1,
.cta-transferencia h2,
.cta-transferencia h3,
.cta-section h1,
.cta-section h2,
.cta-section h3,
.contact-section h1,
.contact-section h2,
.contact-section h3,
.hero-section h1,
.hero-section h2,
.hero-section h3,
[style*="background: linear-gradient(135deg, #003E3B"] h1,
[style*="background: linear-gradient(135deg, #003E3B"] h2,
[style*="background: linear-gradient(135deg, #003E3B"] h3,
[style*="background: #003E3B"] h1,
[style*="background: #003E3B"] h2,
[style*="background: #003E3B"] h3 {
    color: #ffffff !important;
}

/* Asegurar que párrafos también sean blancos en estos contextos */
.contact-hero p,
.about-hero p,
.service-hero p,
.home-hero-t24 p,
.final-cta p,
.cta-transferencia p,
.cta-section p,
.contact-section p,
.hero-section p {
    color: #ffffff !important;
    opacity: 0.95;
}

/* =============================================
   BOTÓN VER CATÁLOGO COMPLETO - ESTILO CORPORATIVO
   ============================================= */

.btn-ver-catalogo:hover {
    background: linear-gradient(135deg, #005550 0%, #00716a 100%) !important;
    box-shadow: 0 6px 20px rgba(0, 62, 59, 0.35) !important;
    transform: translateY(-2px);
}

.btn-ver-catalogo:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 62, 59, 0.3) !important;
}