/*
 * DEGRADÊ PADRÃO DO SISTEMA (degrade.init.css)
 * Carregado em todas as telas por app/Views/partials/head-css.php.
 *
 * Faixa que começa na cor clara do tema e some até o transparente - o desenho do
 * cabeçalho do modal de anotação de enfermagem e do fecho da venda do HubCloud.
 * As cores vêm das variáveis do tema (--vz-*), então acompanham o modo escuro.
 *
 * USO
 *   <div class="degrade degrade-success">...</div>
 *   <div class="modal-header degrade degrade-danger">...</div>   (sem a linha de baixo)
 *   <div class="card degrade degrade-warning">          (card inteiro: faixa de 140px que passa
 *                                                          pelo cabeçalho e desce no corpo)
 *   <div class="modal-content degrade degrade-success"> (modal inteiro: idem)
 *
 *   Cores:       degrade-primary | degrade-secondary | degrade-success | degrade-info
 *                degrade-warning | degrade-danger    | degrade-light   | degrade-dark
 *                degrade-branco (branco puro; véu claro no modo escuro)
 *   Direção:     (padrão: de cima para baixo) degrade-horizontal | degrade-inverso | degrade-diagonal
 *   Intensidade: degrade-forte (começa na cor cheia translúcida, mais marcado)
 *
 * ALTURA
 *   Padrão em .card e .modal-content: faixa de 140px a partir do topo. Nos demais
 *   elementos (cabeçalho, corpo, div): a altura toda do bloco.
 *   degrade-alto          a cor fica cheia em 30% da faixa antes de começar a sumir
 *   degrade-altura-sm     faixa de 80px a partir do topo (o resto do bloco fica sem degradê)
 *   degrade-altura-md     faixa de 140px (o padrão dos cards e modais)
 *   degrade-altura-lg     faixa de 220px
 *   degrade-altura-total  a altura toda do bloco (também em card/modal)
 *   Sob medida:           style="--degrade-altura: 180px"  /  style="--degrade-cheio: 45%"
 *
 * SELO (círculo com ícone na cor cheia e halo)
 *   Dentro de um bloco .degrade-{cor} ele pega a cor do bloco:
 *     <div class="degrade degrade-success"><div class="degrade-selo"><i class="ri-check-line"></i></div></div>
 *   Sozinho, com a própria cor:
 *     <div class="degrade-selo degrade-warning"><i class="ri-alarm-warning-line"></i></div>
 *   Tamanhos: degrade-selo-sm (36px) | degrade-selo (48px) | degrade-selo-lg (76px)
 *
 * Trocar a cor pelo JavaScript: Degrade.cor(elementoOuId, 'danger') - degrade.init.js.
 */

.degrade {
    --degrade-cor: var(--vz-primary-bg-subtle);
    --degrade-solida: var(--vz-primary);
    --degrade-rgb: var(--vz-primary-rgb);
    --degrade-direcao: 180deg;
    --degrade-cheio: 0%;
    --degrade-altura: 100%;
    background-image: linear-gradient(var(--degrade-direcao), var(--degrade-cor) 0%, var(--degrade-cor) var(--degrade-cheio), transparent 100%);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% var(--degrade-altura);
}

/* ------------------------------------------------------------------ cores */

.degrade-primary   { --degrade-cor: var(--vz-primary-bg-subtle);   --degrade-solida: var(--vz-primary);   --degrade-rgb: var(--vz-primary-rgb); }
.degrade-secondary { --degrade-cor: var(--vz-secondary-bg-subtle); --degrade-solida: var(--vz-secondary); --degrade-rgb: var(--vz-secondary-rgb); }
.degrade-success   { --degrade-cor: var(--vz-success-bg-subtle);   --degrade-solida: var(--vz-success);   --degrade-rgb: var(--vz-success-rgb); }
.degrade-info      { --degrade-cor: var(--vz-info-bg-subtle);      --degrade-solida: var(--vz-info);      --degrade-rgb: var(--vz-info-rgb); }
.degrade-warning   { --degrade-cor: var(--vz-warning-bg-subtle);   --degrade-solida: var(--vz-warning);   --degrade-rgb: var(--vz-warning-rgb); }
.degrade-danger    { --degrade-cor: var(--vz-danger-bg-subtle);    --degrade-solida: var(--vz-danger);    --degrade-rgb: var(--vz-danger-rgb); }
.degrade-light     { --degrade-cor: var(--vz-light-bg-subtle);     --degrade-solida: var(--vz-light);     --degrade-rgb: var(--vz-light-rgb); }
.degrade-dark      { --degrade-cor: var(--vz-dark-bg-subtle);      --degrade-solida: var(--vz-dark);      --degrade-rgb: var(--vz-dark-rgb); }

/* Branco (03/10/2026, abas do prontuário): branco puro que some no transparente; no modo escuro, um véu claro discreto. */
.degrade-branco    { --degrade-cor: #fff; --degrade-solida: #fff; --degrade-rgb: 255, 255, 255; }
[data-bs-theme="dark"] .degrade-branco { --degrade-cor: rgba(255, 255, 255, .07); }

/* ------------------------------------------------------------------ direção e intensidade */

.degrade-horizontal { --degrade-direcao: 90deg; }
.degrade-inverso    { --degrade-direcao: 0deg; background-position: left bottom; }
.degrade-diagonal   { --degrade-direcao: 135deg; }

.degrade.degrade-forte {
    background-image: linear-gradient(var(--degrade-direcao), rgba(var(--degrade-rgb), .28) 0%, rgba(var(--degrade-rgb), .28) var(--degrade-cheio), transparent 100%);
}

/* ------------------------------------------------------------------ altura */

/* Cards e modais: faixa padrão de 140px a partir do topo (passa pelo cabeçalho e desce no corpo). */
.card.degrade,
.modal-content.degrade {
    --degrade-altura: 140px;
}

/* Modificadores depois do padrão (mesma especificidade): valem por cima dele. */
.degrade.degrade-alto         { --degrade-cheio: 30%; }
.degrade.degrade-altura-sm    { --degrade-altura: 80px; }
.degrade.degrade-altura-md    { --degrade-altura: 140px; }
.degrade.degrade-altura-lg    { --degrade-altura: 220px; }
.degrade.degrade-altura-total { --degrade-altura: 100%; }

/* ------------------------------------------------------------------ onde é aplicado */

/* Cabeçalho de modal/card: sem a linha de baixo, o degradê continua no corpo. */
.modal-header.degrade,
.card-header.degrade {
    border-bottom: 0;
}

/* Card inteiro: a faixa fica por cima do fundo do card; cabeçalho e rodapé deixam ela aparecer. */
.card.degrade {
    background-color: var(--vz-card-bg);
}

.card.degrade > .card-header,
.card.degrade > .card-footer {
    background-color: transparent;
}

.card.degrade > .card-header {
    border-bottom: 0;
}

/* Abas dentro do card com degradê: a aba ativa do tema tem fundo branco e cortaria a faixa
   (continua marcada pela cor do texto e pelo sublinhado). */
.card.degrade .nav-tabs .nav-link.active,
.card.degrade .nav-tabs .nav-item.show .nav-link,
.card.degrade .nav-tabs-custom .nav-link.active {
    background-color: transparent;
}

/* Modal inteiro: cabeçalho e rodapé deixam a faixa aparecer; sem a linha abaixo do título. */
.modal-content.degrade > .modal-header,
.modal-content.degrade > .modal-footer {
    background-color: transparent;
}

.modal-content.degrade > .modal-header {
    border-bottom: 0;
}

/*
 * Painel lateral (offcanvas) inteiro - os widgets do topo (02/10/2026): faixa de
 * 220px a partir do topo, por cima do fundo do painel; passa pelo cabeçalho e
 * desce no corpo. <div class="offcanvas offcanvas-end degrade degrade-primary degrade-forte">
 */
.offcanvas.degrade {
    --degrade-altura: 220px;
    background-color: var(--vz-offcanvas-bg);
}

.offcanvas.degrade .offcanvas-header {
    background-color: transparent;
}

/* ------------------------------------------------------------------ selo */

.degrade-selo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--degrade-solida, var(--vz-primary));
    color: #fff;
    font-size: 24px;
    line-height: 1;
    box-shadow: 0 0 0 6px rgba(var(--degrade-rgb, var(--vz-primary-rgb)), .15);
}

.degrade-selo-sm {
    width: 36px;
    height: 36px;
    font-size: 18px;
    box-shadow: 0 0 0 4px rgba(var(--degrade-rgb, var(--vz-primary-rgb)), .15);
}

.degrade-selo-lg {
    width: 76px;
    height: 76px;
    font-size: 38px;
    box-shadow: 0 0 0 8px rgba(var(--degrade-rgb, var(--vz-primary-rgb)), .15);
}

/* Cor clara: ícone escuro para continuar legível. */
.degrade-light .degrade-selo,
.degrade-selo.degrade-light {
    color: var(--vz-dark);
}