/* * LogísticaGB — Modo oscuro * Archivo separado para no tocar styles.css (224KB). * Se activa con data-theme="dark" en . * Colores: paleta slate-900 / slate-800, acento #3b82f6. * ────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════ 1. Variables de tema — gb-theme-* (hero, fleet, footer) ═══════════════════════════════════════════════════════ */ [data-theme="dark"] { /* Ink */ --gb-theme-ink: #e2e8f0; --gb-theme-ink-soft: #94a3b8; --gb-theme-ink-muted: #64748b; /* Surfaces */ --gb-theme-bg: #0f172a; --gb-theme-surface: #1e293b; --gb-theme-surface-soft: #1a2234; /* Brand */ --gb-theme-primary: #3b82f6; --gb-theme-primary-strong: #2563eb; --gb-theme-accent: #60a5fa; /* Decoración */ --gb-theme-border: rgba(148, 163, 184, 0.14); --gb-theme-border-strong: rgba(59, 130, 246, 0.22); --gb-theme-shadow: 0 22px 60px rgba(0, 0, 0, 0.32); --gb-theme-shadow-lg: 0 28px 90px rgba(0, 0, 0, 0.40); } /* ═══════════════════════════════════════════════════════ 2. Variables de tema — ar-* (autorenta / redesign v2) ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .autorenta-page { --ar-ink: #e2e8f0; --ar-ink-soft: #94a3b8; --ar-bg: #0f172a; --ar-bg-warm: #131c2e; --ar-primary: #3b82f6; --ar-primary-dark: #1e3a5f; --ar-primary-soft: rgba(59, 130, 246, 0.18); --ar-accent: #fbbf24; --ar-accent-strong: #f59e0b; --ar-success: #34d399; --ar-border: rgba(148, 163, 184, 0.14); --ar-surface: #1e293b; --ar-shadow: 0 4px 24px rgba(0, 0, 0, 0.28); --ar-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.40); } /* ═══════════════════════════════════════════════════════ 3. Body / fondo principal ═══════════════════════════════════════════════════════ */ [data-theme="dark"] body { background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 24%), radial-gradient(circle at top right, rgba(30, 58, 138, 0.06), transparent 22%), linear-gradient(180deg, #0f172a 0%, #0c1322 48%, #0f172a 100%); color: #e2e8f0; } /* ═══════════════════════════════════════════════════════ 4. Navbar — glass oscuro ═══════════════════════════════════════════════════════ */ /* gb-theme nav */ [data-theme="dark"] .site-header { background: rgba(15, 23, 42, 0.92); border-bottom-color: rgba(148, 163, 184, 0.08); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .main-navigation { background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.92)), radial-gradient(circle at top center, rgba(59, 130, 246, 0.08), transparent 46%); border-color: rgba(148, 163, 184, 0.08); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18); } [data-theme="dark"] .main-navigation a:hover, [data-theme="dark"] .main-navigation a:focus-visible { background: rgba(59, 130, 246, 0.12); } [data-theme="dark"] .gb-language-switcher { background: rgba(30, 41, 59, 0.9); border-color: rgba(148, 163, 184, 0.1); } [data-theme="dark"] .header-cta { background: linear-gradient(135deg, #e2e8f0, #94a3b8); color: #0f172a; box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22); } /* autorenta nav */ [data-theme="dark"] .autorenta-nav { background: rgba(15, 23, 42, 0.96); border-bottom-color: rgba(148, 163, 184, 0.08); } [data-theme="dark"] .autorenta-nav.is-scrolled { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .autorenta-nav__mobile { background: #0f172a; border-top-color: rgba(148, 163, 184, 0.08); } /* ═══════════════════════════════════════════════════════ 5. Hero ═══════════════════════════════════════════════════════ */ /* gb-theme hero card */ [data-theme="dark"] .gb-card-surface { background: rgba(30, 41, 59, 0.8); border-color: rgba(148, 163, 184, 0.1); } [data-theme="dark"] .gb-card-surface--booking { background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.96)), radial-gradient(circle at top center, rgba(59, 130, 246, 0.1), transparent 34%); border-color: rgba(59, 130, 246, 0.16); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32); } [data-theme="dark"] .gb-card-surface--form { background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); } [data-theme="dark"] .gb-eyebrow { background: rgba(59, 130, 246, 0.15); } /* autorenta hero */ [data-theme="dark"] .autorenta-hero { background-color: #0c1322; } [data-theme="dark"] .autorenta-hero__overlay { background: linear-gradient(180deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.95) 100%); } [data-theme="dark"] .autorenta-booking-card { background: #1e293b; border-color: rgba(148, 163, 184, 0.1); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); } /* ═══════════════════════════════════════════════════════ 6. Trust strip ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .autorenta-trust-strip { background: #1e3a5f; } /* ═══════════════════════════════════════════════════════ 7. Section overrides ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .autorenta-section--warm { background: #131c2e; } [data-theme="dark"] .autorenta-section--dark { background: #0c1322; } /* ═══════════════════════════════════════════════════════ 8. Benefit cards ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .autorenta-benefit-card { background: #1e293b; border-color: rgba(148, 163, 184, 0.1); } [data-theme="dark"] .autorenta-benefit-card:hover { border-color: rgba(59, 130, 246, 0.22); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .autorenta-benefit-card__icon { background: rgba(59, 130, 246, 0.14); } /* ═══════════════════════════════════════════════════════ 9. Fleet / car cards ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .autorenta-car-card { background: #1e293b; border-color: rgba(148, 163, 184, 0.1); } [data-theme="dark"] .autorenta-car-card:hover { border-color: rgba(59, 130, 246, 0.24); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); } [data-theme="dark"] .autorenta-car-card--featured { border-color: rgba(59, 130, 246, 0.18); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .autorenta-car-card__media { background: linear-gradient(180deg, #1e293b 0%, #131c2e 100%); } [data-theme="dark"] .autorenta-tag { background: rgba(59, 130, 246, 0.18); color: #93c5fd; } [data-theme="dark"] .autorenta-ribbon { background: #3b82f6; } [data-theme="dark"] .autorenta-spec-grid div { background: rgba(30, 41, 59, 0.8); } [data-theme="dark"] .autorenta-car-card__footer { border-top-color: rgba(148, 163, 184, 0.1); } [data-theme="dark"] .autorenta-fleet-filter { background: #1e293b; border-color: rgba(148, 163, 184, 0.14); color: #e2e8f0; } [data-theme="dark"] .autorenta-fleet-filter:hover, [data-theme="dark"] .autorenta-fleet-filter:focus-visible, [data-theme="dark"] .autorenta-fleet-filter.is-active { background: #3b82f6; border-color: #3b82f6; color: #fff; } /* gb-theme catalog */ [data-theme="dark"] .gb-catalog-toolbar { background: rgba(30, 41, 59, 0.92); border-color: rgba(148, 163, 184, 0.08); } [data-theme="dark"] .gb-catalog-card { background: rgba(30, 41, 59, 0.98); border-color: rgba(148, 163, 184, 0.1); } [data-theme="dark"] .gb-catalog-card__media { background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.15), transparent 32%), linear-gradient(145deg, #0f172a 0%, #1e293b 100%); } /* ═══════════════════════════════════════════════════════ 10. Pricing cards ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .autorenta-pricing-card { background: #1e293b; border-color: rgba(148, 163, 184, 0.12); } [data-theme="dark"] .autorenta-pricing-card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .autorenta-pricing-card--popular { border-color: #3b82f6; box-shadow: 0 8px 32px rgba(59, 130, 246, 0.18); } [data-theme="dark"] .autorenta-pricing-card__badge { background: rgba(59, 130, 246, 0.14); } [data-theme="dark"] .autorenta-pricing-card__footer { border-top-color: rgba(148, 163, 184, 0.1); } [data-theme="dark"] .autorenta-pricing-note { background: rgba(30, 41, 59, 0.8); } /* ═══════════════════════════════════════════════════════ 11. Steps (cómo funciona) ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .autorenta-step__icon { background: rgba(59, 130, 246, 0.14); } [data-theme="dark"] .autorenta-step__connector { color: rgba(148, 163, 184, 0.2); } /* ═══════════════════════════════════════════════════════ 12. Corporate section (ya es --dark naturalmente) ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .autorenta-corporate-media__shadow { background: rgba(59, 130, 246, 0.15); } /* ═══════════════════════════════════════════════════════ 13. Testimonials ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .autorenta-testimonial { background: #1e293b; border-color: rgba(148, 163, 184, 0.1); } [data-theme="dark"] .autorenta-testimonial:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); } /* ═══════════════════════════════════════════════════════ 14. Requirements ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .autorenta-requirements-card { background: #1e293b; border-color: rgba(148, 163, 184, 0.1); } [data-theme="dark"] .autorenta-requirement { background: #0f172a; border-color: rgba(148, 163, 184, 0.08); } [data-theme="dark"] .autorenta-requirement:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .autorenta-requirement svg { background: rgba(59, 130, 246, 0.14); } [data-theme="dark"] .autorenta-requirements-card__note { background: rgba(15, 23, 42, 0.8); } /* ═══════════════════════════════════════════════════════ 15. FAQ accordion ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .autorenta-faq-item { background: #1e293b; border-color: rgba(148, 163, 184, 0.1); } [data-theme="dark"] .autorenta-faq-item[open] { border-color: rgba(59, 130, 246, 0.24); box-shadow: 0 4px 16px rgba(59, 130, 246, 0.08); } /* ═══════════════════════════════════════════════════════ 16. CTA banner ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .autorenta-cta-banner { background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%); } /* ═══════════════════════════════════════════════════════ 17. Footer (ya es oscuro, pero ajustes sutiles) ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .site-footer { background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.1), transparent 24%), radial-gradient(circle at bottom right, rgba(30, 58, 138, 0.12), transparent 26%), linear-gradient(145deg, #050510 0%, #0c1322 42%, #0f172a 100%); } [data-theme="dark"] .site-footer__panel { background: rgba(255, 255, 255, 0.04); border-color: rgba(148, 163, 184, 0.06); } [data-theme="dark"] .site-footer__cta { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; } [data-theme="dark"] .site-footer__bottom { border-top-color: rgba(148, 163, 184, 0.06); } /* autorenta footer */ [data-theme="dark"] .autorenta-footer { background: #0c1322; } /* ═══════════════════════════════════════════════════════ 18. Forms / inputs ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .autorenta-input-wrap input, [data-theme="dark"] .autorenta-input-wrap select, [data-theme="dark"] .autorenta-field input, [data-theme="dark"] .autorenta-field select, [data-theme="dark"] .autorenta-field textarea { background: #0f172a; border-color: rgba(148, 163, 184, 0.14); color: #e2e8f0; } [data-theme="dark"] .autorenta-input-wrap input:focus, [data-theme="dark"] .autorenta-input-wrap select:focus, [data-theme="dark"] .autorenta-field input:focus, [data-theme="dark"] .autorenta-field select:focus, [data-theme="dark"] .autorenta-field textarea:focus { border-color: rgba(59, 130, 246, 0.4); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); } /* gb-theme catalog filters */ [data-theme="dark"] .gb-catalog-filter input, [data-theme="dark"] .gb-catalog-filter select { background: #0f172a; border-color: rgba(148, 163, 184, 0.12); color: #e2e8f0; } [data-theme="dark"] .gb-catalog-filter input:focus, [data-theme="dark"] .gb-catalog-filter select:focus { border-color: rgba(59, 130, 246, 0.4); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); } /* ═══════════════════════════════════════════════════════ 19. Booking wizard (reservar.html) ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .booking-wizard { background: #1e293b; border-color: rgba(148, 163, 184, 0.1); } [data-theme="dark"] .booking-step input, [data-theme="dark"] .booking-step select { background: #0f172a; border-color: rgba(148, 163, 184, 0.14); color: #e2e8f0; } [data-theme="dark"] .vehicle-option { background: #0f172a; border-color: rgba(148, 163, 184, 0.1); color: #e2e8f0; } [data-theme="dark"] .vehicle-option.selected { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); } [data-theme="dark"] .booking-error { border-color: rgba(248, 113, 113, 0.35); background: rgba(127, 29, 29, 0.28); color: #fecaca; } [data-theme="dark"] .summary-row { border-bottom-color: rgba(148, 163, 184, 0.08); color: #e2e8f0; } [data-theme="dark"] .progress-step { background: rgba(148, 163, 184, 0.15); } [data-theme="dark"] .progress-step.active, [data-theme="dark"] .progress-step.done { background: #3b82f6; } /* ═══════════════════════════════════════════════════════ 20. Contact form ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .gb-contact-form-card, [data-theme="dark"] .autorenta-contact-card { background: #1e293b; border-color: rgba(148, 163, 184, 0.1); } /* ═══════════════════════════════════════════════════════ 21. gb-theme cards (trust, b2b, landing) ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .gb-trust-item, [data-theme="dark"] .gb-b2b-item, [data-theme="dark"] .gb-landing-card { background: rgba(30, 41, 59, 0.88); border-color: rgba(148, 163, 184, 0.1); } [data-theme="dark"] .gb-trust-item:nth-child(2), [data-theme="dark"] .gb-landing-card:nth-child(2) { background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(20, 30, 48, 0.96)), radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 34%); } [data-theme="dark"] .gb-trust-item:nth-child(3), [data-theme="dark"] .gb-b2b-item:nth-child(3) { background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(25, 34, 50, 0.98)), radial-gradient(circle at top right, rgba(30, 58, 138, 0.06), transparent 36%); } /* ═══════════════════════════════════════════════════════ 22. Hidden stock note ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .autorenta-hidden-stock-note { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.2); color: #fbbf24; } [data-theme="dark"] .autorenta-hidden-stock-note strong { color: #f59e0b; } /* ═══════════════════════════════════════════════════════ 23. Links / button variants en dark ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .autorenta-button--outline { border-color: #3b82f6; color: #93c5fd; } [data-theme="dark"] .autorenta-button--outline:hover { background: #3b82f6; color: #fff; } [data-theme="dark"] .autorenta-button--dark { background: #e2e8f0; color: #0f172a; } [data-theme="dark"] .gb-landing-card__link { color: #60a5fa; } /* ═══════════════════════════════════════════════════════ 24. Chatbot bubble (si aplica) ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .gb-chatbot-panel { background: #1e293b; border-color: rgba(148, 163, 184, 0.1); } [data-theme="dark"] .gb-chatbot-bubble { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4); } /* ═══════════════════════════════════════════════════════ 25. Scrollbar sutil para dark ═══════════════════════════════════════════════════════ */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #0f172a; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; } /* ═══════════════════════════════════════════════════════ 26. Selection color ═══════════════════════════════════════════════════════ */ [data-theme="dark"] ::selection { background: rgba(59, 130, 246, 0.3); color: #f1f5f9; } /* ═══════════════════════════════════════════════════════ 27. Dark mode toggle button ═══════════════════════════════════════════════════════ */ .gb-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 12px; background: transparent; color: inherit; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; flex-shrink: 0; } .gb-theme-toggle:hover { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.2); transform: scale(1.06); } .gb-theme-toggle svg { width: 20px; height: 20px; pointer-events: none; } /* Ocultar icono inactivo */ .gb-theme-toggle .gb-icon-sun { display: none; } .gb-theme-toggle .gb-icon-moon { display: block; } [data-theme="dark"] .gb-theme-toggle .gb-icon-sun { display: block; } [data-theme="dark"] .gb-theme-toggle .gb-icon-moon { display: none; } /* ═══════════════════════════════════════════════════════ 28. Logo swap para dark ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .autorenta-brand__logo { filter: brightness(0) invert(1) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3)); } /* ═══════════════════════════════════════════════════════ 29. Smooth transition al cambiar tema ═══════════════════════════════════════════════════════ */ html { transition: background-color 0.3s ease, color 0.3s ease; } html * { transition-property: background-color, border-color, color, box-shadow, fill, stroke; transition-duration: 0.3s; transition-timing-function: ease; } /* No interferir con transiciones ya existentes */ .autorenta-button, .autorenta-benefit-card, .autorenta-car-card, .autorenta-pricing-card, .autorenta-testimonial, .autorenta-requirement, .autorenta-faq-item, .autorenta-booking-card, .autorenta-nav { transition-property: background-color, border-color, color, box-shadow, fill, stroke, transform; } /* ═══════════════════════════════════════════════════════ 30. Imágenes — reducir brillo excesivo en dark ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .autorenta-car-card__media img, [data-theme="dark"] .autorenta-corporate-media img { filter: brightness(0.88); }