/* ===========================
   PUBLIC/ASSETS/CSS/COMPONENTS/PILLS.CSS

   Botões de Ação – Pílulas Modernas
   Cabeçalho: ícone + texto
   Grid: ícone-only circular
   Compatível com <a> e <button>
   Blindado contra CSS global/Bootstrap

   =========================================================
   TOKENS SEMÂNTICOS OFICIAIS (usar via css_class no banco)
   =========================================================

   Token           Objetivo
   ---------------------------------------------------------
   pill-primary    adicionar / novo / incluir   (Azul)
   pill-success    salvar / alterar / confirmar (Verde)
   pill-danger     excluir                      (Vermelho)
   pill-warning    cancelar / atenção           (Laranja)
   pill-dark       voltar / fechar              (Preto)
   pill-secondary  neutro                       (Cinza)
   pill-info       preview / visualizar técnico (Azul Claro)
   pill-info2      preview / visualizar técnico (Azul Claro)
   pill-print      impressão                    (Roxo)

   Observações:
   - O componente aceita SOMENTE os tokens acima.
   - Qualquer outro valor em css_class será ignorado.
   - Se css_class vier vazio/inválido, o fallback é pill-primary.
   =========================== */


/* ===========================
   RESET BASE (a e button)
   =========================== */

a.pill,
button.pill{
    appearance: none;
    -webkit-appearance: none;

    background: none;
    background-color: transparent;
    border: 0;
    padding: 0;
    margin: 0;

    font: inherit;
    color: inherit;
    text-decoration: none;
}


/* ===========================
   BASE COMUM
   =========================== */

.pill,
a.pill,
button.pill{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;

    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.12);

    white-space: nowrap;
    user-select: none;

    line-height: 1;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform .05s ease,
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}

.pill:active,
a.pill:active,
button.pill:active{
    transform: translateY(1px);
}


/* ===========================
   CABEÇALHO (com texto)
   =========================== */

.pill-header,
a.pill-header,
button.pill-header{
    padding: .48rem .85rem;
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

.pill-header:hover,
a.pill-header:hover,
button.pill-header:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(0,0,0,.10);
}

.pill-header .pill-text{
    font-size: .92rem;
    font-weight: 600;
}


/* ===========================
   CABEÇALHO (ícone-only)
   Usar junto com pill-header quando o botão não tiver texto.
   Exemplo: cssClass="pill-primary pill-icon-only"
   =========================== */

.pill-header.pill-icon-only,
a.pill-header.pill-icon-only,
button.pill-header.pill-icon-only{
    width: 34px;
    height: 34px;
    padding: 0;
    gap: 0;
}


/* ===========================
   GRID (ícone-only)
   =========================== */

.pill-grid,
a.pill-grid,
button.pill-grid{
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 999px;
    background: rgba(108,117,125,.06);
    color: #495057;
    border-color: rgba(108,117,125,.35);
    box-shadow: none;
}

.pill-grid:hover,
a.pill-grid:hover,
button.pill-grid:hover{
    background: rgba(108,117,125,.12);
    border-color: rgba(108,117,125,.55);
    color: #343a40;
}


/* ===========================
   VARIANTES SEMÂNTICAS
   Aplicam-se principalmente ao HEADER
   =========================== */

/* PRIMARY -> adicionar / novo / incluir */
.pill-header.pill-primary,
a.pill-header.pill-primary,
button.pill-header.pill-primary{
    background: rgba(13,110,253,.06);
    color: #0d6efd;
    border-color: rgba(13,110,253,.35);
}
.pill-header.pill-primary:hover,
a.pill-header.pill-primary:hover,
button.pill-header.pill-primary:hover{
    background: rgba(13,110,253,.12);
    color: #0a58ca;
    border-color: rgba(13,110,253,.55);
}

/* SUCCESS -> salvar / alterar / confirmar */
.pill-header.pill-success,
a.pill-header.pill-success,
button.pill-header.pill-success{
    background: rgba(25,135,84,.08);
    color: #198754;
    border-color: rgba(25,135,84,.35);
}
.pill-header.pill-success:hover,
a.pill-header.pill-success:hover,
button.pill-header.pill-success:hover{
    background: rgba(25,135,84,.14);
    color: #146c43;
    border-color: rgba(25,135,84,.55);
}

/* DANGER -> excluir */
.pill-header.pill-danger,
a.pill-header.pill-danger,
button.pill-header.pill-danger{
    background: rgba(220,53,69,.08);
    color: #dc3545;
    border-color: rgba(220,53,69,.35);
}
.pill-header.pill-danger:hover,
a.pill-header.pill-danger:hover,
button.pill-header.pill-danger:hover{
    background: rgba(220,53,69,.14);
    color: #b02a37;
    border-color: rgba(220,53,69,.55);
}

/* WARNING -> cancelar / atenção */
.pill-header.pill-warning,
a.pill-header.pill-warning,
button.pill-header.pill-warning{
    background: rgba(255,193,7,.14);
    color: #a96f00;
    border-color: rgba(255,193,7,.45);
}
.pill-header.pill-warning:hover,
a.pill-header.pill-warning:hover,
button.pill-header.pill-warning:hover{
    background: rgba(255,193,7,.22);
    color: #8a5d00;
    border-color: rgba(255,193,7,.60);
}

/* DARK -> */
.pill-header.pill-dark,
a.pill-header.pill-dark,
button.pill-header.pill-dark{
    background: rgba(33,37,41,.06);
    color: #212529;
    border-color: rgba(33,37,41,.28);
}
.pill-header.pill-dark:hover,
a.pill-header.pill-dark:hover,
button.pill-header.pill-dark:hover{
    background: rgba(33,37,41,.12);
    color: #000000;
    border-color: rgba(33,37,41,.45);
}

/* SECONDARY -> neutro */
.pill-header.pill-secondary,
a.pill-header.pill-secondary,
button.pill-header.pill-secondary{
    background: rgba(108,117,125,.08);
    color: #6c757d;
    border-color: rgba(108,117,125,.35);
}
.pill-header.pill-secondary:hover,
a.pill-header.pill-secondary:hover,
button.pill-header.pill-secondary:hover{
    background: rgba(108,117,125,.14);
    color: #565e64;
    border-color: rgba(108,117,125,.55);
}

/* INFO -> preview / visualizar técnico */
.pill-header.pill-info,
a.pill-header.pill-info,
button.pill-header.pill-info{
    background: rgba(13,202,240,.10);
    color: #0aa2c0;
    border-color: rgba(13,202,240,.38);
}
.pill-header.pill-info:hover,
a.pill-header.pill-info:hover,
button.pill-header.pill-info:hover{
    background: rgba(13,202,240,.18);
    color: #087990;
    border-color: rgba(13,202,240,.58);
}

/* INFO2 -> preview / visualizar técnico / Branco */
.pill-header.pill-info2,
a.pill-header.pill-info2,
button.pill-header.pill-info2{
    background: rgba(13,202,240,.10);
    color: white;
    border-color: rgba(13,202,240,.38);
}
.pill-header.pill-info2:hover,
a.pill-header.pill-info2:hover,
button.pill-header.pill-info2:hover{
    background: rgba(13,202,240,.18);
    color: white;
    border-color: rgba(13,202,240,.58);
}

/* PRINT -> impressão */
.pill-header.pill-print,
a.pill-header.pill-print,
button.pill-header.pill-print{
    background: rgba(111,66,193,.08);
    color: #6f42c1;
    border-color: rgba(111,66,193,.35);
}
.pill-header.pill-print:hover,
a.pill-header.pill-print:hover,
button.pill-header.pill-print:hover{
    background: rgba(111,66,193,.15);
    color: #59359a;
    border-color: rgba(111,66,193,.55);
}

/* BTN BARRA DE TITULOS FORMS (fundo branco e letra nesta cor: #3f6f97;  */
.pill-header.pill-btnbarratf,
a.pill-header.pill-btnbarratf,
button.pill-header.pill-btnbarratf{
    background:rgba(255, 255, 255, 0.06);
    color: #0d6efd;
    border-color: rgba(13,110,253,.35);
}
.pill-header.pill-btnbarratf:hover,
a.pill-header.pill-btnbarratf:hover,
button.pill-header.pill-btnbarratf:hover{
    background: rgba(13,110,253,.12);
    color: #0a58ca;
    border-color: rgba(13,110,253,.55);
}

/* ===========================
   ÍCONES
   =========================== */

.pill i,
a.pill i,
button.pill i{
    font-size: 1.05rem;
    line-height: 1;

    width: 1em;
    height: 1em;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===========================
   DESABILITADO
   =========================== */

button.pill:disabled,
.pill:disabled{
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

/* =========================================================
   ANTI-OVERRIDE (BLINDAGEM FINAL)
   ========================================================= */

button.pill{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 999px !important;
    text-decoration: none !important;

    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid rgba(0,0,0,.12) !important;

    padding: .48rem .85rem !important;
    line-height: 1 !important;
    font-weight: 600 !important;

    box-shadow: none !important;
    color: inherit !important;
}

/* HEADER base */
button.pill.pill-header{
    box-shadow: 0 6px 16px rgba(0,0,0,.08) !important;
}
button.pill.pill-header:hover{
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,.10) !important;
}

/* HEADER icon-only */
button.pill.pill-header.pill-icon-only{
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    gap: 0 !important;
}

/* PRIMARY */
button.pill.pill-header.pill-primary{
    background-color: rgba(13,110,253,.06) !important;
    color: #0d6efd !important;
    border-color: rgba(13,110,253,.35) !important;
}
button.pill.pill-header.pill-primary:hover{
    background-color: rgba(13,110,253,.12) !important;
    color: #0a58ca !important;
    border-color: rgba(13,110,253,.55) !important;
}

/* SUCCESS */
button.pill.pill-header.pill-success{
    background-color: rgba(25,135,84,.08) !important;
    color: #198754 !important;
    border-color: rgba(25,135,84,.35) !important;
}
button.pill.pill-header.pill-success:hover{
    background-color: rgba(25,135,84,.14) !important;
    color: #146c43 !important;
    border-color: rgba(25,135,84,.55) !important;
}

/* DANGER */
button.pill.pill-header.pill-danger{
    background-color: rgba(220,53,69,.08) !important;
    color: #dc3545 !important;
    border-color: rgba(220,53,69,.35) !important;
}
button.pill.pill-header.pill-danger:hover{
    background-color: rgba(220,53,69,.14) !important;
    color: #b02a37 !important;
    border-color: rgba(220,53,69,.55) !important;
}

/* WARNING */
button.pill.pill-header.pill-warning{
    background-color: rgba(255,193,7,.14) !important;
    color: #a96f00 !important;
    border-color: rgba(255,193,7,.45) !important;
}
button.pill.pill-header.pill-warning:hover{
    background-color: rgba(255,193,7,.22) !important;
    color: #8a5d00 !important;
    border-color: rgba(255,193,7,.60) !important;
}

/* DARK */
button.pill.pill-header.pill-dark{
    background-color: rgba(33,37,41,.06) !important;
    color: #212529 !important;
    border-color: rgba(33,37,41,.28) !important;
}
button.pill.pill-header.pill-dark:hover{
    background-color: rgba(33,37,41,.12) !important;
    color: #000000 !important;
    border-color: rgba(33,37,41,.45) !important;
}

/* SECONDARY */
button.pill.pill-header.pill-secondary{
    background-color: rgba(108,117,125,.08) !important;
    color: #6c757d !important;
    border-color: rgba(108,117,125,.35) !important;
}
button.pill.pill-header.pill-secondary:hover{
    background-color: rgba(108,117,125,.14) !important;
    color: #565e64 !important;
    border-color: rgba(108,117,125,.55) !important;
}

/* INFO */
button.pill.pill-header.pill-info{
    background-color: rgba(13,202,240,.10) !important;
    color: #0aa2c0 !important;
    border-color: rgba(13,202,240,.38) !important;
}
button.pill.pill-header.pill-info:hover{
    background-color: rgba(13,202,240,.18) !important;
    color: #087990 !important;
    border-color: rgba(13,202,240,.58) !important;
}

/* INFO2 - Fonte na cor Branca*/
button.pill.pill-header.pill-info2{
    background-color: rgba(13,202,240,.10) !important;
    color: white !important;
    border-color: rgba(13,202,240,.38) !important;
}
button.pill.pill-header.pill-info2:hover{
    background-color: rgba(13,202,240,.18) !important;
    color: white !important;
    border-color: rgba(13,202,240,.58) !important;
}

/* PRINT */
button.pill.pill-header.pill-print{
    background-color: rgba(111,66,193,.08) !important;
    color: #6f42c1 !important;
    border-color: rgba(111,66,193,.35) !important;
}
button.pill.pill-header.pill-print:hover{
    background-color: rgba(111,66,193,.15) !important;
    color: #59359a !important;
    border-color: rgba(111,66,193,.55) !important;
}

/* BTN BARRA DE TITULOS FORMS (fundo branco e letra nesta cor: #3f6f97;  */
button.pill.pill-header.pill-btnbarratf{
    background-color: rgba(111,66,193,.08) !important;
    color: #6f42c1 !important;
    border-color: rgba(111,66,193,.35) !important;
}
button.pill.pill-header.pill-btnbarratf:hover{
    background-color: rgba(111,66,193,.15) !important;
    color: #59359a !important;
    border-color: rgba(111,66,193,.55) !important;
}

/* GRID permanece neutro por padrão */
button.pill.pill-grid{
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;

    background-color: rgba(108,117,125,.06) !important;
    color: #495057 !important;
    border-color: rgba(108,117,125,.35) !important;
    box-shadow: none !important;
}

button.pill.pill-grid:hover{
    background-color: rgba(108,117,125,.12) !important;
    border-color: rgba(108,117,125,.55) !important;
    color: #343a40 !important;
}