: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); }
.etapa-orcamento { background: var(--cor-orcamento, #6f42c1); }
.etapa-trabalho { background: var(--cor-trabalho, #198754); }
.etapa-retirada { background: var(--cor-retirada, #0d6efd); }
.etapa-devolucao { background: var(--cor-devolucao, #6f42c1); }
.etapa-inspecao { background: var(--cor-inspecao, #0d6efd); }
.etapa-manutencao { background: var(--cor-manutencao, #198754); }
.etapa-reparo { background: var(--cor-reparo, #dc3545); }
.etapa-atendimento { background: var(--cor-atendimento, #d63a7a); }

/* O que só existe num tipo de empresa (cortinas ou serviços) */
body:not(.modo-servicos) .so-servicos, body.modo-servicos .so-cortinas { display: none !important; }
body:not(.modo-piscina) .so-piscina, body.modo-piscina .sem-piscina { display: none !important; }
/* Rotas: o que é só da piscina (químicos, volume) e só do landscape (irrigação); GPS só quando ligado */
body.modo-landscape .so-pool, body:not(.modo-landscape) .so-landscape { display: none !important; }
body:not(.gps-ativo) .so-gps { display: none !important; }
body:not(.modo-locadora) .so-locadora, body.modo-locadora .sem-locadora { display: none !important; }
body:not(.modo-property) .so-property, body.modo-property .sem-property { display: none !important; }
body:not(.modo-salao) .so-salao, body.modo-salao .sem-salao { display: none !important; }
/* Atendente (recepção do salão): sem cadastros, configurações e relatórios */
body.papel-atendente .sem-atendente { display: none !important; }
body:not(.com-ajuda) .so-ajuda { display: none !important; }
/* QuickBooks (versão 12.8): só empresas dos EUA. */
body:not(.regiao-us) .so-us { display: none !important; }
.qb-logo { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
           background: #2ca01c; color: #fff; font-weight: 800; font-size: .95rem; letter-spacing: -.5px; font-family: Arial, sans-serif; }
.qb-logo-p { width: 1.3rem; height: 1.3rem; font-size: .62rem; }
.qb-botao { background: #2ca01c; border-color: #2ca01c; color: #fff; font-weight: 600; }
.qb-botao:hover, .qb-botao:focus { background: #108000; border-color: #108000; color: #fff; }

/* 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; }
}

/* Empresa que desligou o cadastro de cidades */
body.sem-cidades .com-cidades { display: none !important; }
body.sem-cidades .endereco-cliente { flex: 0 0 auto; width: 100%; }

/* Pré-agendamento (serviços): cópia marcada até alguém confirmar */
.selo-pre { background: #fff3cd; color: #7a5a00; border: 1px dashed #c99a00; font-weight: 600; }
.linha-etapa.pre-agendada, .cartao.pre-agendada {
    border-left-style: dashed !important;
    background-image: repeating-linear-gradient(135deg, rgba(201,154,0,.07) 0 8px, transparent 8px 16px);
}
.fc-event.ev-pre {
    border: 2px dashed rgba(255,255,255,.9) !important; outline: 1px dashed #7a5a00;
    background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.28) 0 6px, transparent 6px 12px);
}
.fc-list-event.ev-pre td { background-image: repeating-linear-gradient(135deg, rgba(201,154,0,.10) 0 6px, transparent 6px 12px); }
.mini-cal { border: 1px solid #dee2e6; border-radius: .6rem; padding: .5rem; background: #fff; }
.mini-cal .mc-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mini-cal .mc-sem { text-align: center; font-size: .75rem; color: #6c757d; font-weight: 600; text-transform: uppercase; padding: 2px 0; }
.mini-cal .mc-dia { border: 0; background: #f1f3f5; border-radius: .45rem; aspect-ratio: 1 / 1; min-height: 34px; font-weight: 600; color: #212529; padding: 0; }
.mini-cal .mc-dia.fora { opacity: .45; }
.mini-cal .mc-dia.hoje { box-shadow: inset 0 0 0 2px #0d6efd; }
.mini-cal .mc-dia.original { background: #212529; color: #fff; opacity: .55; }
.mini-cal .mc-dia.sel { background: #0d6efd; color: #fff; }
.mini-cal .mc-dia:disabled:not(.original) { background: transparent; color: #adb5bd; }

/* Empresa de piscina: rota do dia, mapa, visita */
.etapa-rota { background: #0aa2c0; }
.fc-event.ev-rota { font-weight: 600; cursor: pointer; }
.mapa-rota { height: 320px; border-radius: .6rem; border: 1px solid #dee2e6; background: #e9f3f6; z-index: 0; }
.bolinha { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.lista-rota .parada { cursor: default; }
.lista-rota .parada[draggable="true"] .alca { cursor: grab; }
.lista-rota .parada.arrastando { opacity: .5; background: #eef6ff; }
.min-w-0 { min-width: 0; }
.pino-parada { width: 28px; height: 28px; border-radius: 50%; color: #fff; font-weight: 700; font-size: .85rem; display: flex; align-items: center;
               justify-content: center; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.pino-parada.feita { opacity: .55; }
.pino-parada.prio-2 { box-shadow: 0 0 0 3px #dc3545, 0 1px 4px rgba(0,0,0,.35); }
.pino-parada.prio-1 { box-shadow: 0 0 0 3px #ffc107, 0 1px 4px rgba(0,0,0,.35); }
.pino-base { width: 30px; height: 30px; border-radius: 8px; background: #212529; color: #fff; display: flex; align-items: center; justify-content: center;
             border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.leituras-mini, .leit-linha { display: flex; flex-wrap: wrap; gap: 4px; }
.leit { font-size: .72rem; background: #e8f5ee; color: #0f6b3d; border-radius: 999px; padding: 1px 7px; font-weight: 600; }
.leit.fora { background: #ffe1e1; color: #9b1c1c; }
.galeria-visita { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.galeria-visita figure { margin: 0; position: relative; }
.galeria-visita img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: zoom-in; }
.galeria-visita figure .btn { position: absolute; top: 4px; right: 4px; padding: 0 6px; }
.btn-check:checked + .item-check { background: #198754; border-color: #198754; color: #fff; }
.btn-check:not(:checked) + .item-check { color: #6c757d; border-color: #ced4da; background: #fff; }
.btn-check:not(:checked) + .item-check .fa-check { opacity: .2; }

/* Sininho de avisos */
.sino-contador { position: absolute; top: 2px; right: 0; font-size: .65rem; }
.sino-painel { width: min(380px, 92vw); }
.sino-lista { max-height: 60vh; overflow-y: auto; }
.sino-lista .aviso:hover { background: #f1f5ff; }
.sino-lista .aviso.lido { opacity: .6; }
.sino-lista .aviso-perigo:not(.lido) { border-left: 4px solid #dc3545; }
.sino-lista .aviso-alerta:not(.lido) { border-left: 4px solid #ffc107; }
.sino-lista .aviso-info:not(.lido) { border-left: 4px solid #0dcaf0; }

/* Ao vivo: técnico no mapa com a etiqueta de atraso */
#aovivo_mapa { height: 420px; }
.pino-tecnico { width: 40px; height: 40px; border-radius: 50%; color: #fff; font-weight: 700; font-size: .85rem; display: flex; align-items: center;
                justify-content: center; border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.45); position: relative; }
.pino-tecnico.velho { filter: grayscale(.8); opacity: .7; }
.pino-tecnico .etiqueta { position: absolute; top: -14px; left: 26px; background: #495057; color: #fff; font-size: .68rem; white-space: nowrap;
                          border-radius: 999px; padding: 0 6px; }
.pino-tecnico .etiqueta.atrasado { background: #dc3545; }
.pino-tecnico .etiqueta.adiantado { background: #198754; }
.cartao-aovivo details summary { cursor: pointer; color: #0d6efd; }

/* Ajuda */
.ajuda-layout { display: grid; grid-template-columns: 260px 1fr; gap: 16px; }
.ajuda-indice { max-height: 70vh; overflow-y: auto; }
.ajuda-indice .list-group-item { font-size: .9rem; padding: .4rem .75rem; }
.ajuda-indice .grupo { font-size: .72rem; text-transform: uppercase; color: #6c757d; font-weight: 700; padding: .6rem .75rem .2rem; }
.ajuda-texto h4 { font-size: 1.15rem; font-weight: 700; }
.ajuda-texto h5 { font-size: 1rem; font-weight: 700; margin-top: 1rem; }
.ajuda-texto ol li, .ajuda-texto ul li { margin-bottom: .3rem; }
.ajuda-texto .atencao { background: #fff4d6; border-left: 4px solid #f0ad00; padding: .5rem .75rem; border-radius: .4rem; font-size: .9rem; margin: .75rem 0; }
.ajuda-texto .dica { background: #eef6ff; border-left: 4px solid #0d6efd; padding: .5rem .75rem; border-radius: .4rem; font-size: .9rem; margin: .75rem 0; }
.ajuda-texto mark { padding: 0 2px; }
@media (max-width: 768px) { .ajuda-layout { grid-template-columns: 1fr; } .ajuda-indice { max-height: 30vh; } }

/* ---------------- Locadora ---------------- */
.quadro-locacao { border: 2px solid var(--cor-retirada, #0d6efd); border-radius: .5rem; padding: .75rem; background: #f8fbff; }
.vistoria-resumo { border-left: 3px solid #adb5bd; padding: .25rem .5rem; margin-bottom: .5rem; font-size: .875rem; }
.vistoria-resumo img { height: 48px; width: 64px; object-fit: cover; border-radius: 4px; }
.lista-carros .list-group-item { padding: .4rem .75rem; }
.painel-vistoria { max-width: 820px; }
.gantt { overflow-x: auto; font-size: .78rem; }
.gantt-linha { display: flex; min-width: 640px; border-bottom: 1px solid #e9ecef; }
.gantt-nome { flex: 0 0 150px; padding: .25rem .4rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.2; }
.gantt-faixa { position: relative; flex: 1; min-height: 40px;
    background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / var(--dias, 14) - 1px), #eef0f2 calc(100% / var(--dias, 14) - 1px), #eef0f2 calc(100% / var(--dias, 14))); }
.gantt-dias { display: grid; background: none; min-height: 0; }
.gantt-dia { text-align: center; line-height: 1.1; padding: 2px 0; color: #495057; }
.gantt-dia.fds { background: #f8f9fa; }
.gantt-dia.hoje { background: #fff3cd; font-weight: bold; }
.gantt-barra { position: absolute; top: 6px; height: 28px; border-radius: 5px; color: #fff; padding: 0 5px; line-height: 28px; overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis; cursor: pointer; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.gantt-agora { position: absolute; top: 0; bottom: 0; width: 2px; background: #dc3545; z-index: 2; }
.barra-reservado { background: #0d6efd; } .barra-em_andamento { background: #198754; } .barra-atrasado { background: #dc3545; }
.barra-solicitada { background: #ffc107; color: #212529; } .barra-a_receber { background: #fd7e14; } .barra-concluido { background: #6c757d; }
.barra-turo { background: #212529; } .barra-bloqueio { background: repeating-linear-gradient(45deg, #adb5bd, #adb5bd 6px, #ced4da 6px, #ced4da 12px); color: #212529; }
.gantt-leg { display: inline-block; width: 14px; height: 10px; border-radius: 3px; vertical-align: middle; }

/* Marca Crobot (ícone do tipo da empresa) no login e no cabeçalho */
.app-header img.marca-topo { height: 1.35em; width: 1.35em; border-radius: 24%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }
#telaLogin img.marca-login { width: 40px; height: 40px; }

/* ---------- Property (Crobot Home) ---------- */
.cor-marca { color: #7A4FD6; }
.cartao-casa { transition: box-shadow .15s, transform .15s; }
.cartao-casa:hover, .card-resumo-casa:hover { box-shadow: 0 .25rem .75rem rgba(0,0,0,.12); transform: translateY(-1px); }
.card-resumo-casa { color: inherit; }
.abas-casa .nav-link { padding: .4rem .7rem; font-size: .9rem; }
.etapa-ponto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.etapa-ponto.etapa-inspecao { background: var(--cor-inspecao, #0d6efd); }
.etapa-ponto.etapa-manutencao { background: var(--cor-manutencao, #198754); }
.etapa-ponto.etapa-reparo { background: var(--cor-reparo, #dc3545); }
.etapa-ponto.etapa-atendimento { background: var(--cor-atendimento, #d63a7a); }
.trilha-orcamento span { color: #adb5bd; }
.trilha-orcamento span.feito { color: #198754; font-weight: 600; }
.tarefa.feita .titulo-tarefa { text-decoration: line-through; color: #6c757d; }
.tarefa.foco { background: #fff8e1; }
.btn-pulsar { animation: pulsar 1.4s infinite; }
@keyframes pulsar { 0%, 100% { box-shadow: 0 0 0 0 rgba(25,135,84,.5); } 50% { box-shadow: 0 0 0 6px rgba(25,135,84,0); } }
/* escolher fotos */
.galeria figure .marca-foto, .galeria-visita figure .marca-foto { position: absolute; top: 4px; left: 4px; background: rgba(255,255,255,.9); border-radius: 6px; padding: 2px 5px; margin: 0; cursor: pointer; }
.galeria figure .marca-foto .form-check-input, .galeria-visita figure .marca-foto .form-check-input { margin: 0; width: 1.25em; height: 1.25em; cursor: pointer; }
.galeria figure.escolhida, .galeria-visita figure.escolhida { outline: 3px solid #7A4FD6; outline-offset: -3px; }
/* planta */
.planta-lista { width: 190px; flex-shrink: 0; }
.planta-item-fora { display: flex; align-items: center; gap: 4px; background: #fff; border: 1px dashed #adb5bd; border-radius: 6px; padding: 3px 6px; margin-bottom: 4px; font-size: .85rem; cursor: grab; }
.planta-grade { position: relative; width: 100%; min-height: 240px; border: 1px solid #ced4da; border-radius: 6px; overflow: hidden; touch-action: none;
    background-color: #fff; background-image: linear-gradient(to right, #eef0f3 1px, transparent 1px), linear-gradient(to bottom, #eef0f3 1px, transparent 1px); }
.planta-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: top left; opacity: .35; pointer-events: none; }
.planta-ambiente { position: absolute; border: 2px solid rgba(0,0,0,.35); border-radius: 3px; padding: 3px 5px; overflow: hidden; font-size: .75rem; line-height: 1.2; cursor: pointer; user-select: none; touch-action: none; }
.planta-casa .planta-lista ~ div .planta-ambiente { cursor: move; }
.planta-ambiente.selecionado { border-color: #7A4FD6; box-shadow: 0 0 0 2px #7A4FD6; z-index: 2; }
.planta-ambiente.com-alerta { border-color: #dc3545; }
.planta-nome { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planta-ocupante { color: #495057; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planta-icones { color: #495057; margin-top: 2px; }
.planta-icones i { margin-right: 3px; }
.planta-alerta { position: absolute; top: 2px; right: 4px; color: #dc3545; }
.planta-canto { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,.45) 50%); }
.planta-barra { position: sticky; top: 0; background: #fff; border: 1px solid #7A4FD6; border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; z-index: 5; }
.planta-cor { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #adb5bd; padding: 0; }
.planta-cor.ativa { box-shadow: 0 0 0 2px #7A4FD6; }
@media (max-width: 767px) { .planta-corpo { flex-direction: column; } .planta-lista { width: 100%; } }
/* inspeção */
.inspecao-grupo { border: 1px solid #dee2e6; border-radius: 8px; margin-bottom: 8px; background: #fff; }
.inspecao-grupo-topo { display: flex; align-items: center; width: 100%; background: #f8f9fa; border: 0; border-radius: 8px; padding: 8px 10px; }
.inspecao-itens { padding: 4px 8px 8px; }
.inspecao-item { border-bottom: 1px solid #f1f3f5; padding: 8px 2px; }
.inspecao-item.sit-problema { background: #fff5f5; }
.inspecao-item.sit-ok .inspecao-texto { color: #198754; }
.inspecao-item.sit-na .inspecao-texto { color: #6c757d; text-decoration: line-through; }
.inspecao-foto { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; cursor: zoom-in; }
.inspecao-novo { padding-top: 8px; }
.inspecao-cel .btn-group-sm > .btn { padding: .35rem .6rem; font-size: .85rem; }

/* Ajuda com IA */
.ajuda-ia-resposta { background: #eef6ff; border-left: 4px solid #0d6efd; border-radius: 6px; padding: .6rem .8rem; margin-top: .6rem; }

/* Versão 12: primeiros passos (tutorial) e o assistente Cro */
.pp-cartao { position: fixed; left: 16px; bottom: 16px; width: 340px; max-width: calc(100vw - 32px); z-index: 1045; background: #fff;
             border-radius: 14px; border: 1px solid rgba(0,0,0,.08); overflow: hidden; }
.pp-topo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; background: #f8f9fa; }
.pp-corpo { padding: 10px 12px 12px; max-height: 60vh; overflow: auto; }
.pp-cartao.minimizado .pp-corpo { display: none; }
.pp-cartao.minimizado { width: auto; opacity: .92; }
.pp-cartao.minimizado .pp-topo { padding: 6px 10px; }
.pp-cartao.minimizado .progress { display: none; }
.pp-cartao.minimizado .pp-cro { width: 26px; height: 26px; }
/* Versão 14.1: com o cartão na tela, o fim da página sobe para não ficar escondido atrás dele */
body.pp-visivel { padding-bottom: 64px; }
.pp-cro { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.pp-passo { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 8px; font-size: .9rem; }
.pp-passo:hover { background: #f1f5ff; }
.pp-passo.proximo { background: #eef4ff; font-weight: 600; }
.pp-passo.ok { color: #6c757d; text-decoration: line-through; }
.pp-check { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none;
            background: #e9ecef; color: #495057; font-size: .8rem; text-decoration: none; }
.pp-passo.ok .pp-check { background: #198754; color: #fff; }
.pp-alvo { outline: 3px solid #ffc107 !important; outline-offset: 3px; border-radius: 6px; animation: ppPulso 1.4s ease-in-out infinite; }
@keyframes ppPulso { 50% { outline-color: rgba(255, 193, 7, .35); } }
.pp-balao { position: fixed; z-index: 2000; background: #212529; color: #fff; border-radius: 12px; padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.pp-balao::before { content: ''; position: absolute; top: -8px; left: calc(var(--seta, 50%) - 8px); border: 8px solid transparent; border-top: 0; border-bottom-color: #212529; }
.pp-balao.acima::before { top: auto; bottom: -8px; border-bottom: 0; border-top: 8px solid #212529; }
.cro-botao { position: fixed; right: 18px; bottom: 18px; z-index: 1044; border: 0; background: transparent; padding: 0; display: flex; flex-direction: column; align-items: center; }
.cro-botao img { width: 58px; height: 58px; border-radius: 16px; box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .15s; }
.cro-botao:hover img { transform: scale(1.07); }
.cro-nome { font-size: .72rem; font-weight: 700; color: #495057; margin-top: 2px; }
.cro-balao { position: fixed; right: 18px; bottom: 100px; width: 260px; max-width: calc(100vw - 36px); z-index: 1046; background: #fff; border-radius: 14px;
             padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.2); border: 1px solid rgba(0,0,0,.08); }
.cro-balao::after { content: ''; position: absolute; right: 26px; bottom: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #fff; }
@media print { .pp-cartao, .cro-botao, .cro-balao, .pp-balao { display: none !important; } }
/* Versão 12.1: observação interna (só a empresa vê) */
textarea.obs-interna, .obs-interna { background: #fffbea; border-color: #f0d98c; }
div.obs-interna { border-radius: 6px; padding: 4px 8px; }
.galeria-visita figure.pendente img { opacity: .75; }
.galeria-visita figure.pendente .selo-fila { position: absolute; left: 4px; bottom: 4px; background: rgba(0,0,0,.65); color: #fff; border-radius: 6px; font-size: .7rem; padding: 1px 5px; }

/* Versão 12.1: assistente do e-mail de saída */
.assist-email { border: 1px solid #cfe2ff; background: #f6f9ff; border-radius: 12px; padding: 16px; max-width: 900px; }
.assist-etapas { display: flex; gap: 8px; flex-wrap: wrap; }
.assist-etapa { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: #6c757d; }
.assist-etapa span { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #ced4da; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; background: #fff; }
.assist-etapa.atual { color: #0d6efd; font-weight: 600; }
.assist-etapa.atual span { border-color: #0d6efd; background: #0d6efd; color: #fff; }
.assist-etapa.feita span { border-color: #198754; background: #198754; color: #fff; }
.assist-etapa + .assist-etapa::before { content: ''; width: 24px; height: 2px; background: #ced4da; margin-right: 2px; }
.assist-provedores { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.assist-provedores .btn { padding: 14px 8px; font-weight: 600; background: #fff; }
.assist-provedores .btn:hover { background: #0d6efd; }
.assist-ok { display: flex; gap: 12px; align-items: center; background: #d1e7dd; color: #0f5132; border-radius: 10px; padding: 12px 14px; }
.assist-ok > i { font-size: 2rem; animation: assist-pulo .6s ease-out; }
@keyframes assist-pulo { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
/* Animação da senha de app: cada parte acende na sua vez, em ciclo de 2 s por parte. */
.assist-anim { --t: 2s; }
.assist-anim-barra { background: #e9ecef; border-radius: 10px 10px 0 0; padding: 6px 10px; display: flex; gap: 5px; align-items: center; font-size: .72rem; color: #6c757d; border: 1px solid #dee2e6; border-bottom: 0; }
.assist-anim-barra i { width: 9px; height: 9px; border-radius: 50%; background: #ced4da; display: inline-block; }
.assist-anim-barra span { margin-left: 8px; background: #fff; border-radius: 6px; padding: 1px 8px; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.assist-anim-corpo { background: #fff; border: 1px solid #dee2e6; border-radius: 0 0 10px 10px; padding: 14px; min-height: 150px; }
.assist-anim-caminho { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .8rem; margin-bottom: 12px; }
.assist-anim-caminho > i { font-size: .6rem; color: #adb5bd; }
.assist-anim-caminho span, .assist-anim-campo, .assist-anim-senha { animation: assist-acende calc(var(--t) * var(--n)) infinite; animation-delay: calc(var(--t) * var(--i) - var(--t) * var(--n)); }
.assist-anim-caminho span { padding: 3px 8px; border-radius: 6px; background: #f1f3f5; }
@keyframes assist-acende {
    0% { background: #0d6efd; color: #fff; box-shadow: 0 0 0 4px rgba(13,110,253,.25); }
    12% { background: #0d6efd; color: #fff; box-shadow: 0 0 0 4px rgba(13,110,253,.25); }
    20%, 100% { background: #f1f3f5; color: inherit; box-shadow: none; }
}
.assist-anim-campo, .assist-anim-senha { padding: 8px 10px; border-radius: 8px; background: #f1f3f5; margin-top: 8px; font-size: .85rem; display: flex; align-items: center; gap: 8px; }
.assist-anim-botao { margin-left: auto; background: #1a73e8; color: #fff; border-radius: 14px; padding: 2px 12px; font-size: .75rem; }
.assist-anim-senha code { background: #fef7e0; color: #202124; padding: 4px 10px; border-radius: 6px; font-size: 1rem; letter-spacing: 1px; }
.assist-anim-copiar { margin-left: auto; font-size: .75rem; color: #1a73e8; }

/* Versão 13: QR code do link único, faixa do plano e etiqueta Beta */
.qr-grande { width: 220px; max-width: 70vw; }
.qr-grande svg { width: 100%; height: auto; display: block; }
.etiqueta-beta { background: #ffc107; color: #212529; font-size: .7rem; vertical-align: middle; letter-spacing: .03em; }

/* Versão 14: casa (bicicletas, carros, Wi-Fi, relatório do ambiente) */
.mini-equip { width: 44px; height: 44px; object-fit: cover; border-radius: .4rem; border: 1px solid #dee2e6; }
.mini-carro { width: 72px; height: 54px; object-fit: cover; border-radius: .4rem; border: 1px solid #dee2e6; }
.mini-rel { width: 90px; height: 68px; object-fit: cover; border-radius: .35rem; margin: 2px; border: 1px solid #dee2e6; }
.qr-wifi { width: 220px; max-width: 70vw; background: #fff; padding: 8px; border-radius: .5rem; }
@media print { .mini-rel { width: 120px; height: 90px; } }

/* Versão 14: Configurações com menu do lado em grupos */
#modalSettings .cfg-lado { gap: 1px; }
#modalSettings .cfg-lado .nav-link { text-align: left; padding: .35rem .6rem; font-size: .92rem; }
#modalSettings .cfg-lado .cfg-grupo { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; padding: .6rem .6rem .15rem; }
#modalSettings .cfg-lado li.cfg-fora { display: none !important; }
@media (min-width: 992px) { #modalSettings .cfg-layout > .col-lg-3 { border-right: 1px solid #dee2e6; } }
@media (max-width: 991px) { #modalSettings .cfg-lado { flex-direction: row !important; flex-wrap: wrap; } #modalSettings .cfg-lado .cfg-grupo { width: 100%; } }
.mr-colunas { max-height: 220px; overflow-y: auto; }

/* Versão 18: telas vazias que ensinam e o guia campo a campo */
.tela-vazia { border: 2px dashed #cfd8e6; border-radius: 12px; background: #f8fbff; }
.guia-balao { z-index: 2100; }
.pp-exemplo { background: #f1f8ff; }

/* Versão 18: no celular, em espanhol, "Inspección / Mantenimiento / Reparación" passava da largura da tela. */
.tipos-servico-casa .btn { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .tipos-servico-casa .btn { font-size: .82rem; padding-left: .25rem; padding-right: .25rem; white-space: normal; }
}
/* Versão 18: importar planilha. No celular os exemplos ficam embaixo do nome da coluna e a escolha cabe na tela. */
#modalImportar .imp-vai { min-width: 200px; }
@media (max-width: 767.98px) { #modalImportar .imp-vai { min-width: 140px; } }
/* Versão 18.1: o botão do canal padrão (SMS, WhatsApp ou e-mail) vem primeiro e com uma estrelinha. */
[data-canal-padrao] { position: relative; box-shadow: 0 0 0 2px #ffc107; }
[data-canal-padrao]::after { content: "\2605"; position: absolute; top: -8px; right: -6px; font-size: 11px; line-height: 15px; width: 15px;
    height: 15px; border-radius: 50%; background: #ffc107; color: #5c4400; text-align: center; pointer-events: none; }