/* ============================================================
   ReviAuto - Design System
   Versão: 2.0 | Março 2026
   ============================================================ */

/* ---- Variáveis de Design ---- */
:root {
  --primary: #A87C24;
  --primary-dark: #11181F;
  --primary-light: #C9962F;
  --secondary: #C9962F;
  --secondary-light: #E0B14E;
  --success: #2E7D32;
  --success-light: #43A047;
  --warning: #F57F17;
  --danger: #C62828;
  --info: #3E5366;
  --dark: #11181F;
  --gray-100: #F8F9FA;
  --gray-200: #E9ECEF;
  --gray-300: #DEE2E6;
  --gray-500: #ADB5BD;
  --gray-700: #495057;
  --gray-900: #212529;
  --white: #FFFFFF;
  --navbar-height: 64px;
  --border-radius: 10px;
  --border-radius-sm: 6px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.08);
  --shadow: 0 2px 12px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.14);
  --transition: all 0.2s ease;
}

/* ---- Reset e Base ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Roboto', 'Segoe UI', sans-serif;
  background-color: #F0F4F8;
  color: var(--gray-900);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--primary-light); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--primary-dark); }

/* ---- Navbar ---- */
.navbar {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%) !important;
  height: var(--navbar-height);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.navbar-brand {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--white) !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar-brand i { color: var(--secondary-light); font-size: 1.4rem; }

.navbar .nav-link {
  color: rgba(255,255,255,0.85) !important;
  font-weight: 500;
  padding: 0.5rem 0.9rem !important;
  border-radius: var(--border-radius-sm);
  transition: var(--transition);
  font-size: 0.88rem;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--white) !important;
  background: rgba(255,255,255,0.15);
}

.navbar .dropdown-menu {
  border: none;
  box-shadow: var(--shadow-lg);
  border-radius: var(--border-radius);
  margin-top: 0.5rem;
  min-width: 200px;
}

.navbar .dropdown-item {
  font-size: 0.88rem;
  padding: 0.55rem 1.2rem;
  transition: var(--transition);
}

.navbar .dropdown-item:hover { background: var(--gray-100); color: var(--primary); }

/* Badge de tipo de usuário na navbar */
.user-type-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255,255,255,0.2);
  color: var(--white);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ---- Layout Principal ---- */
.main-content {
  padding: 1.8rem 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
}

/* ---- Cards ---- */
.card {
  border: none;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  background: var(--white);
  transition: var(--transition);
  overflow: hidden;
}

.card:hover { box-shadow: var(--shadow); }

.card-header {
  background: var(--white);
  border-bottom: 2px solid var(--gray-200);
  padding: 1rem 1.4rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gray-900);
}

.card-header-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: var(--white);
  border-bottom: none;
}

.card-header-custom {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: var(--white);
  border-bottom: none;
}

.card-header-custom h5, .card-header-primary h5 { color: var(--white); }

.card-body { padding: 1.4rem; }
.card-footer { background: var(--gray-100); border-top: 1px solid var(--gray-200); padding: 0.9rem 1.4rem; }

/* Cards de KPI / Estatísticas */
.stat-card {
  border-radius: var(--border-radius);
  padding: 1.4rem;
  color: var(--white);
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  cursor: default;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
}

.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.stat-card .stat-icon {
  font-size: 2rem;
  opacity: 0.85;
  margin-bottom: 0.5rem;
}

.stat-card .stat-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.stat-card .stat-label {
  font-size: 0.82rem;
  opacity: 0.9;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-card-primary { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); }
.stat-card-warning { background: linear-gradient(135deg, #8A4A22 0%, var(--secondary) 100%); }
.stat-card-success { background: linear-gradient(135deg, var(--success) 0%, var(--success-light) 100%); }
.stat-card-info { background: linear-gradient(135deg, #243340 0%, var(--info) 100%); }
.stat-card-danger { background: linear-gradient(135deg, var(--danger) 0%, #E53935 100%); }

/* ---- Botões ---- */
.btn {
  border-radius: var(--border-radius-sm);
  font-weight: 500;
  font-size: 0.88rem;
  padding: 0.5rem 1.1rem;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--primary); color: var(--white); }
.btn-primary:hover { background: var(--primary-dark); color: var(--white); }

.btn-success { background: var(--success); color: var(--white); }
.btn-success:hover { background: var(--success-light); color: var(--white); }

.btn-warning { background: var(--warning); color: var(--white); }
.btn-danger { background: var(--danger); color: var(--white); }

.btn-outline-primary { border: 1.5px solid var(--primary); color: var(--primary); background: transparent; }
.btn-outline-primary:hover { background: var(--primary); color: var(--white); }

.btn-outline-secondary { border: 1.5px solid var(--gray-500); color: var(--gray-700); background: transparent; }
.btn-outline-secondary:hover { background: var(--gray-200); color: var(--gray-900); }

.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; border-radius: var(--border-radius); }
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.8rem; }

/* ---- Formulários ---- */
.form-control, .form-select {
  border: 1.5px solid var(--gray-300);
  border-radius: var(--border-radius-sm);
  padding: 0.55rem 0.9rem;
  font-size: 0.9rem;
  transition: var(--transition);
  background: var(--white);
}

.form-control:focus, .form-select:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(168,124,36,0.18);
  outline: none;
}

.form-label {
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--gray-700);
  margin-bottom: 0.35rem;
}

.form-text { font-size: 0.78rem; color: var(--gray-500); }

.input-group .form-control:focus { z-index: 3; }

/* ---- Tabelas ---- */
.table {
  font-size: 0.88rem;
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th {
  background: var(--gray-100);
  color: var(--gray-700);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.8rem 1rem;
  border-bottom: 2px solid var(--gray-200);
  white-space: nowrap;
}

.table tbody td {
  padding: 0.8rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-900);
}

.table-hover tbody tr:hover { background: #FBF6E7; }

.table-responsive { border-radius: var(--border-radius); overflow: hidden; }

/* ---- Badges de Status ---- */
.badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35em 0.7em;
  border-radius: 20px;
  letter-spacing: 0.3px;
}

.status-badge {
  display: inline-block;
  padding: 0.3em 0.8em;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.status-orcamento, .bg-secondary { background: #546E7A !important; color: white; }
.status-em_andamento, .bg-warning { background: #8A4A22 !important; color: white !important; }
.status-finalizada, .bg-success { background: var(--success) !important; color: white; }
.status-cancelada, .bg-danger { background: var(--danger) !important; color: white; }
.status-aguardando { background: #3E5366 !important; color: white; }

/* ---- Badge de status de OS única (.st-os) ----
   Família canônica usada em painel_oficina, os_list, os_detail,
   vehicle_list, vehicle_detail. As classes .status-* acima seguem
   como aliases (usadas fora deste conjunto, ex.: telas admin). */
.st-os {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
}
.st-os.st-aguardando_orcamento { background: #FFF3E0; color: #8A4A22; }
.st-os.st-orcamento { background: #FFF8E1; color: #B5612C; }
.st-os.st-aguardando_aprovacao { background: #FFECB3; color: #8A4A22; }
.st-os.st-aprovado { background: #E8F5E9; color: #1B5E20; }
.st-os.st-em_andamento { background: #FFF8E1; color: #11181F; }
.st-os.st-finalizada { background: #E0F2F1; color: #00695C; }
.st-os.st-cancelada, .st-os.st-recusada { background: #FFEBEE; color: #B71C1C; }
/* Agendamentos */
.st-os.st-pendente { background: #FFF8E1; color: #8A4A22; }
.st-os.st-confirmado { background: #E8F5E9; color: #1B5E20; }
.st-os.st-cancelado { background: #FFEBEE; color: #B71C1C; }
.st-os.st-concluido { background: #FFF8E1; color: #2C3B49; }

/* Aliases (compat. .status-* apontando pros mesmos valores do .st-os) */
.status-aguardando_orcamento { background: #FFF3E0 !important; color: #8A4A22 !important; }
.status-orcamento-novo { background: #FFF8E1 !important; color: #B5612C !important; }
.status-aguardando_aprovacao { background: #FFECB3 !important; color: #8A4A22 !important; }
.status-aprovado { background: #E8F5E9 !important; color: #1B5E20 !important; }
.status-finalizada-novo { background: #E0F2F1 !important; color: #00695C !important; }
.status-cancelada-novo, .status-recusada { background: #FFEBEE !important; color: #B71C1C !important; }

/* ---- Alertas ---- */
.alert {
  border: none;
  border-radius: var(--border-radius-sm);
  padding: 0.8rem 1.1rem;
  font-size: 0.88rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.alert-success { background: #E8F5E9; color: var(--success); }
.alert-danger { background: #FFEBEE; color: var(--danger); }
.alert-warning { background: #FFF8E1; color: #8A4A22; }
.alert-info { background: #FFF8E1; color: var(--info); }

/* ---- Telas de Login ---- */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-light) 60%, #A87C24 100%);
  padding: 2rem 1rem;
}

.login-card {
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  overflow: hidden;
  background: var(--white);
}

.login-card-header {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  padding: 2rem;
  text-align: center;
  color: var(--white);
}

.login-card-header .brand-icon {
  font-size: 2.5rem;
  color: var(--secondary-light);
  margin-bottom: 0.5rem;
}

.login-card-header h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: 1px;
}

.login-card-header p {
  font-size: 0.85rem;
  opacity: 0.85;
  margin: 0.3rem 0 0;
}

.login-card-body { padding: 2rem; }

.login-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
  color: var(--gray-500);
  font-size: 0.8rem;
}

.login-divider::before, .login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-300);
}

/* ---- Painel da Oficina ---- */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.page-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-title i { color: var(--primary-light); }

/* ---- Títulos de página com a fonte da marca (Oswald) ----
   Aplicado só em títulos de página (não em texto corrido, labels ou botões). */
.page-title,
.po-title,
.ol-head h2,
.ag-title,
.vl-head h1,
.pc-veiculo-name {
  font-family: 'Oswald', sans-serif;
  letter-spacing: .02em;
}

/* ---- Seção de Veículo ---- */
.vehicle-card {
  border-left: 4px solid var(--primary-light);
  transition: var(--transition);
}

.vehicle-card:hover { border-left-color: var(--secondary); }

.vehicle-plate {
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  font-weight: 700;
  background: var(--dark);
  color: var(--white);
  padding: 0.3rem 0.8rem;
  border-radius: var(--border-radius-sm);
  letter-spacing: 2px;
  display: inline-block;
}

/* ---- QR Code ---- */
.qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
  background: var(--white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.qr-container img { max-width: 220px; border: 8px solid var(--white); box-shadow: var(--shadow); }

/* ---- Chave de Acesso ---- */
.access-key-display {
  font-family: 'Courier New', monospace;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 8px;
  color: var(--primary);
  background: var(--gray-100);
  padding: 1rem 2rem;
  border-radius: var(--border-radius);
  border: 2px dashed var(--primary-light);
  text-align: center;
  user-select: all;
}

/* ---- Empty States ---- */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--gray-500);
}

.empty-state i {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  color: var(--gray-300);
}

.empty-state h5 { color: var(--gray-700); font-weight: 600; }
.empty-state p { font-size: 0.9rem; }

/* ---- Breadcrumb ---- */
.breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 1rem;
  font-size: 0.82rem;
}

.breadcrumb-item + .breadcrumb-item::before { color: var(--gray-500); }
.breadcrumb-item.active { color: var(--gray-700); }

/* ---- Modais ---- */
.modal-content {
  border: none;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
}

.modal-header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: var(--white);
  border-bottom: none;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  padding: 1.2rem 1.5rem;
}

.modal-header .btn-close { filter: invert(1); }
.modal-body { padding: 1.5rem; }
.modal-footer { border-top: 1px solid var(--gray-200); padding: 1rem 1.5rem; }

/* ---- Página Pública (QR Code) ---- */
.public-page {
  background: linear-gradient(135deg, #F0F4F8 0%, #E8EEF5 100%);
  min-height: 100vh;
  padding: 2rem 1rem;
}

/* ---- Responsividade ---- */
@media (max-width: 768px) {
  .main-content { padding: 1rem; }
  .page-header { flex-direction: column; align-items: flex-start; }
  .stat-card .stat-value { font-size: 1.6rem; }
  .login-card { max-width: 100%; }
  .access-key-display { font-size: 1.5rem; letter-spacing: 4px; }
  .table-responsive { font-size: 0.8rem; }
  .btn-group .btn { padding: 0.3rem 0.5rem; }
}

@media (max-width: 576px) {
  .navbar-brand { font-size: 1.1rem; }
  .page-title { font-size: 1.2rem; }
  .card-body { padding: 1rem; }
}

/* ---- Utilitários ---- */
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.bg-primary-soft { background: #FFF8E1; color: var(--primary); }
.bg-success-soft { background: #E8F5E9; color: var(--success); }
.bg-warning-soft { background: #FFF8E1; color: var(--warning); }
.bg-danger-soft { background: #FFEBEE; color: var(--danger); }

.fw-600 { font-weight: 600; }
.fs-sm { font-size: 0.82rem; }
.fs-xs { font-size: 0.75rem; }

.border-start-primary { border-left: 4px solid var(--primary-light) !important; }
.border-start-success { border-left: 4px solid var(--success-light) !important; }
.border-start-warning { border-left: 4px solid var(--secondary) !important; }
.border-start-danger { border-left: 4px solid var(--danger) !important; }

/* ---- Animações ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in-up { animation: fadeInUp 0.35s ease; }

/* ---- Ícone girando (substitui fa-spin do FontAwesome) ---- */
@keyframes bi-spin-anim { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.bi-spin { display: inline-block; animation: bi-spin-anim 1s linear infinite; }

/* ---- Scrollbar personalizada ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-500); }


/* ============================================================
   MELHORIAS MOBILE-FIRST — Atualização 3.0 | Maio 2026
   ============================================================ */

/* ---- Bottom Navigation (Mobile) ---- */
@media (max-width: 991.98px) {
    /* Navbar compacta */
    .navbar {
        height: auto;
        min-height: 56px;
        padding: 0.5rem 1rem;
    }
    .navbar-brand {
        font-size: 1.1rem;
    }
    /* Menu mobile collapse */
    .navbar-collapse {
        background: var(--primary-dark);
        padding: 0.5rem;
        border-radius: 0 0 12px 12px;
        margin: 0 -1rem;
        padding: 0.5rem 1rem;
    }
    .navbar .nav-link {
        padding: 0.6rem 0.75rem !important;
        font-size: 0.9rem;
        border-radius: 8px;
    }
    /* Main content sem padding excessivo */
    .main-content {
        padding: 0.75rem !important;
    }
    /* Cards menores no mobile */
    .card {
        border-radius: 12px !important;
    }
    /* Tabelas responsivas */
    .table-responsive {
        border-radius: 10px;
        overflow: hidden;
    }
    /* Botões de ação em coluna */
    .action-bar .d-flex {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    .action-bar .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---- Cards de OS na lista (mobile) ---- */
@media (max-width: 576px) {
    .os-card-mobile {
        border-radius: 14px;
        border: none;
        box-shadow: 0 2px 12px rgba(0,0,0,.08);
        margin-bottom: 0.75rem;
        overflow: hidden;
    }
    .os-card-mobile .card-header {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }
    .os-card-mobile .card-body {
        padding: 0.75rem 1rem;
    }
    /* Esconder colunas desnecessárias em mobile */
    .hide-mobile { display: none !important; }
    /* Texto menor */
    body { font-size: 13px; }
    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.2rem; }
    h5 { font-size: 1rem; }
    /* Badges menores */
    .badge { font-size: 0.7rem; padding: 0.3em 0.6em; }
    /* Formulários full-width */
    .form-control, .form-select { font-size: 0.9rem; }
    /* Botões menores */
    .btn-sm { font-size: 0.78rem; padding: 0.3rem 0.6rem; }
}

/* ---- Barra de progresso da OS (mobile) ---- */
@media (max-width: 576px) {
    .progress-steps {
        gap: 0 !important;
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }
    .progress-step .step-label {
        font-size: 0.6rem;
    }
    .progress-step .step-circle {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }
}

/* ---- Painel da Oficina (mobile) ---- */
@media (max-width: 576px) {
    .stat-card {
        padding: 1rem !important;
    }
    .stat-card .stat-value {
        font-size: 1.6rem !important;
    }
    .stat-card .stat-icon {
        font-size: 1.4rem !important;
    }
}

/* ---- Formulário de Nova OS (mobile) ---- */
@media (max-width: 576px) {
    .nova-os-steps .step-content {
        padding: 1rem !important;
    }
    .nova-os-steps .item-row {
        flex-direction: column !important;
    }
}

/* ---- Check-in Card ---- */
.checkin-card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,.08);
    overflow: hidden;
}
.checkin-card .card-header {
    background: linear-gradient(135deg, #A87C24, #C9962F);
    color: #fff;
    padding: 1rem 1.25rem;
    font-weight: 600;
}
.fuel-gauge {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.fuel-btn {
    flex: 1;
    min-width: 60px;
    padding: 0.5rem 0.25rem;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all .2s;
}
.fuel-btn:hover, .fuel-btn.selected {
    border-color: #A87C24;
    background: #FFF8E1;
    color: #A87C24;
}
.fuel-btn.selected {
    background: #A87C24;
    color: #fff;
}

/* ---- Foto Upload Grid ---- */
.foto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
@media (max-width: 576px) {
    .foto-grid { grid-template-columns: repeat(2, 1fr); }
}
.foto-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 1;
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.foto-item:hover { border-color: #A87C24; background: #FFF8E1; }
.foto-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    position: absolute; top: 0; left: 0;
}
.foto-item .foto-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: #6c757d;
    text-align: center;
    z-index: 1;
}
.foto-item .foto-icon {
    font-size: 1.5rem;
    color: #adb5bd;
    z-index: 1;
}
.foto-item.has-foto .foto-label,
.foto-item.has-foto .foto-icon { display: none; }
.foto-item .btn-remove-foto {
    position: absolute;
    top: 4px; right: 4px;
    z-index: 2;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(220,53,69,.9);
    color: #fff;
    border: none;
    font-size: 0.65rem;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.foto-item.has-foto .btn-remove-foto { display: flex; }

/* ---- Chave de Acesso Display ---- */
.chave-acesso-badge {
    background: linear-gradient(135deg, #A87C24, #C9962F);
    color: #fff;
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Courier New', monospace;
    font-weight: 900;
    font-size: 1.4rem;
    letter-spacing: 0.3rem;
    box-shadow: 0 4px 12px rgba(168,124,36,.3);
}
.chave-acesso-badge .chave-label {
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0;
    font-family: 'Roboto', sans-serif;
    opacity: 0.8;
    display: block;
}

/* ---- Melhorias gerais de UX ---- */
.btn { border-radius: 8px !important; font-weight: 500; }
.btn-lg { border-radius: 10px !important; }
.form-control, .form-select {
    border-radius: 8px !important;
    border-color: #dee2e6;
    transition: all .2s;
}
.form-control:focus, .form-select:focus {
    border-color: #C9962F;
    box-shadow: 0 0 0 3px rgba(168,124,36,.18);
}
.card { border-radius: 14px !important; border: none !important; }
.card:not(.no-shadow) { box-shadow: 0 2px 12px rgba(0,0,0,.07) !important; }

/* ---- iOS: inputs com menos de 16px disparam auto-zoom ao focar ---- */
@media (max-width: 576px) {
    .form-control, .form-select, textarea,
    input[type="text"], input[type="search"], input[type="email"],
    input[type="password"], input[type="number"], input[type="tel"] {
        font-size: 16px !important;
    }
}

/* ---- Toast de sucesso ---- */
.toast-success {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
    background: #2e7d32;
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    font-weight: 500;
    animation: slideInRight .3s ease;
}
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ---- Acessibilidade: respeitar preferência de menos movimento ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   Paleta unificada ReviAuto + overrides Bootstrap (gold/dark)
   Movido de templates/base.html (<style id="reviauto-vars">) — Fase 3
   ============================================================ */
:root {
  /* Brand */
  --ra-primary: #A87C24;
  --ra-primary-dark: #11181F;
  --ra-primary-light: #B98A2C;
  --ra-primary-accent: #C9962F;
  --ra-gradient: linear-gradient(135deg, #11181F 0%, #A87C24 60%, #B98A2C 100%);
  --ra-gradient-soft: linear-gradient(135deg, #FFF8E1 0%, #F3E4C0 100%);

  /* Semânticos (mais saturados, legíveis) */
  --ra-success: #2E7D32;
  --ra-warning: #B5612C;
  --ra-danger: #C62828;
  --ra-info: #3E5366;

  /* Texto (alta legibilidade) */
  --ra-text: #1A1A1A;            /* primário (quase preto) */
  --ra-text-secondary: #37474F;  /* secundário (cinza escuro, lê bem) */
  --ra-text-muted: #607D8B;      /* terciário (cinza médio — não usar tons mais claros que isso pra texto importante) */
  --ra-text-disabled: #B0BEC5;   /* apenas pra estados desabilitados */

  /* Backgrounds */
  --ra-bg: #F5F7FA;
  --ra-card: #FFFFFF;
  --ra-divider: #ECEFF1;
  --ra-border: #CFD8DC;
}
/* Helpers utilitários */
.text-ra-muted { color: var(--ra-text-muted) !important; }
.bg-ra-primary { background: var(--ra-primary) !important; color: #fff; }
.text-ra-primary { color: var(--ra-primary) !important; }

/* ===== Bootstrap tematizado na marca ReviAuto (gold/dark) ===== */
:root {
  --bs-primary: #A87C24;
  --bs-primary-rgb: 168,124,36;
  --bs-link-color: #8f6a1f;
  --bs-link-color-rgb: 143,106,31;
  --bs-link-hover-color: #6f5218;
  --bs-link-hover-color-rgb: 111,82,24;
}
.btn-primary {
  --bs-btn-bg: #A87C24; --bs-btn-border-color: #A87C24;
  --bs-btn-hover-bg: #8f6a1f; --bs-btn-hover-border-color: #846120;
  --bs-btn-active-bg: #846120; --bs-btn-active-border-color: #7a5a1e;
  --bs-btn-disabled-bg: #A87C24; --bs-btn-disabled-border-color: #A87C24;
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: 168,124,36;
}
.btn-outline-primary {
  --bs-btn-color: #A87C24; --bs-btn-border-color: #A87C24;
  --bs-btn-hover-bg: #A87C24; --bs-btn-hover-border-color: #A87C24; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #A87C24; --bs-btn-active-border-color: #A87C24; --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 168,124,36;
}
.text-primary { color: #A87C24 !important; }
.bg-primary { background-color: #A87C24 !important; }
.border-primary { border-color: #A87C24 !important; }
.link-primary { color: #8f6a1f !important; }
.link-primary:hover, .link-primary:focus { color: #6f5218 !important; }
.form-control:focus, .form-select:focus {
  border-color: #C9962F;
  box-shadow: 0 0 0 .2rem rgba(168,124,36,.25);
}
.form-check-input:checked { background-color: #A87C24; border-color: #A87C24; }
.form-check-input:focus { border-color: #C9962F; box-shadow: 0 0 0 .2rem rgba(168,124,36,.25); }
.btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(168,124,36,.25); }
.page-link { color: #8f6a1f; }
.page-item.active .page-link { background-color: #A87C24; border-color: #A87C24; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: #A87C24; }
.progress-bar { background-color: #A87C24; }
.alert-info {
  --bs-alert-bg: #FFF8E1; --bs-alert-border-color: #E8D9A8; --bs-alert-color: #5D4A1F;
  --bs-alert-link-color: #8f6a1f;
}
.text-info { color: #3E5366 !important; }
.bg-info { background-color: #3E5366 !important; }

/* ============================================================
   Dark Mode
   Movido de templates/base.html (<style> logo após {% block extra_css %}) — Fase 3
   ============================================================ */
body.dark-mode { background: #121212 !important; color: #e0e0e0 !important; }
body.dark-mode .container-pc, body.dark-mode .container-cfg, body.dark-mode .container { color: #e0e0e0 !important; }
body.dark-mode .pc-card, body.dark-mode .cfg-card, body.dark-mode .pc-atividade, body.dark-mode .pc-outros, body.dark-mode .card, body.dark-mode details.cfg-senha { background: #1e1e1e !important; color: #e0e0e0 !important; box-shadow: 0 1px 3px rgba(0,0,0,.5) !important; }
body.dark-mode .pc-gasto-valor, body.dark-mode .cfg-avatar-info .name, body.dark-mode .cfg-title-block .title, body.dark-mode .pc-card-title, body.dark-mode .cfg-card-title { color: #fff !important; }
body.dark-mode .pc-greeting-text .label, body.dark-mode .cfg-avatar-info .email, body.dark-mode .pc-card .text-muted, body.dark-mode .small.text-muted, body.dark-mode .form-label-sm, body.dark-mode .cfg-toggle-text .descricao { color: #9e9e9e !important; }
body.dark-mode .pc-info { background: #2a2a2a !important; color: #e0e0e0 !important; }
body.dark-mode .pc-info .value, body.dark-mode .cfg-toggle-text .titulo { color: #fff !important; }
body.dark-mode .pc-icon-btn { background: #1e1e1e !important; border-color: #333 !important; color: #b0bec5 !important; }
body.dark-mode .pc-icon-btn:hover { background: #2a2a2a !important; color: #d6bd7a !important; }
body.dark-mode .pc-bar { background: #333 !important; }
body.dark-mode .pc-quick-card { background: #1e1e1e !important; color: #e0e0e0 !important; }
body.dark-mode .pc-quick-card:hover { color: #d6bd7a !important; }
body.dark-mode .pc-outro-veic { color: #e0e0e0 !important; border-color: #333 !important; }
body.dark-mode .pc-outro-veic:hover { background: #2a2a2a !important; }
body.dark-mode .form-control, body.dark-mode .form-select, body.dark-mode .form-input { background: #2a2a2a !important; color: #e0e0e0 !important; border-color: #444 !important; }
body.dark-mode .form-control::placeholder { color: #757575 !important; }
body.dark-mode .form-control:focus { background: #333 !important; border-color: #d6bd7a !important; color: #fff !important; }
body.dark-mode .cfg-back, body.dark-mode .btn-outline-secondary, body.dark-mode .btn-outline-primary { background: #2a2a2a !important; border-color: #444 !important; color: #e0e0e0 !important; }
body.dark-mode .nav-link, body.dark-mode .navbar-brand, body.dark-mode .dropdown-item { color: #e0e0e0 !important; }
body.dark-mode .dropdown-menu { background: #1e1e1e !important; border-color: #333 !important; }
body.dark-mode .dropdown-item:hover { background: #2a2a2a !important; }
body.dark-mode hr { border-color: #333 !important; }
body.dark-mode .alert-info { background: #1a3a52 !important; color: #f2e6cc !important; border-color: #C9962F !important; }
body.dark-mode .alert-warning { background: #4a3a1a !important; color: #ffe082 !important; border-color: #C9743A !important; }
body.dark-mode .alert-secondary { background: #333 !important; color: #bdbdbd !important; }
body.dark-mode .alert-success { background: #1b3a1f !important; color: #a5d6a7 !important; border-color: #4caf50 !important; }
body.dark-mode .alert-danger { background: #4a1a1a !important; color: #ef9a9a !important; border-color: #f44336 !important; }
body.dark-mode .bg-light, body.dark-mode .bg-white { background: #1e1e1e !important; color: #e0e0e0 !important; }
body.dark-mode .table-light, body.dark-mode .table-light th { background: #2a2a2a !important; color: #e0e0e0 !important; }
body.dark-mode .table { color: #e0e0e0 !important; }
body.dark-mode .modal-content { background: #1e1e1e !important; color: #e0e0e0 !important; }
body.dark-mode .pc-prox-card, body.dark-mode .pub-rating { background: #3a2f1a !important; }
body.dark-mode .rev-pontos { background: #1a2c3a !important; }
body.dark-mode .rev-tier { background: #2a2a2a !important; }
body.dark-mode .pc-ativ-icon, body.dark-mode .cfg-toggle-label i { color: #b0bec5 !important; }
body.dark-mode .list-group-item { background: #1e1e1e !important; color: #e0e0e0 !important; border-color: #333 !important; }
body.dark-mode .modal-header.bg-light, body.dark-mode .card-header.bg-white, body.dark-mode .card-header.bg-light { background: #2a2a2a !important; color: #e0e0e0 !important; }
body.dark-mode .breadcrumb { background: #2a2a2a !important; }
body.dark-mode .text-dark { color: #e0e0e0 !important; }
body.dark-mode .text-muted { color: #9e9e9e !important; }
body.dark-mode label, body.dark-mode .form-label { color: #e0e0e0 !important; }
body.dark-mode footer, body.dark-mode .footer { background: #1e1e1e !important; color: #9e9e9e !important; }

/* Dark Mode — telas novas (os_list, agendamentos, painel_oficina, os_detail) */
body.dark-mode .ol-item, body.dark-mode .ol-busca,
body.dark-mode .ag-item, body.dark-mode .po-card, body.dark-mode .po-kpi,
body.dark-mode .po-quick a,
body.dark-mode .osd-cta, body.dark-mode .osd-acc, body.dark-mode .osd-more,
body.dark-mode .osd-panel, body.dark-mode .osd-panel-sm, body.dark-mode .osd-panel-accent {
  background: #1e1e1e !important;
  color: #e0e0e0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.5) !important;
}
body.dark-mode .osd-panel { border-color: #333 !important; }
/* .osd-panel-accent mantém a cor original do border-left (é o acento intencional do cartão) */
body.dark-mode .ol-busca input { background: transparent !important; color: #e0e0e0 !important; }
body.dark-mode .ol-busca input::placeholder { color: #757575 !important; }
body.dark-mode .ol-chip, body.dark-mode .ag-chip { background: #1e1e1e !important; color: #e0e0e0 !important; border-color: #444 !important; }
body.dark-mode .ol-chip.active, body.dark-mode .ag-chip.active { background: #A87C24 !important; color: #fff !important; border-color: #A87C24 !important; }
body.dark-mode .ol-empty, body.dark-mode .ag-empty, body.dark-mode .po-empty { background: #1e1e1e !important; color: #9e9e9e !important; }
body.dark-mode .po-os-item:hover { background: #2a2a2a !important; }
body.dark-mode .ol-item:hover { background: #2a2a2a !important; }

/* Textos escuros chumbados que precisam virar claros no dark */
body.dark-mode .ol-veic, body.dark-mode .po-os-veic, body.dark-mode .ag-quem,
body.dark-mode .osd-cta, body.dark-mode .osd-acc-title, body.dark-mode .osd-item-title,
body.dark-mode .osd-info-item .val, body.dark-mode .osd-total,
body.dark-mode .po-kpi .val, body.dark-mode .po-title, body.dark-mode .ol-head h2,
body.dark-mode .ag-title, body.dark-mode .ag-data-dia, body.dark-mode .po-os-num,
body.dark-mode .ol-num, body.dark-mode .po-ag-data .dia,
body.dark-mode .osd-panel-title, body.dark-mode .osd-panel-text {
  color: #e0e0e0 !important;
}
body.dark-mode .ol-veic small, body.dark-mode .po-os-veic small,
body.dark-mode .ol-meta, body.dark-mode .po-os-cli, body.dark-mode .po-os-data,
body.dark-mode .ag-meta, body.dark-mode .ag-data-mes, body.dark-mode .osd-item-meta,
body.dark-mode .osd-cta-sub, body.dark-mode .osd-info-item .lbl,
body.dark-mode .po-kpi .lbl, body.dark-mode .po-kpi .sub, body.dark-mode .po-ag-data .mes,
body.dark-mode .osd-panel-muted {
  color: #9e9e9e !important;
}
body.dark-mode .osd-acc-head:hover { background: #2a2a2a !important; }
body.dark-mode .osd-acc-body { border-top-color: #333 !important; }
body.dark-mode .osd-item { border-bottom-color: #333 !important; }
body.dark-mode .osd-total { border-top-color: #444 !important; }
body.dark-mode .ag-data-box { background: #2a2a2a !important; }
body.dark-mode .po-os-item, body.dark-mode .ag-item, body.dark-mode .ol-item { border-color: #333 !important; }
/* .st-os (badges de status) mantém cores claras — são pills pequenos, ok em dark */