/* ── XiService Public CSS — Mobile First ─────────────── */
:root{
    --xis-dark:#1a1a2e;--xis-blue:#3b82f6;--xis-teal:#10b981;
    --xis-orange:#f59e0b;--xis-red:#ef4444;--xis-border:#e2e8f0;
    --xis-text:#1e293b;--xis-sub:#64748b;--radius:12px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* ── App shell ────────────────────────────────────── */
.xis-app{
    min-height:100vh;background:#f0f4f8;
    font-family:'Segoe UI',system-ui,Arial,sans-serif;
    color:var(--xis-text);max-width:540px;margin:0 auto;
    position:relative;overflow-x:hidden;
}

/* ════════════════════════════════════════════════════
   LOGIN SCREEN
════════════════════════════════════════════════════ */
.xis-login-screen{
    position:fixed;inset:0;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(160deg,#0f0c29,#302b63,#24243e);
    padding:20px;z-index:9999;
}

.xis-login-card{
    background:rgba(255,255,255,.07);backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.15);border-radius:24px;
    padding:36px 28px;width:100%;max-width:360px;text-align:center;
    box-shadow:0 25px 50px rgba(0,0,0,.4);
}

.xis-logo-area{margin-bottom:28px}
.xis-logo{max-height:70px;margin-bottom:12px}
.xis-oficina-nome{font-size:22px;font-weight:700;color:#fff;margin:0 0 4px}
.xis-subtitle{font-size:13px;color:rgba(255,255,255,.5);margin:0}

/* PIN dots */
.xis-pin-display{margin-bottom:24px}
.xis-pin-dots{display:flex;justify-content:center;gap:12px;margin-bottom:10px}
.pin-dot{
    width:16px;height:16px;border-radius:50%;
    border:2px solid rgba(255,255,255,.3);
    transition:all .15s;background:transparent;
}
.pin-dot.filled{background:var(--xis-blue);border-color:var(--xis-blue);transform:scale(1.1)}
.pin-dot.error{background:var(--xis-red);border-color:var(--xis-red)}
.xis-pin-label{font-size:13px;color:rgba(255,255,255,.6);margin:0}

/* PIN pad */
.xis-pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 auto;max-width:280px}
.xis-pin-btn{
    aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.08);color:#fff;font-size:22px;font-weight:500;
    cursor:pointer;transition:all .12s;-webkit-user-select:none;user-select:none;
}
.xis-pin-btn:hover:not(:disabled){background:rgba(255,255,255,.18);transform:scale(1.04)}
.xis-pin-btn:active:not(:disabled){transform:scale(.94)}
.xis-pin-empty{opacity:0;pointer-events:none}

/* Error message */
.xis-error-msg{
    margin-top:16px;padding:10px;border-radius:8px;
    background:rgba(239,68,68,.2);color:#fca5a5;font-size:13px;
}

/* ════════════════════════════════════════════════════
   TOP BAR
════════════════════════════════════════════════════ */
.xis-topbar{
    display:flex;align-items:center;justify-content:space-between;
    background:var(--xis-dark);color:#fff;padding:12px 16px;
    position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.xis-topbar-left{display:flex;align-items:center;gap:10px}
.xis-topbar-nome{font-size:14px;font-weight:600}
.xis-badge-role{font-size:10px;padding:3px 8px;border-radius:10px;font-weight:600}
.xis-badge-role.recep{background:rgba(59,130,246,.25);color:#93c5fd}
.xis-badge-role.cliente{background:rgba(16,185,129,.25);color:#6ee7b7}
.xis-topbar-right{display:flex;gap:8px}
.xis-icon-btn{background:rgba(255,255,255,.1);border:none;border-radius:8px;color:#fff;padding:8px;font-size:16px;cursor:pointer;transition:.15s}
.xis-icon-btn:hover{background:rgba(255,255,255,.2)}

/* ════════════════════════════════════════════════════
   CONTENT / VISTAS
════════════════════════════════════════════════════ */
.xis-content{padding:16px}
.xis-vista{}
.xis-section-title{font-size:17px;font-weight:700;margin:0 0 16px;color:var(--xis-dark)}
.xis-back-btn{
    display:inline-flex;align-items:center;gap:6px;
    background:rgba(59,130,246,.1);color:var(--xis-blue);
    border:none;border-radius:8px;padding:8px 14px;font-size:13px;
    font-weight:600;cursor:pointer;margin-bottom:16px;
}

/* ── Dashboard Recepção ───────────────────────────── */
.xis-quick-search{background:#fff;border-radius:var(--radius);padding:20px;margin-bottom:14px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.xis-quick-search h2{font-size:16px;font-weight:700;margin:0 0 12px;color:var(--xis-dark)}
.xis-search-bar{display:flex;gap:8px}
.xis-alert-banner{background:#fef9c3;border:1px solid #fbbf24;border-radius:8px;padding:10px 14px;font-size:13px;margin-bottom:14px}
.xis-recep-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.xis-stat-card{background:#fff;border-radius:10px;padding:16px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.05);border-bottom:3px solid var(--xis-blue)}
.stat-num{display:block;font-size:28px;font-weight:800;color:var(--xis-dark)}
.stat-label{font-size:12px;color:var(--xis-sub);font-weight:500}

/* ── Formulário público ───────────────────────────── */
.xis-form-pub{background:#fff;border-radius:var(--radius);padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.xis-field-pub{margin-bottom:14px}
.xis-field-pub label{display:block;font-size:12px;font-weight:700;color:var(--xis-sub);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.xis-input-pub{
    width:100%;padding:11px 14px;border:1.5px solid var(--xis-border);
    border-radius:8px;font-size:15px;outline:none;transition:.15s;background:#fff;
    -webkit-appearance:none;
}
.xis-input-pub:focus{border-color:var(--xis-blue);box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.xis-input-group{display:flex;gap:8px}
.xis-input-group .xis-input-pub{flex:1}

/* Badge viatura no form */
.xis-viatura-badge{
    background:linear-gradient(135deg,var(--xis-dark),#2d3a6b);
    color:#fff;border-radius:10px;padding:14px 16px;margin-bottom:14px;
}

/* Tabs públicas */
.xis-tabs-pub{display:flex;gap:4px;background:#f1f5f9;border-radius:8px;padding:4px;margin-bottom:14px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.xis-tabs-pub::-webkit-scrollbar{display:none}
.xis-tab-pub{flex:1;min-width:70px;padding:8px 6px;border:none;background:transparent;border-radius:6px;font-size:12px;color:var(--xis-sub);font-weight:600;cursor:pointer;white-space:nowrap;transition:.15s}
.xis-tab-pub.active{background:#fff;color:var(--xis-dark);box-shadow:0 1px 4px rgba(0,0,0,.1)}

/* Serviços pub */
.xis-servico-pub{background:#f8fafc;border:1px solid var(--xis-border);border-radius:8px;padding:12px;margin-bottom:10px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start}

/* Total financeiro */
.xis-total-box{background:linear-gradient(135deg,#1a1a2e,#2d3a6b);color:#fff;border-radius:8px;padding:14px 16px;text-align:center;font-size:16px;margin-top:10px}

/* Fotos */
.xis-fotos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.xis-foto-thumb{aspect-ratio:1;border-radius:8px;object-fit:cover;width:100%}
.xis-upload-area{border:2px dashed var(--xis-border);border-radius:10px;padding:24px;text-align:center;color:var(--xis-sub);font-size:14px;cursor:pointer;transition:.2s}
.xis-upload-area:hover{border-color:var(--xis-blue);color:var(--xis-blue);background:#f0f9ff}

/* ── Botões pub ───────────────────────────────────── */
.xis-btn-pub{padding:10px 18px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
.xis-btn-primary-pub{background:var(--xis-blue);color:#fff}
.xis-btn-primary-pub:hover{background:#2563eb}
.xis-btn-outline{background:transparent;border:1.5px solid var(--xis-blue);color:var(--xis-blue)}
.xis-btn-full{width:100%;margin-top:16px;padding:14px}

/* ════════════════════════════════════════════════════
   CLIENTE — VIATURAS GRID
════════════════════════════════════════════════════ */
.xis-viaturas-grid{display:flex;flex-direction:column;gap:12px}
.xis-viatura-card{
    background:#fff;border-radius:var(--radius);overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.07);cursor:pointer;
    transition:transform .15s,box-shadow .15s;
    border-left:5px solid var(--xis-blue);
}
.xis-viatura-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.12)}
.xis-viatura-card.card-ok{border-left-color:var(--xis-teal)}
.xis-viatura-card.card-warn{border-left-color:var(--xis-orange)}
.xis-viatura-card.card-danger{border-left-color:var(--xis-red)}
.xis-viatura-card.card-neutral{border-left-color:#94a3b8}

.xis-viatura-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 8px;border-bottom:1px solid var(--xis-border)}
.xis-matricula{font-size:18px;font-weight:800;color:var(--xis-dark);letter-spacing:1px}
.xis-status-badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;background:#f0f9ff;color:var(--xis-blue)}

.xis-viatura-body{padding:10px 16px}
.xis-viatura-info{font-size:13px;color:var(--xis-sub);padding:3px 0}
.xis-proxima{color:var(--xis-orange)!important;font-weight:600}
.xis-viatura-footer{padding:10px 16px;font-size:12px;color:var(--xis-blue);font-weight:600;border-top:1px solid var(--xis-border);text-align:right}

/* ── Histórico detalhado ─────────────────────────── */
.xis-hist-card{background:#fff;border-radius:10px;margin-bottom:12px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.xis-hist-header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:var(--xis-dark);color:#fff;cursor:pointer}
.xis-hist-nr{font-weight:700;font-size:13px}
.xis-hist-data{font-size:12px;opacity:.8}
.xis-hist-body{padding:12px 14px;font-size:13px;line-height:1.7;display:none}
.xis-hist-body.open{display:block}
.xis-hist-servicos{margin-top:8px}
.xis-hist-servico{display:inline-block;background:#f0f9ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:20px;padding:3px 10px;font-size:11px;margin:2px}
.xis-hist-kms{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px}
.xis-hist-kms-item{text-align:center;padding:8px;background:#f8fafc;border-radius:8px}
.xis-hist-kms-val{font-size:16px;font-weight:700;display:block}
.xis-hist-kms-lbl{font-size:10px;color:var(--xis-sub)}
.kms-ok{color:var(--xis-teal)}.kms-warn{color:var(--xis-orange)}.kms-bad{color:var(--xis-red)}

/* ── Empty state ─────────────────────────────────── */
.xis-empty-state{text-align:center;padding:60px 20px;color:var(--xis-sub)}
.xis-empty-icon{font-size:64px;margin-bottom:16px}

/* ── Toast ───────────────────────────────────────── */
.xis-toast{
    position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
    background:#1a1a2e;color:#fff;padding:12px 20px;border-radius:20px;
    font-size:14px;font-weight:500;z-index:9999;box-shadow:0 4px 20px rgba(0,0,0,.3);
    max-width:90vw;text-align:center;animation:toastIn .2s ease;
}
.xis-toast.toast-ok{background:#166534}
.xis-toast.toast-err{background:#991b1b}

@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ── Scrollbar ───────────────────────────────────── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}

/* ── Fotos no histórico ──────────────────────────── */
.xis-hist-fotos{
    display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;
    padding-top:10px;border-top:1px solid var(--xis-border);
}
.xis-hist-foto-thumb{
    width:80px;height:60px;object-fit:cover;
    border-radius:6px;border:1px solid var(--xis-border);
    cursor:pointer;transition:transform .15s;
}
.xis-hist-foto-thumb:hover{transform:scale(1.05)}
.xis-hist-foto-badge{
    display:inline-block;background:rgba(255,255,255,.2);
    border-radius:10px;padding:1px 7px;font-size:11px;
    font-weight:500;margin-left:6px;vertical-align:middle;
}

/* ── Lightbox (frontend mobile) ──────────────────── */
.xis-lightbox{
    position:fixed;inset:0;background:rgba(0,0,0,.93);
    z-index:999999;display:flex;align-items:center;justify-content:center;
    cursor:zoom-out;
}
.xis-lightbox-img{max-width:96vw;max-height:88vh;object-fit:contain;border-radius:6px;cursor:default}
.xis-lightbox-close{
    position:fixed;top:12px;right:14px;background:rgba(255,255,255,.15);
    border:none;color:#fff;font-size:26px;width:42px;height:42px;
    border-radius:50%;cursor:pointer;z-index:10;
    display:flex;align-items:center;justify-content:center;
}
.xis-lightbox-nav{
    position:fixed;top:50%;transform:translateY(-50%);
    background:rgba(255,255,255,.15);border:none;color:#fff;
    font-size:24px;width:44px;height:60px;border-radius:6px;
    cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;
}
.xis-lightbox-prev{left:8px}
.xis-lightbox-next{right:8px}
.xis-lightbox-caption{
    position:fixed;bottom:14px;left:50%;transform:translateX(-50%);
    color:rgba(255,255,255,.8);font-size:12px;background:rgba(0,0,0,.5);
    padding:5px 14px;border-radius:20px;
}

/* ════════════════════════════════════════════════════
   AGENDAMENTOS — vista recepcionista
════════════════════════════════════════════════════ */

/* Badge no ícone do topo */
.xis-icon-btn-agenda{position:relative}
.xis-agenda-badge{
    position:absolute;top:-4px;right:-4px;
    background:var(--xis-red);color:#fff;
    font-size:10px;font-weight:800;
    min-width:18px;height:18px;border-radius:9px;
    display:inline-flex;align-items:center;justify-content:center;
    padding:0 4px;line-height:1;
    box-shadow:0 1px 4px rgba(0,0,0,.3);
}

/* Filtros */
.xis-agenda-filtros{
    display:flex;gap:8px;margin-bottom:14px;
}
.xis-agenda-filtro{
    flex:1;padding:9px 4px;border:1.5px solid var(--xis-border);
    border-radius:8px;background:#fff;font-size:13px;font-weight:600;
    color:var(--xis-sub);cursor:pointer;transition:.15s;text-align:center;
}
.xis-agenda-filtro.active{
    background:var(--xis-dark);color:#fff;border-color:var(--xis-dark);
}

/* Cards */
.xis-agenda-card{
    background:#fff;border-radius:12px;margin-bottom:12px;
    overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.07);
    border-left:5px solid var(--xis-blue);
    transition:opacity .3s,max-height .3s;
}
.xis-agenda-urgente{border-left-color:var(--xis-red)}
.xis-agenda-proxima{border-left-color:var(--xis-orange)}

.xis-agenda-header{
    display:flex;justify-content:space-between;align-items:flex-start;
    padding:14px 16px 8px;cursor:pointer;
}
.xis-agenda-matricula{
    display:block;font-size:18px;font-weight:900;
    letter-spacing:1px;color:var(--xis-dark);
}
.xis-agenda-modelo{
    display:block;font-size:12px;color:var(--xis-sub);margin-top:2px;
}
.xis-agenda-status{
    font-size:11px;font-weight:700;padding:4px 10px;
    border-radius:20px;white-space:nowrap;margin-left:8px;
}
.xis-agenda-status.urgente{background:#fee2e2;color:var(--xis-red)}
.xis-agenda-status.proxima{background:#fef9c3;color:#92400e}

.xis-agenda-detalhes{
    display:flex;gap:16px;padding:0 16px 10px;
    flex-wrap:wrap;
}
.xis-agenda-det-item{font-size:13px;color:var(--xis-sub)}

.xis-agenda-acoes{
    display:flex;gap:8px;padding:10px 12px;
    border-top:1px solid var(--xis-border);
    background:#f8fafc;flex-wrap:wrap;
}
.xis-agenda-btn{
    flex:1;min-width:80px;padding:9px 6px;border:none;
    border-radius:8px;font-size:12px;font-weight:600;
    cursor:pointer;transition:.15s;text-align:center;
}
.xis-agenda-btn-hist{background:#f1f5f9;color:var(--xis-dark)}
.xis-agenda-btn-hist:hover{background:#e2e8f0}
.xis-agenda-btn-wa{background:#dcfce7;color:#166534}
.xis-agenda-btn-wa:hover{background:#bbf7d0}
.xis-agenda-btn-ok{background:var(--xis-teal);color:#fff}
.xis-agenda-btn-ok:hover{background:#059669}

/* Stat card urgente clicável */
.xis-stat-urgente{
    border-bottom-color:var(--xis-red)!important;
    background:linear-gradient(135deg,#fff5f5,#fff);
}
.xis-stat-urgente .stat-num{color:var(--xis-red)}