/* ============================================================
   JR Auto Technologies — Sistema visual compartido
   Un solo archivo para admin, campo, ventas, socios y jrconnect.
   Se carga AL FINAL del <head> para ganar los empates de
   especificidad contra los <style> incrustados de cada pagina.
   ============================================================ */

/* ---------- TOKENS: OSCURO (por defecto) ---------- */
:root,
html[data-theme="dark"] {
    --jr-gold: #C7A44B;
    --jr-gold-2: #f0d9a0;
    --jr-gold-soft: rgba(199, 164, 75, .14);
    --jr-green: #2ed573;
    --jr-red: #ff4757;
    --jr-blue: #1e90ff;
    --jr-amber: #ffa502;
    --jr-purple: #a55eea;

    --jr-bg: #000;
    --jr-bg-2: #0b0b0c;
    --jr-surface: rgba(255, 255, 255, .038);
    --jr-surface-2: rgba(255, 255, 255, .055);
    --jr-surface-hover: rgba(255, 255, 255, .07);
    --jr-sidebar: #0d0d0d;
    --jr-ink: #f5f5f7;
    --jr-ink-2: #d2d2d7;
    --jr-muted: #86868b;
    --jr-line: rgba(255, 255, 255, .07);
    --jr-line-2: rgba(255, 255, 255, .12);
    --jr-shadow: 0 22px 46px rgba(0, 0, 0, .55);
    --jr-glow: rgba(199, 164, 75, .28);
    --jr-grid: rgba(255, 255, 255, .016);
    --jr-logo-shadow: drop-shadow(0 2px 10px rgba(199, 164, 75, .28));
    --jr-scheme: dark;
}

/* ---------- TOKENS: CLARO ---------- */
html[data-theme="light"] {
    --jr-gold: #8a6d1f;
    --jr-gold-2: #b8942f;
    --jr-gold-soft: rgba(138, 109, 31, .10);
    --jr-green: #12924b;
    --jr-red: #d92d3c;
    --jr-blue: #0b6bcb;
    --jr-amber: #b26a00;
    --jr-purple: #7239c4;

    --jr-bg: #f4f5f7;
    --jr-bg-2: #eceef2;
    --jr-surface: rgba(255, 255, 255, .82);
    --jr-surface-2: #fff;
    --jr-surface-hover: rgba(0, 0, 0, .035);
    --jr-sidebar: #fff;
    --jr-ink: #16181d;
    --jr-ink-2: #3a3f4a;
    --jr-muted: #6b7280;
    --jr-line: rgba(16, 18, 24, .10);
    --jr-line-2: rgba(16, 18, 24, .16);
    --jr-shadow: 0 16px 38px rgba(16, 18, 24, .12);
    --jr-glow: rgba(138, 109, 31, .22);
    --jr-grid: rgba(16, 18, 24, .026);
    --jr-logo-shadow: drop-shadow(0 2px 8px rgba(16, 18, 24, .18));
    --jr-scheme: light;
}

html { color-scheme: var(--jr-scheme); }

/* Transicion suave al alternar tema (se desactiva durante la carga) */
html.jr-anim body,
html.jr-anim body * {
    transition: background-color .32s ease, color .32s ease,
                border-color .32s ease, fill .32s ease;
}
@media (prefers-reduced-motion: reduce) {
    html.jr-anim body, html.jr-anim body * { transition: none !important; }
}

/* ============================================================
   RETROFIT — reescribe los colores fijos de las paginas viejas
   ============================================================ */
html[data-theme] body {
    background-color: var(--jr-bg);
    color: var(--jr-ink);
}

/* Fondos degradados de las areas principales */
html[data-theme] .main {
    background:
        radial-gradient(1100px 520px at 78% -10%, var(--jr-gold-soft), transparent 62%),
        radial-gradient(900px 460px at 8% 0%, rgba(30, 144, 255, .06), transparent 60%),
        linear-gradient(180deg, var(--jr-bg-2) 0%, var(--jr-bg) 55%);
}
html[data-theme] .main::before { background-image:
        linear-gradient(var(--jr-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--jr-grid) 1px, transparent 1px); }

/* Superficies: tarjetas, paneles, cajas */
html[data-theme] .panel,
html[data-theme] .card,
html[data-theme] .kpi-card,
html[data-theme] .box,
html[data-theme] .stat,
html[data-theme] .widget {
    background: linear-gradient(165deg, var(--jr-surface-2), var(--jr-surface));
    border-color: var(--jr-line);
    color: var(--jr-ink);
}
html[data-theme="light"] .panel,
html[data-theme="light"] .card,
html[data-theme="light"] .kpi-card {
    box-shadow: 0 1px 3px rgba(16, 18, 24, .06), 0 8px 24px rgba(16, 18, 24, .05);
}
html[data-theme] .panel:hover { border-color: var(--jr-line-2); }
html[data-theme] .kpi-card:hover { border-color: var(--jr-glow); box-shadow: var(--jr-shadow); }
html[data-theme] .card:active { background: var(--jr-surface-hover); }

/* Tipografia y textos apagados */
html[data-theme] .muted,
html[data-theme] .who,
html[data-theme] .empty,
html[data-theme] .hint,
html[data-theme] .kpi-title,
html[data-theme] .sm,
html[data-theme] label,
html[data-theme] small { color: var(--jr-muted); }
html[data-theme] h1, html[data-theme] h2,
html[data-theme] h3, html[data-theme] h4 { color: var(--jr-ink); }
html[data-theme] .kpi-value { color: var(--jr-ink); }
html[data-theme] .lbl, html[data-theme] .money { color: var(--jr-gold); }

/* Tablas */
html[data-theme] table { border-color: var(--jr-line); }
html[data-theme] th { color: var(--jr-muted); border-bottom-color: var(--jr-line); }
html[data-theme] td { color: var(--jr-ink-2); border-bottom-color: var(--jr-line); }
html[data-theme] tbody tr:hover td { background: var(--jr-gold-soft); }
html[data-theme] thead { background: transparent; }

/* Formularios */
html[data-theme] input, html[data-theme] select,
html[data-theme] textarea, html[data-theme] .field {
    background: var(--jr-surface-2);
    border-color: var(--jr-line-2);
    color: var(--jr-ink);
}
html[data-theme="light"] input, html[data-theme="light"] select,
html[data-theme="light"] textarea, html[data-theme="light"] .field {
    background: #fff;
}
html[data-theme] input::placeholder,
html[data-theme] textarea::placeholder { color: var(--jr-muted); }
html[data-theme] input:focus, html[data-theme] select:focus,
html[data-theme] textarea:focus, html[data-theme] .field:focus {
    border-color: var(--jr-gold);
    box-shadow: 0 0 0 3px var(--jr-gold-soft);
    outline: none;
}
html[data-theme] option { background: var(--jr-sidebar); color: var(--jr-ink); }

/* Botones dorados */
html[data-theme] .btn,
html[data-theme] button.primary {
    background: linear-gradient(135deg, var(--jr-gold), var(--jr-gold-2));
    color: #1a1400;
    border: none;
}
html[data-theme="light"] .btn,
html[data-theme="light"] button.primary { color: #fff; }
html[data-theme] .btn:hover { box-shadow: 0 10px 24px var(--jr-glow); transform: translateY(-2px); }
html[data-theme] .btn.ghost {
    background: var(--jr-surface-2); color: var(--jr-ink); border: 1px solid var(--jr-line);
}

/* Barra lateral del admin */
html[data-theme] .sidebar {
    background-color: var(--jr-sidebar);
    border-right-color: var(--jr-line);
}
html[data-theme] .sidebar a { color: var(--jr-muted); }
html[data-theme] .sidebar a:hover,
html[data-theme] .sidebar a.active { background: var(--jr-gold-soft); color: var(--jr-gold); }
html[data-theme] .sidebar-section { color: var(--jr-muted); }

/* Navegacion inferior de las PWA */
html[data-theme] nav.tabs {
    background: var(--jr-sidebar);
    border-top-color: var(--jr-line);
}
html[data-theme="dark"] nav.tabs { background: rgba(10, 10, 10, .94); }
html[data-theme="light"] nav.tabs { background: rgba(255, 255, 255, .95); box-shadow: 0 -2px 18px rgba(16,18,24,.07); }
html[data-theme] nav.tabs a { color: var(--jr-muted); }
html[data-theme] nav.tabs a.on { color: var(--jr-gold); }

/* Insignias y mensajes conservan su color semantico */
html[data-theme] .b-ok  { background: rgba(46, 213, 115, .14); color: var(--jr-green); }
html[data-theme] .b-wait{ background: var(--jr-gold-soft);      color: var(--jr-gold); }
html[data-theme] .b-no  { background: rgba(255, 71, 87, .14);   color: var(--jr-red); }
html[data-theme] .msg-ok  { background: rgba(46, 213, 115, .10); border-color: rgba(46,213,115,.32); color: var(--jr-green); }
html[data-theme] .msg-err { background: rgba(255, 71, 87, .10);  border-color: rgba(255,71,87,.32);  color: var(--jr-red); }

/* ============================================================
   MARCA: logo arriba a la izquierda + interruptor de tema
   ============================================================ */
.jr-brand {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; flex-shrink: 0;
}
.jr-brand img {
    height: 38px; width: auto; display: block;
    filter: var(--jr-logo-shadow);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), filter .3s;
}
.jr-brand:hover img { transform: scale(1.04); }
html[data-theme="light"] .jr-brand img { filter: var(--jr-logo-shadow) saturate(1.15) brightness(.82); }

/* Barra de marca flotante para paginas sin encabezado propio (logins) */
.jr-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 10px 18px;
    background: color-mix(in srgb, var(--jr-bg) 82%, transparent);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border-bottom: 1px solid var(--jr-line);
}
.jr-topbar .jr-brand img { height: 32px; }
body.jr-has-topbar { padding-top: 58px; }

/* Logo dentro de la barra lateral del admin */
.sidebar .jr-brand {
    justify-content: center; margin-bottom: 26px; padding: 4px 0 14px;
    border-bottom: 1px solid var(--jr-line);
}
.sidebar .jr-brand img { height: 46px; }

/* Logo en el encabezado de las PWA */
.jr-pwa-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px;
}
.jr-pwa-head .jr-brand img { height: 34px; }

/* --- Interruptor claro / oscuro --- */
.jr-theme-toggle {
    position: relative; display: inline-flex; align-items: center;
    width: 60px; height: 30px; padding: 3px; flex-shrink: 0;
    border-radius: 999px; cursor: pointer;
    background: var(--jr-surface-2);
    border: 1px solid var(--jr-line-2);
    transition: background .3s, border-color .3s, box-shadow .3s;
    -webkit-tap-highlight-color: transparent;
}
.jr-theme-toggle:hover { border-color: var(--jr-gold); box-shadow: 0 0 0 3px var(--jr-gold-soft); }
.jr-theme-toggle:focus-visible { outline: 2px solid var(--jr-gold); outline-offset: 2px; }
.jr-theme-toggle .knob {
    position: absolute; top: 3px; left: 3px;
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, var(--jr-gold), var(--jr-gold-2));
    box-shadow: 0 2px 8px var(--jr-glow);
    transition: transform .38s cubic-bezier(.34, 1.56, .64, 1);
    display: grid; place-items: center;
}
html[data-theme="light"] .jr-theme-toggle .knob { transform: translateX(30px); }
.jr-theme-toggle .knob svg { width: 13px; height: 13px; stroke: #1a1400; fill: none; stroke-width: 2; stroke-linecap: round; }
.jr-theme-toggle .ico {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; color: var(--jr-muted);
    stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; pointer-events: none;
    transition: opacity .3s, color .3s;
}
.jr-theme-toggle .ico-sun  { left: 8px; }
.jr-theme-toggle .ico-moon { right: 8px; }
html[data-theme="light"] .jr-theme-toggle .ico-sun  { opacity: 0; }
html[data-theme="dark"]  .jr-theme-toggle .ico-moon { opacity: 0; }

/* En la barra lateral el interruptor va centrado con su etiqueta */
.sidebar .jr-theme-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 12px 15px; margin-top: 10px;
    border-top: 1px solid var(--jr-line);
    color: var(--jr-muted); font-size: 12.5px; font-weight: 600;
}

/* ---------- Refinamiento visual general ---------- */
html[data-theme] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme] ::-webkit-scrollbar-thumb {
    background: var(--jr-line-2); border-radius: 999px;
    border: 3px solid transparent; background-clip: content-box;
}
html[data-theme] ::-webkit-scrollbar-thumb:hover { background: var(--jr-gold); background-clip: content-box; }
html[data-theme] ::selection { background: var(--jr-gold-soft); color: var(--jr-ink); }

@media (max-width: 768px) {
    .jr-topbar { padding: 8px 14px; }
    .jr-topbar .jr-brand img { height: 28px; }
    body.jr-has-topbar { padding-top: 52px; }
}

/* ============================================================
   CAPA 2 — paginas con fondo degradado propio y tarjetas sueltas
   Los logins y portales pintaban su fondo con background-image,
   que gana sobre background-color: hay que reemplazarlo tambien
   o en modo claro quedaba el texto oscuro sobre un fondo negro.
   ============================================================ */
html[data-theme] body {
    background-image: radial-gradient(circle at 50% 50%, var(--jr-bg-2) 0%, var(--jr-bg) 100%);
}
/* El panel del admin pinta su propio fondo dentro de .main */
html[data-theme] body:has(> .main) { background-image: none; }

html[data-theme] .login-box,
html[data-theme] .login-container,
html[data-theme] .auth-box,
html[data-theme] .box {
    background: var(--jr-surface-2);
    border-color: var(--jr-line);
    color: var(--jr-ink);
}
html[data-theme="dark"] .login-box { background: rgba(30, 30, 30, .6); }
html[data-theme="light"] .login-box {
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 30px 60px rgba(16, 18, 24, .13), inset 0 1px 0 rgba(255, 255, 255, .9);
}
html[data-theme] .login-box h1,
html[data-theme] .login-box h2,
html[data-theme] .login-box h3 { color: var(--jr-ink); }
html[data-theme] .login-box p.subtitle,
html[data-theme] .login-box .subtitle,
html[data-theme] .pie { color: var(--jr-muted); }

/* Enlaces generales */
html[data-theme] a:not(.btn):not(.sidebar a):not(.jr-brand) { color: var(--jr-gold); }
html[data-theme] .login-box a { color: var(--jr-gold); }

/* La barra superior no debe tapar contenido centrado a pantalla completa */
body.jr-has-topbar { padding-top: 58px; }
html[data-theme] body.jr-has-topbar[style*="height:100vh"],
body.jr-has-topbar.jr-centered { height: 100vh; padding-top: 0; }
.jr-topbar + * { margin-top: 0; }

/* ============================================================
   CAPA 3 — animaciones premium para la informacion de las PWA
   Mismo lenguaje que las graficas del panel: entrada escalonada,
   brillo al tocar y contadores. Se respeta "reducir movimiento".
   ============================================================ */
@keyframes jrIn   { from { opacity:0; transform: translateY(16px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes jrGlow { 0% { background-position:-220% 0; } 100% { background-position:220% 0; } }
@keyframes jrPop  { 0% { transform: scale(.9); opacity:0; } 60% { transform: scale(1.04); } 100% { transform: scale(1); opacity:1; } }

.jr-in { animation: jrIn .62s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--d, 0s); }
.jr-pop { animation: jrPop .5s cubic-bezier(.34,1.56,.64,1) both; animation-delay: var(--d, 0s); }

/* Tarjetas y filas de las PWA: entran escalonadas y responden al tacto */
nav.tabs ~ * .card, .wrap .card, .wrap .res, .wrap .cx, .wrap .selector, .wrap form {
    animation: jrIn .62s cubic-bezier(.16,1,.3,1) both;
    animation-delay: var(--d, 0s);
}
.wrap .card {
    position: relative; overflow: hidden;
    transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .3s;
}
.wrap .card::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.10) 50%, transparent 62%);
    background-size: 220% 100%;
}
.wrap .card:active { transform: scale(.985); }
.wrap .card:active::after { opacity: 1; animation: jrGlow .9s ease; }
html[data-theme] .wrap .card:hover { border-color: var(--jr-glow); box-shadow: var(--jr-shadow); }

/* Chips de conexiones: aparecen con un ligero rebote */
.wrap .cx .chip { animation: jrPop .42s cubic-bezier(.34,1.56,.64,1) both; animation-delay: var(--d, 0s); }

/* Cifras destacadas de la PWA */
.jr-cifra { font-variant-numeric: tabular-nums; letter-spacing: -.5px; }

/* La barra inferior entra deslizandose la primera vez */
nav.tabs { animation: jrIn .55s cubic-bezier(.16,1,.3,1) both; }
nav.tabs a { transition: color .2s, transform .2s; }
nav.tabs a:active { transform: scale(.92); }

@media (prefers-reduced-motion: reduce) {
    .jr-in, .jr-pop, .wrap .card, .wrap .res, .wrap .cx,
    .wrap .selector, .wrap form, nav.tabs, .wrap .cx .chip { animation: none !important; }
}

/* ============================================================
   CAPA 4 — componente de grafica (panel y PWA)
   ============================================================ */
.jr-chart {
    background: linear-gradient(165deg, var(--jr-surface-2), var(--jr-surface));
    border: 1px solid var(--jr-line); border-radius: 18px;
    padding: 16px 16px 12px; margin-bottom: 14px;
}
.jr-chart-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.jr-chart-head h4 { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--jr-ink); letter-spacing: -.2px; }
.jr-chart-nota { display: block; margin-top: 3px; font-size: 11.5px; color: var(--jr-muted); }

.jr-chart-sw {
    display: flex; gap: 3px; padding: 3px; border-radius: 10px;
    background: var(--jr-surface); border: 1px solid var(--jr-line);
    max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.jr-chart-sw::-webkit-scrollbar { display: none; }
.jr-chart-sw button {
    display: flex; align-items: center; gap: 5px; white-space: nowrap;
    background: transparent; border: none; cursor: pointer;
    color: var(--jr-muted); font-size: 11.5px; font-weight: 700;
    padding: 7px 11px; border-radius: 8px; transition: all .2s;
    -webkit-tap-highlight-color: transparent;
}
.jr-chart-sw button:hover { color: var(--jr-ink); background: var(--jr-surface-hover); }
.jr-chart-sw button.on {
    background: linear-gradient(135deg, var(--jr-gold), var(--jr-gold-2));
    color: #1a1400; box-shadow: 0 3px 12px var(--jr-glow);
}
.jr-chart-sw .ic { font-size: 12.5px; line-height: 1; }
.jr-chart-body { position: relative; height: 230px; }

/* En el telefono el selector muestra solo el icono: los nombres no caben */
@media (max-width: 560px) {
    .jr-chart-body { height: 200px; }
    .jr-chart-sw button { padding: 8px 10px; }
    .jr-chart-sw .tx { display: none; }
    .jr-chart-sw .ic { font-size: 15px; }
}

/* ============================================================
   CAPA 5 — orden y limpieza de las PWA en el telefono
   ============================================================ */
@media (max-width: 760px) {
    .wrap { padding: 14px 14px 8px; max-width: 640px; margin: 0 auto; }

    /* Encabezado fijo: el tecnico siempre sabe en que pantalla esta */
    .wrap .top {
        position: sticky; top: 0; z-index: 40;
        margin: -14px -14px 16px; padding: 12px 14px;
        background: color-mix(in srgb, var(--jr-bg) 88%, transparent);
        backdrop-filter: blur(14px) saturate(1.3);
        -webkit-backdrop-filter: blur(14px) saturate(1.3);
        border-bottom: 1px solid var(--jr-line);
    }
    body.jr-has-topbar .wrap .top { top: 52px; }
    .wrap .top h1 { font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em; }

    /* Tarjetas con aire uniforme y esquinas consistentes */
    .wrap .card { border-radius: 16px; padding: 15px; margin-bottom: 11px; }

    /* Objetivos de toque comodos y campos que no hacen zoom en iOS */
    .wrap input, .wrap select, .wrap textarea {
        font-size: 16px; padding: 13px 14px; border-radius: 12px; margin-bottom: 13px;
    }
    .wrap label {
        font-size: .7rem; letter-spacing: .09em; margin-bottom: 7px; font-weight: 700;
    }
    .wrap button.primary { padding: 15px; font-size: 1rem; border-radius: 14px; min-height: 50px; }
    .wrap .res { padding: 15px 4px; min-height: 52px; }

    /* Nada se desborda a lo ancho */
    body { overflow-x: hidden; }
    .wrap table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .wrap img { max-width: 100%; height: auto; }
    .wrap pre, .wrap code { white-space: pre-wrap; word-break: break-word; }

    /* Separador de secciones, para que la pantalla se lea por bloques */
    .wrap .lbl {
        font-size: .68rem; letter-spacing: .16em; font-weight: 800;
        color: var(--jr-gold); margin: 0 0 11px;
    }
    .wrap .seccion-sep {
        margin: 22px 0 12px; padding-top: 16px; border-top: 1px solid var(--jr-line);
    }
}

/* Fila compacta reutilizable en las PWA (nombre + dato a la derecha) */
.jr-fila {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 0; border-bottom: 1px solid var(--jr-line);
}
.jr-fila:last-child { border-bottom: none; }
.jr-fila .nom { font-size: .93rem; font-weight: 600; color: var(--jr-ink); }
.jr-fila .sub { font-size: .76rem; color: var(--jr-muted); margin-top: 3px; }
.jr-fila .val { font-size: .95rem; font-weight: 700; color: var(--jr-gold); text-align: right; white-space: nowrap; }

/* Rejilla de indicadores para las PWA */
.jr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.jr-kpi {
    padding: 14px 15px; border-radius: 15px;
    background: linear-gradient(165deg, var(--jr-surface-2), var(--jr-surface));
    border: 1px solid var(--jr-line);
}
.jr-kpi i { font-style: normal; font-size: .64rem; letter-spacing: .13em; text-transform: uppercase;
            color: var(--jr-muted); font-weight: 700; }
.jr-kpi b { display: block; margin-top: 6px; font-size: 1.32rem; font-weight: 800;
            letter-spacing: -.02em; color: var(--jr-ink); font-variant-numeric: tabular-nums; }
.jr-kpi.oro b { color: var(--jr-gold); }
.jr-kpi.rojo b { color: var(--jr-red); }