/* 
 * ACCESOS PRO V2 - Premium Design System (SaaS / Glassmorphism)
 * Capa de estilos global y reutilizable.
 */

:root {
    /* Paleta de colores base y semánticos */
    --ap-bg: #030712;                          /* Fondo principal ultra oscuro (Slate 950) */
    --ap-bg-surface: rgba(17, 24, 39, 0.65);    /* Cards glass translúcidas (Gray 900 con opacidad) */
    --ap-bg-surface-solid: #0f172a;            /* Cards sólidas para datos densos (Slate 900) */
    
    /* Colores acento y estados */
    --ap-accent: #38bdf8;                      /* Azul tecnológico / Cyan (Sky 400) */
    --ap-accent-glow: rgba(56, 189, 248, 0.25);
    
    --ap-success: #10b981;                     /* Verde éxito / Acceso OK (Emerald 500) */
    --ap-success-glow: rgba(16, 185, 129, 0.2);
    
    --ap-danger: #ef4444;                      /* Rojo error / Acceso denegado (Red 500) */
    --ap-danger-glow: rgba(239, 68, 68, 0.2);
    
    --ap-warning: #f59e0b;                     /* Ámbar aviso / Duplicado o Premios (Amber 500) */
    --ap-warning-glow: rgba(245, 158, 11, 0.2);
    
    /* Tipografía y textos */
    --ap-text-primary: #f8fafc;                /* Slate 50 */
    --ap-text-secondary: #94a3b8;              /* Slate 400 */
    --ap-text-muted: #64748b;                  /* Slate 500 */
    
    /* Bordes y sombras */
    --ap-border: rgba(255, 255, 255, 0.05);    /* Borde ultra sutil para glassmorphism */
    --ap-border-accent: rgba(56, 189, 248, 0.15);
    --ap-radius-lg: 1.5rem;                    /* 24px */
    --ap-radius-md: 1rem;                      /* 16px */
    --ap-radius-sm: 0.75rem;                   /* 12px */
}

/* ==========================================
   1. ESTILOS DE DISEÑO GENERAL (FONDO Y SCROLLBARS)
   ========================================== */
body.ap-theme {
    background-color: #0b1120; /* Fondo ligeramente más claro que permite contrastar el glass */
    color: var(--ap-text-primary);
    background-image: 
        radial-gradient(circle at 15% 15%, rgba(56, 189, 248, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 85% 85%, rgba(139, 92, 246, 0.22) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.4) 0%, #0b1120 100%);
    background-attachment: fixed;
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(3, 7, 18, 0.5);
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    border: 2px solid var(--ap-bg);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ==========================================
   2. CARDS Y CONTENEDORES (GLASS & SOLID)
   ========================================== */
.ap-glass {
    background: rgba(17, 25, 40, 0.5);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.14); /* Borde más brillante y definido */
    border-radius: var(--ap-radius-lg);
    box-shadow: 
        0 20px 50px 0 rgba(0, 0, 0, 0.6),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.15); /* Reflejo superior del cristal */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ap-glass:hover {
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 
        0 24px 60px 0 rgba(0, 0, 0, 0.7), 
        0 0 20px 0 rgba(56, 189, 248, 0.15),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
}

/* Card interactiva/clicable */
.ap-glass-interactive {
    cursor: pointer;
}
.ap-glass-interactive:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(17, 25, 40, 0.55);
    box-shadow: 
        0 20px 50px 0 rgba(0, 0, 0, 0.65), 
        0 0 25px 0 rgba(56, 189, 248, 0.2),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
}

/* Card sólida para tablas o listados de gran volumen de datos */
.ap-card-solid {
    background-color: var(--ap-bg-surface-solid);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--ap-radius-lg);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

/* ==========================================
   3. BOTONES MODERNOS Y ACCIONES
   ========================================== */
.ap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--ap-radius-md);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    cursor: pointer;
    letter-spacing: 0.025em;
    gap: 0.5rem;
}

/* Primario (Cyan/Blue Glow) */
.ap-btn-primary {
    background: linear-gradient(135deg, var(--ap-accent) 0%, #0284c7 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px 0 var(--ap-accent-glow);
}
.ap-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px 0 rgba(56, 189, 248, 0.4);
    filter: brightness(1.05);
}
.ap-btn-primary:active {
    transform: translateY(1px);
}

/* Secundario (Dark Glass) */
.ap-btn-secondary {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--ap-text-primary);
}
.ap-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Éxito (Emerald/Verde) */
.ap-btn-success {
    background: linear-gradient(135deg, var(--ap-success) 0%, #059669 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px 0 var(--ap-success-glow);
}
.ap-btn-success:hover {
    box-shadow: 0 6px 20px 0 rgba(16, 185, 129, 0.35);
    filter: brightness(1.05);
}

/* Peligro/Denegado (Red/Rojo) */
.ap-btn-danger {
    background: linear-gradient(135deg, var(--ap-danger) 0%, #dc2626 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px 0 var(--ap-danger-glow);
}
.ap-btn-danger:hover {
    box-shadow: 0 6px 20px 0 rgba(239, 68, 68, 0.35);
    filter: brightness(1.05);
}

/* ==========================================
   4. FORMULARIOS E INPUTS MODERNOS
   ========================================== */
.ap-input {
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ap-radius-md);
    color: var(--ap-text-primary);
    padding: 0.875rem 1.25rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    outline: none;
    width: 100%;
}

.ap-input::placeholder {
    color: var(--ap-text-muted);
}

.ap-input:focus {
    border-color: var(--ap-ap-accent, #38bdf8);
    box-shadow: 0 0 0 2px var(--ap-accent-glow);
    background-color: rgba(0, 0, 0, 0.5);
}

/* Switch / Toggle tipo iOS */
.ap-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.ap-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.ap-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: .3s;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.ap-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
input:checked + .ap-slider {
    background-color: var(--ap-accent);
}
input:checked + .ap-slider:before {
    transform: translateX(20px);
}

/* ==========================================
   5. TABLAS DE DATOS PREMIUM (CONTRATE Y USABILIDAD)
   ========================================== */
.ap-table-container {
    overflow-x: auto;
    border-radius: var(--ap-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.ap-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.875rem;
}

.ap-table th {
    background-color: rgba(15, 23, 42, 0.85);
    color: var(--ap-text-secondary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 1rem 1.25rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.06);
}

.ap-table td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--ap-text-primary);
    background-color: rgba(15, 23, 42, 0.3);
}

.ap-table tr:last-child td {
    border-bottom: none;
}

.ap-table tr:hover td {
    background-color: rgba(255, 255, 255, 0.02);
}

/* ==========================================
   6. BADGES DE ESTADO (PILLS)
   ========================================== */
.ap-badge {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid transparent;
}

.ap-badge-success {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--ap-success);
    border-color: rgba(16, 185, 129, 0.2);
}

.ap-badge-danger {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--ap-danger);
    border-color: rgba(239, 68, 68, 0.2);
}

.ap-badge-warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--ap-warning);
    border-color: rgba(245, 158, 11, 0.2);
}

.ap-badge-secondary {
    background-color: rgba(148, 163, 184, 0.1);
    color: var(--ap-text-secondary);
    border-color: rgba(148, 163, 184, 0.2);
}

/* ==========================================
   7. MODALES Y BACKDROPS
   ========================================== */
.ap-modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}

.ap-modal-content {
    background-color: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ap-radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 28rem; /* sm */
    overflow: hidden;
    animation: apModalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================
   8. COMPONENTES EXTRA (TEXTO, ICONOS Y EFECTOS)
   ========================================== */
.ap-gradient-text {
    background: linear-gradient(135deg, #ffffff 0%, var(--ap-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ap-glow-text {
    text-shadow: 0 0 10px var(--ap-accent-glow);
}

/* Animaciones y transiciones */
@keyframes apModalSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ap-fade-in {
    animation: apFadeIn 0.4s ease-out forwards;
}

@keyframes apFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   9. REVOLUT UI DESIGN SYSTEM (REVOLUT LOOK & FEEL)
   ========================================== */

/* Fondos y Temas estilo Revolut */
.rev-theme-purple {
    background: linear-gradient(180deg, #2c166d 0%, #130a32 40%, #080417 100%) !important;
    background-attachment: fixed !important;
}

.rev-theme-emerald {
    background: linear-gradient(180deg, #053b30 0%, #021a15 40%, #010c09 100%) !important;
    background-attachment: fixed !important;
}

.rev-theme-cyan {
    background: linear-gradient(180deg, #093c4a 0%, #03151b 40%, #010a0e 100%) !important;
    background-attachment: fixed !important;
}

.rev-theme-dark {
    background: linear-gradient(180deg, #151828 0%, #0b0c16 40%, #05060c 100%) !important;
    background-attachment: fixed !important;
}

/* Cards y Widgets estilo Revolut */
.rev-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.rev-card:hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Botones de Acción Circular (Estilo Revolut: + Añadir, Bizum, Mover, Más) */
.rev-action-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}

.rev-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
}

.rev-action-circle {
    width: 3.5rem; /* 56px */
    height: 3.5rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.rev-action-item:hover .rev-action-circle {
    transform: translateY(-3px) scale(1.05);
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 255, 255, 0.15);
}

.rev-action-item:active .rev-action-circle {
    transform: scale(0.95);
}

.rev-action-label {
    font-size: 0.6875rem; /* 11px */
    font-weight: 800;
    color: #f1f5f9;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    max-width: 4.5rem;
    line-height: 1.15;
}

/* Botón Blanco Primario estilo Revolut (Ej: Completer configuración / Ver opciones) */
.rev-btn-white {
    width: 100%;
    background-color: #ffffff;
    color: #090d16;
    font-weight: 900;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.95rem 1.5rem;
    border-radius: 9999px;
    border: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.rev-btn-white:hover {
    background-color: #f8fafc;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 255, 0.4);
}

.rev-btn-white:active {
    transform: translateY(1px);
}

/* Botón Píldora Vidrio estilo Revolut */
.rev-btn-pill {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.85rem 1.5rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.rev-btn-pill:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

/* Barra Flotante de Navegación Inferior (Floating Dock Revolut) */
.rev-floating-dock {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 90;
    background: rgba(13, 14, 27, 0.88);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
    padding: 0.375rem 0.5rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    max-width: calc(100vw - 2rem);
}

.rev-dock-item {
    padding: 0.5rem 0.875rem;
    border-radius: 9999px;
    color: #94a3b8;
    font-weight: 800;
    font-size: 0.625rem; /* 10px */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    cursor: pointer;
    background: transparent;
    border: none;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.rev-dock-item:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.rev-dock-item-active {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Header Bar Revolut (Avatar + Buscador + Iconos Acción) */
.rev-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 1.5rem;
}

.rev-avatar-circle {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background: rgba(56, 189, 248, 0.2);
    color: #7dd3fc;
    border: 1px solid rgba(56, 189, 248, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.875rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    flex-shrink: 0;
}

.rev-search-capsule {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    color: #e2e8f0;
    font-size: 0.8125rem;
    font-weight: 600;
}

.rev-icon-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.rev-icon-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Indicador de Progreso Circular (Widget 2/6 Termina de configurar tu cuenta) */
.rev-progress-ring {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    border: 2px solid rgba(129, 140, 248, 0.5);
    background: rgba(99, 102, 241, 0.15);
    color: #c7d2fe;
    font-size: 0.6875rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================
   10. REVOLUT FORM & DATA SYSTEM (Para Admin & Tienda)
   ========================================== */

/* Inputs Oscuros Premium */
.rev-input {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    color: #f8fafc;
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.25s ease;
    outline: none;
    width: 100%;
}

.rev-input::placeholder {
    color: #64748b;
    font-weight: 500;
}

.rev-input:focus {
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

/* Tablas Premium */
.rev-table-container {
    width: 100%;
    overflow-x: auto;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.rev-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.8125rem;
}

.rev-table th {
    background: rgba(255, 255, 255, 0.03);
    color: #94a3b8;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.rev-table td {
    padding: 1.25rem;
    color: #f1f5f9;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.rev-table tr:last-child td {
    border-bottom: none;
}

.rev-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* Tab Activo para Menú de Administración */
.rev-tab-active {
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Etiquetas/Badges Translúcidas */
.rev-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.rev-badge-emerald {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.rev-badge-rose {
    background: rgba(244, 63, 94, 0.15);
    color: #fb7185;
    border: 1px solid rgba(244, 63, 94, 0.3);
}

.rev-badge-amber {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.rev-badge-slate {
    background: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.3);
}