/* ═══════════════════════════════════════════════════════════════════
   modules/css/components.css — HorseSmart

   3 de 4 arquivos CSS consolidados do portal_vet (ver PLANO_CSS_PORTAL_VET.md).
   Import nas páginas que usam esses componentes (nem toda página do
   portal_vet precisa de todos — ver mapa de páginas x componente no plano).

   Conteúdo: componentes reutilizáveis hoje espalhados em arquivos próprios,
   usados por SUBCONJUNTOS de páginas (não todas): botão salvar com efeito
   (save-btn-fx.css), select customizado (hs-select.css), datepicker
   customizado (hs-datepicker.css), formulário de cadastro (cadastro-form.css)
   e os estilos extras específicos de dados-vet.html (styles2.css).
   ═══════════════════════════════════════════════════════════════════ */

/* ─── save-btn-fx.css (conteúdo original, sem alteração) ─── */

/* ═══════════════════════════════════════════════════════════════════
   save-btn-fx.css — HorseSmart

   Estilo do botão "Salvar" criado originalmente pro formulário "+ Novo
   Cadastro" (cadastro-form.css) — traço de luz correndo continuamente ao
   redor da borda, fundo transparente, cor de destaque customizável via
   `--hs-save-color`. Extraído aqui pra reuso em qualquer botão de salvar
   do projeto (pedido do usuário depois de aprovar o visual).

   Uso mínimo (só o visual, sem os estados de progresso):
     <button class="hs-save-btn">
         <span class="trace"></span><span class="trace"></span>
         <span class="trace"></span><span class="trace"></span>
         <span class="hs-save-label">Salvar</span>
     </button>

   Uso completo (com barra de progresso sincronizada + estado "Salvo"):
     <button class="hs-save-btn">
         <span class="hs-save-progress"></span>
         <span class="trace"></span><span class="trace"></span>
         <span class="trace"></span><span class="trace"></span>
         <span class="hs-save-label">Salvar</span>
     </button>
     // JS: btn.classList.add('is-saving'); ...; btn.classList.remove('is-saving'); btn.classList.add('is-saved');

   Cor de destaque diferente do verde padrão: `style="--hs-save-color: #2d5a4e"`
   ou uma classe própria que redefina a variável — nunca `style` para o
   resto (cor é só uma variável de tema, não uma regra de layout/animação).
   ═══════════════════════════════════════════════════════════════════ */

.hs-save-btn {
    --hs-save-color: var(--green, #2d5a4e);
    --hs-save-border: rgba(45, 90, 78, 0.35);
    position: relative;
    display: block;
    width: 100%;
    padding: 14px 20px;
    text-align: center;
    background: transparent;
    color: var(--hs-save-color);
    font-weight: 900;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: 1.5px solid var(--hs-save-border);
    border-radius: 1rem;
    overflow: hidden;
    cursor: pointer;
    transition: color 0.3s ease, background 0.3s ease;
}
.hs-save-btn span.trace {
    position: absolute;
    display: block;
}
.hs-save-btn span.trace:nth-child(1) {
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--hs-save-color));
    animation: hsSaveTrace1 1.6s linear infinite;
}
@keyframes hsSaveTrace1 {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}
.hs-save-btn span.trace:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, var(--hs-save-color));
    animation: hsSaveTrace2 1.6s linear infinite;
    animation-delay: 0.4s;
}
@keyframes hsSaveTrace2 {
    0% { top: -100%; }
    50%, 100% { top: 100%; }
}
.hs-save-btn span.trace:nth-child(3) {
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent, var(--hs-save-color));
    animation: hsSaveTrace3 1.6s linear infinite;
    animation-delay: 0.8s;
}
@keyframes hsSaveTrace3 {
    0% { right: -100%; }
    50%, 100% { right: 100%; }
}
.hs-save-btn span.trace:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg, transparent, var(--hs-save-color));
    animation: hsSaveTrace4 1.6s linear infinite;
    animation-delay: 1.2s;
}
@keyframes hsSaveTrace4 {
    0% { bottom: -100%; }
    50%, 100% { bottom: 100%; }
}
.hs-save-btn .hs-save-label {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Barra de progresso horizontal opcional (sincronizada com a promise real
   de salvamento pelo JS do chamador — ver cadastro-form.js como exemplo) */
.hs-save-btn .hs-save-progress {
    position: absolute;
    inset: 0;
    width: 0%;
    background: linear-gradient(90deg, var(--gold-dark, #c19a6b), var(--gold, #d2b48c));
    z-index: 1;
    transition: width 3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hs-save-btn.is-saving .hs-save-label {
    color: var(--hs-save-color);
}
.hs-save-btn.is-saved {
    background: #4ade80;
    border-color: #4ade80;
}
.hs-save-btn.is-saved .hs-save-progress {
    width: 100% !important;
    background: #4ade80;
}
.hs-save-btn.is-saved .hs-save-label {
    color: #ffffff;
}
.hs-save-btn.is-saved span.trace {
    display: none;
}
.hs-save-btn:disabled {
    cursor: not-allowed;
}

/* Variante dourada (pra contextos onde o botão já era dourado antes,
   ex.: novo-insumo.html) — nunca via `style=""` inline, sempre por classe. */
.hs-save-btn.hs-save-gold {
    --hs-save-color: var(--gold-dark, #c19a6b);
    --hs-save-border: rgba(210, 180, 140, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════
   .hs-save-solid — variante "fundo sólido em repouso" (rodada seguinte
   ao ajuste original acima). Parado: fundo sólido (--hs-save-idle-bg,
   por instância via .hs-idle-gold/.hs-idle-green/.hs-danger) + texto
   branco, sem traço visível. Clicado (.is-saving): fundo vira
   transparente, borda/texto/traço na cor --hs-save-color ("verde-vivo"
   #4ade80 por padrão, vermelho-vivo em ações destrutivas), barra de
   progresso na mesma cor a 55% de opacidade (realça o texto sem cobrir
   o botão por completo). Concluído (.is-saved): volta a ficar sólido,
   agora 100% opaco na cor --hs-save-color, texto branco — mesmo
   comportamento de "confirmação" que o .is-saved padrão já tinha.
   ═══════════════════════════════════════════════════════════════════ */
.hs-save-btn.hs-save-solid {
    --hs-save-idle-bg: var(--green, #2d5a4e);
    --hs-save-color: #4ade80;
    --hs-save-border: transparent;
    background: var(--hs-save-idle-bg);
    color: #ffffff;
}
.hs-save-btn.hs-save-solid span.trace {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.hs-save-btn.hs-save-solid.is-saving {
    background: transparent;
    border-color: var(--hs-save-color);
}
.hs-save-btn.hs-save-solid.is-saving span.trace {
    opacity: 1;
}
.hs-save-btn.hs-save-solid .hs-save-progress {
    background: color-mix(in srgb, var(--hs-save-color) 55%, transparent);
}
.hs-save-btn.hs-save-solid.is-saved {
    background: var(--hs-save-color);
    border-color: var(--hs-save-color);
}
.hs-save-btn.hs-save-solid.hs-idle-gold { --hs-save-idle-bg: var(--gold, #d2b48c); }
.hs-save-btn.hs-save-solid.hs-idle-green { --hs-save-idle-bg: var(--green, #2d5a4e); }
.hs-save-btn.hs-save-solid.hs-danger {
    --hs-save-idle-bg: #dc2626;
    --hs-save-color: #f87171;
}

@media (prefers-reduced-motion: reduce) {
    .hs-save-btn span.trace {
        animation: none;
        display: none;
    }
}

/* ─── hs-select.css (conteúdo original, sem alteração) ─── */

/* ═══════════════════════════════════════════════════════════════════
   hs-select.css — HorseSmart

   Visual do seletor (dropdown) customizado padrão do projeto —
   extraído de cadastro-form.css (.cadform-select*, formulário "+ Novo
   Cadastro"), agora compartilhado por qualquer <select class="hs-select">
   do projeto (ver hs-select.js). Import via <link>, nunca inline.

   Estrutura montada dinamicamente pelo JS:
     <div class="hs-select-wrap">
         <button class="hs-select-trigger"></button>
         <ul class="hs-select-list hidden"></ul>
         <select class="hs-select hs-select-native">...</select>
     </div>
   ═══════════════════════════════════════════════════════════════════ */

.hs-select-wrap {
    position: relative;
}
.hs-select-native {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}
.hs-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--green, #2d5a4e);
    background: rgba(45, 90, 78, 0.05);
    /* Borda nas 4 bordas (diferente do input de texto, só com linha
       embaixo) — pra ficar claro que é um elemento clicável/seletor, não
       um campo de digitar. */
    border: 1.5px solid rgba(45, 90, 78, 0.35);
    border-radius: 0.75rem; /* rounded-xl */
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.hs-select-trigger-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}
.hs-select-trigger:hover,
.hs-select-wrap.is-open .hs-select-trigger {
    border-color: var(--gold-dark, #c19a6b);
    background: rgba(45, 90, 78, 0.08);
}
.hs-select-trigger:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.hs-select-trigger.is-invalid {
    border-color: #f87171;
    border-width: 2px;
}
.hs-select-trigger::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--green, #2d5a4e);
    border-bottom: 2px solid var(--green, #2d5a4e);
    transform: rotate(45deg);
    margin-left: 8px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.hs-select-wrap.is-open .hs-select-trigger::after {
    transform: rotate(-135deg);
}
.hs-select-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    /* precisa vencer a bottom nav fixa (nav-vet.js, z-50) quando o select
       fica perto do rodapé da página, senão as últimas opções renderizam
       atrás dela */
    z-index: 100;
    background: #fff;
    border: 1px solid rgba(45, 90, 78, 0.2);
    border-radius: 0.9rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    max-height: 220px;
    overflow-y: auto;
    padding: 0.35rem;
}
.hs-select-list.hidden {
    display: none;
}
.hs-select-option {
    padding: 0.3rem 0.7rem;
    border-radius: 0.6rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--green, #2d5a4e);
    cursor: pointer;
}
.hs-select-option:hover,
.hs-select-option.is-active {
    background: rgba(45, 90, 78, 0.08);
    color: var(--gold-dark, #c19a6b);
}
.hs-select-option.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ─── hs-datepicker.css (conteúdo original, sem alteração) ─── */

/* ═══════════════════════════════════════════════════════════════════
   hs-datepicker.css — HorseSmart

   Seletor de data customizado padrão do projeto — mesma identidade
   visual do hs-select.css (trigger com borda verde/dourada), com um
   painel de calendário estilo cartão (mesma linguagem do .glass-panel)
   em vez da lista de opções. Import via <link>, nunca inline.

   Estrutura montada dinamicamente pelo JS (hs-datepicker.js):
     <div class="hs-date-wrap">
         <button class="hs-date-trigger">
             <span class="hs-date-label"></span><i class="fa-solid fa-calendar-days"></i>
         </button>
         <div class="hs-date-panel hidden">
             <div class="hs-date-nav">...</div>
             <div class="hs-date-weekdays">...</div>
             <div class="hs-date-grid">...</div>
         </div>
         <input type="date" class="hs-date hs-date-native" />
     </div>
   ═══════════════════════════════════════════════════════════════════ */

.hs-date-wrap {
    position: relative;
}
.hs-date-native {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

/* ─── Trigger (mesma cara do hs-select-trigger) ─── */
.hs-date-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--green, #2d5a4e);
    background: rgba(45, 90, 78, 0.05);
    border: 1.5px solid rgba(45, 90, 78, 0.35);
    border-radius: 0.75rem;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.hs-date-trigger:hover,
.hs-date-wrap.is-open .hs-date-trigger {
    border-color: var(--gold-dark, #c19a6b);
    background: rgba(45, 90, 78, 0.08);
}
.hs-date-trigger:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.hs-date-trigger i {
    color: var(--gold-dark, #c19a6b);
    font-size: 15px;
    flex-shrink: 0;
    margin-left: 8px;
}
.hs-date-label.is-placeholder {
    color: rgba(45, 90, 78, 0.45);
    font-weight: 500;
}

/* ─── Painel do calendário ─── */
.hs-date-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    /* precisa vencer a bottom nav fixa (nav-vet.js, z-50) quando o campo de
       data fica perto do rodapé da página (ex.: despesa_data em
       lancamentos.html), senão as últimas semanas do calendário renderizam
       atrás dela */
    z-index: 55;
    width: 280px;
    max-width: 90vw;
    background: #fff;
    border: 1px solid rgba(45, 90, 78, 0.2);
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    padding: 0.85rem;
    transform-origin: top left;
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.hs-date-panel.hidden {
    display: none;
    transform: scale(0.95);
    opacity: 0;
}
.hs-date-wrap.is-open .hs-date-panel {
    transform: scale(1);
    opacity: 1;
}

.hs-date-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}
.hs-date-nav button {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: var(--green, #2d5a4e);
    background: rgba(45, 90, 78, 0.08);
    transition: background 0.2s ease, color 0.2s ease;
    font-size: 12px;
}
.hs-date-nav button:hover {
    background: var(--gold-dark, #c19a6b);
    color: #fff;
}
.hs-date-month-label {
    font-weight: 900;
    font-size: 0.8rem;
    color: var(--green, #2d5a4e);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.hs-date-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 0.25rem;
}
.hs-date-weekdays span {
    text-align: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: rgba(45, 90, 78, 0.5);
}

.hs-date-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.hs-date-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--green, #2d5a4e);
    transition: background 0.15s ease, color 0.15s ease;
}
.hs-date-day:hover:not(.disabled) {
    background: rgba(45, 90, 78, 0.08);
}
.hs-date-day.is-today {
    box-shadow: inset 0 0 0 1.5px var(--green, #2d5a4e);
}
.hs-date-day.is-selected {
    background: var(--gold-dark, #c19a6b);
    color: #fff;
    box-shadow: none;
}
.hs-date-day.disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* ─── cadastro-form.css (conteúdo original, sem alteração) ─── */

/* ═══════════════════════════════════════════════════════════════════
   cadastro-form.css — HorseSmart (PONTO 3 do ajustes3.md)

   Estilo visual do formulário compartilhado "+ Novo Cadastro"
   (proprietário + cavalo), injetado via cadastro-form.js em
   clientes.html e novo-atendimento.html. Import via <link>, nunca
   inline.

   Padrão visual adaptado do card "Login" (Uiverse.io by glisovic01):
   labels flutuantes, linhas em vetsmart-green, botão "Salvar" com
   traço de luz circulando a borda em vetsmart-green.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Overlay + painel (abre "desenrolando" como um pergaminho) ─── */
.cadform-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.cadform-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.cadform-panel {
    position: relative;
    width: 100%;
    max-width: 28rem; /* max-w-md */
    max-height: 90vh;
    padding: 1.5rem;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    /* Cinza claro sólido — pedido do usuário, pra combinar com o fundo
       #f2f2f2 já usado nos campos de texto (.cadform-input). Os selects
       (.hs-select-trigger) continuam com o tom verde próprio deles. */
    background: rgb(242, 242, 242);
    transform-origin: top center;
    transform: scaleY(0);
    opacity: 0;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s ease;

    /* Rolagem sem barra visível dos dois lados — mantém cantos simétricos */
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legado */
}
.cadform-panel::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge */
}
.cadform-overlay.is-open .cadform-panel {
    transform: scaleY(1);
    opacity: 1;
}
.cadform-overlay.is-closing .cadform-panel {
    transform: scaleY(0);
    opacity: 0;
}

/* ─── Fechar (X vermelho) ─── */
.cadform-close-x {
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
    transition: background 0.2s ease, transform 0.2s ease;
    z-index: 5;
}
.cadform-close-x:hover {
    background: rgba(220, 38, 38, 0.2);
    transform: scale(1.08);
}

/* ─── Título ─── */
.cadform-title {
    text-align: center;
    font-weight: 900;
    font-size: clamp(1.1rem, 5vw, 1.5rem);
    white-space: nowrap;
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
}
.cadform-title .t-novo {
    color: var(--green, #2d5a4e);
}
.cadform-title .t-cadastro {
    color: var(--gold, #d2b48c);
}

/* ─── Seções "Dados do Proprietário" / "Dados do Cavalo" ─── */
.cadform-section-title {
    text-align: center;
    color: var(--green, #2d5a4e);
    font-weight: 900;
    font-size: clamp(0.75rem, 3.2vw, 0.85rem);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 1.25rem 0 0.75rem;
}

/* ─── Campos (padrão .user-box do exemplo, adaptado) ─── */
.cadform-box {
    position: relative;
    margin-bottom: 1.6rem;
}
.cadform-input {
    width: 100%;
    padding: 10px 2px;
    font-size: 15px;
    color: var(--green, #2d5a4e);
    background: #ffffff;
    border: none;
    border-bottom: 1.5px solid var(--green, #2d5a4e);
    outline: none;
    font-weight: 600;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}
.cadform-input::placeholder {
    color: transparent;
}
.cadform-input:focus,
.cadform-input:-webkit-autofill,
.cadform-input:-webkit-autofill:focus {
    /* Antes usava "transparent", que deixava o campo branco ao focar
       (herdando o fundo da página por trás em vez do cinza do formulário).
       Mantém a mesma cor do estado ocioso (#f2f2f2) pra não mudar de
       aparência ao clicar/digitar. */
    background: #f2f2f2 !important;
    -webkit-box-shadow: 0 0 0 1000px #f2f2f2 inset;
    -webkit-text-fill-color: var(--green, #2d5a4e);
    transition: background-color 9999s ease-in-out 0s;
}
.cadform-box label {
    position: absolute;
    top: 10px;
    left: 2px;
    font-size: 15px;
    color: var(--green, #2d5a4e);
    pointer-events: none;
    transition: 0.35s;
    font-weight: 700;
}
/* Variante fundo branco puro (255,255,255) do padrão floating label acima —
   usada em formulários que não devem herdar o cinza #f2f2f2 padrão
   (estoque.html, dossie.html, lancamentos.html, venda-rapida.html). */
.cadform-input.cf-white {
    background: #fff;
}
.cadform-input.cf-white:focus,
.cadform-input.cf-white:-webkit-autofill,
.cadform-input.cf-white:-webkit-autofill:focus {
    background: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
.cadform-input:focus ~ label,
.cadform-input:not(:placeholder-shown) ~ label,
.cadform-box.has-value label {
    top: -12px;
    font-size: 11px;
}

/* ─── Aviso laranja de busca por CPF/CNPJ ─── */
.cadform-orange-msg {
    color: #ea580c;
    font-size: 11px;
    font-weight: 800;
    margin-top: 4px;
    display: none;
}
.cadform-orange-msg.is-visible {
    display: block;
}
.cadform-ver-cadastrados {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: rgba(234, 88, 12, 0.08);
    border: 1px dashed rgba(234, 88, 12, 0.4);
    border-radius: 0.75rem;
    padding: 0.6rem 0.85rem;
    margin: 0.75rem 0 1.25rem;
}
.cadform-ver-cadastrados.is-visible {
    display: flex;
}
.cadform-ver-cadastrados span {
    color: #ea580c;
    font-weight: 800;
    font-size: clamp(0.68rem, 3.4vw, 0.78rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cadform-ver-cadastrados button {
    flex-shrink: 0;
    color: #ea580c;
    border: 1px solid rgba(234, 88, 12, 0.5);
    border-radius: 0.5rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.65rem;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.cadform-cadastrados-list {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
}
.cadform-cadastrados-list.is-visible {
    display: flex;
}

/* Estilo dos <select class="hs-select"> (Tipo de Pessoa/Raça/Sexo) agora
   vive em hs-select.css — componente compartilhado pelo projeto todo,
   ver hs-select.js. Aqui só sobra o espaçamento do wrapper de layout
   (.cadform-select-wrap, sem CSS próprio — só classes Tailwind inline
   no HTML, ex. mb-4/mb-2). */

/* ─── Botão Salvar ───
   Visual (traço de luz girando + barra de progresso + estados
   is-saving/is-saved) agora vive em save-btn-fx.css (classe .hs-save-btn,
   compartilhada com outros botões de salvar do projeto — ver
   ALTERACOES_AJUSTES). O botão tem as duas classes (`hs-save-btn
   cadform-save-btn`) — aqui só o que é específico deste formulário. */
.cadform-save-btn {
    margin-top: 1.5rem;
}

/* ─── Cancelar (mais escuro/visível) e X ─── */
.cadform-cancel-btn {
    width: 100%;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #4b5563; /* gray-600, mais escuro que o gray-400/500 anterior */
    padding: 0.6rem 0;
    margin-top: 0.5rem;
}

/* ─── styles2.css (conteúdo original, sem alteração — hoje só usado por dados-vet.html) ─── */

/* ============================================================ */
/* styles2.css — HorseSmart                               */
/* Consolidado de styles_globais.css                                   */
/* ============================================================ */

/* de styles_globais.css */
#cliente-modal {

                transition: opacity 0.3s ease-in-out;
            }

/* de styles_globais.css */
#loader {

                display: none;
                border-radius: 2rem;
            }

/* de styles_globais.css */
#modal-content {

                transition: transform 0.3s ease-in-out;
            }

/* de styles_globais.css */
#notif-sheet {

                transition:
                    transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
                    opacity 0.25s;
            }

/* de styles_globais.css */
#side-menu {

                transition: transform 0.3s ease-in-out;
            }

/* de styles_globais.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 styles_globais.css */
.active {

                background: linear-gradient(135deg, #2d5a4e 0%, #1f3f35 100%);
                color: #d2b48c;
                border-color: #d2b48c;
                box-shadow: 0 8px 20px rgba(45, 90, 78, 0.2);
            }

/* de styles_globais.css */
.blob {

                position: absolute;
                border-radius: 50%;
                filter: blur(90px);
                opacity: 0.2;
                animation: bpulse 9s ease-in-out infinite;
            }

/* de styles_globais.css */
.btn-bounce {

                transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }

/* de styles_globais.css */
.btn-gold {

                background: linear-gradient(135deg, #d2b48c 0%, #c19a6b 100%);
                color: #1a3020;
                font-family: "Poppins", sans-serif;
                font-weight: 800;
                font-size: 0.78rem;
                letter-spacing: 0.1em;
                text-transform: uppercase;
                border-radius: 13px;
                padding: 15px;
                width: 100%;
                border: none;
                cursor: pointer;
                box-shadow: 0 8px 28px rgba(210, 180, 140, 0.25);
                transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }

/* de styles_globais.css */
.btn-whatsapp {

                background: linear-gradient(135deg, #25d366 0%, #20ba5a 100%);
                color: white;
                box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
            }

/* de styles_globais.css */
.card {
background:var(--surface);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:20px;}

/* de styles_globais.css */
.card-item {

                animation: slideIn 0.3s ease-out;
            }

/* de styles_globais.css */
.card-title {

                font-size: 18px;
                font-weight: 900;
                color: #2d5a4e;
                text-transform: uppercase;
                line-height: 1.2;
                margin-bottom: 4px;
                word-break: break-word;
            }

/* de styles_globais.css */
.chevron {
 transition: transform 0.3s; }

/* de styles_globais.css */
.clear-search {

                color: #2d5a4e;
                cursor: pointer;
                font-size: 14px;
                transition: all 0.2s;
                margin-left: 8px;
                opacity: 0;
                pointer-events: none;
            }

/* de styles_globais.css */
.currency-input {

                text-align: right;
            }

/* de styles_globais.css */
.empty-icon {

                font-size: 64px;
                color: #2d5a4e;
                opacity: 0.3;
                margin-bottom: 16px;
            }

/* de styles_globais.css */
.empty-state {

                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 60px 20px;
                text-align: center;
            }

/* de styles_globais.css */
.fade-in {

                animation: fadeIn 0.3s ease-in;
            }

/* de styles_globais.css */
.field-input {

            width: 100%;
            border-radius: 0.75rem;
            background: rgba(255,255,255,0.6);
            padding: 0.75rem 1rem;
            font-size: 0.875rem;
            color: #1f2937;
            border: 1.5px solid #e5e7eb;
            transition: border-color 0.2s, box-shadow 0.2s;
            outline: none;
        }

/* de styles_globais.css */
.field-label {

            display: block;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #2D5A4E;
            margin-bottom: 0.375rem;
            opacity: 0.8;
        }

/* de styles_globais.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-family: "Inter", sans-serif;
                font-size: 13px;
                font-weight: 900;
            }

/* .filter-btn (de styles_globais.css) removida daqui — OBSERVACOES_RODADA_1.md
   (item "borda dos botões de filtro"): duplicava .filter-btn de base.css
   (border 1.5px, padding 9px 12px) com uma versão mais grossa (border 2px,
   padding 10px 16px, uppercase) que sempre vencia por vir depois no CSS
   consolidado. Nenhuma página que carrega este arquivo depende dessa
   variante — atendimentos.html (única com components.css + .filter-btn
   puro) já usa base.css como fonte de verdade. */

/* de styles_globais.css */
.form-input {

                background: #f8faf9;
                border: 1.5px solid #e2e8e6;
                border-radius: 12px;
                padding: 13px 16px;
                width: 100%;
                font-family: "Poppins", sans-serif;
                font-size: 0.875rem;
                font-weight: 500;
                color: #1a2e28;
                transition: all 0.2s;
                outline: none;
            }

/* de styles_globais.css */
.glass {

                background: rgba(255, 255, 255, 0.04);
                border: 1px solid rgba(255, 255, 255, 0.08);
                backdrop-filter: blur(20px);
            }

/* de styles_globais.css */
.glass-card {

                background: rgba(255, 255, 255, 0.055);
                backdrop-filter: blur(28px);
                -webkit-backdrop-filter: blur(28px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                box-shadow:
                    0 40px 80px rgba(0, 0, 0, 0.5),
                    inset 0 1px 0 rgba(255, 255, 255, 0.07);
            }

/* de styles_globais.css */
.glass-panel {

                background: rgba(255, 255, 255);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                /* Antes usava rgba(45,90,78,.12) — 12% de opacidade deixava a
                   borda praticamente invisível. Esta regra carrega depois de
                   base.css (components.css é o 3º <link>), então era ela
                   quem vencia a cascata em toda página, apagando a borda
                   verde sólida de var(--green) que base.css já define. */
                border: 1px solid var(--green);
                box-shadow: 0 4px 24px rgba(45, 90, 78, 0.07);
            }

/* de styles_globais.css */
.input-field {

                background: rgba(255, 255, 255, 0.9);
                border: 1px solid rgba(45, 90, 78, 0.1);
                transition: all 0.3s ease;
            }

/* de styles_globais.css */
.input-glass {

                background: rgba(240, 245, 243, 0.7);
                border: 2px solid transparent;
                border-radius: 12px;
                padding: 12px 16px;
                width: 100%;
                font-weight: 500;
                transition: all 0.2s;
            }

/* de styles_globais.css */
.insumo-tag {

                display: flex;
                justify-content: space-between;
                align-items: center;
                background: white;
                border: 1px solid #2d5a4e20;
                border-left: 3px solid #2d5a4e;
                border-radius: 10px;
                padding: 8px 12px;
                font-size: 0.85rem;
            }

/* de styles_globais.css */
.label {

                display: block;
                font-size: 0.63rem;
                font-weight: 700;
                color: rgba(255, 255, 255, 0.38);
                text-transform: uppercase;
                letter-spacing: 0.13em;
                margin-bottom: 8px;
            }

/* de styles_globais.css */
.nav-active {

                color: #d2b48c !important;
            }

/* de styles_globais.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 styles_globais.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 styles_globais.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 styles_globais.css */
.quick-add-panel {

                background: linear-gradient(135deg, #2d5a4e08, #d2b48c15);
                border: 1.5px dashed #d2b48c80;
                border-radius: 12px;
                padding: 12px;
                margin-top: 8px;
            }

/* de styles_globais.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 styles_globais.css */
.section-label {

                    font-size: 15px;
                    font-weight: 900;
                    text-transform: uppercase;
                    color: #2D5A4E;
                    letter-spacing: 1px;
                    display: block;
                    margin-bottom: 4px;
                }

/* de styles_globais.css */
.section-title {

                font-weight: 700;
                color: #2d5a4e;
                padding-bottom: 8px;
                border-bottom: 2px solid #d2b48c;
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 11px;
                text-transform: uppercase;
                letter-spacing: 0.1em;
            }

/* de styles_globais.css */
.select-glass {

                background: rgba(240, 245, 243, 0.8);
                border: 2px solid transparent;
                border-radius: 12px;
                padding: 12px 16px;
                width: 100%;
                font-weight: 500;
                transition: all 0.2s;
                appearance: none;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
                background-position: right 0.5rem center;
                background-repeat: no-repeat;
                background-size: 1.5em 1.5em;
            }

/* de styles_globais.css */
.selected-nao {

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

/* de styles_globais.css */
.show {
 display: block; }

/* de styles_globais.css */
.sidebar-link {

                display: flex;
                align-items: center;
                gap: 12px;
                padding: 10px 14px;
                border-radius: 12px;
                font-size: 13px;
                font-weight: 600;
                color: rgba(255, 255, 255, 0.55);
                transition: all 0.2s;
            }

/* de styles_globais.css */
.skeleton {

                background: linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0.3) 0%,
                    rgba(255, 255, 255, 0.6) 50%,
                    rgba(255, 255, 255, 0.3) 100%
                );
                background-size: 200% 100%;
                animation: loading 1.5s infinite;
            }

/* de styles_globais.css */
.spinner {

                width: 48px;
                height: 48px;
                border: 4px solid rgba(45, 90, 78, 0.1);
                border-top-color: #d2b48c;
                border-radius: 50%;
                animation: spin 1s linear infinite;
            }

/* de styles_globais.css */
.status-badge {

                display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 6px 12px;
                border-radius: 8px;
                font-size: 11px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                font-family: "Inter", sans-serif;
            }

/* de styles_globais.css */
.tab-btn {

                padding: 6px 16px;
                border-radius: 8px;
                font-size: 12px;
                font-weight: 700;
                transition: all 0.2s;
                color: rgba(255, 255, 255, 0.4);
            }

/* de styles_globais.css */
.toast {

            position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
            background: #2D5A4E; color: white; padding: 0.6rem 1.4rem;
            border-radius: 9999px; font-size: 0.8rem; font-weight: 600;
            z-index: 200; opacity: 0; transition: opacity 0.3s;
            white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,0.18);
        }

/* de styles_globais.css */
.toggle-btn {

                background-color: transparent;
                color: #2d5a4e;
                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;
            }