/* =============================================================================
   RutaTurismo360 - Global Badges Template Styles
   =============================================================================

   Estilos para TODOS los badges/chips/etiquetas del sistema.
   Modificar aquí afecta a TODOS los módulos que usen badges.

   Prefijo: rt360-badge-*
   Reemplaza: global-badges.css (legacy, variables no-Radzen)
   Última actualización: Marzo 2026
   Versión: 1.0.0

   ÍNDICE:
   -------
   1.  Base (rt360-badge) — badge genérico de estado/etiqueta
   2.  Variantes semánticas de color (--info/success/warning/danger/primary)
   3.  Variantes de estado de negocio (--active/inactive/pending/draft/cancelled)
   4.  Variantes de tamaño (--sm / --lg)
   5.  Variantes de estilo (--outlined / --pill / --filled)
   6.  Badge contador (rt360-badge-counter) — número en círculo
   7.  Badges especiales del sistema (rt360-badge-soon, rt360-badge-new, etc.)
   8.  Dark Mode
   9.  Compatibilidad — clases legacy (.badge, .badge-primary, etc.)
   ============================================================================= */


/* =============================================================================
   1. BASE — rt360-badge
   Badge genérico inline. Aplica a <span>, <RadzenBadge>, <div>.
   Uso: <span class="rt360-badge rt360-badge--success">Activo</span>
   ============================================================================= */

.rt360-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
}


/* =============================================================================
   2. VARIANTES SEMÁNTICAS DE COLOR
   Uso: <span class="rt360-badge rt360-badge--info">Información</span>
   ============================================================================= */

.rt360-badge--primary {
    background-color: rgba(156, 39, 176, 0.12);
    color: var(--rz-primary);
    border-color: transparent;
}

.rt360-badge--info {
    background-color: rgba(33, 150, 243, 0.12);
    color: var(--rz-info);
    border-color: transparent;
}

.rt360-badge--success {
    background-color: rgba(76, 175, 80, 0.12);
    color: var(--rz-success);
    border-color: transparent;
}

.rt360-badge--warning {
    background-color: rgba(255, 152, 0, 0.12);
    color: var(--rz-warning);
    border-color: transparent;
}

.rt360-badge--danger {
    background-color: rgba(244, 67, 54, 0.12);
    color: var(--rz-danger);
    border-color: transparent;
}

.rt360-badge--neutral {
    background-color: var(--rz-base-200);
    color: var(--rz-text-secondary-color);
    border-color: transparent;
}


/* =============================================================================
   3. VARIANTES DE ESTADO DE NEGOCIO
   Semántica del dominio: reservas, suscripciones, usuarios, pagos.
   Uso: <span class="rt360-badge rt360-badge--active">Activo</span>
   ============================================================================= */

/* Activo / confirmado */
.rt360-badge--active {
    background-color: rgba(76, 175, 80, 0.12);
    color: var(--rz-success);
}

/* Inactivo / deshabilitado */
.rt360-badge--inactive {
    background-color: var(--rz-base-200);
    color: var(--rz-text-disabled-color);
}

/* Pendiente de acción */
.rt360-badge--pending {
    background-color: rgba(255, 152, 0, 0.12);
    color: var(--rz-warning);
}

/* Borrador / sin publicar */
.rt360-badge--draft {
    background-color: rgba(96, 125, 139, 0.12);
    color: #607d8b;
}

/* Cancelado / rechazado */
.rt360-badge--cancelled {
    background-color: rgba(244, 67, 54, 0.10);
    color: var(--rz-danger);
}

/* Trial / prueba */
.rt360-badge--trial {
    background-color: rgba(156, 39, 176, 0.12);
    color: var(--rz-primary);
}

/* Publicado / visible */
.rt360-badge--published {
    background-color: rgba(3, 169, 244, 0.12);
    color: #03a9f4;
}

/* Expirado */
.rt360-badge--expired {
    background-color: rgba(121, 85, 72, 0.10);
    color: #795548;
}


/* =============================================================================
   4. VARIANTES DE TAMAÑO
   ============================================================================= */

/**
 * Badge pequeño (para grids y listas densas)
 * Uso: <span class="rt360-badge rt360-badge--sm">S</span>
 */
.rt360-badge--sm {
    padding: 0.1rem 0.4rem;
    font-size: 0.6875rem;
}

/**
 * Badge grande (para tarjetas o estados prominentes)
 * Uso: <span class="rt360-badge rt360-badge--lg">Activo</span>
 */
.rt360-badge--lg {
    padding: 0.35rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
}


/* =============================================================================
   5. VARIANTES DE ESTILO
   ============================================================================= */

/**
 * Badge outlined — solo borde, fondo transparente
 * Uso: <span class="rt360-badge rt360-badge--outlined rt360-badge--success">
 */
.rt360-badge--outlined {
    background-color: transparent !important;
    border-color: currentColor !important;
}

/**
 * Badge pill — radio máximo (ya es default, alias explícito)
 * Uso: <span class="rt360-badge rt360-badge--pill">
 */
.rt360-badge--pill {
    border-radius: 999px;
}

/**
 * Badge filled — fondo sólido con texto blanco
 * Uso: <span class="rt360-badge rt360-badge--filled rt360-badge--success">
 */
.rt360-badge--filled.rt360-badge--primary { background-color: var(--rz-primary) !important; color: white !important; }
.rt360-badge--filled.rt360-badge--info    { background-color: var(--rz-info) !important;    color: white !important; }
.rt360-badge--filled.rt360-badge--success { background-color: var(--rz-success) !important; color: white !important; }
.rt360-badge--filled.rt360-badge--warning { background-color: var(--rz-warning) !important; color: white !important; }
.rt360-badge--filled.rt360-badge--danger  { background-color: var(--rz-danger) !important;  color: white !important; }


/* =============================================================================
   6. BADGE CONTADOR
   Número flotante sobre un ícono (ej: notificaciones no leídas).
   Uso: <span class="rt360-badge-counter">5</span>
   ============================================================================= */

.rt360-badge-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    background-color: var(--rz-danger);
    color: white;
    pointer-events: none;
}

.rt360-badge-counter--primary { background-color: var(--rz-primary); }
.rt360-badge-counter--info    { background-color: var(--rz-info); }
.rt360-badge-counter--success { background-color: var(--rz-success); }
.rt360-badge-counter--warning { background-color: var(--rz-warning); }

/**
 * Dot — solo indicador visual sin número
 * Uso: <span class="rt360-badge-counter rt360-badge-counter--dot">
 */
.rt360-badge-counter--dot {
    min-width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
}


/* =============================================================================
   7. BADGES ESPECIALES DEL SISTEMA
   ============================================================================= */

/**
 * Badge "Próximamente" — funcionalidad aún no disponible
 * Movido desde global-cards-template.css
 * Uso: <RadzenBadge class="rt360-badge-soon" Text="Próximamente" />
 */
.rt360-badge-soon {
    font-size: 0.65rem;
    opacity: 0.85;
}

/**
 * Badge "Nuevo" — feature recién lanzada
 * Uso: <RadzenBadge class="rt360-badge-new" Text="Nuevo" />
 */
.rt360-badge-new {
    background-color: rgba(156, 39, 176, 0.15);
    color: var(--rz-primary);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 4px;
    padding: 0.125rem 0.375rem;
}

/**
 * Badge "Beta"
 * Uso: <span class="rt360-badge-beta">Beta</span>
 */
.rt360-badge-beta {
    background-color: rgba(3, 169, 244, 0.15);
    color: #03a9f4;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 4px;
    padding: 0.125rem 0.375rem;
}

/**
 * Badge de version (ej: v2.1.0)
 * Uso: <span class="rt360-badge-version">v2.1.0</span>
 */
.rt360-badge-version {
    background-color: var(--rz-base-200);
    color: var(--rz-text-secondary-color);
    font-size: 0.6875rem;
    font-family: monospace;
    border-radius: 4px;
    padding: 0.125rem 0.375rem;
    letter-spacing: 0.02em;
}


/* =============================================================================
   8. DARK MODE
   ============================================================================= */

html[data-theme="dark"] .rt360-badge--neutral {
    background-color: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.65);
}

html[data-theme="dark"] .rt360-badge--inactive {
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.40);
}

html[data-theme="dark"] .rt360-badge--draft {
    background-color: rgba(96, 125, 139, 0.18);
    color: #90a4ae;
}

html[data-theme="dark"] .rt360-badge--expired {
    background-color: rgba(121, 85, 72, 0.15);
    color: #a1887f;
}

html[data-theme="dark"] .rt360-badge-version {
    background-color: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.55);
}

html[data-theme="dark"] .rt360-badge-new {
    background-color: rgba(156, 39, 176, 0.20);
}

html[data-theme="dark"] .rt360-badge-beta {
    background-color: rgba(3, 169, 244, 0.18);
}


/* =============================================================================
   9. COMPATIBILIDAD — Clases legacy
   Mantiene funcionando código anterior que usa .badge / .badge-success etc.
   Migradas a usar variables Radzen en lugar de variables custom.
   ============================================================================= */

.rz-badge.badge,
.badge {
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    border: none !important;
    line-height: normal !important;
}

.rz-badge.badge-primary, .badge-primary {
    background-color: rgba(156, 39, 176, 0.12) !important;
    color: var(--rz-primary) !important;
}

.rz-badge.badge-success, .badge-success {
    background-color: rgba(76, 175, 80, 0.12) !important;
    color: var(--rz-success) !important;
}

.rz-badge.badge-warning, .badge-warning {
    background-color: rgba(255, 152, 0, 0.12) !important;
    color: var(--rz-warning) !important;
}

.rz-badge.badge-danger, .badge-danger {
    background-color: rgba(244, 67, 54, 0.12) !important;
    color: var(--rz-danger) !important;
}

.rz-badge.badge-info, .badge-info {
    background-color: rgba(33, 150, 243, 0.12) !important;
    color: var(--rz-info) !important;
}


/* =============================================================================
   FIN DEL ARCHIVO
   ============================================================================= */