{"id":11,"date":"2026-10-15T06:16:37","date_gmt":"2026-10-15T06:16:37","guid":{"rendered":"https:\/\/autoservicionaranjo.com\/?page_id=11"},"modified":"2026-10-15T06:16:37","modified_gmt":"2026-10-15T06:16:37","slug":"seguimiento-orden","status":"publish","type":"page","link":"https:\/\/autoservicionaranjo.com\/?page_id=11","title":{"rendered":"Seguimiento Orden"},"content":{"rendered":"\r\n<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes\">\r\n    <title>Seguimiento - AutoServicio Naranjo<\/title>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n    <style>\r\n \/* ============================================================\r\n   SEGUIMIENTO CLIENTE - ULTRA PREMIUM v2.0\r\n   Optimizado para m\u00f3vil\r\n   ============================================================ *\/\r\n\r\n* { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n:root {\r\n    --gold: #C5A028;\r\n    --gold-light: #E8C84A;\r\n    --gold-dark: #9E7B2C;\r\n    --gold-gradient: linear-gradient(135deg, #C5A028, #E8C84A, #C5A028);\r\n    --gold-glow: 0 0 30px rgba(197,160,40,0.2);\r\n    \r\n    --bg-primary: #08080F;\r\n    --bg-secondary: #0F0F1A;\r\n    --bg-card: rgba(255,255,255,0.03);\r\n    --bg-card-hover: rgba(255,255,255,0.06);\r\n    --bg-glass: rgba(20,20,35,0.6);\r\n    \r\n    --border: rgba(255,255,255,0.06);\r\n    --border-gold: rgba(197,160,40,0.2);\r\n    \r\n    --text: #FFFFFF;\r\n    --text-secondary: rgba(255,255,255,0.7);\r\n    --text-muted: rgba(255,255,255,0.4);\r\n    \r\n    --success: #10B981;\r\n    --warning: #F59E0B;\r\n    --danger: #EF4444;\r\n    --info: #3B82F6;\r\n    \r\n    --radius: 16px;\r\n    --radius-lg: 24px;\r\n    --transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);\r\n}\r\n\r\nbody {\r\n    background: var(--bg-primary);\r\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\r\n    min-height: 100vh;\r\n    color: var(--text);\r\n    position: relative;\r\n    overflow-x: hidden;\r\n}\r\n\r\n\/* \ud83d\udd25 FONDO CON EFECTO PREMIUM *\/\r\nbody::before {\r\n    content: '';\r\n    position: fixed;\r\n    top: 0; left: 0; right: 0; bottom: 0;\r\n    background-image: \r\n        radial-gradient(ellipse at 20% 0%, rgba(197,160,40,0.08) 0%, transparent 50%),\r\n        radial-gradient(ellipse at 80% 100%, rgba(59,130,246,0.05) 0%, transparent 50%),\r\n        radial-gradient(ellipse at 50% 50%, rgba(197,160,40,0.03) 0%, transparent 70%);\r\n    pointer-events: none;\r\n    z-index: 0;\r\n}\r\n\r\n.container { \r\n    max-width: 900px; \r\n    margin: 0 auto; \r\n    padding: 16px; \r\n    position: relative; \r\n    z-index: 1;\r\n}\r\n\r\n\/* ===== HEADER PREMIUM ===== *\/\r\n.header {\r\n    text-align: center;\r\n    margin-bottom: 24px;\r\n    padding: 20px 0;\r\n}\r\n\r\n.header-logo {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    margin-bottom: 10px;\r\n}\r\n\r\n.header-logo-icon {\r\n    width: 52px;\r\n    height: 52px;\r\n    background: var(--gold-gradient);\r\n    border-radius: 14px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-shadow: var(--gold-glow), 0 8px 20px rgba(197,160,40,0.3);\r\n    animation: float-gold 3s ease-in-out infinite;\r\n}\r\n\r\n.header-logo-icon i {\r\n    font-size: 26px;\r\n    color: #0A0A0F;\r\n}\r\n\r\n.header h1 {\r\n    font-size: 24px;\r\n    font-weight: 800;\r\n    background: linear-gradient(135deg, #FFFFFF, #E8C84A, #FFFFFF);\r\n    background-size: 200% 200%;\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    background-clip: text;\r\n    letter-spacing: -0.5px;\r\n    animation: shimmer 4s linear infinite;\r\n}\r\n\r\n.header p {\r\n    color: var(--text-muted);\r\n    font-size: 13px;\r\n    margin-top: 4px;\r\n}\r\n\r\n@keyframes float-gold {\r\n    0%, 100% { transform: translateY(0); }\r\n    50% { transform: translateY(-6px); }\r\n}\r\n\r\n@keyframes shimmer {\r\n    0% { background-position: 0% 50%; }\r\n    100% { background-position: 200% 50%; }\r\n}\r\n\r\n\/* ===== BUSCADOR PREMIUM ===== *\/\r\n.search-card {\r\n    background: var(--bg-glass);\r\n    backdrop-filter: blur(20px);\r\n    -webkit-backdrop-filter: blur(20px);\r\n    border: 1px solid var(--border);\r\n    border-radius: 60px;\r\n    padding: 6px;\r\n    margin-bottom: 24px;\r\n    box-shadow: 0 8px 30px rgba(0,0,0,0.4);\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.search-card::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: -50%; left: -50%;\r\n    width: 200%; height: 200%;\r\n    background: radial-gradient(circle, rgba(197,160,40,0.08), transparent 60%);\r\n    animation: rotate-slow 20s linear infinite;\r\n    pointer-events: none;\r\n}\r\n\r\n@keyframes rotate-slow {\r\n    from { transform: rotate(0deg); }\r\n    to { transform: rotate(360deg); }\r\n}\r\n\r\n.input-group { display: flex; gap: 8px; position: relative; z-index: 1; }\r\n\r\n.input-group input {\r\n    flex: 1;\r\n    padding: 16px 24px;\r\n    background: rgba(0,0,0,0.5);\r\n    border: 1px solid var(--border);\r\n    border-radius: 50px;\r\n    color: var(--text);\r\n    font-size: 15px;\r\n    font-weight: 500;\r\n    text-transform: uppercase;\r\n    letter-spacing: 1.5px;\r\n    transition: var(--transition);\r\n}\r\n\r\n.input-group input::placeholder { \r\n    text-transform: none; \r\n    color: var(--text-muted); \r\n    letter-spacing: normal;\r\n    font-weight: 400;\r\n}\r\n\r\n.input-group input:focus { \r\n    outline: none; \r\n    border-color: var(--gold);\r\n    box-shadow: 0 0 0 4px rgba(197,160,40,0.1);\r\n}\r\n\r\n.btn-search {\r\n    padding: 16px 28px;\r\n    background: var(--gold-gradient);\r\n    border: none;\r\n    border-radius: 50px;\r\n    color: #0A0A0F;\r\n    font-weight: 700;\r\n    font-size: 14px;\r\n    cursor: pointer;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    transition: var(--transition);\r\n    box-shadow: 0 4px 15px rgba(197,160,40,0.3);\r\n}\r\n\r\n.btn-search:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 8px 25px rgba(197,160,40,0.4);\r\n}\r\n\r\n.btn-search:active { transform: translateY(0); }\r\n\r\n.error-message {\r\n    background: rgba(239,68,68,0.1);\r\n    border-left: 4px solid var(--danger);\r\n    color: #FCA5A5;\r\n    padding: 14px 20px;\r\n    margin-top: 12px;\r\n    border-radius: 12px;\r\n    font-size: 13px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n}\r\n\r\n.help-text { \r\n    text-align: center; \r\n    margin-top: 12px; \r\n    font-size: 12px; \r\n    color: var(--text-muted); \r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 6px;\r\n}\r\n\r\n.help-text i { color: var(--gold); }\r\n\r\n\/* ===== QR Y COMPARTIR ===== *\/\r\n.qr-container { \r\n    display: flex; \r\n    justify-content: center; \r\n    margin: 20px 0 12px; \r\n    animation: slide-up 0.5s ease;\r\n}\r\n\r\n#qr-code {\r\n    background: white;\r\n    padding: 12px;\r\n    border-radius: 20px;\r\n    width: 130px;\r\n    height: 130px;\r\n    box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 0 6px rgba(197,160,40,0.1);\r\n}\r\n\r\n@keyframes slide-up {\r\n    from { opacity: 0; transform: translateY(20px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n.share-buttons {\r\n    display: flex;\r\n    gap: 8px;\r\n    justify-content: center;\r\n    flex-wrap: wrap;\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.share-btn {\r\n    padding: 10px 18px;\r\n    border-radius: 30px;\r\n    border: none;\r\n    font-weight: 600;\r\n    font-size: 13px;\r\n    cursor: pointer;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    transition: var(--transition);\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.3);\r\n}\r\n\r\n.share-btn:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 8px 20px rgba(0,0,0,0.4);\r\n}\r\n\r\n.share-wa { background: linear-gradient(135deg, #25D366, #128C7E); color: white; }\r\n.share-fb { background: linear-gradient(135deg, #1877F2, #0D5FCC); color: white; }\r\n.share-copy { background: var(--gold-gradient); color: #0A0A0F; }\r\n\r\n\/* ===== LOADING ===== *\/\r\n.loading-screen {\r\n    text-align: center;\r\n    padding: 60px 20px;\r\n    background: var(--bg-glass);\r\n    backdrop-filter: blur(20px);\r\n    border-radius: var(--radius-lg);\r\n    border: 1px solid var(--border);\r\n}\r\n\r\n.loading-spinner {\r\n    width: 50px;\r\n    height: 50px;\r\n    border: 3px solid rgba(197,160,40,0.15);\r\n    border-top-color: var(--gold);\r\n    border-right-color: var(--gold-light);\r\n    border-radius: 50%;\r\n    animation: spin 0.8s linear infinite;\r\n    margin: 0 auto 20px;\r\n    box-shadow: var(--gold-glow);\r\n}\r\n\r\n@keyframes spin { to { transform: rotate(360deg); } }\r\n\r\n\/* ===== ORDEN CONTAINER ===== *\/\r\n.orden-container {\r\n    background: var(--bg-glass);\r\n    backdrop-filter: blur(20px);\r\n    -webkit-backdrop-filter: blur(20px);\r\n    border: 1px solid var(--border);\r\n    border-radius: var(--radius-lg);\r\n    padding: 20px;\r\n    margin-bottom: 20px;\r\n    box-shadow: 0 20px 60px rgba(0,0,0,0.5);\r\n    animation: slide-up 0.5s ease;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.orden-container::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0; left: 0; right: 0;\r\n    height: 3px;\r\n    background: linear-gradient(90deg, transparent, var(--gold), transparent);\r\n    background-size: 200% 100%;\r\n    animation: shimmer 3s linear infinite;\r\n}\r\n\r\n.orden-header {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 20px;\r\n    padding-bottom: 15px;\r\n    border-bottom: 1px solid var(--border);\r\n    flex-wrap: wrap;\r\n    gap: 12px;\r\n}\r\n\r\n.orden-titulo {\r\n    font-size: 20px;\r\n    font-weight: 800;\r\n    color: var(--gold);\r\n    letter-spacing: -0.3px;\r\n}\r\n\r\n\/* ===== STATUS HERO PREMIUM ===== *\/\r\n.status-badge {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 16px;\r\n    padding: 18px 24px;\r\n    border-radius: 20px;\r\n    margin-bottom: 24px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    background: var(--bg-card);\r\n    border: 1px solid var(--border);\r\n    box-shadow: 0 10px 40px rgba(0,0,0,0.3);\r\n    animation: slide-up 0.4s ease;\r\n}\r\n\r\n.status-badge::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: -50%; right: -50%;\r\n    width: 200%; height: 200%;\r\n    background: radial-gradient(circle, currentColor, transparent 70%);\r\n    opacity: 0.1;\r\n    animation: rotate-slow 20s linear infinite;\r\n    pointer-events: none;\r\n}\r\n\r\n.status-badge-icon {\r\n    width: 56px;\r\n    height: 56px;\r\n    border-radius: 16px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 28px;\r\n    flex-shrink: 0;\r\n    background: rgba(0,0,0,0.3);\r\n    border: 1px solid rgba(255,255,255,0.05);\r\n    position: relative;\r\n    z-index: 1;\r\n}\r\n\r\n.status-badge-text {\r\n    flex: 1;\r\n    position: relative;\r\n    z-index: 1;\r\n}\r\n\r\n.status-badge-label {\r\n    font-size: 11px;\r\n    color: var(--text-muted);\r\n    text-transform: uppercase;\r\n    letter-spacing: 1.5px;\r\n    font-weight: 600;\r\n    margin-bottom: 4px;\r\n}\r\n\r\n.status-badge-value {\r\n    font-size: 22px;\r\n    font-weight: 800;\r\n    letter-spacing: -0.5px;\r\n}\r\n\r\n\/* ===== BARRA DE PROGRESO ===== *\/\r\n.status-progress {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin: -8px 0 24px;\r\n    padding: 0 8px;\r\n    position: relative;\r\n}\r\n\r\n.status-progress-line {\r\n    position: absolute;\r\n    top: 8px;\r\n    left: 20px;\r\n    right: 20px;\r\n    height: 2px;\r\n    background: rgba(255,255,255,0.06);\r\n    border-radius: 2px;\r\n    z-index: 0;\r\n}\r\n\r\n.status-progress-line-fill {\r\n    height: 100%;\r\n    background: var(--gold-gradient);\r\n    border-radius: 2px;\r\n    transition: width 0.6s ease;\r\n    box-shadow: 0 0 10px rgba(197,160,40,0.5);\r\n}\r\n\r\n.status-progress-step {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 6px;\r\n    position: relative;\r\n    z-index: 1;\r\n    flex: 1;\r\n}\r\n\r\n.status-progress-dot {\r\n    width: 18px;\r\n    height: 18px;\r\n    border-radius: 50%;\r\n    background: var(--bg-secondary);\r\n    border: 2px solid rgba(255,255,255,0.1);\r\n    transition: var(--transition);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 10px;\r\n}\r\n\r\n.status-progress-step.completed .status-progress-dot {\r\n    background: var(--gold-gradient);\r\n    border-color: transparent;\r\n    box-shadow: 0 0 15px rgba(197,160,40,0.5);\r\n}\r\n\r\n.status-progress-step.active .status-progress-dot {\r\n    background: var(--gold);\r\n    border-color: var(--gold-light);\r\n    box-shadow: 0 0 20px rgba(197,160,40,0.7);\r\n    animation: pulse-gold 1.5s ease-in-out infinite;\r\n}\r\n\r\n@keyframes pulse-gold {\r\n    0%, 100% { transform: scale(1); }\r\n    50% { transform: scale(1.15); }\r\n}\r\n\r\n.status-progress-label {\r\n    font-size: 9px;\r\n    color: var(--text-muted);\r\n    text-transform: uppercase;\r\n    font-weight: 600;\r\n    letter-spacing: 0.5px;\r\n    text-align: center;\r\n    line-height: 1.2;\r\n}\r\n\r\n.status-progress-step.completed .status-progress-label,\r\n.status-progress-step.active .status-progress-label {\r\n    color: var(--gold);\r\n}\r\n\r\n\/* ===== PESTA\u00d1AS ===== *\/\r\n.tabs { margin-bottom: 20px; }\r\n\r\n.tab-buttons {\r\n    display: flex;\r\n    gap: 6px;\r\n    margin-bottom: 20px;\r\n    padding: 6px;\r\n    background: rgba(0,0,0,0.3);\r\n    border: 1px solid var(--border);\r\n    border-radius: 40px;\r\n    overflow-x: auto;\r\n    scrollbar-width: none;\r\n    -webkit-overflow-scrolling: touch;\r\n}\r\n\r\n.tab-buttons::-webkit-scrollbar { display: none; }\r\n\r\n.tab-btn {\r\n    padding: 10px 18px;\r\n    border: none;\r\n    border-radius: 30px;\r\n    font-weight: 600;\r\n    font-size: 13px;\r\n    cursor: pointer;\r\n    transition: var(--transition);\r\n    white-space: nowrap;\r\n    background: transparent;\r\n    color: var(--text-muted);\r\n    flex-shrink: 0;\r\n    position: relative;\r\n}\r\n\r\n.tab-btn:hover {\r\n    color: var(--text-secondary);\r\n    background: rgba(255,255,255,0.03);\r\n}\r\n\r\n.tab-btn.active {\r\n    background: var(--gold-gradient);\r\n    color: #0A0A0F;\r\n    box-shadow: 0 4px 15px rgba(197,160,40,0.3);\r\n    animation: pulse-subtle 2s ease-in-out infinite;\r\n}\r\n\r\n@keyframes pulse-subtle {\r\n    0%, 100% { box-shadow: 0 4px 15px rgba(197,160,40,0.3); }\r\n    50% { box-shadow: 0 4px 25px rgba(197,160,40,0.5); }\r\n}\r\n\r\n.tab-content { display: none; animation: fade-in 0.3s ease; }\r\n.tab-content.active { display: block; }\r\n\r\n@keyframes fade-in {\r\n    from { opacity: 0; transform: translateY(8px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n\/* ===== INFO CARDS PREMIUM ===== *\/\r\n.info-grid { \r\n    display: grid; \r\n    grid-template-columns: repeat(2, 1fr); \r\n    gap: 16px; \r\n    margin-bottom: 20px; \r\n}\r\n\r\n.info-card {\r\n    background: var(--bg-card);\r\n    backdrop-filter: blur(10px);\r\n    border: 1px solid var(--border);\r\n    border-radius: var(--radius);\r\n    padding: 20px;\r\n    transition: var(--transition);\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.info-card:hover {\r\n    background: var(--bg-card-hover);\r\n    border-color: var(--border-gold);\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 10px 30px rgba(0,0,0,0.3), var(--gold-glow);\r\n}\r\n\r\n.info-card h3 {\r\n    color: var(--gold);\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    margin-bottom: 16px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.5px;\r\n}\r\n\r\n.info-card h3 i {\r\n    width: 32px;\r\n    height: 32px;\r\n    background: var(--gold-gradient);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    background-clip: text;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 18px;\r\n}\r\n\r\n.info-row {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    padding: 10px 0;\r\n    border-bottom: 1px solid var(--border);\r\n    font-size: 14px;\r\n}\r\n\r\n.info-row:last-child { border-bottom: none; }\r\n\r\n.info-label { \r\n    color: var(--text-muted); \r\n    font-weight: 500;\r\n}\r\n\r\n.info-value { \r\n    color: var(--text); \r\n    font-weight: 600;\r\n    text-align: right;\r\n    max-width: 60%;\r\n    word-break: break-word;\r\n}\r\n\r\n\/* ===== TABLA DE SERVICIOS ===== *\/\r\n.services-table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    font-size: 13px;\r\n}\r\n\r\n.services-table th {\r\n    text-align: left;\r\n    padding: 12px 8px;\r\n    color: var(--gold);\r\n    border-bottom: 2px solid var(--border-gold);\r\n    font-size: 11px;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.5px;\r\n    font-weight: 700;\r\n}\r\n\r\n.services-table td {\r\n    padding: 12px 8px;\r\n    border-bottom: 1px solid var(--border);\r\n    color: var(--text);\r\n}\r\n\r\n.services-table tr:hover td {\r\n    background: rgba(255,255,255,0.02);\r\n}\r\n\r\n\/* ===== BADGES ===== *\/\r\n.badge {\r\n    padding: 5px 12px;\r\n    border-radius: 20px;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 4px;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.5px;\r\n}\r\n\r\n.badge-aprobado { \r\n    background: rgba(16,185,129,0.15); \r\n    color: #34D399; \r\n    border: 1px solid rgba(16,185,129,0.3); \r\n    box-shadow: 0 0 10px rgba(16,185,129,0.15);\r\n}\r\n\r\n.badge-pendiente { \r\n    background: rgba(245,158,11,0.15); \r\n    color: #FBBF24; \r\n    border: 1px solid rgba(245,158,11,0.3);\r\n    box-shadow: 0 0 10px rgba(245,158,11,0.15);\r\n}\r\n\r\n.badge-rechazado { \r\n    background: rgba(239,68,68,0.15); \r\n    color: #F87171; \r\n    border: 1px solid rgba(239,68,68,0.3);\r\n}\r\n\r\n\/* ===== WIDGET KILOMETRAJE ===== *\/\r\n.kilometraje-card {\r\n    background: linear-gradient(135deg, rgba(26,42,58,0.6), rgba(15,26,36,0.8));\r\n    backdrop-filter: blur(20px);\r\n    border: 1px solid rgba(59,130,246,0.15);\r\n    border-radius: var(--radius);\r\n    padding: 20px;\r\n    margin: 20px 0;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.kilometraje-card::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: -50%; right: -50%;\r\n    width: 200%; height: 200%;\r\n    background: radial-gradient(circle, rgba(59,130,246,0.1), transparent 60%);\r\n    animation: rotate-slow 30s linear infinite;\r\n    pointer-events: none;\r\n}\r\n\r\n.kilometraje-card h3 {\r\n    color: #60A5FA;\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    margin-bottom: 16px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.5px;\r\n    position: relative;\r\n    z-index: 1;\r\n}\r\n\r\n.km-stats {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 10px;\r\n    margin-bottom: 15px;\r\n    position: relative;\r\n    z-index: 1;\r\n}\r\n\r\n.km-stat-box {\r\n    text-align: center;\r\n    padding: 14px 10px;\r\n    background: rgba(0,0,0,0.4);\r\n    border: 1px solid rgba(255,255,255,0.05);\r\n    border-radius: 12px;\r\n    transition: var(--transition);\r\n}\r\n\r\n.km-stat-box:hover {\r\n    border-color: rgba(59,130,246,0.3);\r\n    background: rgba(0,0,0,0.6);\r\n}\r\n\r\n.km-stat-label {\r\n    font-size: 10px;\r\n    color: var(--text-muted);\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.5px;\r\n    font-weight: 600;\r\n    margin-bottom: 6px;\r\n}\r\n\r\n.km-stat-value {\r\n    font-size: 22px;\r\n    font-weight: 800;\r\n    color: #60A5FA;\r\n    letter-spacing: -0.5px;\r\n}\r\n\r\n.km-stat-value.small { font-size: 18px; }\r\n\r\n.km-status {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    padding: 8px 14px;\r\n    background: rgba(0,0,0,0.4);\r\n    border-radius: 30px;\r\n    font-size: 12px;\r\n    font-weight: 600;\r\n    color: var(--text-secondary);\r\n}\r\n\r\n.mant-item {\r\n    background: rgba(0,0,0,0.4);\r\n    border-radius: 10px;\r\n    padding: 12px;\r\n    margin-bottom: 8px;\r\n    border-left: 3px solid;\r\n    transition: var(--transition);\r\n}\r\n\r\n.mant-item:hover {\r\n    background: rgba(0,0,0,0.6);\r\n}\r\n\r\n.mant-header {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    margin-bottom: 6px;\r\n    font-size: 13px;\r\n}\r\n\r\n.mant-bar {\r\n    background: rgba(255,255,255,0.05);\r\n    border-radius: 4px;\r\n    height: 4px;\r\n    overflow: hidden;\r\n    margin-top: 8px;\r\n}\r\n\r\n.mant-fill {\r\n    height: 4px;\r\n    border-radius: 4px;\r\n    transition: width 0.6s ease;\r\n}\r\n\r\n\/* ===== SUB-CARDS ===== *\/\r\n.sub-card {\r\n    background: rgba(255,255,255,0.02);\r\n    border: 1px solid var(--border);\r\n    border-radius: 12px;\r\n    padding: 14px;\r\n    margin-bottom: 12px;\r\n    border-left: 3px solid var(--gold);\r\n    transition: var(--transition);\r\n}\r\n\r\n.sub-card:hover {\r\n    background: rgba(255,255,255,0.04);\r\n    border-left-color: var(--gold-light);\r\n}\r\n\r\n.sub-card-header {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 10px;\r\n    flex-wrap: wrap;\r\n    gap: 8px;\r\n}\r\n\r\n.sub-card-title { \r\n    font-weight: 700; \r\n    color: var(--gold);\r\n    font-size: 14px;\r\n}\r\n\r\n\/* ===== VIDEOS ===== *\/\r\n.video-container {\r\n    margin-top: 10px;\r\n    border-radius: 12px;\r\n    overflow: hidden;\r\n    border: 1px solid var(--border);\r\n}\r\n\r\n.video-container video {\r\n    width: 100%;\r\n    display: block;\r\n    border-radius: 12px;\r\n    background: #000;\r\n}\r\n\r\n\/* ===== FIRMAS ===== *\/\r\n.firmas-container {\r\n    display: flex;\r\n    gap: 12px;\r\n    flex-wrap: wrap;\r\n    margin-top: 15px;\r\n}\r\n\r\n.firma-item {\r\n    flex: 1;\r\n    min-width: 200px;\r\n    text-align: center;\r\n    background: rgba(255,255,255,0.02);\r\n    border: 1px solid var(--border);\r\n    border-radius: 12px;\r\n    padding: 16px;\r\n}\r\n\r\n.firma-item strong {\r\n    color: var(--gold);\r\n    font-size: 12px;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.5px;\r\n}\r\n\r\n.firma-img {\r\n    max-width: 100%;\r\n    max-height: 90px;\r\n    margin-top: 10px;\r\n    background: white;\r\n    border-radius: 8px;\r\n    padding: 6px;\r\n    cursor: pointer;\r\n}\r\n\r\n\/* ===== WHATSAPP FLOTANTE ===== *\/\r\n.whatsapp-float {\r\n    position: fixed;\r\n    bottom: 24px;\r\n    right: 24px;\r\n    background: linear-gradient(135deg, #25D366, #128C7E);\r\n    width: 56px;\r\n    height: 56px;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-shadow: 0 8px 25px rgba(37,211,102,0.4), 0 0 0 0 rgba(37,211,102,0.5);\r\n    cursor: pointer;\r\n    z-index: 1000;\r\n    transition: var(--transition);\r\n    animation: pulse-whatsapp 2s ease-in-out infinite;\r\n}\r\n\r\n.whatsapp-float:hover {\r\n    transform: scale(1.1);\r\n}\r\n\r\n.whatsapp-float i { \r\n    font-size: 28px; \r\n    color: white; \r\n}\r\n\r\n@keyframes pulse-whatsapp {\r\n    0%, 100% { \r\n        box-shadow: 0 8px 25px rgba(37,211,102,0.4), 0 0 0 0 rgba(37,211,102,0.5); \r\n    }\r\n    50% { \r\n        box-shadow: 0 8px 25px rgba(37,211,102,0.4), 0 0 0 15px rgba(37,211,102,0); \r\n    }\r\n}\r\n\r\n\/* ===== FOTOS GRID PREMIUM ===== *\/\r\n.fotos-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));\r\n    gap: 10px;\r\n    margin-top: 12px;\r\n}\r\n\r\n.foto-item {\r\n    aspect-ratio: 1;\r\n    border-radius: 12px;\r\n    overflow: hidden;\r\n    cursor: pointer;\r\n    border: 1px solid var(--border);\r\n    transition: var(--transition);\r\n    position: relative;\r\n    background: rgba(0,0,0,0.3);\r\n}\r\n\r\n.foto-item::after {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.6));\r\n    pointer-events: none;\r\n    opacity: 0;\r\n    transition: var(--transition);\r\n}\r\n\r\n.foto-item:hover {\r\n    transform: scale(1.03);\r\n    border-color: var(--gold);\r\n    box-shadow: 0 10px 30px rgba(0,0,0,0.5), var(--gold-glow);\r\n    z-index: 2;\r\n}\r\n\r\n.foto-item:hover::after {\r\n    opacity: 1;\r\n}\r\n\r\n.foto-item img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    transition: var(--transition);\r\n}\r\n\r\n.foto-item:hover img {\r\n    transform: scale(1.08);\r\n}\r\n\r\n.foto-badge {\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    background: linear-gradient(180deg, transparent, rgba(197,160,40,0.95));\r\n    color: #0A0A0F;\r\n    font-size: 9px;\r\n    text-align: center;\r\n    padding: 6px 3px 3px;\r\n    font-weight: 700;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.3px;\r\n    z-index: 1;\r\n}\r\n\r\n\/* ===== PROFORMA ===== *\/\r\n.proforma-card {\r\n    background: linear-gradient(135deg, rgba(197,160,40,0.08), rgba(197,160,40,0.02));\r\n    backdrop-filter: blur(20px);\r\n    border: 1px solid var(--border-gold);\r\n    border-radius: var(--radius);\r\n    padding: 20px;\r\n    margin-top: 20px;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.proforma-row {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    padding: 12px 0;\r\n    border-bottom: 1px solid var(--border);\r\n    color: var(--text);\r\n    font-size: 14px;\r\n}\r\n\r\n.total-final {\r\n    font-size: 26px;\r\n    font-weight: 800;\r\n    background: var(--gold-gradient);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    background-clip: text;\r\n    margin-top: 12px;\r\n    padding-top: 14px;\r\n    border-top: 2px solid var(--border-gold);\r\n    text-align: right;\r\n}\r\n\r\n\/* ===== FOOTER ===== *\/\r\n.footer {\r\n    text-align: center;\r\n    margin-top: 40px;\r\n    padding: 24px 20px;\r\n    color: var(--text-muted);\r\n    font-size: 12px;\r\n    border-top: 1px solid var(--border);\r\n}\r\n\r\n\/* ============================================================\r\n   RESPONSIVE - OPTIMIZADO PARA M\u00d3VIL\r\n   ============================================================ *\/\r\n\r\n@media (max-width: 768px) {\r\n    .container { padding: 12px; }\r\n    \r\n    .header { padding: 16px 0; margin-bottom: 16px; }\r\n    .header h1 { font-size: 20px; }\r\n    .header-logo-icon { width: 44px; height: 44px; }\r\n    .header-logo-icon i { font-size: 22px; }\r\n    \r\n    .search-card { border-radius: 20px; padding: 12px; }\r\n    .input-group { flex-direction: column; gap: 10px; }\r\n    .input-group input { \r\n        padding: 14px 20px; \r\n        font-size: 14px;\r\n        border-radius: 14px;\r\n        text-align: center;\r\n        letter-spacing: 1px;\r\n    }\r\n    .btn-search { \r\n        width: 100%; \r\n        justify-content: center;\r\n        padding: 14px;\r\n        border-radius: 14px;\r\n        font-size: 14px;\r\n    }\r\n    \r\n    \/* QR *\/\r\n    #qr-code { width: 110px; height: 110px; padding: 10px; }\r\n    \r\n    .share-btn { \r\n        font-size: 11px; \r\n        padding: 8px 14px;\r\n        flex: 1;\r\n        min-width: 100px;\r\n        justify-content: center;\r\n    }\r\n    \r\n    \/* Orden *\/\r\n    .orden-container { padding: 16px; border-radius: 20px; }\r\n    .orden-titulo { font-size: 17px; }\r\n    .orden-header { \r\n        flex-direction: column; \r\n        align-items: flex-start; \r\n        gap: 6px;\r\n    }\r\n    \r\n    \/* Status Hero *\/\r\n    .status-badge { \r\n        padding: 14px 16px; \r\n        gap: 12px;\r\n        border-radius: 16px;\r\n    }\r\n    .status-badge-icon { \r\n        width: 44px; \r\n        height: 44px; \r\n        font-size: 22px;\r\n        border-radius: 12px;\r\n    }\r\n    .status-badge-value { font-size: 17px; }\r\n    .status-badge-label { font-size: 10px; }\r\n    \r\n    \/* Progress bar *\/\r\n    .status-progress-label { font-size: 8px; }\r\n    .status-progress-dot { width: 14px; height: 14px; }\r\n    \r\n    \/* Tabs *\/\r\n    .tab-buttons { \r\n        padding: 5px; \r\n        border-radius: 30px;\r\n        gap: 4px;\r\n    }\r\n    .tab-btn { \r\n        padding: 8px 14px; \r\n        font-size: 11px;\r\n    }\r\n    \r\n    \/* Info cards *\/\r\n    .info-grid { grid-template-columns: 1fr; gap: 12px; }\r\n    .info-card { padding: 16px; border-radius: 14px; }\r\n    .info-card h3 { font-size: 13px; margin-bottom: 12px; }\r\n    .info-card h3 i { width: 28px; height: 28px; font-size: 15px; }\r\n    \r\n    .info-row { \r\n        flex-direction: column;\r\n        gap: 4px;\r\n        padding: 8px 0;\r\n        font-size: 13px;\r\n    }\r\n    .info-value { \r\n        text-align: left; \r\n        max-width: 100%;\r\n        font-size: 14px;\r\n    }\r\n    \r\n    \/* Tabla servicios *\/\r\n    .services-table { font-size: 12px; }\r\n    .services-table th,\r\n    .services-table td { padding: 8px 6px; }\r\n    .services-table th { font-size: 10px; }\r\n    \r\n    \/* Widget kilometraje *\/\r\n    .kilometraje-card { padding: 16px; border-radius: 14px; }\r\n    .km-stats { grid-template-columns: 1fr 1fr; gap: 8px; }\r\n    .km-stat-box { padding: 12px 8px; }\r\n    .km-stat-value { font-size: 18px; }\r\n    .km-stat-label { font-size: 9px; }\r\n    \r\n    \/* Sub-cards *\/\r\n    .sub-card { padding: 12px; }\r\n    .sub-card-header { flex-direction: column; align-items: flex-start; }\r\n    .sub-card-title { font-size: 13px; }\r\n    \r\n    \/* Fotos *\/\r\n    .fotos-grid { \r\n        grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); \r\n        gap: 8px;\r\n    }\r\n    .foto-badge { font-size: 8px; padding: 4px 2px 2px; }\r\n    \r\n    \/* Proforma *\/\r\n    .proforma-row { font-size: 13px; padding: 10px 0; }\r\n    .total-final { font-size: 22px; }\r\n    \r\n    \/* Firmas *\/\r\n    .firmas-container { flex-direction: column; gap: 10px; }\r\n    .firma-item { min-width: auto; }\r\n    \r\n    \/* WhatsApp *\/\r\n    .whatsapp-float { \r\n        width: 52px; \r\n        height: 52px; \r\n        bottom: 16px; \r\n        right: 16px;\r\n    }\r\n    .whatsapp-float i { font-size: 26px; }\r\n    \r\n    \/* Footer *\/\r\n    .footer { padding: 20px 12px; }\r\n}\r\n\r\n@media (max-width: 400px) {\r\n    .tab-btn { \r\n        padding: 7px 11px; \r\n        font-size: 10px;\r\n    }\r\n    .km-stats { grid-template-columns: 1fr; }\r\n    .fotos-grid { grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); }\r\n    .header h1 { font-size: 18px; }\r\n}\r\n\r\n\r\n\/* ============================================================\r\n   \u2728 MEJORAS \u00daNICAS - v3.0\r\n   ============================================================ *\/\r\n\r\n\/* ===== 1. HERO HEADER PREMIUM ===== *\/\r\n.hero-header {\r\n    text-align: center;\r\n    padding: 24px 16px 20px;\r\n    margin-bottom: 20px;\r\n    position: relative;\r\n}\r\n\r\n.hero-logo-wrap {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 14px;\r\n    margin-bottom: 14px;\r\n    position: relative;\r\n}\r\n\r\n.hero-logo {\r\n    width: 60px;\r\n    height: 60px;\r\n    background: var(--gold-gradient);\r\n    border-radius: 18px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-shadow: \r\n        0 0 40px rgba(197,160,40,0.35),\r\n        0 10px 30px rgba(0,0,0,0.5),\r\n        inset 0 2px 0 rgba(255,255,255,0.3);\r\n    position: relative;\r\n    animation: float-gold 3s ease-in-out infinite;\r\n}\r\n\r\n.hero-logo::after {\r\n    content: '';\r\n    position: absolute;\r\n    inset: -6px;\r\n    border: 2px dashed rgba(197,160,40,0.3);\r\n    border-radius: 24px;\r\n    animation: rotate-slow 15s linear infinite;\r\n    pointer-events: none;\r\n}\r\n\r\n.hero-logo i {\r\n    font-size: 30px;\r\n    color: #0A0A0F;\r\n    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));\r\n}\r\n\r\n.hero-brand {\r\n    text-align: left;\r\n}\r\n\r\n.hero-brand-name {\r\n    font-size: 22px;\r\n    font-weight: 800;\r\n    background: linear-gradient(135deg, #FFFFFF, #E8C84A, #FFFFFF);\r\n    background-size: 200% 200%;\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    background-clip: text;\r\n    letter-spacing: -0.5px;\r\n    animation: shimmer 4s linear infinite;\r\n    line-height: 1.1;\r\n}\r\n\r\n.hero-brand-tag {\r\n    font-size: 10px;\r\n    color: var(--text-muted);\r\n    text-transform: uppercase;\r\n    letter-spacing: 2px;\r\n    font-weight: 600;\r\n    margin-top: 2px;\r\n}\r\n\r\n\/* Sello de confianza *\/\r\n.trust-badges {\r\n    display: flex;\r\n    justify-content: center;\r\n    gap: 8px;\r\n    flex-wrap: wrap;\r\n    margin-top: 16px;\r\n}\r\n\r\n.trust-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    padding: 6px 14px;\r\n    background: rgba(197,160,40,0.08);\r\n    border: 1px solid rgba(197,160,40,0.2);\r\n    border-radius: 30px;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    color: var(--gold);\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.5px;\r\n}\r\n\r\n.trust-badge i {\r\n    font-size: 11px;\r\n    color: var(--gold-light);\r\n}\r\n\r\n\/* ===== 2. LIVE INDICATOR ===== *\/\r\n.live-indicator {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    padding: 6px 14px;\r\n    background: rgba(16,185,129,0.1);\r\n    border: 1px solid rgba(16,185,129,0.25);\r\n    border-radius: 30px;\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    color: #34D399;\r\n    margin-bottom: 16px;\r\n}\r\n\r\n.live-dot {\r\n    width: 8px;\r\n    height: 8px;\r\n    background: #10B981;\r\n    border-radius: 50%;\r\n    position: relative;\r\n    box-shadow: 0 0 10px rgba(16,185,129,0.6);\r\n}\r\n\r\n.live-dot::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: -4px;\r\n    border-radius: 50%;\r\n    background: rgba(16,185,129,0.4);\r\n    animation: pulse-live 1.5s ease-out infinite;\r\n}\r\n\r\n@keyframes pulse-live {\r\n    0% { transform: scale(0.8); opacity: 1; }\r\n    100% { transform: scale(2); opacity: 0; }\r\n}\r\n\r\n.live-time {\r\n    color: var(--text-muted);\r\n    font-weight: 500;\r\n}\r\n\r\n\/* ===== 3. TIMELINE DE PROGRESO ===== *\/\r\n.timeline {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    padding: 20px 10px;\r\n    background: rgba(0,0,0,0.25);\r\n    border: 1px solid var(--border);\r\n    border-radius: 20px;\r\n    margin-bottom: 20px;\r\n    position: relative;\r\n    overflow-x: auto;\r\n    scrollbar-width: none;\r\n    gap: 8px;\r\n}\r\n\r\n.timeline::-webkit-scrollbar { display: none; }\r\n\r\n.timeline::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 32px;\r\n    left: 40px;\r\n    right: 40px;\r\n    height: 2px;\r\n    background: rgba(255,255,255,0.06);\r\n    border-radius: 2px;\r\n    z-index: 0;\r\n}\r\n\r\n.timeline-progress {\r\n    position: absolute;\r\n    top: 32px;\r\n    left: 40px;\r\n    height: 2px;\r\n    background: linear-gradient(90deg, var(--gold), var(--gold-light));\r\n    border-radius: 2px;\r\n    box-shadow: 0 0 12px rgba(197,160,40,0.6);\r\n    z-index: 1;\r\n    transition: width 0.8s cubic-bezier(0.25,0.46,0.45,0.94);\r\n}\r\n\r\n.timeline-step {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 8px;\r\n    min-width: 70px;\r\n    position: relative;\r\n    z-index: 2;\r\n    flex: 1;\r\n}\r\n\r\n.timeline-dot {\r\n    width: 40px;\r\n    height: 40px;\r\n    border-radius: 50%;\r\n    background: var(--bg-secondary);\r\n    border: 2px solid rgba(255,255,255,0.08);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 18px;\r\n    transition: all 0.4s ease;\r\n}\r\n\r\n.timeline-step.completed .timeline-dot {\r\n    background: var(--gold-gradient);\r\n    border-color: transparent;\r\n    box-shadow: 0 0 20px rgba(197,160,40,0.5);\r\n}\r\n\r\n.timeline-step.active .timeline-dot {\r\n    background: var(--bg-secondary);\r\n    border-color: var(--gold);\r\n    box-shadow: 0 0 25px rgba(197,160,40,0.7);\r\n    animation: pulse-gold 1.5s ease-in-out infinite;\r\n}\r\n\r\n.timeline-label {\r\n    font-size: 9px;\r\n    color: var(--text-muted);\r\n    text-align: center;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.5px;\r\n    font-weight: 700;\r\n    line-height: 1.2;\r\n}\r\n\r\n.timeline-step.completed .timeline-label,\r\n.timeline-step.active .timeline-label {\r\n    color: var(--gold);\r\n}\r\n\r\n\/* ===== 4. CARD HERO DEL VEH\u00cdCULO ===== *\/\r\n.vehiculo-hero {\r\n    background: linear-gradient(135deg, rgba(197,160,40,0.1), rgba(197,160,40,0.02));\r\n    border: 1px solid var(--border-gold);\r\n    border-radius: 20px;\r\n    padding: 20px;\r\n    margin-bottom: 20px;\r\n    display: flex;\r\n    gap: 16px;\r\n    align-items: center;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.vehiculo-hero::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: -50%; right: -50%;\r\n    width: 200%; height: 200%;\r\n    background: radial-gradient(circle, rgba(197,160,40,0.08), transparent 70%);\r\n    animation: rotate-slow 25s linear infinite;\r\n    pointer-events: none;\r\n}\r\n\r\n.vehiculo-icon {\r\n    width: 70px;\r\n    height: 70px;\r\n    border-radius: 16px;\r\n    background: var(--gold-gradient);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 34px;\r\n    flex-shrink: 0;\r\n    box-shadow: 0 8px 25px rgba(197,160,40,0.35);\r\n    position: relative;\r\n    z-index: 1;\r\n}\r\n\r\n.vehiculo-icon i { color: #0A0A0F; }\r\n\r\n.vehiculo-info {\r\n    flex: 1;\r\n    position: relative;\r\n    z-index: 1;\r\n}\r\n\r\n.vehiculo-nombre {\r\n    font-size: 18px;\r\n    font-weight: 800;\r\n    color: white;\r\n    margin-bottom: 6px;\r\n    letter-spacing: -0.3px;\r\n}\r\n\r\n.vehiculo-placa {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    padding: 4px 12px;\r\n    background: linear-gradient(135deg, #F4E4A6, #C5A028);\r\n    color: #0A0A0F;\r\n    border-radius: 6px;\r\n    font-family: 'Courier New', monospace;\r\n    font-weight: 800;\r\n    font-size: 14px;\r\n    letter-spacing: 2px;\r\n    border: 2px solid rgba(0,0,0,0.2);\r\n    box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3);\r\n}\r\n\r\n.vehiculo-km {\r\n    margin-top: 8px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    font-size: 13px;\r\n    color: var(--text-secondary);\r\n}\r\n\r\n.vehiculo-km strong {\r\n    color: var(--gold);\r\n    font-size: 15px;\r\n    font-weight: 800;\r\n}\r\n\r\n\/* ===== 5. LIGHTBOX PREMIUM ===== *\/\r\n.lightbox {\r\n    position: fixed;\r\n    inset: 0;\r\n    background: rgba(0,0,0,0.97);\r\n    backdrop-filter: blur(20px);\r\n    -webkit-backdrop-filter: blur(20px);\r\n    z-index: 10000;\r\n    display: none;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-direction: column;\r\n    padding: 20px;\r\n}\r\n\r\n.lightbox.active { display: flex; }\r\n\r\n.lightbox-content {\r\n    max-width: 95vw;\r\n    max-height: 80vh;\r\n    border-radius: 16px;\r\n    box-shadow: 0 30px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(197,160,40,0.2);\r\n    animation: lightbox-in 0.3s ease;\r\n}\r\n\r\n@keyframes lightbox-in {\r\n    from { opacity: 0; transform: scale(0.92); }\r\n    to { opacity: 1; transform: scale(1); }\r\n}\r\n\r\n.lightbox-nav {\r\n    position: absolute;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    width: 50px;\r\n    height: 50px;\r\n    background: rgba(197,160,40,0.2);\r\n    border: 1px solid rgba(197,160,40,0.4);\r\n    border-radius: 50%;\r\n    color: white;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n    font-size: 20px;\r\n    transition: all 0.3s;\r\n    z-index: 10;\r\n}\r\n\r\n.lightbox-nav:hover {\r\n    background: rgba(197,160,40,0.4);\r\n    transform: translateY(-50%) scale(1.1);\r\n}\r\n\r\n.lightbox-nav.prev { left: 20px; }\r\n.lightbox-nav.next { right: 20px; }\r\n\r\n.lightbox-close {\r\n    position: absolute;\r\n    top: 20px;\r\n    right: 20px;\r\n    width: 44px;\r\n    height: 44px;\r\n    background: rgba(239,68,68,0.2);\r\n    border: 1px solid rgba(239,68,68,0.4);\r\n    border-radius: 50%;\r\n    color: white;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n    font-size: 20px;\r\n    transition: all 0.3s;\r\n    z-index: 10;\r\n}\r\n\r\n.lightbox-close:hover {\r\n    background: rgba(239,68,68,0.4);\r\n    transform: rotate(90deg);\r\n}\r\n\r\n.lightbox-counter {\r\n    position: absolute;\r\n    bottom: 30px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    padding: 8px 20px;\r\n    background: rgba(0,0,0,0.7);\r\n    border: 1px solid var(--border-gold);\r\n    border-radius: 30px;\r\n    color: var(--gold);\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    letter-spacing: 1px;\r\n}\r\n\r\n\/* ===== 6. TIMELINE VERTICAL DE EVENTOS ===== *\/\r\n.events-timeline {\r\n    position: relative;\r\n    padding-left: 40px;\r\n    margin-top: 16px;\r\n}\r\n\r\n.events-timeline::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 8px;\r\n    bottom: 8px;\r\n    left: 15px;\r\n    width: 2px;\r\n    background: linear-gradient(180deg, \r\n        var(--gold) 0%, \r\n        var(--gold) 30%, \r\n        rgba(197,160,40,0.2) 60%,\r\n        rgba(197,160,40,0.05) 100%);\r\n    border-radius: 2px;\r\n}\r\n\r\n.event-item {\r\n    position: relative;\r\n    padding-bottom: 20px;\r\n    animation: slide-up 0.5s ease backwards;\r\n}\r\n\r\n.event-item:nth-child(1) { animation-delay: 0.1s; }\r\n.event-item:nth-child(2) { animation-delay: 0.2s; }\r\n.event-item:nth-child(3) { animation-delay: 0.3s; }\r\n.event-item:nth-child(4) { animation-delay: 0.4s; }\r\n.event-item:nth-child(5) { animation-delay: 0.5s; }\r\n\r\n.event-dot {\r\n    position: absolute;\r\n    left: -32px;\r\n    top: 2px;\r\n    width: 30px;\r\n    height: 30px;\r\n    border-radius: 50%;\r\n    background: var(--bg-secondary);\r\n    border: 2px solid var(--gold);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 14px;\r\n    box-shadow: 0 0 15px rgba(197,160,40,0.4);\r\n    z-index: 1;\r\n}\r\n\r\n.event-content {\r\n    background: rgba(255,255,255,0.02);\r\n    border: 1px solid var(--border);\r\n    border-radius: 12px;\r\n    padding: 12px 14px;\r\n}\r\n\r\n.event-title {\r\n    font-size: 13px;\r\n    font-weight: 700;\r\n    color: var(--text);\r\n    margin-bottom: 4px;\r\n}\r\n\r\n.event-date {\r\n    font-size: 10px;\r\n    color: var(--text-muted);\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.5px;\r\n}\r\n\r\n\/* ===== 7. FOOTER PREMIUM ===== *\/\r\n.footer-premium {\r\n    text-align: center;\r\n    margin-top: 40px;\r\n    padding: 30px 20px 100px;\r\n    border-top: 1px solid var(--border);\r\n    background: linear-gradient(180deg, transparent, rgba(197,160,40,0.03));\r\n}\r\n\r\n.footer-seal {\r\n    width: 70px;\r\n    height: 70px;\r\n    margin: 0 auto 16px;\r\n    border-radius: 50%;\r\n    background: linear-gradient(135deg, rgba(197,160,40,0.1), rgba(197,160,40,0.02));\r\n    border: 2px dashed rgba(197,160,40,0.3);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-direction: column;\r\n    gap: 2px;\r\n    animation: rotate-slow 30s linear infinite;\r\n}\r\n\r\n.footer-seal i {\r\n    font-size: 24px;\r\n    color: var(--gold);\r\n    animation: rotate-slow 30s linear infinite reverse;\r\n}\r\n\r\n.footer-text {\r\n    font-size: 12px;\r\n    color: var(--text-muted);\r\n    line-height: 1.6;\r\n}\r\n\r\n.footer-text strong {\r\n    color: var(--gold);\r\n    font-weight: 700;\r\n}\r\n\r\n.footer-contacts {\r\n    display: flex;\r\n    justify-content: center;\r\n    gap: 10px;\r\n    margin-top: 16px;\r\n    flex-wrap: wrap;\r\n}\r\n\r\n.footer-contact-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    padding: 8px 16px;\r\n    background: rgba(255,255,255,0.03);\r\n    border: 1px solid var(--border);\r\n    border-radius: 30px;\r\n    color: var(--text-secondary);\r\n    font-size: 12px;\r\n    font-weight: 600;\r\n    text-decoration: none;\r\n    transition: var(--transition);\r\n}\r\n\r\n.footer-contact-btn:hover {\r\n    background: rgba(197,160,40,0.1);\r\n    border-color: var(--border-gold);\r\n    color: var(--gold);\r\n}\r\n\r\n\/* ===== RESPONSIVE PARA NUEVAS SECCIONES ===== *\/\r\n@media (max-width: 768px) {\r\n    .hero-logo { width: 52px; height: 52px; }\r\n    .hero-logo i { font-size: 26px; }\r\n    .hero-brand-name { font-size: 18px; }\r\n    .hero-brand-tag { font-size: 9px; }\r\n    \r\n    .vehiculo-hero {\r\n        flex-direction: column;\r\n        text-align: center;\r\n        padding: 18px;\r\n    }\r\n    .vehiculo-icon {\r\n        width: 60px;\r\n        height: 60px;\r\n        font-size: 28px;\r\n    }\r\n    .vehiculo-nombre { font-size: 16px; }\r\n    .vehiculo-placa { font-size: 12px; }\r\n    \r\n    .timeline { padding: 16px 8px; }\r\n    .timeline-step { min-width: 60px; }\r\n    .timeline-dot { width: 34px; height: 34px; font-size: 15px; }\r\n    .timeline-label { font-size: 8px; }\r\n    \r\n    .lightbox-nav { width: 42px; height: 42px; font-size: 16px; }\r\n    .lightbox-nav.prev { left: 10px; }\r\n    .lightbox-nav.next { right: 10px; }\r\n    .lightbox-close { top: 12px; right: 12px; width: 40px; height: 40px; }\r\n    \r\n    .events-timeline { padding-left: 34px; }\r\n    .event-dot { left: -28px; width: 26px; height: 26px; font-size: 12px; }\r\n}\r\n\r\n\r\n\r\n\/* ============================================================\r\n   \ud83d\udd25 FIX: BOT\u00d3N REPORTE PDF - Asegurar clicks en toda el \u00e1rea\r\n   ============================================================ *\/\r\n   *::before,\r\n*::after {\r\n    pointer-events: none !important;\r\n}\r\n\r\n#reporte-pdf-section {\r\n    position: relative !important;\r\n    z-index: 100 !important;\r\n    pointer-events: auto !important;\r\n}\r\n\r\n#reporte-pdf-section > button,\r\n#reporte-pdf-section > a {\r\n    position: relative !important;\r\n    z-index: 101 !important;\r\n    pointer-events: auto !important;\r\n    \/* Asegura que el bot\u00f3n capture clicks en toda su \u00e1rea *\/\r\n    isolation: isolate;\r\n}\r\n\r\n#reporte-pdf-section > button > *,\r\n#reporte-pdf-section > a > * {\r\n    pointer-events: none !important;\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<\/head>\r\n<body>\r\n    <div class=\"container\">\r\n        <!-- HERO HEADER PREMIUM -->\r\n<div class=\"hero-header\">\r\n    <div class=\"hero-logo-wrap\">\r\n        <div class=\"hero-logo\">\r\n            <i class=\"fas fa-tools\"><\/i>\r\n        <\/div>\r\n        <div class=\"hero-brand\">\r\n        <div class=\"hero-brand-name\">Mi Taller<\/div>\r\n        <div class=\"hero-brand-tag\">Taller Automotriz Profesional<\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div class=\"trust-badges\">\r\n        <div class=\"trust-badge\"><i class=\"fas fa-shield-alt\"><\/i> Garant\u00eda<\/div>\r\n        <div class=\"trust-badge\"><i class=\"fas fa-star\"><\/i> Certificado<\/div>\r\n        <div class=\"trust-badge\"><i class=\"fas fa-clock\"><\/i> Seguimiento 24\/7<\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n        <!-- BUSCADOR -->\r\n        <div class=\"search-card\">\r\n            <form method=\"get\" id=\"form-buscar\">\r\n                <div class=\"input-group\">\r\n                    <input type=\"text\" \r\n                           name=\"codigo\" \r\n                           id=\"codigo-input\"\r\n                           placeholder=\"Ingresa tu c\u00f3digo de seguimiento\"\r\n                           value=\"\"\r\n                           autocomplete=\"off\">\r\n                    <button type=\"submit\" class=\"btn-search\">\r\n                        <i class=\"fas fa-arrow-right\"><\/i> Buscar\r\n                    <\/button>\r\n                <\/div>\r\n                                <div class=\"help-text\">\r\n                    <i class=\"fas fa-lightbulb\"><\/i> El c\u00f3digo est\u00e1 en tu factura o mensaje de WhatsApp\r\n                <\/div>\r\n            <\/form>\r\n        <\/div>\r\n\r\n        <!-- QR Y COMPARTIR (solo si hay orden) -->\r\n        <div id=\"qr-section\" style=\"display: none;\">\r\n            <div class=\"qr-container\">\r\n                <div id=\"qr-code\" style=\"background: white; padding: 10px; border-radius: 16px; width: 120px; height: 120px;\"><\/div>\r\n            <\/div>\r\n            <div class=\"share-buttons\">\r\n                <button class=\"share-btn share-wa\" onclick=\"compartirWhatsApp()\"><i class=\"fab fa-whatsapp\"><\/i> WhatsApp<\/button>\r\n                <button class=\"share-btn share-fb\" onclick=\"compartirFacebook()\"><i class=\"fab fa-facebook\"><\/i> Facebook<\/button>\r\n                <button class=\"share-btn share-copy\" onclick=\"copiarEnlace()\"><i class=\"fas fa-copy\"><\/i> Copiar enlace<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- CONTENIDO DE LA ORDEN -->\r\n        <div id=\"orden-content\">\r\n                    <\/div>\r\n\r\n        <div class=\"footer-premium\">\r\n    <div class=\"footer-seal\">\r\n        <i class=\"fas fa-tools\"><\/i>\r\n    <\/div>\r\n    <div class=\"footer-text\">\r\n    <strong>Mi Taller<\/strong><br>\r\n    Sistema de Seguimiento en Tiempo Real<br>\r\n    <span style=\"opacity: 0.5;\">\u00a9 2026 Todos los derechos reservados<\/span>\r\n<\/div>\r\n<div class=\"footer-contacts\">\r\n        <a href=\"https:\/\/wa.me\/593996128299?text=%F0%9F%8F%A2+%2AMi+Taller%2A%0A%0A%F0%9F%91%8B+Hola%2C+soy+%2ACliente%2A%0A%0A%F0%9F%93%8B+%2ACONSULTA+SOBRE%3A%2A%0A%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%0A%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%0A%0A%F0%9F%92%AC+%2AMI+MENSAJE%3A%2A%0A_%28Escrib%C3%AD+tu+consulta+aqu%C3%AD%29_%0A%0A%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%0A%F0%9F%93%B1+Enviado+desde+el+seguimiento+web\" \r\n            class=\"footer-contact-btn\" \r\n            target=\"_blank\"\r\n            rel=\"noopener\">\r\n            <i class=\"fab fa-whatsapp\" style=\"color: #25D366;\"><\/i> WhatsApp\r\n        <\/a>\r\n    <a href=\"tel:+593996128299\" class=\"footer-contact-btn\">\r\n        <i class=\"fas fa-phone\" style=\"color: #60A5FA;\"><\/i> Llamar\r\n    <\/a>\r\n<\/div>\r\n<\/div>\r\n    <\/div>\r\n\r\n    <!-- WHATSAPP FLOTANTE -->\r\n    <a href=\"https:\/\/wa.me\/593996128299?text=%F0%9F%8F%A2+%2AMi+Taller%2A%0A%0A%F0%9F%91%8B+Hola%2C+soy+%2ACliente%2A%0A%0A%F0%9F%93%8B+%2ACONSULTA+SOBRE%3A%2A%0A%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%0A%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%0A%0A%F0%9F%92%AC+%2AMI+MENSAJE%3A%2A%0A_%28Escrib%C3%AD+tu+consulta+aqu%C3%AD%29_%0A%0A%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%E2%94%81%0A%F0%9F%93%B1+Enviado+desde+el+seguimiento+web\" \r\n        class=\"whatsapp-float\" \r\n        target=\"_blank\"\r\n        rel=\"noopener\"\r\n        title=\"Consultar por WhatsApp\">\r\n            <i class=\"fab fa-whatsapp\"><\/i>\r\n    <\/a>\r\n\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/qrcodejs\/1.0.0\/qrcode.min.js\"><\/script>\r\n\r\n \r\n    <script>\r\n\/\/ Funci\u00f3n para dibujar puntos en los da\u00f1os despu\u00e9s de que cargue la p\u00e1gina\r\nfunction dibujarTodosLosPuntos() {\r\n    console.log('\ud83c\udfa8 Dibujando puntos en da\u00f1os...');\r\n    \r\n    const danosElementos = document.querySelectorAll('.foto-item');\r\n    console.log('\ud83d\udcf8 Elementos de da\u00f1os encontrados:', danosElementos.length);\r\n    \r\n    danosElementos.forEach((elemento, idx) => {\r\n        const img = elemento.querySelector('img');\r\n        const canvas = elemento.querySelector('canvas');\r\n        \r\n        if (!img || !canvas) {\r\n            console.log('\u26a0\ufe0f No se encontr\u00f3 img o canvas para el da\u00f1o', idx);\r\n            return;\r\n        }\r\n        \r\n        \/\/ Obtener los datos del da\u00f1o desde un atributo data\r\n        const puntosData = elemento.getAttribute('data-puntos');\r\n        if (!puntosData) {\r\n            console.log('\u26a0\ufe0f No hay data-puntos para el da\u00f1o', idx);\r\n            return;\r\n        }\r\n        \r\n        const puntos = JSON.parse(puntosData);\r\n        console.log(`\ud83d\udccd Da\u00f1o ${idx}: ${puntos.length} puntos`);\r\n        \r\n        function dibujarPuntos() {\r\n            const rect = img.getBoundingClientRect();\r\n            canvas.width = rect.width;\r\n            canvas.height = rect.height;\r\n            canvas.style.width = rect.width + 'px';\r\n            canvas.style.height = rect.height + 'px';\r\n            \r\n            const ctx = canvas.getContext('2d');\r\n            ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n            \r\n            const scaleX = canvas.width \/ img.naturalWidth;\r\n            const scaleY = canvas.height \/ img.naturalHeight;\r\n            \r\n            puntos.forEach((punto, i) => {\r\n                const x = punto.x * scaleX;\r\n                const y = punto.y * scaleY;\r\n                ctx.beginPath();\r\n                ctx.arc(x, y, 10, 0, 2 * Math.PI);\r\n                ctx.fillStyle = 'rgba(239, 68, 68, 0.8)';\r\n                ctx.fill();\r\n                ctx.strokeStyle = 'white';\r\n                ctx.lineWidth = 2;\r\n                ctx.stroke();\r\n                ctx.fillStyle = 'white';\r\n                ctx.font = 'bold 14px Arial';\r\n                ctx.fillText((i+1).toString(), x-5, y+5);\r\n            });\r\n        }\r\n        \r\n        if (img.complete) {\r\n            dibujarPuntos();\r\n        } else {\r\n            img.onload = dibujarPuntos;\r\n        }\r\n    });\r\n}\r\n\r\n\/\/ Esperar a que el DOM est\u00e9 listo\r\nif (document.readyState === 'loading') {\r\n    document.addEventListener('DOMContentLoaded', dibujarTodosLosPuntos);\r\n} else {\r\n    dibujarTodosLosPuntos();\r\n}\r\n\r\n\/\/ Tambi\u00e9n dibujar cuando cambie el tama\u00f1o de la ventana\r\nwindow.addEventListener('resize', dibujarTodosLosPuntos);\r\n\r\n\r\n<\/script>\r\n<script>\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/autoservicionaranjo.com\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/autoservicionaranjo.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/autoservicionaranjo.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/autoservicionaranjo.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/autoservicionaranjo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":0,"href":"https:\/\/autoservicionaranjo.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"wp:attachment":[{"href":"https:\/\/autoservicionaranjo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}