/* ============================================================ */
/* styles1.css — HorseSmart                               */
/* Consolidado de hs-ui.css                                   */
/* ============================================================ */

/* ajustes2.md item 1/2: --green/--gold não tinham um :root global aqui —
   cada página define seu próprio :root inline, mas várias não definem essas
   variáveis (ver ALTERACOES_AJUSTES_RODADA16.md), então `.glass-panel` abaixo
   usava `border: 1px solid var(--green)` com a variável indefinida, caindo
   no fallback `currentcolor` do navegador — a borda ficava praticamente
   invisível. Definindo aqui como fallback global, todo glass-panel que
   importa styles1.css passa a ter a borda verde visível sem precisar editar
   cada página uma por uma. */
:root {
    --green: #2d5a4e;
    --green-light: #3d7a6a;
    --green-deep: #1a3830;
    --gold: #d2b48c;
    --gold-dark: #c19a6b;
    --gold-light: #e8d5b7;
}

/* PLANO_CORRECAO_OFFLINE (Causa 6, item 7 do ajustes2.md): o viewport já
   tem `user-scalable=no, maximum-scale=1.0` em toda página, mas isso não
   bloqueia o gesto de DUPLO TOQUE em alguns navegadores mobile (esp. iOS
   Safari recente) — `touch-action: manipulation` desabilita especificamente
   esse gesto (double-tap-to-zoom) sem afetar scroll/pinch em outros
   contextos. Global aqui porque styles1.css é carregado por praticamente
   toda página do app (portal_vet e portal_prop). */
html, body {
    touch-action: manipulation;
}

/* de hs-ui.css */
#toast-container {

    position: fixed;
    top: 20px;
    left: 0; right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 9999;
    pointer-events: none;
}

/* de hs-ui.css */
.active {

    background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
    color: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 4px 14px rgba(45, 90, 78, 0.2);
}

/* de hs-ui.css */
.atendimentos-card {

    background: rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    padding: 16px;
    border-left: 5px solid;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

/* de hs-ui.css */
.atendimentos-card::before {

    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 100%);
    pointer-events: none;
}

/* de hs-ui.css */
.atendimentos-card:hover {

    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 16px 40px rgba(45, 90, 78, 0.15);
}

/* de hs-ui.css */
.bottom-nav {

    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 50;
}

/* de hs-ui.css */
.btn-bounce {

    transition: transform 0.15s, box-shadow 0.15s;
}

/* de hs-ui.css */
.btn-bounce:active {

    transform: scale(0.96);
}

/* de hs-ui.css */
.btn-notif {

    height: 36px;
    width: 36px;
    background: rgba(45, 90, 78, 0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
    border: 1px solid rgba(45, 90, 78, 0.1);
    flex-shrink: 0;
}

/* de hs-ui.css */
.btn-notif:active {
 transform: scale(0.9); }

/* de hs-ui.css */
.btn-whatsapp {

    background: #25d366;
    color: white;
}

/* de hs-ui.css */
.btn-whatsapp:hover {
 background: #1da851; }

/* de hs-ui.css */
.danger {
 color: var(--color-pendente); }

/* de hs-ui.css */
.date-filter-btn {

    flex: 1;
    padding: 8px 4px;
    border-radius: 10px;
    border: 1.5px solid rgba(45, 90, 78, 0.18);
    background: rgba(255, 255, 255, 0.8);
    color: var(--green);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

/* de hs-ui.css */
.date-filter-btn:hover {
 border-color: var(--gold); background: rgba(210, 180, 140, 0.1); }

/* de hs-ui.css */
.date-filter-wrap {
 display: flex; gap: 6px; }

/* de hs-ui.css */
.despesa {
 border-left-color: #6b7280; background: linear-gradient(135deg, rgba(107,114,128,0.05) 0%, rgba(255,255,255,0.85) 100%); }

/* de hs-ui.css */
.empty-icon {
 font-size: 2.5rem; margin-bottom: 1rem; }

/* de hs-ui.css */
.empty-state {

    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--green);
    opacity: 0.6;
}

/* de hs-ui.css */
.empty-text {
 font-size: 0.9rem; font-weight: 600; }

/* de hs-ui.css */
.fade-in {
 animation: fadeIn 0.35s ease both; }

/* de hs-ui.css */
.filter-badge {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: rgba(210, 180, 140, 0.3);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 900;
}

/* de hs-ui.css */
.filter-btn {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 9px 12px;
    border: 1.5px solid rgba(45, 90, 78, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--green);
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* de hs-ui.css */
.filter-btn:hover {

    background: rgba(210, 180, 140, 0.12);
    border-color: var(--gold);
}

/* de hs-ui.css */
.filter-grid {
 display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* de hs-ui.css */
.form-input {

    background-color: #f9fafb;
    border: 1px solid #D2B48C;
    border-radius: 10px;
    padding: 12px 16px;
    width: 100%;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    transition: all 0.2s;
}

/* de hs-ui.css */
.form-input:focus {

    border-color: var(--gold);
    outline: none;
    box-shadow: 0 0 0 2px rgba(210, 180, 140, 0.3);
}

/* de hs-ui.css */
.full-width {
 grid-column: 1 / -1; }

/* de hs-ui.css */
.glass-panel {

    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    /* ajustes2.md item 2: a borda ficava invisível por causa da variável
       --green indefinida em várias páginas (ver :root global adicionado no
       topo deste arquivo) — resolvido isso, o card já fica bem delimitado
       com a espessura original de 1px. */
    border: 1px solid var(--green);
    box-shadow: var(--shadow-glass);
}

/* de hs-ui.css */
.glass-panel-soft {

    background: rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(45, 90, 78, 0.15);
    box-shadow: 0 4px 16px rgba(31, 38, 135, 0.06);
    border-radius: var(--radius-card);
}

/* de hs-ui.css */
.hs-btn-cobranca {

    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: var(--green-deep);
}

/* de hs-ui.css */
.hs-btn-despesa {

    background: linear-gradient(135deg, var(--green) 0%, var(--green-light) 100%);
    color: white;
}

/* de hs-ui.css */
.hs-btn-primary {

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: var(--radius-btn);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    border: none;
    cursor: pointer;
    transition: all 0.18s;
    box-shadow: var(--shadow-btn);
    text-transform: uppercase;
    width: 100%;
}

/* de hs-ui.css */
.hs-btn-primary:active {
 transform: scale(0.96); }

/* de hs-ui.css */
.hs-card {

    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--green);
    box-shadow: var(--shadow-glass);
    border-radius: var(--radius-card);
}

/* de hs-ui.css */
.input-glass,
.select-glass {

    background: rgba(240, 245, 243, 0.8);
    border: 2px solid transparent;
    border-radius: var(--radius-input);
    padding: 12px 16px;
    width: 100%;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    transition: all 0.2s;
    color: var(--text-primary);
}

/* de hs-ui.css */
.input-glass:focus,
.select-glass:focus {

    border-color: var(--gold);
    outline: none;
    box-shadow: 0 0 0 2px rgba(210, 180, 140, 0.2);
}

/* Sem isso o autofill do navegador (Chrome/Safari) pinta o campo de
   branco/amarelo ao clicar, quebrando o fundo verde-claro translúcido do
   formulário (clientes.html, novo-atendimento.html). */
.input-glass:-webkit-autofill,
.input-glass:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgba(240, 245, 243, 0.95) inset;
    -webkit-text-fill-color: var(--text-primary);
    transition: background-color 9999s ease-in-out 0s;
}

/* de hs-ui.css */
.insumo-tag {

    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border: 1px solid rgba(45, 90, 78, 0.12);
    border-left: 3px solid var(--green);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.85rem;
}

/* de hs-ui.css */
.insumos-body {

    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.3s ease;
    max-height: 0;
    opacity: 0;
}

/* BUG 5 (RELATORIO_BUGS_FASE1_ONLINE.md / RETESTE_V2_HARDREFRESH_E_OFFLINE.md):
   o dropdown de busca (.search-dropdown) precisa "vazar" visualmente abaixo do
   campo de busca via position:absolute, mas .insumos-body tem overflow:hidden
   (necessário só durante a animação de abrir/fechar do acordeão) — sem essa
   classe, qualquer item do dropdown que caia fora da altura de conteúdo em
   fluxo normal do painel fica clicável apenas via JS (não recebe cliques
   reais do usuário, que acertam o próximo campo do formulário por baixo).
   Aplicada via JS depois que a transição de abertura termina. */
.insumos-body.overflow-visible {
    overflow: visible;
}

/* ACHADO 5/16 (HORSESMART_RELATORIO_COMPLETO_TESTES_E2E.md): .glass-panel usa
   backdrop-filter, que cria um stacking context isolado — o z-index:500 do
   .search-dropdown só vence DENTRO desse contexto. O próximo .glass-panel do
   formulário (mais abaixo no DOM) pinta por cima dele na hora de receber
   cliques (confirmado via elementFromPoint), mesmo o dropdown aparecendo
   visualmente acima. Aplicado via JS em lancamentos.html enquanto o dropdown
   de insumos está aberto, para elevar o próprio painel acima dos irmãos. */
.insumos-panel-raised {
    position: relative;
    z-index: 600;
}

/* de hs-ui.css */
.insumos-toggle-header {

    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 8px 0;
    user-select: none;
    position: relative;
    z-index: 1;
}

/* de hs-ui.css */
.neutral {
 color: var(--green); }

/* de hs-ui.css */
.no-scrollbar {
 -ms-overflow-style: none; scrollbar-width: none; }

/* de hs-ui.css */
.no-scrollbar::-webkit-scrollbar {
 display: none; }

/* de hs-ui.css */
.open {
 max-height: 700px; opacity: 1; }

/* de hs-ui.css */
.pagamento-label-card {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    border-radius: 16px;
    border: 2px solid rgba(45, 90, 78, 0.2);
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

/* de hs-ui.css */
.pagamento-label-card:active {
 transform: scale(0.95); }

/* de hs-ui.css */
.pago {
 border-left-color: #10b981; background: linear-gradient(135deg, rgba(16,185,129,0.05) 0%, rgba(255,255,255,0.85) 100%); }

/* de hs-ui.css */
.pago-fora {
 border-left-color: #059669; background: linear-gradient(135deg, rgba(5,150,105,0.05) 0%, rgba(255,255,255,0.85) 100%); }

/* de hs-ui.css */
.pendente {
 border-left-color: #ef4444; background: linear-gradient(135deg, rgba(239,68,68,0.05) 0%, rgba(255,255,255,0.85) 100%); }

/* de hs-ui.css */
.quick-add-panel {

    background: linear-gradient(135deg, rgba(45,90,78,0.05), rgba(210,180,140,0.1));
    border: 1.5px dashed rgba(210, 180, 140, 0.5);
    border-radius: 12px;
    padding: 12px;
    margin-top: 8px;
}

/* de hs-ui.css */
.rascunho {
 border-left-color: #3b82f6; background: linear-gradient(135deg, rgba(59,130,246,0.05) 0%, rgba(255,255,255,0.85) 100%); }

/* de hs-ui.css */
.search-dropdown {

    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 4px);
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border: 1px solid #e5e7eb;
    z-index: 500;
    max-height: 200px;
    overflow-y: auto;
}

/* de hs-ui.css */
.search-dropdown-item {

    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s;
    font-family: "Inter", sans-serif;
    font-size: 13px;
}

/* de hs-ui.css */
.search-dropdown-item:active {
 background: rgba(210, 180, 140, 0.18); }

/* de hs-ui.css */
.search-dropdown-item:hover {
 background: #f0f5f3; }

/* de hs-ui.css */
.search-dropdown-item:last-child {
 border-bottom: none; }

/* de hs-ui.css */
.section-header {

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--green);
    margin-bottom: 4px;
}

/* de hs-ui.css */
.section-title {

    font-weight: 700;
    color: var(--green);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--gold);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* de hs-ui.css */
.input-glass,
.select-glass {

    background: rgba(240, 245, 243, 0.8);
    border: 2px solid transparent;
    border-radius: var(--radius-input);
    padding: 12px 16px;
    width: 100%;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    transition: all 0.2s;
    color: var(--text-primary);
}

/* de hs-ui.css */
.input-glass:focus,
.select-glass:focus {

    border-color: var(--gold);
    outline: none;
    box-shadow: 0 0 0 2px rgba(210, 180, 140, 0.2);
}

/* Sem isso o autofill do navegador (Chrome/Safari) pinta o campo de
   branco/amarelo ao clicar, quebrando o fundo verde-claro translúcido do
   formulário (clientes.html, novo-atendimento.html). */
.input-glass:-webkit-autofill,
.input-glass:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgba(240, 245, 243, 0.95) inset;
    -webkit-text-fill-color: var(--text-primary);
    transition: background-color 9999s ease-in-out 0s;
}

/* de hs-ui.css */
.selected-nao {

    border-color: var(--gold);
    background: rgba(210, 180, 140, 0.12);
    box-shadow: 0 4px 14px rgba(210, 180, 140, 0.3);
}

/* de hs-ui.css */
.selected-sim {

    border-color: #059669;
    background: rgba(5, 150, 105, 0.08);
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.2);
}

/* de hs-ui.css */
.show {

    opacity: 1;
    transform: translateY(0);
}

/* de hs-ui.css */
.skeleton {

    background: linear-gradient(
        90deg,
        rgba(45, 90, 78, 0.08) 25%,
        rgba(45, 90, 78, 0.15) 50%,
        rgba(45, 90, 78, 0.08) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shine 1.5s infinite;
    border-radius: 0.5rem;
}

/* de hs-ui.css */
.slide-in {
 animation: slideIn 0.3s ease-out; }

/* de hs-ui.css */
.stat-card {

    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(20px);
    border: 1px solid var(--green);
    border-radius: 1.25rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 4px 16px rgba(31, 38, 135, 0.06);
}

/* de hs-ui.css */
.stat-label {

    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(45, 90, 78, 0.65);
}

/* de hs-ui.css */
.stat-value {

    font-size: 20px;
    font-weight: 900;
    color: #059669;
    margin-top: 0.25rem;
}

/* de hs-ui.css */
/* item 6 do ajustes.md: a regra de .status-aguardando estava sem a chave de
   fechamento "}" — o parser CSS acabava fundindo as declarações de
   .status-badge dentro do próprio seletor .status-aguardando, então
   .status-badge nunca existia como regra separada. Corrigido. Mantido como
   referência de estilo (vermelho claro no texto/fundo), conforme pedido. */
.status-aguardando {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

/* de hs-ui.css */
.status-badge {

    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px; /* item 6: badges em formato "pill" (cantos bem arredondados) */
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: "Inter", sans-serif;
}

/* de hs-ui.css */
.status-despesa {
 background: rgba(107, 114, 128, 0.15); color: #4b5563; }

/* de hs-ui.css */
.status-late {
 background: #fee2e2; color: #dc2626; }

/* de hs-ui.css */
.status-ok {
 background: #dcfce7; color: #16a34a; }

/* item 6 do ajustes.md: pago/pago-fora ganham um verde "vivo" (mais vivo que
   a borda anterior) no texto e fundo verde clarinho mais opaco. */
.status-pago {
 background: rgba(16, 185, 129, 0.22); color: #059669; }

/* de hs-ui.css */
.status-pago-fora {
 background: rgba(16, 185, 129, 0.22); color: #059669; }

/* de hs-ui.css */
.status-pendente {
 background: rgba(239, 68, 68, 0.15);  color: #dc2626; }

/* item 6 do ajustes.md: rascunho usa a mesma cor da borda (azul) no texto,
   com fundo azul clarinho mais opaco. */
.status-rascunho {
 background: rgba(59, 130, 246, 0.22); color: #3b82f6; }

/* item 6: receita-ativa/receita-utilizada mantêm o texto vetsmart-green, com
   fundo claro/opaco no mesmo padrão dos demais badges. */
.status-receita {
 background: rgba(45, 90, 78, 0.15); color: #2D5A4E; }

.status-receita-utilizada {
 background: rgba(45, 90, 78, 0.15); color: #2D5A4E; }

/* de hs-ui.css */
.status-warn {
 background: #fef9c3; color: #ca8a04; }

/* de hs-ui.css */
.timeline-item {

    border-left: 3px solid var(--gold);
    padding-left: 16px;
    position: relative;
}

/* de hs-ui.css */
.timeline-item::before {

    content: "";
    width: 12px; height: 12px;
    background-color: var(--gold);
    border-radius: 50%;
    position: absolute;
    left: -7.5px; top: 4px;
}

/* de hs-ui.css */
.toast {

    pointer-events: auto;
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    color: white;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    opacity: 0;
    transform: translateY(-8px);
}

/* de hs-ui.css */
.toast-error {
 background: #ef4444; }

/* de hs-ui.css */
.toast-info {
 background: #3b82f6; }

/* de hs-ui.css */
.toast-success {
 background: var(--green); }

/* de hs-ui.css */
.toggle-btn {

    background-color: transparent;
    color: var(--green);
    padding: 0.75rem;
    border-radius: 9px;
    flex-grow: 1;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    font-family: "Inter", sans-serif;
}