/*
    /assets/css/site.css
*/
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background:
        radial-gradient(circle at top right, rgba(84, 183, 255, .20), transparent 24%),
        linear-gradient(180deg, #eff7ff 0%, #f7fbff 35%, #eef7ff 100%);
}

.hp-grid-bg {
    background-image:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 24px 24px;
}

.hp-card {
    background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(249,251,255,.96) 100%);
    backdrop-filter: blur(14px);
}

.hp-dark-card {
    background: linear-gradient(180deg, rgba(7, 26, 47, .92) 0%, rgba(8, 40, 72, .96) 100%);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
}
/* ==============================
   STATUS - BASE (reutilizável)
   ============================== */
.hp-status {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px; /* pill */
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    border-width: 1px;
    border-style: solid;
}

/* ==============================
   VERDE (ativo, confirmado, disponível)
   ============================== */
.hp-status-success {
    background-color: #d1fae5; /* emerald-100 */
    color: #047857; /* emerald-700 */
    border-color: #a7f3d0; /* emerald-200 */
}

/* ==============================
   AMARELO (pendente, aguardando)
   ============================== */
.hp-status-warning {
    background-color: #fef3c7; /* amber-100 */
    color: #b45309; /* amber-700 */
    border-color: #fde68a; /* amber-200 */
}

/* ==============================
   VERMELHO (cancelado, expirado, inativo)
   ============================== */
.hp-status-danger {
    background-color: #ffe4e6; /* rose-100 */
    color: #be123c; /* rose-700 */
    border-color: #fecdd3; /* rose-200 */
}

/* ==============================
   PADRÃO (fallback)
   ============================== */
.hp-status-default {
    background-color: #f1f5f9; /* slate-100 */
    color: #334155; /* slate-700 */
    border-color: #e2e8f0; /* slate-200 */
}