/* Client-facing visual refresh (excludes mecanico views) */

:root {
    --client-ink: #ecf2ff;
    --client-muted: #a3b1c9;
    --client-panel: rgba(12, 19, 30, 0.72);
    --client-panel-strong: rgba(9, 15, 24, 0.9);
    --client-border: rgba(145, 184, 255, 0.22);
    --client-glow-a: rgba(31, 228, 170, 0.22);
    --client-glow-b: rgba(255, 153, 77, 0.22);
    --client-accent: #52f2b8;
    --client-accent-warm: #ff9f5a;
}

body.client-view {
    color: var(--client-ink);
    position: relative;
    isolation: isolate;
    background: linear-gradient(165deg, #04070d, #0e1624 52%, #151f2f);
}

body.client-view::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(180deg, rgba(4, 6, 9, 0.8) 0%, rgba(6, 9, 13, 0.6) 46%, rgba(9, 12, 17, 0.9) 100%),
        radial-gradient(circle at 16% 18%, var(--client-glow-a), transparent 42%),
        radial-gradient(circle at 83% 24%, var(--client-glow-b), transparent 44%),
        image-set(
            url('/imagenes/taller-hero-background.webp') type('image/webp') 1x,
            url('/imagenes/taller-hero-background.jpg') type('image/jpeg') 1x
        );
    background-size: cover, cover, cover, cover;
    background-position: center, center, center, center 18%;
    background-repeat: no-repeat;
    transform: scale(1.015);
}

body.client-view::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 35%, transparent 34%, rgba(3, 5, 8, 0.54) 100%);
}

body.client-view .container,
body.client-view .page-content {
    position: relative;
    z-index: 5;
}

body.client-view h1,
body.client-view h2,
body.client-view h3,
body.client-view h4 {
    color: #f3f7ff;
}

body.client-view p,
body.client-view .subtle,
body.client-view .shop-sub,
body.client-view .shop-count,
body.client-view .stock-line,
body.client-view .tracking-sub,
body.client-view .diag-sub {
    color: var(--client-muted);
}

body.client-view .card,
body.client-view .status-card,
body.client-view .form-card,
body.client-view .shop-card,
body.client-view .sidebar-card,
body.client-view .service-card-horizontal {
    background: linear-gradient(160deg, var(--client-panel), rgba(13, 22, 35, 0.55));
    border: 1px solid var(--client-border);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.client-view .btn,
body.client-view .hero-cta,
body.client-view .copy-btn,
body.client-view .shop-filters button,
body.client-view .btn-cotizar-servicio {
    background: linear-gradient(120deg, rgba(82, 242, 184, 0.3), rgba(255, 159, 90, 0.24));
    border: 1px solid rgba(147, 255, 226, 0.42);
    color: #f5fffb;
    box-shadow: 0 8px 22px rgba(16, 30, 50, 0.36);
}

body.client-view .btn:hover,
body.client-view .hero-cta:hover,
body.client-view .copy-btn:hover,
body.client-view .shop-filters button:hover,
body.client-view .btn-cotizar-servicio:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

body.client-view .pill,
body.client-view .chip,
body.client-view .status-badge,
body.client-view .tracking-chip,
body.client-view .tag {
    border-color: rgba(82, 242, 184, 0.42);
    background: rgba(82, 242, 184, 0.13);
    color: var(--client-accent);
}

body.client-view .price {
    color: var(--client-accent-warm);
}

body.client-view .shop-media,
body.client-view .service-image-container {
    background: #0a101a;
}

body.client-view .shop-media::after,
body.client-view .service-image-container::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 56%, rgba(7, 12, 20, 0.66) 100%);
}

body.client-view .shop-media img,
body.client-view .service-image-container img {
    transition: transform 0.28s ease;
}

body.client-view .shop-card:hover .shop-media img,
body.client-view .service-card-horizontal:hover .service-image-container img {
    transform: scale(1.035);
}

body.client-view .shop-filters input,
body.client-view .shop-filters select,
body.client-view .shop-filters .btn-clear,
body.client-view .form-group input {
    border: 1px solid rgba(151, 190, 255, 0.22);
    background: rgba(7, 13, 22, 0.7);
    color: #e9f2ff;
}

body.client-view .shop-filters .btn-clear {
    color: var(--client-muted);
}

body.client-view .shop-filters .btn-clear:hover {
    color: #edf5ff;
    border-color: rgba(151, 190, 255, 0.42);
}

body.client-view .detail,
body.client-view .step,
body.client-view .historial-list li,
body.client-view .copy-row,
body.client-view .diag-smart,
body.client-view .diag-score,
body.client-view .diag-card,
body.client-view .diag-alerts {
    border-color: rgba(151, 190, 255, 0.2);
    background: rgba(8, 14, 24, 0.68);
}

body.client-view .step.done {
    border-color: rgba(82, 242, 184, 0.34);
    background: rgba(82, 242, 184, 0.11);
}

body.client-view .step.current {
    border-color: rgba(255, 159, 90, 0.6);
    box-shadow: 0 0 0 3px rgba(255, 159, 90, 0.22);
}

body.client-view .progress-bar,
body.client-view .diag-bar {
    background: rgba(255, 255, 255, 0.1);
}

body.client-view .progress-fill,
body.client-view .diag-fill {
    background: linear-gradient(90deg, #52f2b8, #ff9f5a);
}

body.client-view.page-services .service-list-container {
    gap: 20px;
}

body.client-view.page-services .service-content {
    padding: 22px;
}

body.client-view.page-services .service-item-header h4 {
    color: #f4f9ff;
}

body.client-view.page-shop .shop-card,
body.client-view.page-portal .status-card,
body.client-view.page-consulta .status-card {
    border-radius: 18px;
}

@media (max-width: 768px) {
    body.client-view::before {
        background-position: center, center, center, center 30%;
        transform: scale(1.04);
    }
}