:root {
    --primary-bg: #f4f6f9; --card-shadow: 0 4px 12px rgba(0,0,0,0.05);
    --cor-visita: #0d6efd; --cor-pedido: #fd7e14; --cor-instalacao: #198754; --cor-entrega: #6c757d;
}
body { background-color: var(--primary-bg); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333; }

/* Login */
#telaLogin { position: fixed; inset: 0; z-index: 3000; background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%); display: flex; align-items: center; justify-content: center; padding: 16px; }
#telaLogin .card { width: 100%; max-width: 380px; }

/* Cabeçalho */
.app-header { background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%); color: white; padding: 1rem 0; margin-bottom: 1.5rem; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.app-header img#headerLogo { height: 44px; border-radius: 6px; background: #fff; padding: 3px; }
.header-btn { background: rgba(255,255,255,0.15); border: none; color: white; height: 40px; border-radius: 20px; padding: 0 14px; }
.header-btn:hover { background: rgba(255,255,255,0.3); color: white; }

.card { border: none; border-radius: 12px; box-shadow: var(--card-shadow); margin-bottom: 1.5rem; }
.card-header { font-weight: 600; border-top-left-radius: 12px !important; border-top-right-radius: 12px !important; }
.alert-toast { position: fixed; top: 20px; right: 20px; z-index: 9999; min-width: 300px; max-width: calc(100vw - 40px); }
.match-list { max-height: 420px; overflow-y: auto; }
.fs-7 { font-size: 0.8rem; }

/* Etapas: chip colorido com a cor do Settings */
.etapa-chip { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 0.78rem; font-weight: 600; color: #fff; }
.etapa-visita { background: var(--cor-visita); }
.etapa-pedido { background: var(--cor-pedido); }
.etapa-instalacao { background: var(--cor-instalacao); }
.etapa-entrega { background: var(--cor-entrega); }

/* Calendário */
#calendar { background: #fff; padding: 12px; border-radius: 12px; }
.fc-event { cursor: pointer; }
.fc-event.ev-concluida { opacity: 0.55; }
.fc-event.ev-concluida .fc-event-title::before { content: "\2713  "; }

/* Janela do pedido */
.linha-etapa { border-left: 5px solid #ccc; border-radius: 8px; background: #f8f9fa; padding: 10px 12px; margin-bottom: 8px; }
.linha-etapa.foco { box-shadow: 0 0 0 2px #0d6efd inset; }
.linha-etapa.concluida { opacity: 0.75; }
#painelAcao { border: 2px solid #0d6efd; border-radius: 12px; padding: 16px; margin-bottom: 16px; background: #f5f9ff; }
.resumo-valor { font-size: 1.25rem; font-weight: 700; }
.tabela-itens input, .tabela-itens select { min-width: 70px; }
.tabela-itens td { padding: 3px; vertical-align: middle; }

/* Fotos */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.galeria figure { margin: 0; background: #f8f9fa; border-radius: 8px; overflow: hidden; position: relative; }
.galeria img { width: 100%; height: 130px; object-fit: cover; display: block; cursor: zoom-in; }
.galeria figcaption { font-size: 0.75rem; padding: 4px 6px; }
.galeria .btn-del-foto { position: absolute; top: 4px; right: 4px; padding: 0 6px; }

.cursor-pointer { cursor: pointer; }
.lista-pedido:hover { background: #f1f5ff; }

@media (max-width: 576px) {
    .fc .fc-header-toolbar { flex-wrap: wrap; gap: 6px; }
    .fc .fc-toolbar-title { font-size: 1.05rem; }
    #calendar { padding: 6px; }
    .app-header h2 { font-size: 1.15rem; }
    .header-btn .rotulo { display: none; }
}