/* ===== badges.css ===== */
/* =========================================
   BADGES / STATUS PILLS
========================================= */

.status-pill,
.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:32px;
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.02em;
    line-height:1;
    border:1px solid transparent;
    white-space:nowrap;
    box-shadow:none;
    backdrop-filter:none;
}

/* ---------- DARK MODE ---------- */

.badge-success{
    color:#d9f5e6;
    background:rgba(0, 153, 132, .18);
    border-color:rgba(0, 153, 132, .34);
}

.badge-warning{
    color:#f7e7b2;
    background:rgba(244, 181, 25, .18);
    border-color:rgba(244, 181, 25, .34);
}

.badge-info{
    color:#d7e7ff;
    background:rgba(25, 170, 219, .20);
    border-color:rgba(25, 170, 219, .36);
}

.badge-review{
    color:#dbe4ff;
    background:rgba(235, 195, 102, .18);
    border-color:rgba(235, 195, 102, .34);
}

.badge-danger{
    color:#ffd9d2;
    background:rgba(254, 46, 46, .18);
    border-color:rgba(254, 46, 46, .34);
}

.badge-muted{
    color:#d5dbe7;
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.14);
}

/* ---------- LIGHT MODE ---------- */

body.light .status-pill,
body.light .badge{
    box-shadow:none;
}

body.light .badge-success{
    color:#006b5d;
    background:#dff3e8;
    border-color:#a7d4b8;
}

body.light .badge-warning{
    color:#7a5600;
    background:#f7ebc8;
    border-color:#dbc07a;
}

body.light .badge-info{
    color:#0a4fb3;
    background:#dbeafe;
    border-color:#a9c4ea;
}

body.light .badge-review{
    color:#0a4fb3;
    background:#dfe7f5;
    border-color:#afbdd9;
}

body.light .badge-danger{
    color:#9b1111;
    background:#f7e2dd;
    border-color:#d9b0a6;
}

body.light .badge-muted{
    color:#556070;
    background:#e6ebf1;
    border-color:#c6d0db;
}

/* =========================================
   CONTEXTOS ESPECIALES
   Mantener mismo tono en tablas y modales
========================================= */

.data-table .status-pill,
.data-table .badge,
.modal-card .status-pill,
.modal-card .badge,
.metric-card .status-pill,
.panel .status-pill{
    box-shadow:none;
    filter:none;
}

/* =========================================
   TAMAÑOS OPCIONALES
========================================= */

.badge-sm{
    min-height:26px;
    padding:4px 10px;
    font-size:11px;
}

.badge-lg{
    min-height:36px;
    padding:8px 14px;
    font-size:13px;
}

/* =========================================
   UI BADGES / STATUS ACTUALES
   Reutilizables entre modulos. No definirlos dentro de CSS de modulo.
========================================= */

.ui-badge{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:7px 11px;
    font-size:12px;
    font-weight:900;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.07);
}

.ui-badge.is-blue{color:#d7e7ff;}
.ui-badge.is-green{color:#d9f5e6;}
.ui-badge.is-orange{color:#f7e7b2;}
.ui-badge.is-pink{color:#ffe1ef;}
.ui-badge.is-purple{color:#eadcff;}
.ui-badge.is-gray{color:#d5dbe7;}

.ui-status{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:6px 10px;
    font-size:12px;
    font-weight:900;
}

.ui-status.is-active{
    color:#7cf2b2;
    background:rgba(124,242,178,.1);
}

.ui-status.is-inactive{
    color:#ffcf7a;
    background:rgba(255,207,122,.1);
}

body.light .ui-badge{
    border-color:rgba(13,72,130,.16);
    background:rgba(255,255,255,.72);
}

body.light .ui-status.is-active{
    color:#047857;
    background:rgba(16,185,129,.12);
}

body.light .ui-status.is-inactive{
    color:#92400e;
    background:rgba(245,158,11,.14);
}