/**
 * coletas.css
 * Estilos dos componentes da Etapa 2: coletas, modais, prancheta,
 * histórico horizontal e tags de marketplace.
 * Inclua este arquivo no index.php após estilo.css:
 *   <link rel="stylesheet" href="/app/css/coletas.css">
 */

/* ===================== Cabeçalho da seção de coletas ===================== */

.coletas_cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.coletas_abas {
    display: flex;
    gap: 4px;
    background: var(--cor-papel-escuro);
    border: 1px solid var(--cor-linha);
    border-radius: 6px;
    padding: 4px;
}

.coletas_aba {
    background: transparent;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--cor-tinta-suave);
    transition: background 0.15s, color 0.15s;
}

.coletas_aba:hover {
    color: var(--cor-tinta);
}

.coletas_aba_ativa {
    background: #fff;
    color: var(--cor-petroleo-escuro);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

.botao_nova_coleta {
    background: var(--cor-selo);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s;
    white-space: nowrap;
}

.botao_nova_coleta:hover {
    background: var(--cor-selo-escuro);
}

/* ===================== Botões reutilizáveis ===================== */

.botao_primario {
    background: var(--cor-petroleo);
    color: var(--cor-papel);
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s;
}

.botao_primario:hover { background: var(--cor-petroleo-escuro); }
.botao_primario:disabled { opacity: 0.55; cursor: not-allowed; }

.botao_secundario {
    background: transparent;
    border: 1px solid var(--cor-petroleo);
    color: var(--cor-petroleo);
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s;
}

.botao_secundario:hover { background: rgba(22,50,59,0.07); }
.botao_secundario:disabled { opacity: 0.55; cursor: not-allowed; }

.botao_ghost {
    background: transparent;
    border: 1px solid var(--cor-linha);
    color: var(--cor-tinta-suave);
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 13px;
    transition: border-color 0.15s, color 0.15s;
}

.botao_ghost:hover {
    border-color: var(--cor-tinta-suave);
    color: var(--cor-tinta);
}

/* ===================== Campos de formulário ===================== */

.grupo_campos {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.grupo_campos_inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.rotulo_campo {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cor-tinta-suave);
}

.campo_texto,
.campo_select,
.campo_textarea,
.campo_data {
    font-family: var(--fonte-corpo);
    font-size: 14px;
    padding: 10px 12px;
    border: 1px solid var(--cor-linha);
    border-radius: 6px;
    background: #fff;
    color: var(--cor-tinta);
    transition: border-color 0.15s;
    width: 100%;
}

.campo_texto:focus,
.campo_select:focus,
.campo_textarea:focus,
.campo_data:focus {
    outline: none;
    border-color: var(--cor-petroleo);
}

.campo_textarea {
    resize: vertical;
    min-height: 64px;
}

/* ===================== Cartão de pesquisa ===================== */

.cartao_pesquisa {
    background: #fff;
    border: 1px solid var(--cor-linha);
    border-radius: var(--raio-cartao);
    padding: 20px;
    margin-bottom: 16px;
}

.grupo_filtros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

/* ===================== Tabela de coletas ===================== */

.linha_coletada td {
    opacity: 0.6;
}

.nome_destinatario {
    display: block;
}

.rastreio_mono {
    font-family: var(--fonte-dados);
    font-size: 12px;
    color: var(--cor-tinta-suave);
    display: block;
}

/* Tags de marketplace */
.tag_marketplace {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    margin-top: 3px;
}

.tag_shopee         { background: #FF6130; color: #fff; }
.tag_amazon         { background: #FF9900; color: #111; }
.tag_mercado_livre  { background: #FFE600; color: #111; }
.tag_shein          { background: #3A1C5C; color: #fff; }
.tag_aliexpress     { background: #E43225; color: #fff; }
.tag_magalu         { background: #0086FF; color: #fff; }
.tag_americanas     { background: #EE1C25; color: #fff; }
.tag_submarino      { background: #004B8D; color: #fff; }
.tag_casas_bahia    { background: #F7A600; color: #111; }
.tag_outros         { background: var(--cor-linha); color: var(--cor-tinta); }

/* Status nas linhas */
.status_pendente {
    font-size: 11px;
    font-weight: 600;
    color: #B45309;
    background: #FEF3C7;
    padding: 2px 8px;
    border-radius: 999px;
}

.status_coletado {
    font-size: 11px;
    font-weight: 600;
    color: var(--cor-verde-registro);
    background: #D1FAE5;
    padding: 2px 8px;
    border-radius: 999px;
}

/* Pendência do aviso automático de WhatsApp (sem telefone legível ou falha no envio) */
.badge_aviso_pendente {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--cor-selo-escuro);
    background: #FDE8E4;
    padding: 2px 8px;
    border-radius: 999px;
    margin-top: 4px;
    width: fit-content;
}

.celula_acoes {
    display: flex;
    gap: 8px;
    align-items: center;
}

.botao_confirmar_coleta {
    background: var(--cor-verde-registro);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.botao_confirmar_coleta:hover { opacity: 0.85; }

.botao_avisar_whatsapp {
    background: #25D366;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 5px 9px;
    font-size: 13px;
    line-height: 1;
    transition: opacity 0.15s, transform 0.1s;
}

.botao_avisar_whatsapp:hover  { opacity: 0.85; }
.botao_avisar_whatsapp:active { transform: scale(0.95); }
.botao_avisar_whatsapp:disabled { opacity: 0.6; cursor: not-allowed; }

.botao_ver_foto,
.botao_ver_historico {
    background: transparent;
    border: 1px solid var(--cor-linha);
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 12px;
    color: var(--cor-tinta-suave);
    transition: border-color 0.15s;
    white-space: nowrap;
}

.botao_ver_foto:hover,
.botao_ver_historico:hover {
    border-color: var(--cor-petroleo);
    color: var(--cor-petroleo);
}

.texto_vazio {
    text-align: center;
    color: var(--cor-tinta-suave);
    padding: 40px 0;
    font-size: 14px;
}

/* ===================== Modal base ===================== */

.overlay_modal {
    position: fixed;
    inset: 0;
    background: rgba(14, 34, 40, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
    animation: surgir_overlay 0.18s ease-out;
}

@keyframes surgir_overlay {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal_caixa {
    background: var(--cor-papel);
    border: 1px solid var(--cor-linha);
    border-radius: 8px;
    box-shadow: 0 24px 60px -12px rgba(14,34,40,0.5);
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 24px;
    animation: surgir_modal 0.2s ease-out;
}

@keyframes surgir_modal {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.modal_cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.modal_cabecalho h3 {
    font-family: var(--fonte-display);
    font-size: 18px;
    margin: 0;
    color: var(--cor-petroleo-escuro);
}

.botao_fechar_modal {
    background: transparent;
    border: none;
    font-size: 18px;
    color: var(--cor-tinta-suave);
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.12s;
}

.botao_fechar_modal:hover {
    background: var(--cor-papel-escuro);
}

.modal_rodape {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--cor-linha);
}

.divisor_form {
    border: none;
    border-top: 1px dashed var(--cor-linha);
    margin: 18px 0;
}

/* ===================== Seção de upload de etiqueta ===================== */

.secao_etiqueta {
    background: #fff;
    border: 1px dashed var(--cor-linha);
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 4px;
    text-align: center;
}

.dica_etiqueta {
    font-size: 13px;
    color: var(--cor-tinta-suave);
    margin: 0 0 12px;
}

.grupo_upload_etiqueta {
    margin-bottom: 12px;
}

.botao_upload_etiqueta {
    display: inline-block;
    background: var(--cor-papel-escuro);
    border: 1px solid var(--cor-linha);
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--cor-tinta);
    cursor: pointer;
    transition: background 0.15s;
}

.botao_upload_etiqueta:hover {
    background: var(--cor-linha);
}

.input_oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.preview_etiqueta img {
    max-width: 100%;
    max-height: 180px;
    border-radius: 4px;
    border: 1px solid var(--cor-linha);
    object-fit: contain;
    margin-bottom: 10px;
}

.oculto { display: none !important; }

.status_leitura {
    font-size: 13px;
    color: var(--cor-verde-registro);
    margin-top: 8px;
    padding: 8px 12px;
    background: #D1FAE5;
    border-radius: 5px;
}

.status_leitura.status_erro {
    color: var(--cor-selo-escuro);
    background: #FEE2E2;
}

/* ===================== Prancheta de assinatura ===================== */

.prancheta_wrapper {
    margin: 12px 0;
}

.rotulo_assinatura {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cor-tinta-suave);
    margin-bottom: 8px;
}

.prancheta_container {
    border: 1.5px solid var(--cor-linha);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    cursor: crosshair;
    touch-action: none;   /* essencial: impede scroll durante o traço */
}

.prancheta_canvas {
    display: block;
    width: 100%;
    height: 160px;
}

.botao_limpar_assinatura {
    margin-top: 8px;
    font-size: 12px;
    padding: 6px 12px;
}

.texto_confirmacao {
    font-size: 15px;
    color: var(--cor-tinta);
    margin-bottom: 4px;
}

.botao_confirmar_final {
    background: var(--cor-verde-registro);
}

.botao_confirmar_final:hover {
    background: #2E5040;
}

/* ===================== Modal de foto ampliada ===================== */

.modal_foto_container {
    text-align: center;
}

.foto_etiqueta_ampliada {
    max-width: 100%;
    max-height: 65vh;
    object-fit: contain;
    border-radius: 4px;
}

/* ===================== Histórico horizontal ===================== */

.texto_destinatario_hist {
    font-size: 14px;
    color: var(--cor-tinta-suave);
    margin: 0 0 14px;
}

.historico_scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.card_historico {
    min-width: 180px;
    max-width: 200px;
    background: #fff;
    border: 1px solid var(--cor-linha);
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.hist_foto {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-bottom: 1px solid var(--cor-linha);
}

.hist_foto_placeholder {
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background: var(--cor-papel-escuro);
    border-bottom: 1px solid var(--cor-linha);
}

.hist_dados {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
}

/* ===================== Responsivo — Etapa 2 ===================== */

@media (max-width: 640px) {
    .coletas_cabecalho {
        flex-direction: column;
        align-items: stretch;
    }

    .botao_nova_coleta {
        text-align: center;
    }

    .grupo_campos_inline {
        grid-template-columns: 1fr;
    }

    .grupo_filtros {
        grid-template-columns: 1fr;
    }

    .celula_acoes {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Esconde colunas menos essenciais em telas pequenas */
    .tabela_dados th:nth-child(2),
    .tabela_dados td:nth-child(2) {
        display: none;
    }

    .modal_caixa {
        padding: 18px 16px;
        max-height: 95vh;
    }
}

/* ===================== Aba Coletadas — cards horizontais ===================== */

.lista_coletadas {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.card_coletada {
    background: #fff;
    border: 1px solid var(--cor-linha);
    border-radius: var(--raio-cartao);
    display: grid;
    grid-template-columns: 1fr 200px;
    overflow: hidden;
    transition: box-shadow 0.15s;
}

.card_coletada:hover {
    box-shadow: 0 4px 16px -4px rgba(14,34,40,0.18);
}

.card_coletada_dados {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card_coletada_topo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.card_coletada_dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 14px;
    margin: 0;
    font-size: 13px;
}

.card_coletada_dl dt {
    color: var(--cor-tinta-suave);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    align-self: center;
    white-space: nowrap;
}

.card_coletada_dl dd {
    margin: 0;
    color: var(--cor-tinta);
    align-self: center;
}

.destaque_coletado {
    color: var(--cor-verde-registro);
    font-weight: 600;
}

/* Assinatura dentro do card */
.coletada_assin_wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.rotulo_assin {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cor-tinta-suave);
    white-space: nowrap;
}

.assin_thumb {
    height: 44px;
    max-width: 160px;
    object-fit: contain;
    border: 1px solid var(--cor-linha);
    border-radius: 4px;
    background: #fff;
    cursor: zoom-in;
    transition: opacity 0.15s;
}

.assin_thumb:hover { opacity: 0.8; }

.sem_assinatura {
    font-style: italic;
    font-size: 12px;
}

/* Lado direito: foto da etiqueta */
.card_coletada_midia {
    border-left: 1px solid var(--cor-linha);
    background: var(--cor-papel-escuro);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.coletada_foto_btn {
    background: none;
    border: none;
    padding: 0;
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.coletada_foto_etiqueta {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.15s;
}

.coletada_foto_btn:hover .coletada_foto_etiqueta { opacity: 0.85; }

.coletada_foto_placeholder {
    font-size: 36px;
    color: var(--cor-linha);
}

/* Modal assinatura ampliada */
.assin_ampliada_wrap {
    background: var(--cor-papel-escuro);
    border-radius: 6px;
    padding: 16px;
    display: flex;
    justify-content: center;
}

.assin_ampliada {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    border: 1px solid var(--cor-linha);
    border-radius: 4px;
    background: #fff;
}

/* Responsivo */
@media (max-width: 640px) {
    .card_coletada {
        grid-template-columns: 1fr;
    }

    .card_coletada_midia {
        border-left: none;
        border-top: 1px solid var(--cor-linha);
        height: 160px;
    }
}

/* ─── Faixa de status do WhatsApp ──────────────────────────────────────────── */

.faixa_status_whatsapp {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--cor-papel-escuro);
    border: 1px solid var(--cor-linha);
    border-radius: 8px;
    padding: 10px 16px;
    margin: 12px 0 16px;
    font-size: 13px;
}

.status_whatsapp_indicador {
    font-size: 14px;
    line-height: 1;
}

.botao_status_whatsapp_acao {
    margin-left: auto;
    background: #25D366;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.botao_status_whatsapp_acao:hover { opacity: 0.85; }

/* ─── Modal de conexão / QR Code do WhatsApp ───────────────────────────────── */

.qr_status_indicador {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 10px;
    margin: 14px 0;
}

.qr_status_conectando { background: #FEF9C3; color: #854D0E; }
.qr_status_conectado  { background: #DCFCE7; color: #15803D; }
.qr_status_erro        { background: #FEE2E2; color: #DC2626; }

.qr_status_spin {
    display: inline-block;
    animation: girar_qr 1s linear infinite;
}

@keyframes girar_qr {
    to { transform: rotate(360deg); }
}

.qr_wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.qr_loading {
    width: 220px;
    height: 220px;
    border-radius: 12px;
    border: 2px solid var(--cor-linha);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}

#qr_img {
    width: 220px;
    height: 220px;
    border-radius: 12px;
    border: 2px solid var(--cor-linha);
    display: block;
    background: #fff;
}

.qr_countdown {
    text-align: center;
    font-size: 13px;
    color: var(--cor-tinta-suave);
    margin-bottom: 8px;
}

.qr_countdown span {
    font-weight: 700;
    color: var(--cor-selo);
    font-size: 16px;
}